/*!
Theme Name: horizon
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: horizon
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

horizon is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
  font-family: "Termina"; 
  src: url("assets/font/termina/Termina-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;

}

@font-face {
  font-family: "Termina";
  src:  url("assets/font/Termina-Regular.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal; 

}
@font-face {
  font-family: "Termina";
  src: url("assets/font/termina/Termina-Medium.woff2") format("woff2"); 
  font-weight: 500;
  font-style: normal; 

}
 
 
/* PALETTE - FONT - COLOR */
:root {
  --blu-scuro: #2e62ab;
  --blu-medio: #2580b1;
  --blu-chiaro: #249aad;
  --verde-acqua: #80c080;
  --verde-limone: #b0cd54;
  --giallo-vivo: #d8d900;
}

body {
  font-family: "Termina", serif;
  margin: 0;
  color: var(--blu-scuro);
  font-weight: 500;
  background-color: #2e62ab;
  overflow-x: hidden;
}

a {
  color: var(--verde-acqua);
}

h5 {
  font-size: 15px;
}

/* GENERAL */
.flexMeta {
  display: flex;
  flex-direction: row;
}
.flexMeta .box {
  width: 50%;
}
.container {
  width: calc(100% - 160px);
  margin: auto;
}
hr {
  margin: 0;
  border: 1px solid #d8d900;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-top: -10px;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-lock {
  display: block!important;
}
.wpcf7-not-valid-tip {
  color: #b0cd54;
  font-size: 1em;
  font-weight: 500;
  display: block;
}
#contatti .location {
  padding-bottom: 160px;
}
#contatti hr {
  margin: 0;
  border: 0;
  border-top: 1px solid #ffffff;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-top: -10px;
  margin: 150px auto !important;
}
.grecaptcha-badge { 
  transform: scale(0.55); /* per ridurlo leggermente */
}
/* Stile base del pulsante */
.scroll-to-top {
  position: fixed;
  bottom: 25px; /* Distanza dal basso */
  right: 25px; /* Distanza da destra */
  background-color: rgb(46, 98, 171); /* Colore di sfondo */
  color: white; /* Colore dell'icona */
  border: none;
  border-radius: 50%; /* Rende il pulsante rotondo */
  width: 50px; /* Larghezza */
  height: 50px; /* Altezza */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0; /* Inizialmente invisibile */
  visibility: hidden; /* Nascosto per non interferire con gli eventi del mouse */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transizione fluida */
  z-index: 1000; /* Assicurati che sia sopra gli altri elementi */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombra leggera */
}

/* Stile per l'icona SVG */
.scroll-to-top svg {
  width: 24px;
  height: 24px;
  display: block; /* Rimuove lo spazio extra sotto l'SVG */
}

/* Stile al passaggio del mouse */
.scroll-to-top:hover {
  transform: translateY(-3px); /* Effetto leggero al passaggio del mouse */
  background-color: rgb(35, 75, 130); /* Cambia colore al hover */
}

/* Classe per mostrare il pulsante */
.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}
/* HEADER */

header {
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 40px 0;
  border-bottom: 1px solid transparent;
}

header .logo img {
  width: 325px;
  height: auto;
}
header .primary {
  justify-content: space-between;
  display: flex;
  align-items: center;
  flex-direction: row;
}
header .dx {
  display: flex;
  align-items: center;
  gap: 15vw;
}

/* MENU */
.hamburger {
  position: relative;
  width: 45px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 2;
}

.line {
  height: 1px;
  width: 100%;
  background-color: #fff;
  transition: all 0.3s ease;
}
/* Stile delle linee dell'hamburger quando il menu è aperto */
.has-nav-open .line {
  background-color: #2e62ab; /* Nero quando il menu è aperto */
}
/* Stile del testo della lingua quando il menu è aperto */
.has-nav-open ul#menu-lingua li a {
  color: #2e62ab; /* Nero quando il menu è aperto */
  z-index: 999;
  transition: color 0.3s ease;
}
.has-nav-open .lingua {
  z-index: 999;
}
.logo {
  z-index: 999;
}
/* Se hai due immagini diverse per il logo (logo-bianco.png e logo-nero.png) */
.logo a img {
  content: url("https://www.horizonfirm.com/wp-content/uploads/2025/04/logo-w.webp"); /* Percorso del logo bianco di default */
  height: auto; /* Mantieni le proporzioni */

  /* Potresti aver bisogno di impostare una larghezza o altezza specifica qui */
}

.has-nav-open .logo a img {
  content: url("https://www.horizonfirm.com/wp-content/uploads/2025/04/logo-header-s.webp"); /* Percorso del logo nero quando il menu è aperto */
}
/* Menu */
.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80vh;
  background-color: #2580b1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%); /* Il menu parte sopra, nascosto */
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); /* Animazione fluida */
}

/* Pseudo-elemento per l'effetto di espansione verticale */
.nav-menu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: #fff;
  transform-origin: top center;
  transform: scaleY(0); /* Partiamo con l'elemento nascosto */
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); /* Animazione fluida */
  z-index: -1; /* Assicurati che il pseudo-elemento sia dietro il menu */
}

/* Quando il menu è aperto */
.has-nav-open .nav-menu {
  transform: translateY(0); /* Il menu si sposta verso il basso */
}

.has-nav-open .nav-menu:before {
  transform: scaleY(1); /* L'elemento si espande verticalmente dal top */
}

/* Menu links */
.nav-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
}

.nav-menu a {
  color: #2e62ab; /* Colore iniziale */
  text-decoration: none;
  line-height: 45px;
  font-weight: 500;
  font-size: 45px;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.3s ease; /* Transizione su opacità */
  opacity: 0; /* Impostiamo come nascosto inizialmente */
}

.nav-menu ul.submenu {
 max-height: 0;            /* altezza 0 = nascosto */
  overflow: hidden;         /* nasconde il contenuto fuori */
  transition: max-height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  list-style: none;
  padding-left: 0;
  background-color: #fff;
  position: relative;
      gap: 0;
      text-align:center;

}
.has-submenu.open > a.submenu-toggle {
  color: #80c080; /* il colore che preferisci */
  /* puoi aggiungere anche font-weight, background, ecc. */
}

.has-submenu.open .submenu {
   max-height: 600px;       /* abbastanza alto da contenere il submenu */
  opacity: 1;
  margin: auto;
  padding: 10px 0 10px 0;
}


.submenu li a {
    display: block;
    padding: 5px 10px;
    color: #2580b1;
    text-decoration: none;
    font-size: 35px;
     text-align:center;
    line-height: 40px;
}

.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 8em;
  line-height: 1;
  color: #9e9ba4;
  display: inline-block;
}
.link--kukuri {
  text-transform: uppercase;
  font-weight: 900;
  overflow: hidden;
  line-height: 0.75;
  color: #2580b1;
}
.link--kukuri:hover {
  color: #2580b1;
}
.link--kukuri::after {
  content: "";
  position: absolute;
  height: 6px;
  width: 100%;
  top: 50%;
  margin-top: -8px;
  right: 0;
  background: #d8d900;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.link--kukuri:hover::after {
  transform: translate3d(100%, 0, 0);
}
.link--kukuri::before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #80c080;
  white-space: nowrap;
  width: 0%;
  transition: width 0.4s 0.3s;
}
.link--kukuri:hover::before {
  width: 100%;
}

/* Menu aperto: i link diventano visibili */
.has-nav-open .nav-menu a {
  opacity: 1; /* Rendi visibili i link */
}

/* Aggiungi l'animazione delle linee dell'hamburger */
.hamburger.active .line1 {
  transform: rotate(45deg);
  position: relative;
  top: 8px;
}

.hamburger.active .line2 {
  opacity: 0;
}

.hamburger.active .line3 {
  transform: rotate(-45deg);
  position: relative;
  top: -11px;
}

ul#menu-lingua {
  list-style: none;
  display: flex;
  gap: 22px;
}
ul#menu-lingua li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  transform: translateY(100%);
 pointer-events: none; /* se vuoi che non blocchi i click */
  will-change: transform;
}

/* SWIPER SLIDER */
.swiper {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-content {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  width: 90%;
  align-items: flex-start;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: #ffeb3b;
}

.slide-content h3,
.slide-content p {
  flex: 1; /* 3 colonne */
  margin: 0;
}
.contieniBarra {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 30%;
}
#home #progetti h3 {
  line-height: 34px!important;
}
.barra {
  transform: skewX(-16deg);
  top: 0;
  left: -33px;
  right: 0;
  margin: auto;
  width: 55px;
  height: 125px;
  position: relative;
}
.barra span {
  transform-origin: 0 0;
  transform: translateY(-10px) scaleY(0) translateZ(0);
  transform: translateY(0) scaleY(1) translateZ(0);
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #d8d900;
  width: 100%;
}

.barraBianca {
  transform: skewX(-16deg);
  top: 13px;
  left: 0;
  right: 0;
  margin: 0;
  width: 31px !important;
  height: 60px;
  position: relative;
  padding: 0 !important;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
    height 0.45s ease;
}

