/*
1. Google Fonts
2. Variabili globali (:root)
3. Fondamenta (html, body)
4. Tipografia (titoli, paragrafi, link)
5. Componenti (navbar, section, bottoni) 
6. Colori e background
7. Sizing
8. Form
9. Altri layout (griglie e contenitori)
10. 10 Animazioni
*/


/* 1) Fonts */
    

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/* 2) Variabili */

:root {
    --primary-color: #000000;
    --background-color: #fff;  
    --background-color-2:#00000012;
    --background-footer:#26292E;
    --background-grey:#c9c9c933;
    --background-grey-contact:#EBEBEB;
    --pop-color: #12B0E5;
    --link-hover-color:#B02B3B;
    
    --custom-radius:0px;
    --btn-radius:19px 19px 19px 19px;
    --btn-padding: 0.5rem 1rem;
    --section-padding: 120px;    
    --main-font: "Raleway", sans-serif;
    --font-size: 15px;
}


/* 3) Fondamenta (html, body) */

html {
    font-size: 17px; /* Base del rem */
    scroll-behavior: smooth;
    color:  var(--primary-color);
}

body {
    background-color: var(--background-color); 
    color: var(--primary-color);
    font-size: var(--font-size);
    font-family: var(--main-font);
    line-height: 1.6;
    overflow-x: hidden;
}
b, strong {
    font-weight: 700;
}

/* 4) Tipografia (titoli, paragrafi, link) */


h1, h3, h4, h5, h6 {
    line-height: 1.2;
    color: var(--primary-color);
}

h1 {
    font-size: 5rem;
    line-height: 1;
    letter-spacing: -0.25rem;
}

h2 {
    font-size: 4rem;
    line-height: 1.1;
    color:var(--primary-color);
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 2rem;
}

h6{
    color:var(--primary-color);
}

p {
    margin-bottom: 0;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.text-xl{
    font-size: 3rem;
    line-height: 1.1;
}

.text-lg{
    font-size: 2.3rem;
    line-height: 1.1;
}

.text-md{
    font-size: 1.5rem;
    line-height: 1.4;
}

.f-20 {
    font-size: 20px;
}

.bold{
    font-weight: 700;
}

.italic {
    font-style: italic;
}

.letter-spacing-075 {
    letter-spacing: 0.75px;
}
.letter-spacing-09 {
    letter-spacing: 0.9px;
}
.letter-spacing-375 {
    letter-spacing: 3.75px;
}

.f-100 { font-weight: 100; }
.f-200 { font-weight: 200; }
.f-300 { font-weight: 300; }
.f-400 { font-weight: 400; }
.f-500 { font-weight: 500; }
.f-600 { font-weight: 600; }
.f-700 { font-weight: 700; }
.f-800 { font-weight: 800; }
.f-900 { font-weight: 900; }

.gap-col{
    --bs-gutter-x: 5rem;
    --bs-gutter-y: 5rem;
}
.gap-col-x {
    --bs-gutter-x: 5rem;
}
.gap-col-y {
    --bs-gutter-y: 5rem;
}

.width-menu {
    width:75%
}


/* 5) Componenti (bottoni, moduli, ecc.) */

body {
    background-color: var(--background-color);
    color: var(--primary-color);
}
.transparent-navbar {
    transition: background 0.3s ease;
}
.transparent-navbar.scrolled {
    background: var(--background-color);
}
#menuToggle {
    cursor: pointer
}
.menu-linee-navbar{
    padding-right: 15%
}
.menu-linee-link{
    display: flex;
    align-items: center;
    padding-right: 40px;
    font-weight: 500;
}
.menu-linee-link:last-child{
    padding-right: 0px;
}
.menu-linee-link img{
    width: 35px;
    padding-right: 7px;
}

header.bg-dark-grey #navbar a {
    color: #fff;
}
header.bg-dark-grey.scrolled #navbar a {
    color: var(--primary-color);
}


/****** megamenu ******/
#menuFullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #EAEAEA;
  z-index: 1050;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  padding: 2rem;
  overflow-y: auto;
}

