.title {

	color: #5C6AC4;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body, html {

    font-family: Arial, sans-serif;

    height: 100%;

    width: 100%;

}



/* Contenitore principale */

.container {

    position: relative;

    text-align: center;

    color: white;

}



 /* Logo e link in alto a sinistra */

.header {

    position: absolute;

    top: 20px;

    left: 20px;

    display: flex;

    align-items: center;

}



@media (min-width: 768px){

  .logo {

      position: fixed;

      top: 9px;

      left: 16px;

      width: 100px;

      height: auto;

      margin-right: 15px; /* Distanza tra logo e testo */

      z-index: 101;

  }

  

  

  

  .rectangle-border {

      position: fixed;

      top: 21px;

      left: 28px;

      width: 225px;/* Larghezza del rettangolo */

      height: 75px;/* Altezza del rettangolo */

      border: 3px solid rgba(0,71,43, 0.8); /* Colore e spessore del bordo */

      background-color: transparent; /* Colore di sfondo trasparente */

      border-radius: 40px;  /* Bordo arrotondato opzionale */

      z-index: 101;

  }

}



.logo {

    position: fixed;

    top: 9px;

    left: 16px;

    width: 100px;

    height: auto;

    margin-right: 15px; /* Distanza tra logo e testo */

    z-index: 101;

}



.logo2 {

    width: 150px;

    height: auto;

    z-index: 101;

}





.rectangle-trans {

    

    width: 100%;/* Larghezza del rettangolo */

    height: 110px;/* Altezza del rettangolo */

    background-color: rgba(0,0,0,0.4); /* Colore di sfondo trasparente */

    display: flex; /* Usa flexbox per centrare il contenuto */

    align-items: center; /* Centra verticalmente */

    justify-content: right; /* Centra orizzontalmente */

    position: fixed; /* Posizione assoluta per mantenerlo in cima */

    top: 0; /* Posizionalo in alto */

    left: 0; /* Allinealo a sinistra */

    z-index: 100;

  

}



@media (max-width: 768px) {



  

  .text-style {

    display: none;

    

      position: fixed;

      

      color: rgb(200, 89, 40);

      font-size: 1.3em;

      text-decoration: none;

      font-weight: bold;

      transition:font-size 0.8s;

      z-index: 101;

  }

}



.text-style {

    position: fixed;

    

    color: rgb(200, 89, 40);

    font-size: 1.8em;

    text-decoration: none;

    font-weight: bold;

    transition:font-size 0.8s;

    z-index: 101;

}



.text-style:hover {

  font-size: 2.2em;

}









/* Immagine di sfondo */

.background-image {

    width: 100%;

    height: 70vh;

    background-image: url(https://assets.onecompiler.app/42x96z3hq/42yau2yvk/minimalist%20engineering%20background%20in%204k%20with%20indigo%20color.png); /* Sostituisci con il percorso della tua immagine */

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

}



 /* Rettangolo trasparente */

.title-background {

    width: auto;

    background-color: rgba(0, 0, 0, 0.8); /* Sfondo nero semi-trasparente */

    padding: 20px 40px;

    border-radius: 50px;

    display: inline-block;



/* Titolo sopra l'immagine */

.title {

    width: auto;

    font-size: 10vw;

    font-weight: bold;

    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

    color: rgb(200, 89, 40);



    text-align: center;

    user-select: none;

}







 /* Sezione nuova sotto l'immagine */

.new-section {

    padding: 50px;

    text-align: center; /* Allinea il testo al centro */

    position: relative; /* Assicurati che sia relativo per evitare conflitti */

    z-index: 1; /* Porta la sezione sopra il background */

    

}





















  /* Stile menu a tendina */

.dropdown-menu {

    display: none; /* Nascondi inizialmente */

    position: fixed;

    top: 60px; /* Regola la posizione in base al logo */

    left: 20px;

    background-color: rgba(0, 71, 43, 0.9);

    border-radius: 10px;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);

    z-index: 100;

    padding: 10px 0;

    text-align: left;

    width: 150px;

    z-index: 110;

}



/* Link nel menu */

.dropdown-menu a {

    display: block;

    color: white;

    padding: 10px 15px;

    text-decoration: none;

    font-size: 16px;

}



.dropdown-menu a:hover {

    background-color: rgba(200, 89, 40, 0.8);

    border-radius: 5px;

}



/* Media query per dispositivi mobili */

@media (max-width: 768px) {

    .logo-menu {

        cursor: pointer;

    }

}



@media (min-width: 769px) {

    #dropdown-menu {

        display: none !important;

    }

}























/* Contenitore principale */

.carousel {

    position: relative;

    width: 100%;

    max-width: 600px;

    overflow: hidden; /* Nasconde immagini che fuoriescono */

    border-radius: 20px;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

}



/* Contenitore delle immagini */

.carousel-images {

    display: flex; /* Allinea le immagini orizzontalmente */

    transition: transform 0.5s ease; /* Transizione per lo scorrimento */

    will-change: transform; /* Ottimizza le prestazioni */

}



/* Immagini */

.carousel-images img {

    width: 100%; /* Ogni immagine occupa il 100% della larghezza del carosello */

    flex-shrink: 0; /* Evita il ridimensionamento */

}



/* Frecce di navigazione sinistra */

.arrow-left {

    position: absolute;

    top: 50%;

    left: 10px; /* Posizione della freccia sinistra */

    width: 50px;

    height: 50px;

    background: red;

    color: white;

    text-align: center;

    line-height: 50px;

    border-radius: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    z-index: 102;

}



/* Frecce di navigazione destra */

.arrow-right {

    position: absolute;

    top: 50%;

    right: 10px; /* Posizione della freccia destra */

    width: 50px;

    height: 50px;

    background: red;

    color: white;

    text-align: center;

    line-height: 50px;

    border-radius: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    z-index: 102;

}



/* Effetto hover */

.arrow-left:hover, .arrow-right:hover {

    background-color: rgba(0, 0, 0, 0.9); /* Colore di sfondo al passaggio del mouse */

}