<style>
body {
    font-family: 'Arial', sans-serif;
    cursor: crosshair; /* Puntatore a croce */
}








.hero h1 {
    font-size: 4rem;
    font-weight: bold;
}

.hero p {
    font-size: 1.5rem;
    margin-top: 20px;
}

/* Section Styles */
.section {
    padding: 60px 0;
}

.section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #003366;
    margin-bottom: 40px;
}

.service-box {
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.service-box:hover {
    transform: translateY(-20px);
}

/* Client Section */
.client-section {
    background-color: #f1f1f1;
}

.client-section img {
    max-width: 150px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.client-section img:hover {
    opacity: 1;
}

/* Contact Form */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.contact-form button {
    padding: 15px 30px;
    background-color: #003366;
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
}

/* Footer */
.footer {
    background-color: #003366;
    color: white;
    text-align: center;
    padding: 20px 0;
}




.offer-section {

text-align: center;
}

.offer-title {
font-size: 3rem; /* Aumenta la dimensione del titolo */
font-weight: 800;
font-family: Syne, sans-serif; 
margin-bottom: 80px; /* Maggiore margine inferiore */
color: #6b4de4;
}

.offer-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.offer-column {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.left {
margin-right: 120px; /* Aumenta la distanza tra le colonne */
}

.right {
margin-left: 150px; /* Aumenta la distanza tra le colonne */
}

.offer-item {
position: relative;
width: 400px; /* Aumenta la larghezza degli elementi */
margin-bottom: 70px; /* Aumenta il margine inferiore */
opacity: 0; /* Inizialmente invisibile */
transition: opacity 0.5s ease-in-out; /* Transizione per il fade-in */
}

.offer-item[data-aos="fade-up"] {
opacity: 1; /* Visibile quando l'animazione è attivata */
}

.offer-item img {
width: 100%; /* Immagini a larghezza piena */
border-radius: 10px;
}

.offer-info {
margin-top: 30px; /* Maggiore margine sopra le informazioni */
}

.offer-info h3 {
font-size: 1.5rem; /* Aumenta la dimensione del titolo dell'offerta */
color: #333;
}

.offer-info p {
font-size: 1rem; /* Aumenta la dimensione del testo della descrizione */
color: #777;
margin-top: 10px; /* Maggiore margine sopra la descrizione */
}

.offer-number {
position: absolute;
font-size: 22rem; /* Aumenta la dimensione del numero */
font-weight: 800;
color: rgba(107, 77, 228, 0.1);
top: 0;
right: -10px; /* Aumenta la posizione a destra del numero */
}

.offer-line {
width: 3px; /* Aumenta la larghezza della linea */
background-color: #ccc;
height: 1200px; /* Aumenta l'altezza della linea */
position: relative;
z-index: 1;
}

.highlight {
color: #ec4e86;
}



 /* --------------- BOTTONE TORNA SU ---------------*/


.team-building {
padding: 50px 0;
background-color: #fff;
}

.team-building .container {
display: flex;
flex-wrap: wrap;
}

.team-building .row {
display: flex;
align-items: center;
}

.team-building .team-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 8px;
}

.team-building h6 {
font-size: 14px;
letter-spacing: 1px;
color: #999;
text-transform: uppercase;
margin-bottom: 10px;
}

.team-building h2 {
font-size: 36px;
font-weight: 600;
margin-bottom: 20px;
}

.tabs ul {
list-style: none;
padding: 0;
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #dcdcdc;
}

.tabs ul li {
margin-right: 20px;
padding-bottom: 10px;
cursor: pointer;
position: relative;
}

.tabs ul li.active {
font-weight: bold;
color: #000;
border-bottom: 2px solid #00aaff;
}

.tabs ul li:hover {
color: #00aaff;
}

.team-building p {
font-size: 16px;
line-height: 1.6;
color: #333;
}

.team-building p strong {
font-weight: bold;
}




 /* --------------- BOTTONE TORNA SU ---------------*/
       #backToTopBtn {
        display: none;
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 1000;
        background-color: #333;
        color: white;
        border: none;
        padding: 15px;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    #backToTopBtn svg {
        width: 20px;
        height: 20px;
    }

    /* Effetto hover per l'animazione */
    #backToTopBtn:hover {
        background-color: #555;
        transform: translateY(-10px); /* Muove la freccia leggermente verso l'alto */
    }




/* --------------- NAVBAR ---------------*/
.custom-navbar {
    background-color: #0066CC; /* Colore di sfondo scuro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leggera ombra sotto la navbar */
}

.nav-link {
    color: white !important;
}

.navbar-brand img {
    max-height: 50px; /* Regola l'altezza del logo */
}

.navbar-nav .nav-link {
    color: #f8f9fa; /* Colore chiaro per i link */
    font-weight: 500; /* Aggiungi un po' di spessore ai testi */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transizione morbida per colore e sfondo */
    padding: 10px 15px; /* Aggiunge un po' di spazio intorno ai link */
    border-radius: 5px; /* Rende i bordi arrotondati */
}

/* Mouse over (hover) sui link della navbar */
.navbar-nav .nav-link:hover {
    color: #1abc9c; /* Cambia il colore del testo quando il mouse è sopra */
    background-color: rgba(255, 255, 255, 0.1); /* Aggiunge uno sfondo semitrasparente */
    text-decoration: none; /* Rimuove la sottolineatura */
}

.navbar-nav .btn-outline-light {
    border-radius: 20px; /* Bordo arrotondato per il pulsante 'Accedi' */
    padding: 5px 20px;
    font-weight: bold;
    border-color: #1abc9c; /* Colore del bordo verde acqua */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transizione morbida per il pulsante */
}

.navbar-nav .btn-outline-light:hover {
    background-color: #1abc9c; /* Cambia il colore di sfondo al passaggio del mouse */
    color: white; /* Colore testo bianco */
    border-color: #1abc9c; /* Mantieni il bordo verde acqua */
}


/* ---------------PARTICELLE MOVIMENTO ---------------*/

#particles-js {
    position: absolute;
    width: 100%;
    height: 70%;
    top: 0;
    left: 0;
    z-index: -1; /* Posiziona lo sfondo sotto il contenuto */
    background-color: #B5D0E2; /* Colore di sfondo simile all'immagine */



}


/* ---------------MEDIA QUERY ---------------*/

/* Media query per telefoni cellulari */
@media (max-width: 480px) {
    .offer-container {
        flex-direction: column; /* Disposizione a colonna */
    }

    .offer-column {
        margin: 0; /* Elimina i margini laterali */
    }

    .offer-title {
        font-size: 2.2rem; /* Ridimensiona il titolo per schermi più piccoli */
        margin-bottom: 40px;
    }

    .offer-item {
        width: 90%; /* Riduci la larghezza degli elementi per adattarsi meglio allo schermo */
        margin-bottom: 40px;
    }

    .offer-info h3 {
        font-size: 1.3rem; /* Ridimensiona i titoli delle offerte */
    }

    .offer-info p {
        font-size: 0.9rem; /* Ridimensiona il testo descrittivo */
    }

    .offer-number {
        font-size: 12rem; /* Riduci la dimensione del numero di offerta */
        right: 0; /* Allinea il numero alla destra del contenuto */
    }

    .offer-line {
        height: 0px; /* Riduci l'altezza della linea */

    }
}