#menuFullscreen.show {
    display: flex;
    opacity: 1;
    justify-content: center;
}
.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rem;
  width: 100%;
}
.menu-header .navbar-brand img {
  height: 40px;
}
.menu-header .close-btn {
  font-size: 2.5rem;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.content-menu {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}
.title-col-menu {
    font-size: 40px;
    line-height: 45px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}
ul.link-menu, ul.menu-linee, ul.menu-generale {
    list-style: none;
    padding-left: 0;
}
ul.link-menu {
    margin-bottom:50px;
}
ul.link-menu li {
    position: relative;
    padding-left: 1.5em;
    padding-bottom: 7px;
    font-size: 17px;
    line-height: 25px;
    font-weight: 500;
    text-transform: uppercase;
}
ul.link-menu li:before, ul.menu-linee li:before, ul.menu-generale li:before{
    content: "\e09f";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    left: 0;
    top: 0;
}
ul.menu-linee li {
    position: relative;    
    padding-left: 1.5em;
    margin-bottom: 7px;
    font-size: 22px;
    line-height: 23px;
    font-weight: 700;
}
ul.menu-linee li:before {
    font-weight:400;
    bottom: 0;
    top: auto;
}
.logo-menu-linee {
    max-height: 35px;
}
ul.menu-generale li {
    position: relative;    
    padding-left: .85em;
    padding-bottom: 7px;
    font-size: 40px;
    line-height: 50px;
    font-weight: 400;
    text-transform: uppercase;
}
.titolo-menu {
    font-size: 25px;
    line-height: 30px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
    margin-bottom: 20px;
}


/****** end megamenu ******/

#footer {
    background-color: var(--background-footer);
    color: #fff;
    padding: 100px 0;
}
#footer a {
    color: #fff;
}
#footer a:hover {
    color: var(--link-hover-color);
}
#footer .text-footer {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 100;
}
#footer .mail-footer {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 500;
}
#footer ul{
    list-style-type: none;
}

#footer ul li a, #footer, #footer p{
    font-size: 15px;
}
.titolo-footer {
    font-weight: 900;
    margin-bottom: 2.5rem;
}
.footer-bottom {
    margin-top: 100px;
}
.link-footer {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.1;
}
#scrollTopBtn {
    font-size: 50px;
    cursor:pointer;
}

.bg-dark ul li a, .bg-dark, .bg-dark p, .bg-dark a{
    color: #fff;
}

.bg-dark ul li a:hover, .bg-dark a:hover{
    color: var(--pop-color);
}

section{
    padding-top:var(--section-padding);
    padding-bottom:var(--section-padding);
}

section.half-section, .half-section{
    padding-top:calc(var(--section-padding)/2);
    padding-bottom:calc(var(--section-padding)/2);
}


/* 6) Colori e background */

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--link-hover-color);
}

.bg-grey {
    background-color: var(--background-grey);
}
.bg-dark-grey{
    background-color: var(--background-footer);
}
.bg-dark-grey-white{
    background: linear-gradient(to bottom, var(--background-footer) 90%, #fff 90%);
}
.bg-contact{
    background-color: var(--background-grey-contact);
}


/* 7) Sizing */

.min-vh-30{
    min-height:30vh;
}

.min-vh-50{
    min-height:50vh;
}

.min-vh-100{
    min-height:100vh;
}

.min-vw-30{
    min-width:30vw;
}

.min-vw-50{
    min-width:50vw;
}

.min-vw-100{
    min-width:100vw;
}

.vw-30{
    width:30vw;
}

.vw-50{
    width:50vw;
}

.vw-100{
    width:100vw;
}
.w-60 {
    width: 60%;   
}


/* 8 Form di contatto */
.form-custom input, .form-custom textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #000;
    margin-bottom: 15px;
    padding: 8px 5px 8px 0;
    font-size: 13px;
    width: 100%;
}
.form-custom .wpcf7-list-item {
    margin-left: 0;
    font-size: 13px;
}
.form-custom input[type=checkbox] {
    width: auto;
    margin-right: 7px;
}
.form-custom input[type=submit] {
    margin-top: 40px;
    margin-bottom: 0px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    text-align: left;
}

.form-custom input::placeholder, .form-custom textarea::placeholder {
    text-transform: uppercase;
    letter-spacing: 0.6px
}
.form-custom input::-ms-input-placeholder, .form-custom textarea::-ms-input-placeholder {
    text-transform: uppercase;    
    letter-spacing: 0.6px
}

#contact-soluzioni .form-custom input, 
#contact-soluzioni .form-custom textarea {
    color: #fff;
    border: none;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
}

