/* stile di default di ogni elemento per evitare inregolarità */
*,
*::before,
*::after { 
    box-sizing: border-box;
} 
*{
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}
/* stile  generale della pagina e dell'html*/
html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth; /* Scroll fluido */
    overflow-x: hidden;
    display: block;
    scroll-padding-top: calc(clamp(50px, 7vh, 1000px) - 1px);
}
body{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    background-color: #fff;
}



/* creazione dei font */
@font-face {
    font-family: 'Eurostile BQ Regular';
    src: url('font/Eurostile%20BQ/Eurostile%20BQ%20Regular/Eurostile%20BQ%20Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Eurostile MN Medium';
    src: url('font/Eurostile%20MN/Eurostile%20MN%20Medium/Eurostile%20MN%20Medium.ttf') format('opentype');
}
@font-face {
    font-family: 'Eurostile Extended Bold';
    src: url('font/Eurostile%20Extended%20Bold.ttf') format('opentype');
}
@font-face {
    font-family: 'Eurostile Oblique';
    src: url('font/Eurostile%20Oblique.otf') format('opentype');
}


/* scelta della grandezza dei font */
h1, h2, h3, .footer-policy-font{
    font-family: 'Eurostile MN Medium';
}
h1{
    font-size: clamp(26px, 1.7vw, 50px);
}
h2{
    font-size: clamp(18px, 1.4vw, 45px);
}
h3{
    font-size: clamp(17px, 1.1vw, 40px);
    color: #1352b0;
}
.title-of-section{
    font-family: 'Eurostile Extended Bold', Arial, sans-serif;
}
p{
    font-family: 'Eurostile BQ Regular';
    font-size: clamp(15px, 1vw, 28px);
}
a{
    color: blue;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent; /* Rimuove effetto scuro su iOS/Android */
    -webkit-touch-callout: none; /* Disabilita menu contestuale su iOS */
    outline: none; /* Nessun bordo blu al focus */
}
a:hover{
    color: rgb(112, 165, 230);
}
a:focus, a:active {
  outline: none;
  background-color: transparent; /* Previene sfondo grigio su Android */
}
.menu, .menu a, .dropdown a {
    font-size: clamp(17px, 0.9vw, 27px);
}
.footer-font{
    font-size: clamp(15px, 0.8vw, 25px);
}
.footer-policy-font{
    font-size: clamp(10px, 0.7vw, 25px);
}

/* posizionamenti */
.midright{
    align-items: flex-end;
    justify-content: center;
}

/* tipi di background */
.background-ececec{
    background-color: #ececec;
}

/* impostazione degli sfondi di background */
.background-image-container{
    position: fixed;
    width: 100vw;
    height: calc(100vh - clamp(50px, 7vh, 1000px));
    overflow: hidden;
    z-index: -1 ;
    top: calc(clamp(50px, 7vh, 1000px));
}
/* animazione delle immagini */
.background-image{
    position: absolute;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform-origin: center center;
    transform: scale(1);
    animation: slideAnim 30s linear infinite;
    animation-fill-mode: forwards;
}
.background-image-left{ /* classe di prova */
    background-position: left;
}

/* Slide 1 */
.img1 {
    background-image: url('assets/backgroundHome_1.jpeg');
    animation-delay: 0s;
}
/* Slide 2 */
.img2 {
    background-image: url('assets/backgroundHome_2.jpeg');
    animation-delay: 10s;
}
/* Slide 3 */
.img3 {
    background-image: url('assets/backgroundHome_3.jpeg');
    animation-delay: 20s;
}
@keyframes slideAnim {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  6.67% {
    opacity: 1;
    transform: scale(1.02);
  }
  33.33% {
    opacity: 1;
    transform: scale(1.1);
  }
  40% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}


/* impostazione generale delle section */
section{
    position: relative;
    display: flex;
    justify-content: center;
    height: calc(100vh - clamp(50px, 7vh, 1000px));  /* ogni sezione occupa almeno tutta l'altezza del viewport */
    width: 100%;
    scroll-snap-align: start; /* durante lo scroll l'inizio della sezione si allinea in alto */
    background-color: #fff;
    z-index: 1;
    margin-bottom: -1px;
}
.first-section{
    margin-top: clamp(50px, 7vh, 1000px);
    margin-bottom: 0;
}


/* zona principale di ogni testo */
.content-block{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    max-width: 2660px;
    padding: 0 50px 70px 50px;
}
/* zona di testo flex */
.flex-text-container{
    display: flex;
    justify-content: space-evenly;
    min-height: max-content;
    padding: 20px;
    overflow: hidden;
}
/* link senza stile */
.no-style-link{
    text-decoration: none;
    color: inherit;
}
.no-style-link:hover {
    color: inherit;
}
/* classe visibile su mobile */
.mobile-screen{
    display: none;
}
/* classe visibile su desktop */
.desktop-screen{
    display: block;
}
/* classe con space-between */
.space-between{
    justify-content: space-between;
}

/* impostazione del menu */
nav{
    display: flex;
    justify-content: center;
    position: fixed;
    margin: 0;
    width: 100%;
    height: clamp(50px, 7vh, 1000px);
    background-color: #fff;
    z-index: 1000;
    padding: 0 50px;
    border-bottom: 1px solid #ececec;
}
.navbar{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* impedisce al testo di andare a capo*/
    width: 100%;
    max-width: 2560px;
    background-color: #fff;
    align-items: center;
    height: 100%;
    white-space: nowrap; /* impedisce al testo di andare a capo*/
}
nav img{
    padding: 0.4vw 0;
    height: 100%;
}
nav .menu{
    display: flex;
    list-style-type: none;
    margin-left: auto;
    gap: 25px;
    font-family: 'Eurostile BQ Regular';
}
nav .hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    width: 2em;
    height: 2em;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    z-index: 1001;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent; /* iOS Safari */
    -webkit-touch-callout: none; /* Disabilita menu contestuale su iOS */
    outline: none; /* Rimuove il bordo blu di focus */
}
nav .hamburger span {
  display: block;
  width: 90%;
  height: 2px;
  background-color: black;
  transition: all 0.3s ease;
}