.barraBianca span {
  transform-origin: 0 0;
  transform: scaleY(0); /* Inizialmente nascosta */
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff;
  width: 100%;
}
.svg-wrapper path {
  opacity: 0;
  transform: translateY(30px);
}
.barraBianca.active span {
  transform: scaleY(
    1
  ); /* Diventa visibile quando la classe "active" è aggiunta */
}
.barraBianca.gialla {
  width: 80px !important;
  height: 80px !important;
}
.barraBianca.gialla span {
  background-color: #d8d900;
}
.contieniBarraBianca.grande {
  width: auto !important;
  gap: 40px;
  align-items: flex-start;
  height: auto;
  margin-left: 80px;
  z-index: 3;
}
.barraBianca.grande {
  transform: skewX(-16deg);
  top: 19px;
  left: 0;
  right: 0;
  margin: 0;
  width: 6.5vw !important;
  height: 24vh;
  position: relative;
  padding: 0 !important;
  z-index: 9;
}
#novideo .barraBianca.grande {
  transform: skewX(-16deg);
  top: 6px;
  left: 0;
  right: 0;
  margin: 0;
  width: 4.5vw !important;
  height: 20vh;
  position: relative;
  padding: 0 !important;
  z-index: 9;
}
#about h2 {
  color: #d8d900;
  font-size: 2.8em;
  font-weight: 500;
  letter-spacing: -1px;
  padding-top: 0;
  width: 90%;
  padding-top: 80px;
}
.contieniBarraBianca.piccola {
  width: auto !important;
  gap: 10px;
  align-items: flex-start;
  height: auto;
}
.barraBianca.piccola {
  transform: skewX(-16deg);
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 13px !important;
  height: 24px;
  position: relative;
  padding: 0 !important;
}
.piccola p {
  margin-block-start: 0;
  margin-block-end: 0;
}
.contieniBarraBianca {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 28%;
  padding: 0 !important;
  width: auto !important;
  gap: 20px;
}
.gradiente {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 38vh;
  padding: 40px 0;
  background: linear-gradient(
    to bottom,
    rgba(46, 98, 171, 1) 0%,
    rgba(46, 98, 171, 0) 100%
  );
}
.parallax-box {
  position: relative;
  height: 100%; /* oppure height: 50vh; */
  overflow: hidden; /* 🔥 blocca l'immagine dentro al contenitore */
}

.parallax-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 102%; /* 👈 estende l'immagine oltre il div per effetto fluido */
}

.parallax-img {
  width: 100%;
  height: 110%;
  object-fit: cover; /* 🔥 fa riempire il contenitore */
  will-change: transform;
}

.parallax-element {
  will-change: transform;
}
p {
  font-size: 18px;
  font-weight: 500;
}
#novideo h2 {
  font-size: 11em;
  font-size: 5vw;
  color: #fff;
  top: 0;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.9em;
  z-index: 2;
  width: 60%;
  text-align: left;
  margin-left: 0;
  padding-top: 0;
}

/* HOME */
#home #video,
#novideo {
  width: 100%;
  height: 100vh;
  background-color: #2e62ab;
  position: relative;
  display: flex;
  align-items: center;
}
#home #video video {
  position: absolute;
  height: 100vh;
  z-index: 1;
}
.video-fullscreen {
  position: fixed; /* resta fisso sullo sfondo */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* riempie tutto senza distorcere */
  z-index: -1; /* va dietro eventuali altri elementi */
}
#home .elementi {
  background-color: #00000033;
  background-image: url(https://www.horizonfirm.com/wp-content/uploads/2025/04/elementi.svg);
  background-size: 50vw;
  position: absolute;
  height: 100vh;
  width: 100%;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: right 0;
}
#privacy #novideo {
  width: 100%;
  height: auto;
  min-height: 100vh;
  background-color: #2e62ab;
  position: relative;
  display: flex;
  align-items: center;
}
#contatti .elementi {
  background-size: 83vw;
}
#home #numeri .altriElementi {
  /* background: url(https://www.horizonfirm.com/wp-content/uploads/2025/04/elemento-grafico.svg); */
  background-size: 75%;
  position: absolute;
  height: 150%;
  width: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: left 0;
}

#home #video h2 {
  font-size: 11em;
  font-size: 9vw;
  color: #fff;
  top: 0;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.9em;
  z-index: 2;
}
#home #video .tit,
.tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 35px;
  z-index: 99;
  width: calc(100% - 200px);
  color: #fff;
  font-weight: 500;
  font-size: 23px;
  left: 100px;
  right: 100px;
  z-index: 3;
}
#home #about {
  background-color: #2e62ab;
  color: #fff;
}
#home #about h1 {
  color: #d8d900;
  font-size: 5em;
  line-height: 1em;
  font-weight: 500;
  letter-spacing: -2px;
  margin-top: 0;
}
#home #about h2 {
  color: #fff;
  font-size: 2.6em;
  font-weight: 500;
  letter-spacing: -1px;
  padding-top: 150px;
  width: 75%;
}
#home #about .chi div:nth-child(1) {
  align-self: flex-start;
  display: flex;
}
#home #about .chi div:nth-child(2) {
  align-self: flex-end;
  display: flex;
  padding-left: 35px;
}
#home #about .chi.flexMeta.container {
  height: auto;
  padding: 80px 0;
}

#home #soluzioni {
  background: #2e62ab;
  color: #fff;
}
#home #soluzioni .flexMeta {
  height: 600px;
  overflow: hidden;
}
#home #soluzioni .flexMeta .box {
  padding: 80px;
}
#home #soluzioni h2 {
  font-size: 3.2em;
  font-weight: 500;
  width: 70%;
  margin-top: 0;
  margin-bottom: 10px;
}
#home #soluzioni p {
  font-size: 22px;
  font-weight: 500;
  padding-right: 4vw;
}
#home #soluzioni .foto {
  background-color: #fff;
}
#home #numeri {
  padding-bottom: 0;
}
#home #numeri .flexMeta {
  padding: 40px 0 0 0;
}
#home #numeri .flexMeta.destra p {
  float: left;
}
#home #numeri .flexMeta.destra h3 {
  margin-bottom: 0;
}
#home #numeri .flexMeta h3.bigger {
  font-size: 5em;
}
#home #numeri .flexMeta.sinistra h3 {
  text-align: right;
  float: right;
  margin-bottom: 0;
  font-size: 5em;
}
#home #numeri .flexMeta.sinistra h3 span {
  font-size: 2em;
}
#home #numeri h3 {
  color: #d8d900;
  font-size: 3em;
  font-weight: 500;
  letter-spacing: -1px;
  width: 75%;
}
#home #numeri h2 {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: -40px;
  gap: 25px;
}
#home #numeri h2.sessanta {
  justify-content: flex-start;
}
.limit-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Numero di righe da mostrare */
  -webkit-box-orient: vertical; 
  text-overflow: ellipsis;
}
.limit-4-lines {
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Numero di righe da mostrare */
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
}

#home #numeri h2 span {
  text-align: right;
  color: #d8d900;
  font-size: 8em;
  font-weight: 500;
}
#home #numeri h2 span.num {
  letter-spacing: -18px;
}
#home #numeri h2 .dett {
  display: flex;
  flex-direction: column;
  color: #fff;
  width: auto;
  font-size: 7px;
  letter-spacing: 0;
  text-align: left;
}
#home #numeri h2 .dett span.piu {
  text-align: left;
  font-weight: bold;
  font-size: 148px;
  line-height: 120px;
}
#home #numeri p {
  text-align: left;
  font-size: 22px;
  font-weight: 500;
  padding-right: 0;
  color: #fff;
  width: 30%;
  float: right;
  font-weight: 500;
}
#home #progetti {
  background-color: #2580b1;
  padding: 45px 0;
}

#home #progetti h1 {
  color: #d8d900;
  font-size: 3.8em;
  font-weight: 500;
  letter-spacing: -1px;
}
#home #progetti h3 {
  color: #d8d900;
font-size: 3.4em;
    line-height: 50px;
  letter-spacing: -1px;
}
#home #progetti p {
  text-align: left;
  font-size: 22px;
  font-weight: 500;
  padding-right: 0;
  color: #fff; 
  font-weight: 500;
}
#home #progetti ul {
  list-style: none;
  color: #fff;
  font-weight: 500;
  font-size: 21px;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  line-height: 31px;
}
/* SERVIZI */
.testiServizi  {
  color: #fff;
}
.testiServiziMob {
color:#fff;
}
.testiServizi > div {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vh 0;
    opacity: 0.2;
  transition: opacity 0.5s ease;
}
.testiServizi > div.active {
  opacity: 1;
}

.testiServizi ul {
    font-size: 20px;
    width: 90%;
    line-height: 27px;
      color: #fff;
}
.testiServizi ul li {
    margin-bottom: 11px;
}
.testiServizi div {
    padding: 0;
    border-bottom: 0;
}
/* SOLUZIONI */
#portfolio #contatti .elementi {
    background-size: 72vw;
        height: 160vh;
    width: 100%;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: right 284px;
} 
.testiServizi {
    color: #fff;
    font-size: 20px;
    width: 90%;
    padding-left: 4vw;
}
#soluzioniPage .split-section {
  display: flex;
  position: relative;
  background: #2e62ab;
  min-height: 300vh; /* Per garantire abbastanza scroll */
}

#soluzioniPage .split-text {
  width: 50%;
}
.icona {
  position: fixed;
  z-index: 99999;
  height: 85vh;
  top: 0;
  bottom: 0;
  left: -4px;
  right: 0;
  margin: auto;
  z-index: 2;
  position: fixed;
  transform: rotate(0deg);
  opacity: 0.4;
  transition: opacity 0.2s ease-in-out;
}
#soluzioniPage .panel {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  padding: 8rem;
  box-sizing: border-box;
  flex-direction: column;
  z-index: 99;
  position: relative;
}
#soluzioniPage .piuGrande {
  font-size: 21px;
  font-weight: 500;
}
#soluzioniPage .image-panel {
  width: 50%;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
#soluzioniPage h3 {
  font-size: 51px;
  line-height: 1em;
  width: 100%;
  color: #fff;
  font-weight: 500;
  width: 80%;
  text-transform: uppercase;
  margin-top: 0;

  margin-bottom: 0;
}
#soluzioniPage p {
  color: #fff;
  font-size: 21px;
  font-weight: 500;
  line-height: 27px;
  width: 93%;
}
.caratt ul {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  padding-inline-start: 0;
}
.caratt li {
  color: #fff;
  font-size: 19px;
  width: 75%;
  font-weight: 500;
  margin-bottom: 15px;
}
.panel .barraBianca span {
  top: -6px;
}
.fff {
  filter: invert(100%) sepia(100%) saturate(0%) brightness(1000%) contrast(1000%);

}
.boxPartner {
      display: grid;
    justify-items: center;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
      place-items: center;
    gap: 60px;
    padding-bottom: 100px;
}
.boxPartner img {
  width: 175px;
}
#soluzioniPage .image-panel .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 105%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(0%);
}