#contact-soluzioni .form-custom input::placeholder, 
#contact-soluzioni .form-custom textarea::placeholder {
    color: #fff;
}
#contact-soluzioni .form-custom input::-ms-input-placeholder, 
#contact-soluzioni .form-custom textarea::-ms-input-placeholder {
    color: #fff;
}
#contact-soluzioni .form-custom input[type=submit] {
    border: none;
}

.form-custom .button-invia-dx input[type=submit] {
    text-align: right;
}
.form-custom .upload-cv input{
    border: 0;
}

/* 9) Altri layout (contenitori, parti grafiche)*/

#video {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: hidden;
}

#video video {
    /*position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);*/
    object-fit: cover;
    z-index: -1;
    width: 100%;
    height: auto;
}

.pittogramma {
    margin-bottom: 150px;
}
.link-section {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid var(--primary-color);
    width: fit-content;
}
.link-section:hover {
    color: var(--link-hover-color);
    border-bottom: 1px solid var(--link-hover-color);
}

.titolo-home {
    font-size: 60px;
    line-height: 70px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    font-weight: 100;
    margin: 40px 0;
}
.text-home {
    line-height: 25px;
    letter-spacing: .75px;
    font-weight: 400;
}
.text-home p {
    margin-bottom:1rem;
}
.pittogramma-supporto {
  position: relative;
  display: inline-flex;
  justify-content: center;
  width:100%
}

.pittogramma-supporto img {
  display: block;
  position: relative;
  z-index: 1;
  width: 70%;
  height: auto;
}
.title-supporto {
    text-transform: uppercase;
    font-size: 60px;
    line-height: 1;
    font-weight: 500;    
    letter-spacing: 15px;
    text-align: center;
    position: absolute;
    bottom: 10%;
    z-index: 2; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.pittogramma-linee-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
    width:100%
}

.pittogramma-linee-wrapper img {
  display: block;
  position: relative;
  z-index: 1;
  width: 85%;
  height: auto;
}

.box-linee {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.text-section-linee {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 30px;
    font-weight:500;    
    letter-spacing: 3.5px;
    text-align: center;
}
.logo-section-linee {
    margin-top: 80px;
    margin-bottom: 40px;
    width: 100%;
}
.logo-section-linee img{
    height: 100px;
    width: auto;
    margin: 0 auto;
}
.img-section-linee {
    margin-top: 20px;
    width: 100%;
}
.img-section-linee img{
    height: 290px;
    width: auto;
    margin: 0 auto;
}
.link-portale {
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}
.info-menu {
    border-bottom: 1px solid var(--primary-color);
    padding: 1rem 1.5rem;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.titolo-sezione {
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 2.25px;
    font-style: italic;
    border-bottom: 1px solid var(--primary-color);
    display: inline-block;    
}
.height-text {
    min-height: 130px;
}
.lista-monitoraggi {
    /*list-style-image: url("../images/icon-pallinogiallo.png");*/
    list-style: none;
    padding-left:0;
}
.lista-monitoraggi li {
    position: relative;
    padding-left: 2em;
    padding-bottom: 15px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.lista-monitoraggi li:before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 26px;
    background-image: url(../images/icon-pallinogiallo.png);
    position: absolute;
    left: 0;
    top: 0;
    
}
.list-comfort li:before {
    background-image: url(../images/icon-pallinoblu.png);
}
.titolo-section-products {
    font-size: 70px;
    letter-spacing: 3.5px;
    font-weight: 300;
    line-height: 1.2;
}
.tipo-applicazione {
    font-size: 2.8vw;
    letter-spacing: 2.75px;
    font-weight: 100;    
    line-height: 1.1;
    color: #fff;
}

.titolo-digital {
    font-size: 65px;
    letter-spacing: 3.5px;
    font-weight: 400;    
    line-height: 1.2;
}
.text-digital {
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 400;    
    line-height: 1.6;
    margin-top: 3rem;
}
.line-bottom {
    border-bottom: 1px solid #fff;
}
#contact-soluzioni a {
    color: #fff;
}
#contact-soluzioni a:hover {
    color: var(--link-hover-color);
}
.padding-bottom-section {
    padding-bottom: var(--section-padding);
}