nav .hamburger:focus {
    outline: none; /* Anche qui */
}
nav .hamburger:active {
    background-color: transparent; /* Rimuove colore di sfondo all'attivazione */
}
nav .hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 3.5px);
}

nav .hamburger.active span:nth-child(2) {
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  background: transparent;
}

nav .hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -3.5px);
}
nav .menu a{
    text-decoration: none;
    color: black;
    display: inline-flex;
    align-items: center;
    height: 1.5em;
    gap: 1px;
    cursor: pointer;
}
nav .menu .icon {
    transition: transform 0.4s ease;
    transform-origin: center;
    transform: rotate(0deg);
}
nav .menu a:hover .icon{ /* possibile rimozione futura */
    transform: rotate(-180deg);
}
nav a:hover{
    color: gray;
}

/* Stile del dropdown */
.dropdown {
    display: inline-block;
    position: relative;
}
.dropdown .dropdown-content {
    display: none;
    position: absolute;
    min-width: 130%;
    z-index: 1000;
    background-color: #fff;
    left: -15%;
    text-align: center;
}
/* Pseudo-elemento per disegnare i bordi */
.dropdown .dropdown-content::before {
    content: "";
    position: absolute;
    top: calc((7vh - 1.5em) / 2);
    left: 0;
    right: 0;
    bottom: 0;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    pointer-events: none;
}
.dropdown .dropdown-content a{
    padding: 10px;
    text-decoration: none;
    display: block;
    height: auto;
}
.dropdown .dropdown-content a:first-child{
    padding-top: calc((7vh - 1.5em) / 2);
}
.dropdown.active .dropdown-content {
        display: block;
}
.dropdown:hover > a {
    color: gray;
}
.dropdown:hover .icon {
    transform: rotate(-180deg);
}
.dropdown .dropdown-content a:hover{
    color: blue;
}
/* stile per la freccia di apertura del dropdown */
.arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}
.arrow.rotated {
    transform: rotate(-180deg) !important;
}

/* Freccia animata solo con .rotated */
.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.arrow.rotated {
  transform: rotate(180deg);
}


/* stile delle 2 freccette d'indicazione */
.double-arrow{
    position: absolute;
    opacity: 0;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    z-index: 1000;
    width: clamp(10px, 2%, 50px);
    display: inline-block;
    cursor: pointer;
    animation: fadeInUp 1s ease-out 2s forwards, pulseScale 3s infinite ease-in-out;
}
@keyframes pulseScale {
    0%, 100% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.3);
    }
}