.graphic-svg {
  width: 80vw;
  max-width: 80vh;
  height: auto;
  display: block;
  margin: auto;
}

circle.dash {
  stroke-width: 2px;
  transform: translateX(10px);
}
.ciclo {
  height: auto;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 160vh;
  margin-bottom: 160px;
  margin-top: -180px;
}
.btnB {
  background: #249aad;
  border-radius: 20px;
  padding: 30px 60px;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: transparent;
  color: #ffffff;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
}
.process-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
}

.process-point {
  fill: #ffeb3b;
  stroke: none;
  stroke-width: 4;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.process-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: bold;
  font-size: 2.8em;
  line-height: 1.2em;
  color: #ffffff;
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
  font-weight: 500;
  letter-spacing: 0;
}

.process-text img {
width: 80%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: opacity 0.3s ease;
}


.point-info {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.2em;
  color: #fff;
  background-color: #80c080;
  padding: 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  border-radius: 30px; 
  padding: 13px 40px;
}
.btn-scroll  {
   pointer-events: auto;
}

/* ABOUT */
#about .elementi {
  background: #00000033
    url(https://www.horizonfirm.com/wp-content/uploads/2025/04/elementi.svg);
  background-size: 50vw;
  position: absolute;
  height: 100vh;
  width: 100%;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: right 0;
}
#about #team h4 {
  color: #d8d900;
  font-size: 3em;
  font-weight: 500;
  letter-spacing: -1px;
  padding-top: 0;
  width: 100%;
  text-align: center;
  padding: 40px 0;
  text-transform: uppercase;
  color: #fff;
}


.timeline-navigation-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-direction: column;
    position: absolute;
    left: 60px;
    z-index: 99999;
}
.timeline-navigation-buttons .nav-arrow {
    background-color: transparent;
    color: white;
    border: none;
    padding: 8px 15px 12px 15px;
    font-size: 3em;
    cursor: pointer;
    border-radius: 10px;
    margin: 0 10px;
    transition: background-color 0.3s ease;
    transform: rotate(90deg);
    border: 0;
    width: auto;
    height: auto;
    font-weight: 500;
}

.mySwiperPartner img {
  width: 175px;
}
.timeline {
  display: flex;
  position: relative;
}

.timeline-wrapper {
  height: auto; /* Altezza totale per lo scroll */
  position: relative;
}

.timeline {
  display: flex;
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  flex-direction: row;
  align-items: center;
}
.timeline-entry h3 {
  text-transform: uppercase;
  font-size: 3.8em;
  font-weight: 500;
  line-height: 1em;
  margin-top: 0;
  width: 90%;
  margin-bottom: 20px;
}
#about .altriElementi {
  position: absolute;
  height: 120vh;
  width: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: left 0;
}



.timeline-years {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.big-year {
  font-size: 10vw !important;
  font-weight: 500 !important;
  margin: 0;
  display: flex;
  gap: 0em;
  color: #fff;
  padding-top: 0;
  text-align: right;
  align-items: flex-end;
  justify-content: end;
  padding-top: 0 !important;
}
.digit {
  position: relative;
  width: 1ch;
  height: 1em;
  overflow: hidden;
}
.digits-inner {
  position: absolute;
  top: 0;
  left: 0;
}
.digits-inner span {
  display: block;
  height: 1em;
  line-height: 1em;
  text-align: center;
}

.timeline-entries {
  flex: 1;
  position: relative;
}

.timeline-entry {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  padding: 0rem 2rem;
  opacity: 0;
  transform: translateY(13px);
  color: #fff;
  margin-top: -80px;
}

.timeline-entry.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
  z-index: 2;
}
#timeline svg {
  position: absolute;
  left: -25vw;
  z-index: 0;
  opacity: 0.5;
}

#team .boxTeam {
  display: grid; /* Cambiamo da flex a grid */
  grid-template-columns: repeat(
    3,
    1fr
  ); /* Crea 3 colonne di uguale larghezza */
  padding: 10px;
}
#team .boxTeam p {
  text-align: center;
  padding: 0;
  color: #fff;
  font-weight: 500;
  line-height: 24px;
  width: 80%;
}
.boxTeam > .colonna {
  flex: 1;
  border-right: 1px solid #d8d900;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#team .colonna:after {
  border-bottom: 1px solid rgba(2, 45, 66, 0.2);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
}
.boxTeam > .colonna:nth-child(3n) {
  border-right: none; /* Rimuove il bordo a destra per l'ultimo elemento figlio di .box-container */
}
.cerchio {
  width: 300px;
  height: 300px;
  background: #249aad
    url(https://www.horizonfirm.com/wp-content/uploads/2025/04/logo-header-s.webp);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#team h6 {
  font-size: 26px;
  color: #d8d900;
  font-weight: 500;
  padding-bottom: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  text-align: center;
}
circle.full {
  fill: #2e62ab !important;
  stroke-width: 2px;
  transform: translateX(10px);
}

/* CONTATTI */

#contatti .location,
#contatti .contact {
  display: flex;
  flex-direction: row;
}
#contatti .location .info,
#contatti .contact .info {
  width: 30%;
  background-color: #2e62ab;
}
#contatti .contact .form {
  width: 70%;
  position: relative;
}
#contatti .location .mappa {
  width: 70%;
  height: 650px;
  background-color: #80c080;
  position: relative;
  background-image: url(https://www.horizonfirm.com/wp-content/uploads/2025/05/maps.webp);
    background-size: cover;
    background-position: center;
}
.col.col-100.acc {
  margin-top: -40px;
}
span.wpcf7-list-item-label {
  color: #fff;
}
#contatti .location .mappa .sopra {
  background-color: #fff;
  padding: 3rem;
  position: absolute;
  bottom: 50px;
  left: 50px;
}
#contatti h6 {
  color: #fff;
  text-transform: uppercase;
  font-size: 17px;
  margin-bottom: 3px;
  font-weight: 500;
}
#contatti .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#contatti .social {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#contatti .info h2 {
  color: #ffeb3b;
  font-weight: 500;
  width: 70%;
  text-transform: uppercase;
  font-size: 36px;
}
.form-columns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px; 
}

.form-columns .col {
  box-sizing: border-box;
}

.form-columns .col-40 {
  flex: 0 0 40%;
}

.form-columns .col-60 {
  flex: 0 0 58%;
}
.form-columns .col-100 {
  flex: 0 0 100%;
}
/* Rimuovi l'effetto di focus */
.form-columns input:focus,
.form-columns textarea:focus {
  outline: none;
  border: 1px solid #fff; /* Puoi mantenere il bordo bianco, o cambiarlo come preferisci */
}

/* Input e Textarea Styling */
.form-columns input[type="text"],
.form-columns input[type="email"],
.form-columns textarea {
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Submit Button Styling */
.form-columns input[type="submit"] {
  width: 100%;
  border-radius: 20px;
  background: #ffeb3b;
  color: #fff;
  padding: 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.form-columns input[type="text"],
.form-columns input[type="email"],
.form-columns textarea {
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  font-family: "Termina", serif;
  font-weight: 500;
  background: transparent;
  color: #fff;
  margin-bottom: 19px;
  padding: 23px;
  border-radius: 22px;
}
.form-columns input::placeholder,
.form-columns textarea::placeholder {
  color: #fff;
}
.form-columns input[type="submit"] {
  width: 100%;
  border-radius: 20px;
  background: #249aad;
  color: #fff;
  padding: 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  padding: 25px;
  color: #fff;
  text-transform: uppercase;
  font-family: "Termina", serif;
  font-weight: 800;
  margin-top: -40px;
}
/* } (opzionale) */
@media (max-width: 768px) {
  .form-columns {
    flex-direction: column;
  }

  .form-columns .col-40,
  .form-columns .col-60 {
    flex: 0 0 100%;
  }
}

/* FOOTER */


#footer {
  background-color: #249aad;
  color:#fff;
}
#footer .logoG {
  border-top: 1px solid var(--blu-medio);
  overflow: hidden;
  padding: 3rem 0;
  display: flex;
  align-items: center;
   border-bottom: 1px solid var(--blu-medio);
}

#footer .logoG img {
  width: 100%;
  height: auto;
}
#footer .info {
  display: flex;
  justify-content: space-between;
  padding: 3rem 0;
} 

#footer .copy .container {
  display: flex;
  justify-content: space-between;
  padding: 3rem 0;
}

#footer .info .contenitore {
  display: flex;
  flex-direction: column;

}

#footer h5 {
  text-transform: uppercase;
  color: #b0cd54;
}
#footer a {
  color: #fff;
}

#footer .info a {
  font-size: 20px;
}


#table th h1 {
  font-weight: bold;
  font-size: 1em;
text-align: left;
color: #185875;
}

#table td {
  font-weight: 500;
  font-size: 1em;
}

#table {
  text-align: left;
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
display: table;
padding: 8em 0 8em 0;
}

#table td, #table th {
  padding-bottom: 2%;
  padding-top: 2%;
padding-left:2%;  
padding-right: 2%;
width: 7%;
    color: #fff;
}
#table td {

  font-weight: 500;
}
#table td:hover {
  background-color: #d8d900;
  color: #2e62ab!important;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}
#brevetto .foto.box.parallax-box {
    height: auto;
}
#table th {
  background-color: #b0cd54!important;
  text-transform: uppercase;
  color: #2e62ab!important;
}

/* Background-color of the odd rows */
#table tr:nth-child(odd) {
  background-color: #2580b1;
}

/* Background-color of the even rows */
#table tr:nth-child(even) {
  background-color: #249aad;
}

#table th {
  background-color: #1F2739;
}

#table td:first-child {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 500;
}

  #table tr:hover {
    background-color: #d8d900;
    box-shadow: none;
}

#table td:hover {
background-color: #d8d900;
color: #403E10;
font-weight: bold;

box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
transform: translate3d(6px, -6px, 0);

transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
transition-timing-function: line;
}

#brevetto #numeri {
  background: #249aad;
  padding-bottom: 40px;
}
#brevetto #numeri .altriElementi
 {
  z-index: 0;
 }

#brevetto h1 {
  color: #d8d900;
  font-size: 4em;
  font-weight: 500;
}
#brevetto .tecno {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
#brevetto .tecno .box {
  width:63%;
  z-index: 0;
}
#brevetto .tecno .box p {
  width: 100%!important; 
  float: left !important;
    margin-left: 60px !important;

}
#brevetto #numeri h2 {
  align-items: center!important;
  font-size: 6em!important;
  gap: 10px!important;
  font-weight: 500!important;
      color: #d8d900;
}
#brevetto #numeri .tecno p {
  width: 60%!important;
    float: left!important;
    justify-content: center!important;
}
#brevetto #soluzioni {
  background: #2e62ab;
  color: #fff;
  position: relative;
  display: block;
  z-index: 9;
}
#brevetto #numeri h2 span.num {
  letter-spacing: 0;
}
#brevetto h2 p {
  color: #d8d900 !important;
width: 100%!important;
}
#brevetto #numeri p {
  text-align: left;
  font-size: 22px;
  font-weight: 500;
  padding-right: 0;
  color: #fff;
  width: 57%;
  float: none;
  font-weight: 500;
  text-align: left;
  margin: 20px 0%;
  float: right;
}
#brevetto #numeri h2 {
  justify-content: center;
}
p.mm {
  margin-top: 45px !important;
  font-size: 19px !important;
}
#brevetto .barraBianca.gialla {
  top:69px;
}
#brevetto #numeri h2 span {
  font-size: 1em;
} 

#brevetto #soluzioni h2 span {
  font-size: 35px;
}
.flexMeta.no .box{
  padding:0!important;
}
#brevetto h4 {
color: #d8d900;
    font-weight: 500;
    font-size: 26px;
}
#brevetto h4 {
  margin-bottom: 0;
}
#brevetto #soluzioni .flexMeta.no {
  height:auto;
}
#brevetto .disco {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #d8d900;
  margin-bottom: -20px;
  margin-top: 23px;
}
#brevetto .caratt {
  margin-top: 40px;
  margin-left: 0;
}
#brevetto .caratt p { 
  font-weight: 500;
}
#brevetto .caratt h6  {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    color: #d8d900;
    margin-bottom: 0px;
} 
#brevetto .caratt p {
    font-weight: 500 !important;
    font-size: 19px !important;
    line-height: 26px;
    padding-right: 0 !important;
    text-align: left;
}
#brevetto #soluzioni .flexMeta.no p {
  font-size: 20px;
  font-weight: 500;
  padding-right: 4vw;
}
#brevetto #soluzioni .barraBianca {
  width: 75px !important;
}
#brevetto #soluzioni h2 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 800px) {
  #table td:nth-child(4),
  #table th:nth-child(4) { display: none; }
}

/* Stile per l'header dell'accordion */
.accordion-header {
  cursor: pointer;
  padding: 15px;
  background-color: transparent; /* Un colore di sfondo per l'header */
  border-bottom: 1px solid #ddd;
  position: relative; /* Per posizionare l'icona */
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: transparent;
}

/* Stile per l'icona "più/meno" o "freccia" */
.accordion-header::after {
  content: '+'; /* Icona iniziale per chiuso */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.accordion-header.active::after {
  content: '-'; /* Icona quando aperto */
  transform: translateY(-50%) rotate(0deg); /* Nessuna rotazione se è solo un più/meno */
}


.accordion-header::after {
  content: '\25BC'; 
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.accordion-header.active::after {
  transform: translateY(-50%) rotate(180deg);  
}

/* Stile per il contenuto dell'accordion */
.accordion-content {
  background-color: transparent;
  padding: 0 15px; /* Inizialmente padding verticale a 0 */
  border-bottom: 1px solid #eee;
  overflow: hidden; /* Importante per l'animazione dell'altezza */
}

/* Stile per il testo dentro il contenuto (se necessario) */
.accordion-content p {
  padding: 15px 0; /* Padding interno per il testo */
  margin: 0;
}
#close-panel {
    background: transparent;
    border: none;
    font-size: 50px;
    position: absolute;
    top: 0;
        cursor: pointer;
    right: 12px;
    color: #2e62ab;
}
.desk {
  display:inline-block;
}
.mob {
  display: none;
}
.descri {
  width: calc(40% - 60px);
  padding-left: 30px;
  padding-right: 30px;
}
.cara {
  width: 30%;
  display: flex;
  justify-content: center;
}
.link-overlay {
		position: absolute;
		inset: 0;
		z-index: 10;
	}
.evidenza {
    z-index: 9;
    position: relative;
}
  .gallerySwiperPost {
  width: 100%;
  padding: 20px 0;
}
.swiper.gallerySwiperPost {
    height: 550px;
}
.swiper-button-next, .swiper-button-prev {
  color:#fff;
}
.gallerySwiperPost .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallerySwiperPost img {
  width: 100%;
  height: 650px; /* puoi regolare l'altezza */
  object-fit: cover;
  border-radius: 12px;
}


#home #progetti h3 {
		color: #d8d900;
		font-size: 2.1em;
		line-height: 40px;
		letter-spacing: -1px;
		font-weight: 500;
	}
	#home #progetti h2 {
		color: #d8d900;
		font-size: 3.4em;
		line-height: 50px;
		letter-spacing: -1px;
		padding-bottom: 25px;
    	font-weight: 500;
	}

.slider-progetto {
  width: 100%;
  height: 100%;
}
 
.slide-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.loader-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #fff;
  border-top-color: #2e62ab;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.chiudi-progetto {
  z-index: 999;
}
.lineImg {
      max-width: 100%;
}
.evidenza img {
    margin-top: 50px;
    max-width: 100vw !important;
    max-height: 70vh !important;
    height: 65vh !important;
        border-radius: 0!important;
}


.mobile-nav-buttons {
  display: none;
  justify-content: center;
  gap: 0;
  margin-top: 20px;
}
button#btn-next:active {
    background: #d8d900;
    color: #ffff;
}

button#btn-prev:active {
    background: #d8d900;
    color: #ffff;
}
.mobile-nav-buttons button {
    background: transparent;
    border: 0;
}
button#btn-next ,
button#btn-prev {
    border: 1px solid;
}
.circle-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 4px solid #ccc;
  border-top: 4px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10001; /* più alto di .transition-overlay */
  display: none;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.transition-overlay {
  z-index: 1000; /* sfondo bianco */
}

.circle-loader {
  z-index: 2000; /* sopra il bianco */
}


.mobile-nav-buttons .nav-arrow {
    background-color: transparent;
    border: 1px solid #ffffff73;
    padding: 0;
    font-weight: bold;
    font-size: 22px;
    line-height: 25px;
    color: #fff;
    border-radius: 100%;
    cursor: pointer;
    width: 55px;
    height: 55px;
}


.mobile-text {
  display: none;
}

#container3D {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden; 
}
progetto-layout {
    display: flex;
    width: 100vw;
    height: 100%;
        flex-wrap: nowrap;
        min-height: 100vh;
    max-width: 100vw;
    color: #fff;
}

/* RESPONSIVE */
@media (max-width: 1680px) {
  #home #soluzioni .flexMeta .box {
    width: calc(50% - 160px);
}
#home #soluzioni .flexMeta.no .box {
    width: 50%;
}
  #home #numeri .flexMeta h3.bigger {
    font-size: 4.5em;
  }
  #home #soluzioni h2 {
    width: 75%;
  }
  #home #numeri h2 span {
    font-size: 8em;
  }
  #home #numeri h2 .dett span.piu {
    font-size: 105px;
  }
  #soluzioniPage .panel {
    padding: 5rem!important;
  }

  .graphic-svg {
    width: 72vw!important;;
    max-width: 39vw!important; 
}
.altriElementi #Livello_1 {
  height: 1200px!important;
}
.ciclo {
  margin-bottom:0;
}
#home #video h2 {
  font-size: 7vw;
}
#novideo h2 {
  font-size: 6vw!important;
  width: 70%;
}
    #home #brevetto #numeri h2 span {
        font-size: 2em;
    }
    #brevetto #numeri h2 {
      font-size: 3em!important;
    }
    table.container {
      width: 100%;
        }
#about h2 { 
    font-size: 2.5em;  
    letter-spacing: -0.5px;
}
#timeline svg {
  width: 80vw;
}
 #contatti .info h2{
  width: 75%;
 }
}

@media (max-width: 1440px) {
  .share {
    display:flex;
    gap: 10px;
    justify-content: flex-end;
  }

  .process-text {
    left: 43%!important;
  }
  #process-image {
    transition: opacity 0.1s ease;
    width: 60%!important;
    position: absolute;
    height: auto;
    object-fit: cover;
    display: block;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}
  .tes p {
    width: 90%!important;
  }
    .singolaNews .tes p {
width: 96%!important;
  }
  #home #numeri h2 .dett span.piu { 
    line-height: 73px;
}
  .copy .privacy {
    text-align: left;
}
  .container {
    width: calc(100% - 100px);
  }
  #home .elementi {
    background-size: 70vw;
  }
  #home #about h1 {
    font-size: 4em;
  }
  #home #about h2 {
    font-size: 2.4em;
    width: 90%;
  }
  #home #soluzioni .flexMeta .box {
    padding: 60px;
  }
      #home #soluzioni .flexMeta .box {
        width: calc(50% - 120px);
    }
  #home #soluzioni h2 {
    font-size: 3em;
    line-height: 1em;
    width: 80%;
  }
  .barraBianca {
    top: 7px;
    width: 39px !important;
  }
  #home #numeri h3 {
    font-size: 2.8em;
    width: 90%;
  }
  #home #numeri p {
    width: 50% !important;
  }
  #home #numeri .flexMeta h3.bigger {
    font-size: 4.3em;
  }
  #home #numeri h2 span.num {
    letter-spacing: -4px;
}
  #home #numeri h2 span {
    font-size: 6em;
  }
  #home #numeri h2 .dett span.piu {
    font-size: 95px;
  }
  #home #numeri .flexMeta.sinistra h3 span {
    font-size: 1.8em;
  }
  #home #progetti h3,
  #home #progetti h1 {
    font-size: 3.2em;
  }
   #home #progetti h3 {
    font-size: 1.7em!important;
   }
  .barra {
    width: 50px;
    height: 110px;
  }
  .timeline-entry h3 {
    font-size: 3em;
  }
  .form-columns .col-60 {
    flex: 0 0 100%;
  }
  .form-columns .col-40 {
    flex: 0 0 100%;
  }
  #brevetto .tecno .box {
    width: 80%;
  }
  #home   #brevetto #numeri h2 span {
    font-size: 2em;
}
#brevetto h4 { 
  font-size: 26px;
}
#brevetto #soluzioni h2 span {
  font-size: 28px;
}