/* --- Stili Base per OwlCarousel (Come prima) --- */
.custom-carousel .item .carousel-image, .custom-carousel-applicazioni .item .carousel-image {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg-yellow-gradient {
    background: #FFED00;
    background: linear-gradient(225deg, rgba(255, 237, 0, 1) 0%, rgba(249, 233, 1, 1) 30%, rgba(233, 223, 5, 1) 50%, rgba(207, 206, 12, 1) 70%, rgba(170, 183, 22, 1) 95%, rgba(163, 179, 24, 1) 100%);
}
.bg-blu-gradient {
    background: #00A9BE;
    background: linear-gradient(225deg, rgba(0, 169, 190, 1) 0%, rgba(0, 163, 183, 1) 30%, rgba(0, 147, 165, 1) 50%, rgba(0, 122, 135, 1) 70%, rgba(0, 87, 94, 1) 95%, rgba(0, 79, 85, 1) 100%);
}

.custom-carousel .item img, .custom-carousel-applicazioni .item img  {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Stili per le Frecce di Navigazione --- */
.custom-carousel.owl-carousel .owl-nav button.owl-prev,
.custom-carousel.owl-carousel .owl-nav button.owl-next {
    
    color: #000;
    font-size: 80px;
    padding: 5px 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: background-color 0.3s ease;
}

.custom-carousel.owl-carousel .owl-nav button.owl-prev:hover,
.custom-carousel.owl-carousel .owl-nav button.owl-next:hover {
    background: transparent;
}

/* --- IL CSS FONDAMENTALE PER L'ALLINEAMENTO E L'ESTENSIONE --- */

.carousel-full-right {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 15px; 
    overflow: hidden;
}

@media (min-width: 576px) { /* sm breakpoint: .container è 540px */
    .carousel-full-right {
        padding-left: calc(((100vw - 540px) / 2) + 15px);
    }
}
@media (min-width: 768px) { /* md breakpoint: .container è 720px */
    .carousel-full-right {
        padding-left: calc(((100vw - 720px) / 2) + 15px);
    }
}
@media (min-width: 992px) { /* lg breakpoint: .container è 960px */
    .carousel-full-right {
        padding-left: calc(((100vw - 960px) / 2) + 15px);
    }
}
@media (min-width: 1200px) { /* xl breakpoint: .container è 1140px */
    .carousel-full-right {
        padding-left: calc(((100vw - 1140px) / 2) + 15px);
    }
}
@media (min-width: 1400px) { /* xxl breakpoint (se usi Bootstrap 5): .container è 1320px */
    .carousel-full-right {
        padding-left: calc(((100vw - 1320px) / 2) + 15px);
    }
}

.custom-carousel.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%; 
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none; 
    margin-top: 0
}

.custom-carousel.owl-carousel .owl-nav button.owl-prev,
.custom-carousel.owl-carousel .owl-nav button.owl-next {
    pointer-events: auto;
}

.custom-carouselowl-carousel .owl-nav button.owl-prev {
    left: calc(50% - 50vw + 15px); 
}

.custom-carousel.owl-carousel .owl-nav button.owl-next {
    right: 15px; 
}

@media (min-width: 576px) {
    .custom-carousel.owl-carousel .owl-nav button.owl-prev {
        left: calc(50% - 50vw + ((100vw - 540px) / 2) + 15px);
    }
}
@media (min-width: 768px) {
    .custom-carousel.owl-carousel .owl-nav button.owl-prev {
        left: calc(50% - 50vw + ((100vw - 720px) / 2) + 15px);
    }
}
@media (min-width: 992px) {
    .custom-carousel.owl-carousel .owl-nav button.owl-prev {
        left: calc(50% - 50vw + ((100vw - 960px) / 2) + 15px);
    }
}
@media (min-width: 1200px) {
    .custom-carousel.owl-carousel .owl-nav button.owl-prev {
        left: calc(50% - 50vw + ((100vw - 1140px) / 2) + 15px);
    }
}
@media (min-width: 1400px) {
    .custom-carousel.owl-carousel .owl-nav button.owl-prev {
        left: calc(50% - 50vw + ((100vw - 1320px) / 2) + 15px);
    }
}

.text-applicazioni {
    font-size: 45px;
    line-height: 50px;
    font-weight: 400;
}



.title-device {
    font-size: 50px;
    letter-spacing: 2.5px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 2rem;
    text-transform: uppercase;
}
.text-device {
    font-size: 15px;
    letter-spacing: 0.75px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 50px;
    text-transform: uppercase;
}
.download-app {
    font-size: 15px;
    letter-spacing: 0.75px;
    font-weight: 400;
    line-height: 21px;
    text-transform: uppercase;
}
.download-app a span {
    font-weight: 700;
}
.download-app a {
    margin-bottom: 8px;
    display: block;
}

.device {
  position: relative;
  width: 300px;
  height: 600px;
  /*background-color: #666;*/
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.device-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease;
}

.device-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  opacity: 0;
    border-radius: 1.5rem;
}