/* stile della section home */
.home-first-section-background{
    background-color: transparent;
}
/* frase iniziale nella home */
.home-first-section-text{
    position: absolute;
    height: auto;
    bottom: 10%;
    right: 15%;
    width: auto;
    min-width: 500px;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 1;
    padding: 20px;
    animation: fadeInUp 1s ease-out 1s forwards;
    color: #000;
}
.home-first-section-text h1{
    font-size: clamp(28px, 4em, 75px); 
    line-height: 1.1em;
    margin: 0 10px;
}
/* comparsa della scritta */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }   
}

.menu-container{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 0.9em;
}
.menu-block{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: auto;
    width: calc((100% - 1.8em) / 3);
    background-size: cover; 
    background-position: center;
    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
    flex-wrap: wrap;
}
.menu-block h2 {
    font-family: 'Eurostile Oblique' ,Arial, sans-serif;
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #fff;
    margin-left: 10px;
    width: max-content;
}
.menu-block h2::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #1171bd;
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.menu-block h2:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* stile del menu a scorrimento verticale */
.main-vertical-content-block{
    position: relative;
    scroll-snap-type: y mandatory;
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    padding: 0 20px;
}
.vertical-content-block{
    margin-top: 10px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    max-height: 90%;
    overflow-y: hidden;
    width: 100%;
    scroll-snap-align: center;
    gap: 2%;
    transition: box-shadow 0.3s ease;
    padding: 20px;
}
.vertical-content-block:hover {
    box-shadow: -6px 0 20px rgba(3, 10, 20, 0.6);
}



/* stile del menu a scorrimento orizzontale */
.main-horizontal-content-block{
    display: flex;
    flex-direction: row;
    scroll-snap-type: x mandatory;
    width: 100%;
    max-width: 3840px;
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    background-color: #ececec;
}
.horizontal-content-block{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    min-width: 26%;
    scroll-snap-align: center;
    gap: 2%;
    padding: 20px;
}
.main-horizontal-content-block .horizontal-content-block > div{
    width: 100%;
    white-space: normal;
}
.main-horizontal-content-block .horizontal-content-block > img{
    max-width: 100%;
}



/* stile del menu dei servizi */
.home-services .link{
    font-family: 'Eurostile BQ Regular' , Arial, sans-serif;
}
.home-services hr{
    display: none;
    width: 50%;
}



.home-company-text{
    background-color: rgba(48, 111, 213, 0.4);
    max-width: 50%;
}
.home-company-menu{
    height: 60%;
    color: #fff;
    padding: 20px 0 !important;
}



.home-career-main-container{
    flex-direction: row;
}
.home-career-left-content{
    position: relative;
    width: 50%;
    height: 100%;
}
.home-career-right-content{
    width: 45%;
    height: 100%;
}
.home-career-menu{
    height: 100%;
    flex-direction: column;
    padding: 20px 0 !important;
}
.home-career-menu-block{
    flex: 1;
    width: 100%;
    color: #fff;
}


/* stile footer */
.footer-main-content{
    width: 90%;
    height: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
}
.footer-main-content > iframe{
    width: 60%;
    max-height: 65%;
}
.footer-img {
    width: 90%; 
    height: auto;
    max-height: 110px;
    min-height: 30px;
    justify-content: center;
}
.footer-link-image{
    width: 35%;
}
.footer-contact{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: max-content;
    text-align: center;
    margin-left: auto;
}
.footer-main-content a {
    text-align: center;
    height: min-content;
}
.footer-policy{
    position: absolute;
    bottom: 0;
    background-color: #2a2929;
    padding: 20px 0;
    min-height: max-content;
    width: 100%;
    height: auto;
    max-height: 110px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.footer-icon {
    height: clamp(14px, 1.6vw, 40px);
    width: auto;
}
/* massima altezza per browser che lo permettono */
@supports (height: 100dvh) {
    section{
        height: calc(100dvh - clamp(50px, 7vh, 1000px) + 1px);
    }
    .background-image{
        height: calc(100dvh - clamp(50px, 7vh, 1000px) + 1px);
    }
}

/* prova mappa apple in pausa 
#container {
    width: 40%;
    height: 80%;
}
.landmark {
    width: 250px;
    padding: 7px 0 0 0;
    background: rgba(247, 247, 247, 0.75);
    border-radius: 5px;
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
    font-family: Helvetica, Arial, sans-serif;
    transform-origin: 0 10px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.landmark h1 {
    margin-top: 0;
    padding: 5px 15px;
    background: #2aaef5;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 300;
}

.landmark section {
    padding: 0 15px 5px;
    font-size: 14px;
}

.landmark section p {
    margin: 5px 0;
}

.landmark:after {
    content: "";
    position: absolute;
    top: 7px;
    left: -13px;
    width: 0;
    height: 0;
    margin-bottom: -13px;
    border-right: 13px solid #2aaef5;
    border-top: 13px solid rgba(0, 0, 0, 0);
    border-bottom: 13px solid rgba(0, 0, 0, 0);
}

@-webkit-keyframes scale-and-fadein {
    0% {
        -webkit-transform: scale(0.2);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-and-fadein {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}*/

/* Cambiamento di immagine di background in verticale */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
    /* Slide 1 */
    .img1 {
        background-image: url('assets/backgroundHome_1-Mobile.jpeg');
    }
    /* Slide 1 */
    .img2 {
        background-image: url('assets/backgroundHome_2-Mobile.jpeg');
    }
    /* Slide 3 */
    .img3 {
        background-image: url('assets/backgroundHome_3-Mobile.jpeg');
    }
    .background-image-left{ /* torna normale a causa delle nuove immagini */
        background-position: center;
    }
}