#contatti .info h2 {
  font-size: 32px;
}
 .form-columns .col-60 {
  margin-top: -30px;
 }
 .form-columns {
  gap:0px;
 }
.timeline-navigation-buttons .nav-arrow {
        font-size: 2em;
 }
 .timeline-navigation-buttons {
  left: 40px;
 }
 .cerchio {
    width: 250px;
    height: 250px;
 }
 #brevetto h1 { 
    font-size: 3.5em; 
    margin-top: 55px;
}
.process-text {
  font-size: 2em;
}
.copy .container div {
    flex: 1;
}
#home #numeri p {
        width: 70% !important;
    }

    #contatti .location .info, #contatti .contact .info {
    width: 40%;
  }
}

@media (max-width: 1366px) {
  #soluzioniPage .panel {
    height: auto;
    padding: 5rem;
  }
  .ciclo {
    height: 1500px;
  }
      #novideo h2 {
        font-size: 5.6vw !important;
        width: 70%;
    }
    .singolaNews .tes {
          width: 70%;
    }
  #home #soluzioni h2 {
    width: 85%;
  }
  #home #numeri h2 span.num {
    letter-spacing: 0px;
} 
    #home #numeri h2 span {
        font-size: 6em;
    }
        #home #numeri h2 .dett span.piu {
        font-size: 88px;
            line-height: 68px;
    }
  .has-submenu.open .submenu {
    width: 100%;
  }
  .singolaNews h1 {
    font-size: 4.5vw;
  }
    .slide-content h3, .slide-content p {
    flex: auto;
    }
        #home #brevetto #numeri h2 span {
        font-size: 1.6em;
    }
        #brevetto #soluzioni h2 span {
        font-size: 25px;
        line-height: 29px;
        margin-top: 5px;
    }
        #brevetto h4 {
        font-size: 23px;
    }
    #brevetto #soluzioni .flexMeta.no p {
    font-size: 18px;
    font-weight: 500;
        width: 100%;
}
#home #soluzioni p {
    font-size: 20px;
    font-weight: 500;
    padding-right: 4vw;
            width: calc(100% -  4 vw);
}
#brevetto #soluzioni .flexMeta.no {
    height: auto;
        width: 95%;
}
#home #soluzioni .caratt p {
  width: 100%;
}
    #home #soluzioni .flexMeta.no .box {
        width: 50%;
        padding-right: 20px !important;
    }
    #home #soluzioni .flexMeta .box {
        width: calc(50% - 80px);
    } 
        #home #soluzioni .flexMeta .box {
        padding: 40px;
    }
    .descri p {
    width: 100% !important;
}
.cara {
    width: 20%;
}
.descri {
    width: 45%;
    padding-left: 0;
    padding-right: 0;
}
#home #progetti h3 {
      font-size: 1.8em!important;
      line-height: 30px !important;
}
#soluzioniPage h3 {
    font-size: 42px;
}
.btnB {
    background: #249aad; 
    padding: 25px 40px;
    font-size: 17px;
}
.barraBianca.grande {
  top:10px;
}
#brevetto .caratt {
    margin-top: 40px;
    margin-left: 0;
    width: CALC(100% - 4vw);
    padding-right: 4VW;
}
    #home #soluzioni h2 {
        font-size: 2.5em 
      }
      #home #progetti p {
      width: 55%;
    padding: 0 20px;
    }
    .copy .credits {
      text-align: right;
    }
}
@media (max-width: 1280px) {
  .svg-wrapper svg {
    height: 1200px !important;
  }
  #home #video h2 {
    margin-top: 10px;
  }
      #home #about h2 {
        font-size: 2.05em;
      }
          #home #soluzioni h2 {
        font-size: 2.5em;
          }
          #home #numeri .flexMeta h3.bigger {
        font-size: 3.6em;
    }
    #soluzioniPage h3 {
    font-size: 45px;
    }
    .btnB {  
    padding: 30px 35px;
    font-size: 16px;
    }
    .singolaNews .tes {
      width:75%!important;
    }
    .singolaNews .flexMeta {
        flex-direction: row;
    }
    #process-image {
      width:50%!important;
    }
    #soluzioniPage     #about h2 {
        font-size: 2.3em;
    }
        .graphic-svg {
        width: 39vw !important;
        max-width: 50vw !important;
    }
    .mySwiperPartner img {
    width: 155px;
}
    .barraBianca.grande {
        top: 20px;
    } 
.barraBianca.grande {
  width :5vw!important;
}
    #home #about h1 {
        font-size: 3.2em;
    }
}
@media (max-width: 1024px) {

  .mobile-nav-buttons {
    display: flex;
  }

  .sticky-circle {
    height: auto!important;
    flex-direction: column;
    align-items: center!important;
    min-height: auto!important;
  }

  .process-text {
    position: static;
    transform: none;
    margin-top: 0;
  }

  .process-right {
    display: none;
  }
  .flexMeta .box {
    width: calc(100% - 120px);
    margin: auto;
  }
  #home #about h2 {
    padding-top: 0;
  }
  .nav-menu {
    height: 100vh;
  }
  #home #soluzioni .flexMeta {
    height: 100vh;
  }
  .parallax-img {
    height: 120%;
  }
  .flexMeta {
    flex-direction: column;
  }
  #brevetto h1 {
    line-height: 1em;
  }
  #home #numeri h3 {
    text-align: center;
  }
  #home #numeri h2 {
    justify-content: center!important
  }
  #home #numeri p {
    width: 100% !important;
    text-align: center!important;
  }
 #contatti .contact {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        margin-top: -210px;
        z-index: 99;
        position: relative;
    }
  #home #numeri h2.sessanta {
    justify-content: center;
  }
  
  #home #numeri .flexMeta.sinistra h3 {
    text-align: center;
    margin-top: 0;
    float:none;
  }
  .slide-content {
    flex-direction: row;
  }
  .timeline {
    flex-direction: column;
    align-items: flex-start;
  }
  #team .boxTeam {
    grid-template-columns: repeat(1, 1fr);
  }
  #soluzioniPage .panel {
    padding: 3em;
  }
  #soluzioniPage .image-panel {
    width: 40%;
  }
  #soluzioniPage .split-text {
    width: 60%;
  }
  #soluzioniPage h3 {
    font-size: 42px;
  }
      #home #progetti h3 {
        font-size: 1.7em !important;
      }
  .barraBianca {
    top: 13px;
    width: 35px !important;
  }
  .svg-wrapper svg {
    height: 900px;
  }
  .ciclo {
    height: 140vh;
  }
  #home .elementi {
    background-size: 85vw;
  }
  #home #progetti h3 {
        font-size: 2.5em;
    }
    #home #progetti p {
      font-size: 20px;
    }
#home #progetti ul {
  font-size: 19px;
}
#footer .info {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
#footer .copy .container {
    flex-direction: column;
        text-align: left;
        align-items: flex-start;
    gap: 12px;
}
    #home #numeri h3 { 
        margin: auto;
    }
        #home #numeri h3 {
        font-size: 2.8em;
        width: 90%;
        margin: auto;
    }
        #home #soluzioni .flexMeta .box { 
        height: 300px;
    }
        #home #soluzioni .flexMeta {
        height: auto;
    }
    .chi .box {
      width: 100%;
    }
    .flexMeta.reverse {
      flex-direction: column-reverse;
    }
    .foto .parallax-img-wrapper {
      height: 115%;
    }
        #home #numeri h2 span {
        font-size: 5.5em;
    }
        #home #numeri .flexMeta.sinistra h3 span {
        font-size: 1.5em;
    }
        #home #about h1 {
        font-size: 3.5em;
        margin-top: 5px;
        width: 80%;
    }
        #home #about h2 {
        font-size: 2em;
        width: 90%;
    }
    .altriElementi #Livello_1 {
        height: 965px!important;
    }
        .graphic-svg {
        width: 63vw !important;
        max-width: 63vw !important;
    }
        #brevetto h1 {
        font-size: 3em;
        margin-top: 55px;
    }
        #brevetto .tecno .box {
        width: 100%;
    }
    section#team {
      margin-top: -150px;
  }
  .boxTeam > .colonna {
    border-right: 0;
  }
  #table td, #table th {
    padding-bottom: 2%;
    padding-top: 2%;
    padding-left: 1%;
    padding-right: 1%;
    width: 7%;
    font-size: 14px;
  }
  .col-destra {
    width:50%;
    padding: 3rem!important;
    overflow-y: auto;
  }
  .col-destra p {
    font-size: 18px!important;
    font-weight: 500;
    padding-right: 0vw!important;
  }
  .barraBianca.gialla {
    width: 47px !important;
  }
  #home #soluzioni .foto.box.parallax-box {
    height: 50vh;
}
.nav-menu a { 
    line-height: 35px; 
    font-size: 40px; 
}
.submenu li a {
  font-size: 33px; 
    line-height: 35px;
}
    #home #soluzioni .flexMeta .box {
        width: calc(100% - 80px);
    }
   #progetti .contieniBarra {
      width: 37%;
    }
        .barra {
        width: 50px;
        height: 94px;
        left: -26px;
    }