.vertical-img {
  opacity: 1;
  z-index: 1;
}

.horizontal-img {
  z-index: 2;
}

.portale-text {
    opacity: 0;
    transform: translateY(50px); 
}
.testo-top-chi-siamo {
    font-weight: 200;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: 2px;
}
.testo-chi-siamo {
    line-height: 30px;
    letter-spacing: 0.75px;
}
.testo-chi-siamo p {
    margin-bottom:1rem;
}


#move {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marque {
  font-size: 10vw;
  line-height: 10vw;
  font-weight: 400;
  letter-spacing: 8px;
  padding-right: 5vw;
  white-space: nowrap;
}
.title-contact {
    font-size: 70px;
    line-height: 80px;
    font-weight: 400;
}
.title-banner-contatti {
    font-size: 70px;
    line-height: 80px;
    font-weight: 300;
    letter-spacing: 3.5px;
}
.form-soluzioni {
    margin-bottom: 100px;
}
.title-soluzione {
    font-size: 60px;
    line-height: 70px;
    letter-spacing: 3px;
    font-weight: 300;
}
.text-sx-soluzioni{
    font-style: italic;
}
.text-sx-soluzioni strong, .text-sx-soluzioni b{
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 3.6px;
    font-weight: 600;
}
.img-banner-soluzioni {
    object-fit: cover;
    width: 100%;
}
.title-caption{
    font-size: 40px;
    line-height: 50px;
    letter-spacing: 2.5px;
    font-weight: 300;
}
.text-caption{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 1.5px;
    font-weight: 300;
    font-style: italic;
}
#box-product-solution .box-round {
    border-radius: 100%;
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    padding: 20px 50px;
    overflow: hidden; /* importante per contenere lo sfondo sfocato */
}

#box-product-solution .box-round.bg-blu-gradient {
    background: radial-gradient(circle, rgba(0, 87, 94, 1) 0%, rgba(0, 122, 135, 1) 41%, rgba(0, 147, 165, 1) 60%, rgba(0, 163, 183, 1) 75%, rgba(0, 169, 190, 1) 100%);  
    /*filter: blur(1.2vmax);*/
}

.titolo-prodotto-solution {
    font-weight:500;
    line-height: 18px;
    letter-spacing: 3.75px;
    position: relative;
}
.titolo-prodotto-solution span {
    position: relative;
}
/*.titolo-prodotto-solution:before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url(../images/pallinogiallo-menu.svg);
    position: absolute;
    left: -15px;
    top: 0;
}*/
.icon-solution-prodotto {
    position:absolute;
    left: -15px;
    top: -2px;
    width: 28px;
}
.title-scopri-cerchio {
    font-size:13px;
    line-height: 20px;
    letter-spacing: 1.95px;
    text-transform: uppercase;
}
.link-scopri-cerchio {
    font-size:13px;
    line-height: 20px;
    font-style: italic;
    font-weight: 600;
}
.titolo-prodotto {
    font-size: 60px;
    line-height: 80px;
    letter-spacing: 3.5px;
    font-weight: 300;
    position: relative;
}
.titolo-prodotto span{
    position: relative;
}
.titolo-prodotto:before {
    content: "";
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: -30px;
    bottom: 0;
}
.titolo-prodotto.pallino-giallo:before {
    background-image: url(../images/pallinogiallo-menu.svg);
}
.titolo-prodotto.pallino-blu:before {
    background-image: url(../images/pallinoblu-menu.svg);
}
.descrizione-prodotto {
    line-height: 30px;
    letter-spacing: 0.75px;
}
.caption-descrizione-prodotto {
    font-size: 13px;
    line-height: 25px;
    letter-spacing: 0.6px;
    font-style: italic;
}
.soluzione-prodotto {
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
}
.linea-codice-prodotto {
    padding-bottom: 80px;
}