@media (pointer: fine) { /* effetti disponibili solo in dispositivi non touch */
    .dropdown:hover .dropdown-content {
        display: block;
    }
    /* Overlay nero trasparente solo su quel blocco */
    .menu-block::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0); /* trasparente di default */
    transition: background-color 0.3s ease;
    z-index: 1;
    pointer-events: none;
    }

    .menu-block:hover::after {
    background-color: rgba(0, 0, 0, 0.2); /* scurisce solo questo */
    }

    /* Contenuto sopra l'overlay */
    .menu-block > * {
    position: relative;
    z-index: 2;
    }
}

@media (pointer: coarse) and (min-width: 951px){ /* rimuove effetti indesiderati su dispositivi touch */
    .menu a:hover,
    .menu .dropdown:hover,
    .menu a:hover .arrow {
        transform: none;
        color: inherit;
        background: none;
        text-decoration: none;
    }
    .dropdown .dropdown-content a:hover{
        color: inherit;
    }
    .dropdown:hover > a {
        color: black;
    }
    nav .menu a:hover .icon{ /* possibile rimozione futura */
        transform: none;
    }
    .dropdown:hover .icon {
        transform: none;
    }
    .vertical-content-block:hover {
        box-shadow: -6px 0 20px rgba(3, 10, 20, 0.6);
    }
}