h2.prog {
    font-size: 2em!important; 
    margin-top: 20px!important;
            line-height: 1em;
}
    #brevetto #numeri .tecno p {
    width: 80% !important;
    float: left !important; 
    text-align: left!important;
}
#home #soluzioni .flexMeta .box {
        height: auto;
    } 
#home #brevetto #soluzioni .flexMeta .foto.box {
    height: 100vh;
}
.flexMeta .flexMeta {
    flex-direction: row;
}
#brevetto #soluzioni .barraBianca {
    width: 150px !important;
    top: 6px;
}
#team .boxTeam p {
  width: 50%;
}
 #contatti .location, #contatti .contact {
  flex-direction: column;
 }

 #contatti .location, #contatti .contact {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
    #contatti .location .info, #contatti .contact .info {
        width: 70%;
    }

    #contatti h6 {
      margin-top:30px;
    }
    #contatti hr {
          margin: 80px auto !important;
    }
    #contatti .location .mappa { 
    height: 550px;
    }
    #contatti .location .mappa .sopra {
    background-color: #fff;
    padding: 3rem;
    position: absolute;
    bottom: 20px; 
    width: 76%;
}
#contatti .location h2 {
  display:none;
}
#contatti .location .mappa .sopra {
      left: 0;
    right: 0;
    margin: auto;
}
/* STORIA */
.timeline-years {
      flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: 100%;
    text-align: center;
}
.timeline-navigation-buttons {
  left: 0!important;
right:0;
margin: auto;
}
.timeline-entries {
    flex: 1;
    position: relative;
    width: 50%;
    text-align: center;
    margin: auto;
}
.timeline-entry {
    padding: 0;
}
.timeline-navigation-buttons {
  flex-direction: row;
}
.timeline-navigation-buttons .nav-arrow{
  transform: rotate(0deg);
padding:0;
}
.timeline-navigation-buttons {
  top: 45px;
}
.timeline-entries {
  margin-top:-40px
}
.svg-wrapper svg {
        height: 90vh !important;
    }
    #about #team h4 {
          margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    }
    .timeline {
      justify-content: center;
    }
.timeline-entry,.timeline-entry h3 {
  width: 100%;
}
.big-year {
      text-align: center;
    align-items: center;
    justify-content: center;
}
.process-left {
    flex: 0 0 100%!important;
        padding-bottom: 80px;
}
.process-container {
      margin-top: 30px;
    position: relative;
    width: 100%;
    height: auto;
    user-select: none;
}
    .process-text {
        left: 50% !important;
    }
    .testiServiziMob {
    width: 80%!important;
    margin: auto;
    margin-top:0px;
}
.process-left .altriElementi {
  display: none;
}
    .mobile-nav-buttons {
        display: flex!important;
          margin-top: 20px;
        margin-bottom: 30px;
    }
.process-wrapper {
    display: flex;
    align-items: center!important;
    position: relative;
    padding: 0!important;
    justify-content: center!important;
    width: 100%;
}
.graphic-svg {
      position: relative!important;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
            width: 60vw !important;
        max-width: 60vw !important;
}



}
#soluzioniPage  .image-mobile {
    display: none; /* Nascondi le immagini mobile su desktop */
    width: 100%; /* Larghezza dell'immagine mobile */
    height: auto; /* Altezza automatica */
    margin-bottom: 2rem; /* Spazio tra immagine e testo */
    object-fit: cover;
}

/* TABLET */

@media (max-width: 991px) {

.timeline {
      height: 60vh;
}
  .barraBianca.grande {
    height: 12vh;
  }
  .barraBianca.gialla {
    width: 50px !important;
  }
#home #soluzioni .flexMeta .foto.box{
    height: 450px;
  }

  #home #video h2 {
    font-size: 9vw;
  }
#novideo .barraBianca.grande {
      width: 5.5vw !important;
    height: 11vh;
}


  #soluzioniPage .split-section {
    flex-direction: column;
    min-height: auto; /* Rimuovi l'altezza minima fissa */
  }
    #contatti  #novideo h2 {
        font-size: 7.5vw !important;
    }

  #soluzioniPage .split-text {
    width: 100%; /* Occupano l'intera larghezza */
  }

  #soluzioniPage .image-panel {
    /* Questa parte viene nascosta completamente su mobile */
    display: none;
  }
  #novideo h2 {
    font-size: 9vw !important;
  }
  #soluzioniPage .panel {
    height: auto; /* Altezza automatica per il contenuto testuale */
    padding: 4rem 2rem; /* Riduci il padding */
    text-align: left; /* Centra il testo */
    /* Modifica l'ordine in modo che il pannello mobile sia prima del testo */
    display: flex; /* Assicurati che sia flex per il corretto posizionamento */
    flex-direction: column; /* Contenuto impilato */
    justify-content: flex-start;
    align-items: flex-start;
  }

  /* Mostra i pannelli immagine mobili all'interno di ogni "panel" */
  #soluzioniPage  .image-mobile {
        display: block;
        height: 50vh;
        width: 100%;
        object-fit: cover;
  }

  /* Centra il contenuto del pannello testuale */
  #soluzioniPage .panel > div { /* Seleziona il div che contiene h3, p, ul */
    width: 100%; /* Occupa tutta la larghezza */
  }

  #soluzioniPage h3,
  #soluzioniPage p,
  .caratt li {
    text-align: left; /* Centra il testo all'interno del pannello */
    width: 100%; /* Adatta la larghezza al 100% del contenitore */
  }
    .page-id-12 #novideo h2 {
        font-size: 7.2vw !important;
    }
  .caratt ul {
    padding-inline-start: 0; /* Rimuovi il padding sui punti elenco per centrarli */
    list-style-position: inside; /* Metti i bullet point all'interno */
  }
  .nav-menu ul { 
    width: 90%; 
    padding: 0;
  }
  #brevetto #numeri .tecno p {
    text-align:left!important;
  }
  #home #progetti h2 {
    font-size: 2.8em!important;
    line-height: 45px!important;
  }
      #home #brevetto #soluzioni .flexMeta .foto.box {
        height: 50vh;
    }
#contatti #novideo  {
  height: 70vh;
}

.contact.container {
  margin-top: -15vh;
}
  /* Regolazioni font-size per mobile */
  #soluzioniPage h3 {
    font-size: 38px;
  }
  #soluzioniPage p {
    font-size: 18px;
    line-height: 27px;
  }
  .caratt li {
    font-size: 17px;
    width: 90%; /* Per lasciare un po' di margine ai lati */
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
  }
  .slide-content {
        flex-direction: column;
        width: 100%;
    }
    #progetti .contieniBarra,
    .descri,
     .cara {
        width: 100%;
        justify-content: flex-start;
    }
        .barra { 
        left: 16px;
    }
    #home #progetti h3 {
      margin-left:50px;
    }
    #home #progetti p {
      padding:0;
    } 
    .swiper {
    width: 100%;
    height: auto;
    padding: 25px 0;
}
}

@media (max-width: 840px) {
  section#team {
    margin-top: -20vh;
}
  .timeline-entries {
    width: 80%;
  }
  .timeline {
    height:70vh;
  }
    #home #numeri h3 {
        font-size: 2.5em;
    }
        #home #numeri h2 span {
        font-size: 5em;
    }
        #home #numeri h2 .dett span.piu {
        font-size: 68px;
        line-height: 56px;
    }
    #home #numeri p {
      margin-top:40px;
    }
    #footer .info {
        display: grid;
        grid-template-columns: 1fr;
        text-align: left;
    }
        #home #progetti h3, #home #progetti h1 {
        font-size: 2.8em;
    }
        .altriElementi #Livello_1 {
        height: 750px !important;
    }
        .ciclo {
        height: 80vh;
    }
    #novideo h2 {
        font-size: 8vw !important;
    }
    header {
      padding: 30px 0;
    }
    #contatti .location .mappa {
    width: 100%;
    }
    #contatti .contact .form,
    #contatti .location .info, #contatti .contact .info {
    width: 100%;
    }
    .process-text {
      width: 70%;
      font-size: 1.8em;
    }
      
    #brevetto #numeri h2 {
      font-size: 2.2em !important;
  }
 #contatti #home .elementi {
    background-size: 127vw;
}
#contatti #home #novideo { 
  height: 59vh;
}
#portfolio #contatti #home #novideo {
  height: 20vh;
}
.contact.container {
  margin-top: -150px;
}
h2.prog {
  font-size: 2.2em;
}
.col-destra  {
    line-height: 27px;
    width: 90%;
}
.progetto-layout {
flex-direction: column;
}
.col-destra {
  width: calc(100% - 6rem) !important;
}
.submenu li a {
        font-size: 30px;
        line-height: 32px;
    }
    .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative;
    bottom: 0 !important;
    margin: auto;
    text-align: center;
    align-items: center;
    margin-top: 19px;
}
.col-sinistra {
  height:70vh!important
}
    .col-destra {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
      #home #soluzioni .flexMeta.no .box {
        width: 100%;
      }
  #contatti .contact {
    margin-top:-180px;
  }
  #contatti .contact.coo {
    margin-top:-180px;
  }
   .contieniBarraBianca.grande {
    gap: 20px;
   }
  #novideo h2 {
    font-size: 8vw !important;
}
#portfolio #table td {
  padding-left: 50%;
}
#portfolio #table td, #portfolio #table th {
  width:47%;
          font-size: 16px
}
.col-sinistra {
  width: 100%!important;
}
.progetto-layout {
  flex-direction: column;
}
.col-sinistra img {
  height: 40vh!important;
}
  #soluzioniPage .panel {
    padding: 3rem 1.5rem; /* Riduci ulteriormente il padding */
  }

      #soluzioniPage .panel {
        padding: 3rem !important;
    }
  #soluzioniPage h3 {
    font-size: 32px; /* Riduci la dimensione del font */
  }

  #soluzioniPage p {
    font-size: 18px; /* Riduci la dimensione del font */
    line-height: 24px;
  }