.text-funzionamento p{
    margin-bottom: 10px
}

.tabs-carousel {
    border: none;
}
.tabs-carousel .nav-item {
  text-align: left;
}
.tabs-carousel .nav-link {
    border: none;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 5px;
    opacity:0.20;
    cursor: pointer;
    color: #000!important;
    padding-left: 0;
    padding-right: 75px;
    text-transform: uppercase;
}
.tabs-carousel .nav-link:last-child {
    padding-right: 10px;
}
.tabs-carousel .nav-link.active {
    opacity:1;
    background: transparent;
}

.tabs-supporto {
    border: none;
    text-align: center;
    display: inline-flex;
    width: 100%;
    justify-content: center;
}
.tabs-supporto .nav-item {
  text-align: center;
}
.tabs-supporto .nav-link {
    border: none;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 3px;
    cursor: pointer;
    color: #000!important;
    padding-left: 45px;
    padding-right: 45px;
    text-transform: uppercase;
    border-radius: 0;
    border-right: 1px solid #000!important;
}
.tabs-supporto .nav-link:last-child {
    border-right: 0!important;
}
.tabs-supporto .nav-link.active {
    background: transparent;
    font-weight:700
}

.desc-funzionamento {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.9px;
    font-weight: 300;
    font-style: italic;
}
.funzionamento {
    margin-top: 150px;
    justify-content: end;
}
.icon-funzionamento img {
    height: 60px;
}
.list-funzionamento {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0
}
.list-funzionamento li {
    position: relative;
    padding-left: 30px;
    padding-bottom: 10px;
    letter-spacing: 0.75px;
    line-height: 25px;
}
.list-funzionamento li:last-child {
    padding-bottom: 0px;
}
.list-funzionamento li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 8px;
  height: 8px;
  background-image: url(../images/pallinogiallo-menu.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.title-prodotti-correlati {
    font-size: 40px;
    line-height: 80px;
    letter-spacing: 2.5px;
    font-weight: 300;
    padding-left: 40px;
    position: relative;
    margin-bottom: 80px;
}
.title-prodotti-correlati span{
    position: relative;
}
.title-prodotti-correlati:before {
    content: "";
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url(../images/pallinogiallo-menu.svg);
    position: absolute;
    left: 0px;
    bottom: 0;
}
.text-prodotto-correlato {
    line-height: 25px;
}
.caption-linea {
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 10px; 
    font-weight: 200;
}
.text-soluzioni-linea {
    font-size: 25px;
    line-height: 35px;
    text-transform: uppercase;
    letter-spacing: 1.25px;    
    font-weight: 200;
}
.solution-linee strong{
    font-weight: 500;
}
.line-separator {
    width:100%;
    height: 1px;
    background-color: var(--primary-color);
    margin: 12px 0;
}
.filter-macro {
    text-transform: uppercase;
    margin: 0 20px;
    cursor:pointer;
    letter-spacing: 0.75px;
}
.filter-macro:first-child {
    margin-left: 0;
}
.filter-macro:last-child {
    margin-right: 0;
}
.filter-macro.active {
    font-weight: 700;
}
.form-check-label {
    text-transform: uppercase;
    cursor:pointer;
    letter-spacing: 0.75px;
}
.filter-checkbox {
    border-color: var(--primay-color);
    margin-right: 5px;
}
.filter-checkbox:checked {
    background-color: #000;
    border-color: #000;
}
.filter-checkbox:focus {
    box-shadow: none;
}


/* 10) Animazioni */


.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 1;
}
.circle-left {
    width: 350px;
    height: 350px;
}
.circle-right {
    width: 450px;
    height: 450px;
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.circle-center {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1;
    width: 300px;
    height: 300px;
}

.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
    width:100%;
}