/* responsive */
@media only screen and (max-width: 2200px) and (min-height: 1800px){
    .mobile-screen{
        display: block;
    }
    .desktop-screen{
        display: none !important;
    }
}
@media only screen and (max-width: 1620px) and (min-height: 1600px){
    .mobile-screen{
        display: block;
    }
    .desktop-screen{
        display: none !important;
    }
}
@media only screen and (max-width: 1620px) and (min-height: 1600px){
    .mobile-screen{
        display: block;
    }
    .desktop-screen{
        display: none !important;
    }
}
@media only screen and (max-width: 1300px) and (min-height: 1200px){
    .mobile-screen{
        display: block;
    }
    .desktop-screen{
        display: none !important;
    }
}
@media only screen and (max-width: 985px) {
    .mobile-screen{
        display: block;
    }
    .desktop-screen{
        display: none !important;
    }
}
@media only screen and (max-width: 1320px) and (max-height: 870px) and (min-width: 930){
    .content-block{
        padding-bottom: 5% !important;
    }
    .home-services h1{
        margin-bottom: 5px;
    }
}
@media only screen and (max-height: 1100px){
    .menu-block h2{
        margin-bottom: 0;
        margin-top: 0;
    }
}
@media only screen and (max-width: 1200px){
    .content-block h1{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .content-block{
        padding-bottom: calc(2% + 25px);
    }
    .home-first-section-text{
        min-width: unset;
        right: auto;
    }
    .home-first-section-text h1{
        font-size: clamp(28px, 1.7vw, 60px);
    }
    .menu-container{
        gap: 0.6em;
        padding: 0;
    }
    .menu-block h2{
        margin-left: unset;
        margin-bottom: 0;
    }
    .footer-policy{
        padding: 10px 0;
        justify-content: space-between;
    }
}
@media only screen and (max-width: 950px){ /* responsive per dispositivi mobile */
    html, body{
        scroll-padding-top: calc(clamp(50px, 7vh, 60px) - 1px);
    }



    h1{
        font-size: clamp(26px, 1.7vw, 60px);
    }
    h2{
        font-size: clamp(18px, 1.5vw, 60px);
    }
    h3{
        font-size: clamp(17px, 1.1vw, 60px);
    }
    p{
        font-size: clamp(15px, 1vw, 60px);
    }



    /* impostazione font */
    .menu, .menu a, .dropdown a {
        font-size: clamp(17px, 1em, 27px);
    }



    /* zona principale di ogni testo */
    .content-block{
        padding: 0 16px 40px 16px;
    }



    /* impostazione del menu da mobile */
    nav{
        height: clamp(50px, 7vh, 60px);
        padding: 0 16px;
    }
    nav img{
        padding: 0.6vw 0;
    }
    nav .menu{
        display: none;
        flex-direction: column;
        background-color: white;
        position: absolute;
        top: clamp(50px, 7vh, 60px);
        left: 0;
        width: 100%;
        z-index: 1000;
        padding: 16px;
        gap: 1em;
        margin-block-start: 0;
        margin-block-end: 0;
    }
    nav .hamburger {
        display: flex;
        color: black;
    }
    nav .menu.open {
        display: flex;
    }
    nav .menu a:hover .icon {
        transform: none;
    }
    nav a:hover{
        color: inherit;
    }
    .dropdown .dropdown-content {
        display: none;
        position: static;     /* non assoluto */
        width: 100%;
        z-index: 1000;
        background-color: #fff;
        padding-left: 15px;
        text-align: left;
    }
    /* Pseudo-elemento per disegnare i bordi */
    .dropdown .dropdown-content::before {
        content: "";
        position: absolute;
        top: calc((7vh - 1.5em) / 2);
        left: 0;
        right: 0;
        bottom: 0;
        border: none;
        pointer-events: none;
    }
    .dropdown .dropdown-content a:first-child{
        padding-top: 10px;
    }
    .dropdown .dropdown-content a:last-child{
        padding-bottom: 0px;
    }
    .dropdown:hover .dropdown-content { /* rimozione effetto hover comparsa dropdown */
        display: none;
    }
    .dropdown.active .dropdown-content {
        display: block;
    }
    .dropdown:hover > a {
        color: inherit;
    }
    .dropdown:hover .icon {
        transform: none;
    }



    section{
            height: calc(100dvh - clamp(50px, 7vh, 60px) + 2px);
    }

    .background-image-container{
        top: clamp(50px, 7vh, 60px);
        height: calc(100vh - clamp(50px, 7vh, 60px));
    }

    @supports (height: 100dvh) {
        section{
            height: calc(100dvh - clamp(50px, 7vh, 60px) + 2px);
        }
        .background-image{
            height: calc(100dvh - clamp(50px, 7vh, 60px) + 2px);
        }
        /* overflow permesso solo a certi elementi per evitare di perdere contenuto */
        .overflow-mobile-auto{
            height: auto;
            min-height: calc(100dvh - clamp(50px, 7vh, 60px) + 8px);
        }
    }

    /* modifica di dimensione delle due freccette*/
    .double-arrow{
        bottom: 8px;
        z-index: 999;
        width: clamp(10px, 1.5em, 50px);
    }



    /* frase iniziale nella home */
    .home-first-section-text{
        left: 20px;
        bottom: 70px;
        width: max-content;
        max-width: calc(100% - 32px); /* 100% larghezza meno padding sx + dx */
        min-width: unset;
        min-height: min-content;
        padding: 10px;
    }
    .home-first-section-text h1{
        font-size: clamp(30px, 1.7vw, 60px) !important;
        line-height: normal;
        margin: 0 10px;
    }


    .menu-container{
        justify-content: flex-start;
        scroll-snap-type: y mandatory;
        padding: 20px 0;
        clip-path: inset(10px 0 10px 0 round 0);
    }
    .menu-block{
        width: 100%;
        height: 70%;
        padding: 10px;
        scroll-snap-align: center;
    }
    .menu-block:first-child{
        margin-top: -10px;
    }
    .menu-block h2{
        margin-left: 7px;
    }
    .menu-block h2::after,
    .menu-block h2:hover::after {
        content: none;
        transform: none;
        transition: none;
    }


    .main-vertical-content-block{
        padding: 0 10px;
    }
    .vertical-content-block{
        padding: 10px;
        margin-top: 0;
        padding-top: 0;
    }



    .main-horizontal-content-block{
        min-height: min-content;
    }
    .horizontal-content-block{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
        min-width: 70%;
        scroll-snap-align: center;
        gap: 2%;
        padding: 20px;
    }


    .home-services h2::after,
    .home-services h2:hover::after {
        content: none;
        transform: none;
        transition: none;
    }
    .home-services hr{
        display: block;
    }



    .home-company-text{
        background-color: rgba(48, 111, 213, 0.4);
        max-width:  max-content;
        padding: 10px;
    }
    .home-company-menu{
        height: 75%;
    }


    .home-career-main-container{
        flex-direction: column;
    }
    .home-career-left-content{
        position: relative;
        width: 100%;
        height: auto;
    }
    .home-career-right-content{
        width: 100%;
        height: 75%;
    }
    .home-career-menu{
        min-height: min-content;
        flex-direction: row;
    }
    .home-career-menu-gt-4 .home-career-menu-block{
        height: 70%; 
        flex: unset;
        width: 100%;
    }
    .home-career-menu-lt-4 {
        flex-direction: column;
    }


    .vertical-content-block:hover {
        box-shadow: none;
    }

    .text-leonardo{
        min-width: 100%;
        box-shadow: 0 5px 10px rgba(255, 255, 255, 0.2);
    }

    .footer-main-content{
        padding-top: 20px;
        padding-bottom: 60px;
        align-items: flex-start;
        width: 100%;
    }
    .footer-main-content > iframe{
        width: 100%;
        height: 40vh;
    }
    .footer-contact{
        flex-direction: column;
        width: 100%;
        height: min-content;
        gap: 2%;
    }
    .footer-img {
        max-width: 500px;
    }
    .footer-link-image{
        width: 100%;
        margin-top: 15px;
    }
    .footer-main-content a {
        text-align: center;
        max-height: 110px;
    }
    .footer-policy{
        text-wrap: wrap;
        flex-wrap: wrap;
    }
    .footer-icon {
        height: clamp(14px, 1.6vw, 40px);
        width: auto;
    }



    .scroll-spacer {
        height: 0; /* o meno, dipende da quanto vuoi scrollare */
        scroll-snap-align: end;
    }
}










/* archiviati */

/* la classe in qui stavano le 2 immagini del footer
.footer-services{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 4%;
}
.footer-services{
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 10px;
}
.footer-services a {
    display: flex;          permette di centrare anche il contenuto interno
    justify-content: center;
    align-items: center;
    text-align: center;
}
.footer-img {
  width: clamp(200px, 25vw, 600px);    min 200px, max 720px, scala con viewport
  height: auto;                        mantiene il rapporto dell'immagine 
  max-height: 110px;
  min-height: 30px;
}
<div class="footer-services">
    <a href="https://www.leonardo.com/en/" title="Leonardo" aria-label="leonardo" target="_blank" rel="noopener noreferrer" class="img-athorized-service-centre-of-leonardo">
        <img class="footer-img" src="assets/footer-logo-leonardo-autorized-partner.png" alt="Logo Authorized Service Center of Leonardo">
    </a>
    <a href="https://www.prattwhitney.com/en" title="Pratt & Whitney" aria-label="pratt ] whitney" target="_blank" rel="noopener noreferrer" class="img-premium-service-provider-of-pratt-whitney">
        <img class="footer-img" src="assets/footer-logo-premium-service-pratt-whitney@3x.png" alt="Logo Premium Service Provider of Pratt & Whitney">
    </a>
</div> */


/* vecchio stile dell menu dei servizi (abbinato al vertical-content-box)
.home-services .main-vertical-content-block .vertical-content-block:first-child{
    margin-top: 25px;
}
.home-services .main-vertical-content-block .vertical-content-block:last-child{
    margin-bottom: 20px;
}
.home-services .main-vertical-content-block .vertical-content-block > div{
    text-align: left;
    width: 40%;
}
.home-services .main-vertical-content-block .vertical-content-block > img{
    max-height: 60vh;
    max-width: 60%;
}
@media only screen and (min-width: 2650px){
    .main-vertical-content-block{
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        scroll-snap-type: none;
        width: 100%;
        height: 90%;
        overflow-y: auto;
        padding: 20px;
        flex-wrap: wrap;
    }
    .vertical-content-block{
        width: 25%;
        flex-direction: column;
        min-height: auto;
        margin-top: 0!important;
        margin-bottom: 0 !important;
        justify-content: flex-start;
    }
    .home-services .main-vertical-content-block .vertical-content-block > img{
        width: 100%;
        max-width: 100% !important;
        border-radius: 50px;
    }
}
responsive
@media only screen and (max-width: 2200px) and (min-height: 1800px){
    .vertical-content-block{
        flex-direction: column;
    }
    .home-services .main-vertical-content-block .vertical-content-block:first-child{
        margin-top: 0;
    }
    .home-services .main-vertical-content-block .vertical-content-block > img{
        max-width: unset;
        width: 100%;
        max-height: none;
    }
    .home-services .main-vertical-content-block .vertical-content-block > div{
        width: 100%;
    }
}
@media only screen and (max-width: 1620px) and (min-height: 1600px){
    .vertical-content-block{
        flex-direction: column;
    }
    .home-services .main-vertical-content-block .vertical-content-block:first-child{
        margin-top: 0;
    }
    .home-services .main-vertical-content-block .vertical-content-block > img{
        max-width: unset;
        width: 100%;
        max-height: none;
    }
    .home-services .main-vertical-content-block .vertical-content-block > div{
        width: 100%;
    }
}
@media only screen and (max-width: 1620px) and (min-height: 1600px){
    .vertical-content-block{
        flex-direction: column;
    }
    .home-services .main-vertical-content-block .vertical-content-block:first-child{
        margin-top: 0;
    }
    .home-services .main-vertical-content-block .vertical-content-block > img{
        max-width: unset;
        width: 100%;
        max-height: none;
    }
    .home-services .main-vertical-content-block .vertical-content-block > div{
        width: 100%;
    }
}
@media only screen and (max-width: 1300px) and (min-height: 1200px){
    .vertical-content-block{
        flex-direction: column;
    }
    .home-services .main-vertical-content-block .vertical-content-block:first-child{
        margin-top: 0;
    }
    .home-services .main-vertical-content-block .vertical-content-block > img{
        max-width: unset;
        width: 100%;
        max-height: none;
    }
    .home-services .main-vertical-content-block .vertical-content-block > div{
        width: 100%;
    }
}
@media only screen and (max-width: 985px) {
    .vertical-content-block{
        flex-direction: column;
    }
    .home-services .main-vertical-content-block .vertical-content-block:first-child{
        margin-top: 0;
    }
    .home-services .main-vertical-content-block .vertical-content-block > img{
        max-width: unset;
        width: 100%;
        max-height: none;
    }
    .home-services .main-vertical-content-block .vertical-content-block > div{
        width: 100%;
    }
}
@media only screen and (max-width: 930px) {
    .vertical-content-block{
        flex-direction: column;
        justify-content: flex-start !important;
        height: max-content !important;
        gap: 1%;
    }
    .home-services .main-vertical-content-block .vertical-content-block:first-child{
        margin-top: 0;
    }
    .home-services .main-vertical-content-block .vertical-content-block > img{
        max-width: 100%;
    }
    .home-services .main-vertical-content-block .vertical-content-block > div{
        text-align: left;
        width: 100%;
    }
}



html

<section id="services">
            <div class="content-block" style="align-items: center;">
                <div class="home-services">
                    <h1>OUR SERVICES</h1>
                    <div class="main-vertical-content-block">
                        <div class="vertical-content-block">
                            <div class="mobile-screen"> 
                                <h2>
                                    <a href="index.html" class="no-style-link">FLIGHT OPERATIONS</a>
                                </h2>
                            </div>
                            <img src="assets/mainServices_Flights.jpeg" alt="Image during a flight with HB-XOX">
                            <div>
                                <h2 class="desktop-screen">
                                    <a href="index.html" class="no-style-link">FLIGHT OPERATIONS</a>
                                </h2>
                                <p>Fly into the sky with experienced pilots for an enchanting picturesque bird’s-eye view of Switzerland and beyond. Karen SA offers helicopter air transportation to customers’ favourite destinations.</p>
                                <a href="#" class="link">
                                    Read more 
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div class="vertical-content-block">
                            <div class="mobile-screen"> 
                                <h2>
                                    <a href="index.html" class="no-style-link">AKADEMY</a>
                                </h2>
                            </div>
                            <img src="assets/mainServices_Akademy.jpeg" alt="Image">
                            <div>
                                <h2 class="desktop-screen">
                                    <a href="index.html" class="no-style-link">AKADEMY</a>
                                </h2>
                                <p>Since its establishment, training has been an integral part of Karen SA’s activity. It serves to develop professional skills and know-how and, even more importantly, a sense of responsibility and a culture of safety.</p>
                                <a href="#" class="link">
                                    Read more 
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div class="vertical-content-block">
                            <div class="mobile-screen"> 
                                <h2>
                                    <a href="index.html" class="no-style-link">HELICOPTER MANAGEMENT</a>
                                </h2>
                            </div>
                            <img src="assets/mainServices_Management.jpeg" alt="Image">
                            <div>
                                <h2 class="desktop-screen">
                                    <a href="index.html" class="no-style-link">HELICOPTER MANAGEMENT</a>
                                </h2>
                                <p>The term “Helicopter Management” encompasses all of the operations that enable our customers to fly with the necessary licenses and in accordance with safety requirements.</p>
                                <a href="#" class="link">
                                    Read more 
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div class="vertical-content-block">
                            <div class="mobile-screen"> 
                                <h2>
                                    <a href="index.html" class="no-style-link">MAINTENANCE & REPAIR</a>
                                </h2>
                            </div>
                            <img src="assets/mainServices_Maintenance.jpeg" alt="Image">
                            <div>
                                <h2 class="desktop-screen">
                                    <a href="index.html" class="no-style-link">MAINTENANCE & REPAIR</a>
                                </h2>
                                <p>We deliver rapid line and base maintenance to cut AOG downtime.
                                <br>Our team performs comprehensive troubleshooting and inspections of airframes, engines, avionics, etc.
                                <br>We design and execute tailored retrofits, technical upgrades, and full aircraft overhauls.</p>
                                <a href="#" class="link">
                                    Read more 
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div class="vertical-content-block">
                            <div class="mobile-screen"> 
                                <h2>
                                    <a href="index.html" class="no-style-link">FLIGHT OPERATIONS</a>
                                </h2>
                            </div>
                            <img src="assets/mainServices_Flights.jpeg" alt="Image during a flight with HB-XOX">
                            <div>
                                <h2 class="desktop-screen">
                                    <a href="index.html" class="no-style-link">FLIGHT OPERATIONS</a>
                                </h2>
                                <p>Fly into the sky with experienced pilots for an enchanting picturesque bird’s-eye view of Switzerland and beyond. Karen SA offers helicopter air transportation to customers’ favourite destinations.</p>
                                <a href="#" class="link">
                                    Read more 
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div class="vertical-content-block">
                            <div class="mobile-screen"> 
                                <h2>
                                    <a href="index.html" class="no-style-link">CAMO</a>
                                </h2>
                            </div>
                            <img src="assets/mainServices_Camo.jpeg" alt="Image">
                            <div>
                                <h2 class="desktop-screen">
                                    <a href="index.html" class="no-style-link">CAMO</a>
                                </h2>
                                <p>Karen SA is an approved Continuing Airworthiness Management Organisation (CAMO) under EASA PartM/Subpart G</p>
                                <a href="#" class="link">
                                    Read more 
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="double-arrow">
                <a href="#MaintenanceRepair">
                    <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 8L12 14L18 8" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6 14L12 20L18 14" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </a>
            </div>
        </section>
*/


/* Sezione riguardante il servizio Leonardo 

css
.background-leonardo{
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),   overlay scuro semi-trasparente
        url('assets/background-leonardo-services.jpg') no-repeat center center;
    background-size: cover;
}

stile testo Leonardo 
.text-leonardo{
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 30%;
    min-width: 500px;
    height: 50%;
    background-color: rgba(0,0, 0, 0.4);
    opacity: 1;
    z-index: 2;
    color: white;
    box-shadow: 0 30px 30px rgba(255, 255, 255, 0.2);
    transform: translateY(50px);
}
.text-leonardo > img{
    display: block;
    width: 100%;
}
.text-leonardo > a > img {
    width: 100%;
    height: auto;
    display: block;
}

html

            <section id="MaintenanceRepair" class="background-leonardo">
                <div class="content-block midright">
                    <div class="flex-text-container text-leonardo">
                        <p><b>Since 2004, Karen SA is an official LEONARDO<br>
                            HELICOPTERS service station.<br>
                            Our proximity to the Italian manufacturer’s<br>
                            headquarters ensures a quick and effective service.<br>
                        </b></p>
                        <a href="https://www.leonardo.com/en/" title="Leonardo" aria-label="leonardo" target="_blank" rel="noopener noreferrer"><img src="assets/footer-logo-leonardo-autorized-partner.png" alt="Leonardo logo"></a>
                    </div>
                </div>
                <div class="double-arrow">
                    <a href="#contact">
                        <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 8L12 14L18 8" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M6 14L12 20L18 14" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>
                </div>
        </section>
*/