.singolaNews #novideo .barraBianca.grande {
    width: 41px !important;
    height: 102px;
}
  .caratt li {
    font-size: 17px; /* Riduci la dimensione del font */
    width: 95%;

  }
table {
  width: 100%;
}
  .btnB {
    font-size: 16px; /* Riduci la dimensione del font del bottone se necessario */
    padding:20px 35px;
  }
  #contatti #home #novideo { 
    height: 70vh;
  }

  /*table*/
  #table, #table tbody, #table thead, #table tr, #table th, #table td {
    display: block; /* Trasforma tutti gli elementi della tabella in blocchi */
  }

  #table thead {
    display: none; /* Nasconde l'intestazione originale della tabella */
  }

  #table tr {
    border:0; /* Aggiunge un bordo tra le "righe" per distinguerle */
    margin-bottom: 1em;
    padding: 1em;
    box-shadow: none; /* Leggera ombra per un effetto visivo */
  }

  #table td {
    border: none;
    position: relative;
    padding-left: 65%;
    text-align: left;
    color: #fff; /* Colore del testo del valore */
  }

  #table td:before {
    position: absolute;
    left: 6px;
    width: 90%;
    padding-right: 10px;
    white-space: nowrap; /* Evita che l'etichetta vada a capo */
    content: attr(data-label); /* Utilizza l'attributo data-label per il contenuto */
    font-weight: bold;
    text-align: left; /* Allinea l'etichetta a sinistra */
    color: #fff; /* Colore del testo dell'etichetta */
  }

  /* Assegna le etichette per ogni colonna usando l'attributo data-label */
  #table tr td:nth-of-type(1):before { content: "Sistema"; }
  #table tr td:nth-of-type(2):before { content: "Producibilità specifica (kWh/kWp)"; }
  #table tr td:nth-of-type(3):before { content: "Potenza (kW/ha)"; }
  #table tr td:nth-of-type(4):before { content: "Pitch (m)"; }
  #table tr td:nth-of-type(5):before { content: "Ground Cover Ratio"; }
  #table tr td:nth-of-type(6):before { content: "Suolo disponibile (mq/ha)"; }


  /* Assegna le etichette per ogni colonna usando l'attributo data-label */
  #table.port tr td:nth-of-type(1):before { content: "Progetto"; }
  #table.port tr td:nth-of-type(2):before { content: "Località"; }
  #table.port tr td:nth-of-type(3):before { content: "Potenza (KWP)"; }
  #table.port tr td:nth-of-type(4):before { content: "Iter autorizzativo"; }
  #table.port tr td:nth-of-type(5):before { content: "Avanzamento iter"; }
  #table.port tr td:nth-of-type(6):before { content: ""; }


  #table td:hover { 
  color: #fff!important;
  font-weight: 500!important;
  }
      #table td.btnSco:hover {
        background-color: #d8d900;
        box-shadow: none;
        transform: none;
    }
  /* Ajustamenti per l'hover su schermi piccoli */
  #table td:hover {
    background-color: transparent; /* Rimuove lo sfondo hover per le singole celle */
    box-shadow: none;
    transform: none;
  }
#table tr:nth-child(even):hover {
      background-color: #249aad;
} 
#table tr:nth-child(odd):hover {
    background-color: #2580b1;
}
  #brevetto h1 {
    font-size: 2.8em;
    margin-top: 55px;
    line-height: 1em;
  }
  #brevetto .barraBianca.gialla {
    top: 60px;
}
#home #numeri p {
  margin-top: 15px;
}
.graphic-svg {
  width: 68vw !important;
  max-width: 66vw !important;
      position: relative!important;
  
}
.ciclo {
  height: 100vh;
}
.barraBianca.gialla {
  width: 40px !important;
}
#home #about h1 {
  font-size: 3.3em;
  letter-spacing: -1px;
}
.barraBianca {
  top: 5px;
}
#home #numeri h2 span {
  font-size: 4em;
}
#home #numeri h2 .dett span.piu {
  font-size: 44px;
  line-height: 42px;
}
#home #numeri p {
  margin-top: 31px;
}
#home #numeri h2 {
  margin-bottom: -31px;
  gap: 13px;
}#home #numeri .flexMeta.sinistra h3 span {
  font-size: 1.25em;
}
#home #progetti h3 {
  font-size: 1.8em;
}
#home #progetti h1 {
  font-size: 2.5em;
}
    .copy .credits {
        text-align: left;
    }

    .btnSco {
        padding-left: 0 !important;
        width: 100% !important;
        text-align: center !important;
        background: #80c080;
        padding-bottom: 0 !important;
        padding: 30px 0 !important;
        border-radius: 10px;
        z-index: 99;
    }
    .btnSco a {
          text-transform: uppercase;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    }
}

/* mobile */

@media (max-width: 650px) { 
      .nav-menu ul {
        gap: 15px;
      }
      .timeline-entry h3 {
        font-size: 2.2em;
    }
      #soluzioniPage .panel {
        padding: 2rem !important;
    }

        .btnB {
        font-size: 14px;
        padding: 13px 23px;
        border-radius: 8px;
    }
    .panel .barraBianca span {
    top: -2px;
}
#home .elementi {
      background-image: url(https://www.horizonfirm.com/wp-content/uploads/2025/07/elementi.webp);
}
    .barraBianca {
        top: 4px;
        width: 48px !important;
    }
        #soluzioniPage #about h2 {
        font-size: 1.7em;
    }
        #about h2 {
        font-size: 1.8em; 
    }
  header .logo img {
    width: 260px;
  }
  .container {
    width: calc(100% - 50px);
}
#table.port td {
  padding-left: 55%;
  width: 40%;
}
#home #video .tit, .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 35px;
  z-index: 99;
  width: 90%;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  left: 25px;
  right: 25px;
  z-index: 3;
}
#home #about h1 {
  font-size: 3em;
  letter-spacing: 0;
}
.barraBianca.gialla {
  width: 35px !important;
}
.barraBianca {
  top: 11px;
}
#home #about h2 {
  font-size: 1.8em;
  width: 90%;
}
#home #soluzioni h2 {
  font-size: 2.3em;
}
.barraBianca {
  top: 4px;
}
.barraBianca {
  top: 13px;
  width: 50px !important;
}
#home #soluzioni p {
  font-size: 21px;
}

#home #numeri h3 {
  font-size: 2em;
}
#home #numeri h3 {
  width: 100%;
}

.slide-content {
  flex-direction: column;
  justify-content: flex-start;
  width: 90%;
  align-items: flex-start;
}

    .submenu li a {
        font-size: 21px;
        line-height: 27px;
    }
#home #progetti p {
  width: 100%;
}
.singolaNews     .flexMeta {
        flex-direction: column;
    }
    .singolaNews .share {
      justify-content: flex-start;
    }
    .singolaNews h1 {
        font-size: 5.5vw;
    }
#home #progetti ul {
  font-size: 19px;
  width: 95%;
  margin: 0;
  margin-left: 0;
}
.swiper {
  height: auto;
  padding: 43px 0;
}
.slide-content .contieniBarra {
  width: 37%;
}
#home #progetti h3 {
  font-size: 2.5em;
}

.nav-menu ul {
  gap: 15px;
  padding: 0;
  width: 90%;
}
#brevetto h1 {
  font-size: 2.5em;
}
.barraBianca.gialla {
  width: 50px !important;
}
.barraBianca span {
  height: 90%;
}
.contieniBarraBianca.grande {
  margin-left: 40px;
}
    #table.port tr td:nth-of-type(5):before {
        content: "Iter";
    }
        #table.port tr td:nth-of-type(3):before {
        content: "Potenza kwp";
    }
#table td:before {
  white-space: wrap;
}
#table td {
  padding-bottom: 20px;
}
.testiServiziMob h2 {
    font-size: 22px;
}
.flexMeta .flexMeta {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}
.flexMeta.no .box {
  padding: 0;
  width: 100%;
}
#brevetto .disco {
  width: 30px;
  height: 30px;
}
#brevetto h4 {
  font-size: 21px;
}
.barra {
  width: 59px;
  height: 87px;
}
#novideo h2 {
  line-height: 1.1;
}
#about h2 {
  font-size: 2em;
}
.boxTeam > .colonna {
  flex: 1;
  border-right: 0;
  border-bottom: 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px 0;
}
#about #team h4 {
  padding: 0
  ;
}
.mySwiperPartner img {
  width: 200px;
}
.slide-content .contieniBarra {
  width: 100%;
}
}


@media (max-width: 550px) {  
    .timeline {
        height: 100vh;
    }
    .timeline-entries {
        width: 100%;
    }
    #soluzioniPage p {
        font-size: 16px;
        line-height: 20px;
    }
        .caratt li {
        font-size: 15px;
        width: 100%;
    }
        .timeline-entry h3 {
        font-size: 1.9em;
    }
    .timeline-entry p {
    font-size: 16px;
    }
        #soluzioniPage #about h2 {
        font-size: 1.4em;
    }
header .logo img {
  width: 235px;
  margin-top: 10px;
}
.container {
  width: calc(100% - 40px);
}

.gallerySwiperPost img {
  margin-top:0!important;
max-width: 100vw !important;
        max-height: 70vh !important;
        height: 70vh !important;
        border-radius: 0 !important;
}

header .dx { 
  gap: 0;
}
.process-text {
  font-size: 20px;
}
.nav-menu a {
  color: #2e62ab;
  text-decoration: none;
  line-height: 35px;
  font-weight: 500;
  font-size: 36px;
}
.graphic-svg {
  max-width: 70vw !important;
  width: 68vw !important;
}
ul {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
}
#about #team h4 {
  color: #d8d900;
  font-size: 2.5em; 
}
.mySwiperPartner img {
  width: 130px;
}
#home .elementi {
  background-size: 115vw;
}
#progetti .barra {
  display: none;
}
    #home #progetti h3 {
        margin-left: 0;
                font-size: 1.6em !important;
        line-height: 30px !important;
    }
    .evid p {
      font-size: 25px!important;
      line-height: 30px!important;
    }