.image-layer {
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.side-text {
    font-size: 35px;
    line-height: 40px;
    font-weight: 100;
    letter-spacing: 1.75px;    
    text-align: left;
}


.text-initial,
.text-final {
    width: 80%;
    font-size: 60px;
    line-height: 70px;
    font-weight: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.text-final {
  transform: translate(-50%, 100%) scale(1);
}


.link-section i {
  transition: transform 0.3s ease;
  display: inline-block;
}

.link-section:hover i {
  transform: translate(4px, -4px);
}
.link-footer i {
  transition: transform 0.3s ease;
  display: inline-block;
}

.link-footer:hover i {
  transform: translate(4px, -4px);
}


.digital-control {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}


.link-download {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.1;
    margin-bottom:10px;
    display: inline-block;
}
.row-table {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}
.title-cat-supporto {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 1.5px;
    font-weight: 500;
    padding: 10px 0;
    cursor: pointer;
}

#accordionCatSup .accordion-item {
    border: 0;
    border-bottom: 1px solid #000;
    padding: 40px 0;
}
#accordionCatSup .accordion-item:last-child {
    border: 0;
}

.list-tutorial {
    list-style: none;
}
.list-tutorial li a {
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: uppercase;
}
.list-tutorial li i {
    color: var(--link-hover-color);
    font-size: 25px;    
}
.title-single-tutorial {
    font-size: 70px;
    letter-spacing: 3.5px;
    font-weight: 300;
    line-height: 1.2;
}
.pittogramma-lavora-con-noi {
    position: absolute;
    right: 5%;
    width: 500px;
    transform: translateY(-50%) translateY(-30%);
    z-index: 2;
    pointer-events: none;
}
.title-candidatura-spontanea, .titolo-posizione-aperta {
    font-size: 70px;
    letter-spacing: 3.5px;
    font-weight: 100;
    line-height: 1.2;
}
.title-posizioni {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
.desc-posizione-aperta {
    font-size: 15px;
    letter-spacing: 0.75px;
    font-weight: 400;
    line-height: 30px;
}
.btn-posizione-aperta {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
}
.line-posizione {
    border-top: 1px solid #000;
    padding: 40px 0; 
}
.line-posizione:last-child {
    border-bottom: 1px solid #000;
}

.titolo-applicazione {
    font-size: 45px;
    line-height: 50px;
    font-weight: 200;
}
.text-applicazione {
    padding-top: 50px;
}
.text-applicazione p{
    margin-bottom: 1rem;
}
.titolo-section-applicazione {
    font-size: 70px;
    letter-spacing: 3.5px;
    font-weight: 300;
    line-height: 1;
}

.text-red{
    color: #E63B11;
}

.elenco-freccia, .elenco-pallino {
    padding-left: 0;
    list-style: none;
}
.elenco-freccia li, .elenco-pallino li {
    position: relative;
    padding-left: 1.5em;
}
.elenco-freccia li:before {
    content: "\e09f";
    font-family: "Font Awesome 6 Pro";
    display: inline-block;
    font-size: 18px;
    font-weight: 300;
    position: absolute;
    left: 0;
    top: 0;
    color: #E63B11; 
}
.elenco-pallino li:before {
    content: "\f111";
    font-family: "Font Awesome 6 Pro";
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 0;
    color: #E63B11; 
}

.title-appl-pratiche {
    font-size: 55px;
    letter-spacing: 2.75px;
    font-weight: 100;
    line-height: 1;
  color: #ABABAB;
}

.elenco-numerato {
  list-style: none;
  counter-reset: sezione;
  display: flex;
  flex-direction: column;
  gap: 16px; 
  padding: 0;
  margin: 0;
}

.elenco-numerato li {
  counter-increment: sezione;
  position: relative;
  margin-bottom: 20px;
  padding-left: 60px;
  font-size: 1rem;
  line-height: 1.4;
  mix-blend-mode: difference; 
}

.elenco-numerato.elenco-black li { 
    mix-blend-mode: normal;
}
.elenco-numerato.elenco-black li::before { 
    border: 1px solid #000;
    color: #000;
    mix-blend-mode: normal;
}
.elenco-numerato li::before {
  content: counter(sezione);
  position: absolute;
  left: 0;
  top: 0;
  width: 35px;
  height: 35px;
  display: flex;                
  align-items: center;    
  justify-content: center;
  background-color: transparent;
  border: 1px solid #ABABAB;
  border-radius: 50%;
  font-weight: 200;
  color: #ABABAB;
  mix-blend-mode: difference;
  font-size: 1.5rem;
}

.box-vantaggi {
    width: 65%;
}
.box-vantaggi img{
    height: 65px;
}

.img-applicazioni-top {
    margin-top: -75px;
}
.pittogramma-margin-top {
    margin-top: -75px;
}

.gslide-media.gslide-image {
    background-color: #fff;
}