.title {

	color: #5C6AC4;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

}



/* Contenitore principale */

.container {

    position: relative;

    text-align: center;

    color: white;

}



.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;

  }

}

.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;

  

}







  

.logo {

    position: fixed;

    top: 9px;

    left: 16px;

    width: 100px;

    height: auto;

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

    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;

}







@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;

  }

}









/* Sezione superiore con sfondo immagine */

.hero-section {



    background-image: url('https://assets.onecompiler.app/42x96z3hq/42yau2yvk/DALL%C2%B7E%202024-11-16%2016.46.32%20-%20Two%20yellow%20engineer%20helmets%20placed%20on%20a%20wooden%20table.%20The%20table%20is%20indoors%20with%20a%20blurred%20background%20suggesting%20an%20office%20or%20workshop%20environment.%20The.webp'); /* Sostituisci con il percorso della tua immagine */

    background-size: cover;

    background-position: center;

    height: 70vh; /* Altezza della sezione superiore */

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    text-align: center;

}



.hero-section h1 {

    font-size: 10vw;

    color: rgb(200,89,40);

    padding: 20px 40px;

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

    background-color: rgba(0, 0, 0, 0.8); /* Sfondo trasparente per il titolo */

    border-radius: 70px;

    

    user-select: none;

}



/* Sezioni sottostanti */

.section {

    padding: 50px 20px;

    text-align: center;

}



.section:nth-child(odd) {

    background-color: rgb(22, 100, 40); /* Colore di sfondo alternato */

}



.section:nth-child(even) {

    background-color: rgb(22, 62, 80);

}



.section h2 {

    color:rgba(230,240,230,0.7);

    font-size: 60px;

    margin-bottom: 20px;

}



.section p {

    max-width: 800px;

    margin: 0 auto;

    font-size: 1.2em;

    color:rgba(230,240,230,0.7);

}







.logo2 {

    width: 150px;

    height: auto;

    z-index: 101;

}



.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;

    }

}











          /* 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;

    }

}