#home #video .tit, .tit {
  gap: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  bottom: 35px;
  z-index: 99;
  width: 90%;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  left: 25px;
  right: 25px;
  z-index: 3;
  flex-direction: column;
}
.barraBianca.gialla {
  width: 28px !important;
  margin-top: -3px;
}
#home #about h2 {
  font-size: 1.6em;
  width: 90%;
  letter-spacing: 0;
}
#home #soluzioni h2 {
  width: 95%;
}
#home #soluzioni h2 {
  font-size: 2em;
}
.barraBianca {
  top: 5px;
  width: 63px !important;
}
#home #numeri h3 {
  font-size: 1.8em;
}
#home #numeri .flexMeta h3.bigger {
  font-size: 3em;
}
#home #numeri .flexMeta.sinistra h3 { 
  font-size: 3em;
}
#brevetto #soluzioni .barraBianca {
  display: none;
}
#home #numeri h2 span {
  font-size: 3em;
}
#home #about h1 {
  font-size: 2.3em;
}
.barra span {
  width: 80%;
}
#home #soluzioni .flexMeta .box {
  padding: 40px;
  width: calc(100% - 60px);

}
    #table td {
        padding-bottom: 45px;
                padding-left: 56%;
    } 
    #table td, #table th {
      font-size: 15px;
    }
    #home #soluzioni p {
        font-size: 16px !important;
    }
#home #soluzioni .flexMeta.no .box {
  width: 100%;
  padding: 0;
}
.flexMeta .box {
  width: calc(100% - 80px);
}
.barraBianca {
  top: 4px;
  width: 58px !important;
}
 #soluzioniPage .image-panel {
    height: 30vh; /* Altezza minima per l'immagine */
  }

  #soluzioniPage .panel {
    padding: 2rem 1rem; /* Padding minimo */
  }

  #soluzioniPage h3 {
    font-size: 26px;
  }

  #soluzioniPage p {
    font-size: 16px;
    line-height: 22px;
  }

  .caratt li {
    font-size: 16px;
    width: 100%;
  }
  .contieniBarraBianca.grande {
    margin-left: 30px;
    gap: 23px;
  }
  #contatti .location .mappa .sopra {
    padding: 2rem;
  }
  #about h2 {
    padding-top: 30px;
  }
  #about h2 {
    font-size: 1.7em;
}
#team .boxTeam p {
  width: 80%;
}
  .flexMeta .box {

    width: calc(100% - 42px);
}
.desk {
  display: none;
}
    #contatti .contact {
        margin-top: 40px;
    }
.mob {
  display: inline-block;
}
#brevetto .caratt p {
  text-align:left;
}
    #home #progetti h2 {
        font-size: 2.3em !important;
        line-height: 35px !important;
    }
        .swiper {
        height: auto;
        padding: 10px 0;
    }
        #portfolio #contatti #home #novideo {
        height: 0;
    }
}

@media (max-width: 440px) { 
      .nav-menu a {
        color: #2e62ab;
        text-decoration: none;
        line-height: 27px;
        font-weight: 500;
        font-size: 30px;
      } 
  header .logo img {
    width: 180px;
  }
  #home #about h1 {
    font-size: 2em;
  }
  #home #about h2 {
    font-size: 1.4em;
  }
  .foto.box {
    height: 42vh;
}
#home .elementi {
      background-image: url(https://www.horizonfirm.com/wp-content/uploads/2025/07/elementi-2.webp);
}
#home #soluzioni p {
  font-size: 18px;
}
    .singolaNews #novideo .barraBianca.grande {
        width: 25px !important;
        height: 84px;
    }
    .singolaNews h1 {
              font-size: 25px;
        width: 100%;
        overflow-wrap: anywhere;
        line-height: 27px;
    }
        .singolaNews .tes {
        width: 85% !important;
    }
    .evidenza img {
    margin-top: 50px;
    max-width: 100vw !important;
    max-height: 60vh !important;
    height: 45vh !important;
}
#home #progetti h3 {
  font-size: 2.2em;
}
.barra span {
  width: 70%;
}
#home #video h2 {
  font-size: 8vw;
}
.barraBianca.grande {
  transform: skewX(-16deg);
  top: 11px;
}
#brevetto h1 {
  font-size: 2em;
}
.barraBianca.gialla {
  width: 42px !important;
}
.barraBianca.gialla { 
  height: 63px !important;
}
#brevetto #numeri .tecno p { 
  margin-left: 33px !important;
}
    .testiServiziMob h2 {
        font-size: 19px;
    }
#brevetto #numeri p {
  text-align: left;
  font-size: 19px;
  line-height: 1.3;
}
#about h2 {
  font-size: 1.5em;
  margin-top: 0;
}
.tes p {
  width: 100% !important;
}
h2.prog {
  font-size: 2.4em;
  line-height: 1;
}
    #home #soluzioni .flexMeta .foto.box {
        height: 50vh;
        width: 100%;
    }
}

@media (max-width: 414px) {  
  .contieniBarraBianca.grande {
    gap:20px;
    margin-left: 25px;
  }
  .barraBianca.grande {
    width: 25px;
  }
  #home #video h2 {
    font-size: 12vw;
    margin-top: 7px;
}  
.hamburger {
  width: 33px;
  height: 15px;
}
ul#menu-lingua
 {
  gap:15px;
  padding-inline-start: 20px;
 }
 header .logo img {
  width: 200px;
}
ul#menu-lingua li a {
  font-size: 14px;
}
.barraBianca.gialla {
  width: 25px !important;
}
#home #about h1 {
  font-size: 1.8em;
}
.flexMeta .box {
  width: calc(100% - 35px);
}
#home #about .chi.flexMeta.container {
  padding: 40px 0;
}
#home #about h1 {
  margin-top: -1px;
}
#home #about h2 {
  font-size: 1.3em;
}
    .caratt li {
        font-size: 15px;
    }
#soluzioniPage p {
  font-size: 16px;
  width: 100%;
}

#home #soluzioni h2 {
  font-size: 1.85em;
  width: 95%;
}
#brevetto #soluzioni .flexMeta.no p {
    font-size: 16px;
    font-weight: 500;
    padding-right: 0;
}
    
        #home #progetti p {
        font-size: 16px;
    }
        #home #progetti ul {
        font-size: 16px;
        line-height: 25px;

        }
        #home #brevetto #soluzioni .flexMeta .foto.box {
        height: 50vh;
        }
    #home #brevetto #video h2 {
        font-size: 9.5vw;
    }
    #footer .info a {
    font-size: 16px;
}
.col-destra ul {
  width: 95%;
}
.timeline-navigation-buttons {
             top: 115px;
        gap: 20px;
    }
    #about .contieniBarraBianca h2 {
        padding-top: 0;
    }
    .big-year {
    font-size: 20vw !important;
    }
        .timeline-entries {
        margin-top: -95px;
    }
    #contatti .info h2 {
        width: 90%;
    }
        section#team {
        margin-top: -35vh;
    }
h2.prog {
    font-size: 2em;
}
#home #soluzioni .flexMeta .box {
  padding: 40px 20px;
}
#home #soluzioni p {
  font-size: 16px;
  width: 100%;
}
#home #numeri h3 {
  width: 85%;
}
#home #numeri p {
  font-size: 17px;

}
#container3D {
height: auto!important;
}

canvas {
      position: relative!important;
      top: -150px!important;
    left: 0;
    z-index: 0;
    margin-bottom: -350px;
}
#home #numeri p {
  width: 90% !important;
  text-align: center;
  float: none;
  text-align: center;
  margin: auto;
  margin-top: 35px;
}
#home #numeri h2.sessanta { 
  margin-bottom: -7px;
}
#home #numeri .flexMeta h3.bigger {
  font-size: 2.3em;
}
#home #numeri .flexMeta.destra p {
  float: none;
  margin-top: 30px;
}
#home #numeri .flexMeta.sinistra h3 {
  float:none;
}
#home #progetti h1 {
  font-size: 2.2em;
}
.barra span {
  width: 60%;
}
.hamburger.active .line1 {
  top:3px;
}
}

@media (max-width: 360px) {  
.container {
  width: calc(100% - 20px);
}
header .logo img {
  width: 160px;
}
.nav-menu a { 
  line-height: 25px; 
  font-size: 26px;
}
#novideo h2 {
  font-size: 8vw !important;
}
p {
  font-size: 16px;
  font-weight: 500;
}
#soluzioniPage #about h2 {
  font-size: 1.6em;
}
#home #brevetto #video h2 {
  font-size: 9vw;

}
#brevetto h1 {
  font-size: 1.8em;
}
    .barraBianca.gialla {
        width: 17px !important;
    }
#brevetto .contieniBarraBianca {
  gap: 10px;
}
#brevetto #soluzioni h2 span {
  font-size: 19px;
}
.flexMeta .box {
  width: auto;
}
#brevetto #soluzioni .flexMeta.no p {
  font-size: 16px;
}
#brevetto .caratt p {
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 20px;
}
.flexMeta .box {
  width: calc(100% - 40px);
}
#home #brevetto #soluzioni p {
  width: 100%;
}
#home #brevetto #soluzioni .flexMeta .foto.box {
  height: 60vh;
}p.mm {
    margin-top: 45px !important;
    font-size: 16px !important;
}
#home #numeri .flexMeta {
    padding: 40px 0 40px 0;
}
    #home #brevetto #numeri h2 span {
        font-size: 1.5em;
    }
        #home #numeri p {
        width: 100% !important;
        }
#about #storia h2 {
  font-size: 1.5em;
}
#team .boxTeam p {
  width: 75%;
}
#contatti .location .mappa .sopra { 
  bottom: 20px;
  width: 78%;
}
#contatti .info h2 {
  font-size: 26px;
}
.nav-menu ul {
  gap: 13px;
}
}