body, input, textarea, select {
  font-family: Verdana;
  color: #3a5c72 !important; 
}

.b {
    font-weight: bold;
}
.pt18 {
    font-size: 18pt !important;
}
.pt20 {
    font-size: 20pt !important;
}
.pt22 {
    font-size: 22pt !important;
}
.pt24 {
    font-size: 24pt !important;
}
.pt32 {
    font-size: 32pt !important;
}
.pt34 {
    font-size: 34pt !important;
}
.pt36 {
    font-size: 36pt !important;
}
.pt38 {
    font-size: 38pt !important;
}
.pt40 {
    font-size: 40pt !important;
}
.center {
    text-align: center;
}
.bg_a9f8dd {
    padding:5px;
    background-color: #a9f8dd;
}
.bg_a9e4f8 {
    padding:5px;
    background-color: #a9e4f8;
}
.caption {
    font-size: 18px !important;
    line-height: 18px !important;
}
.pic {
    padding:0 !important;
    margin:0 !important;
}
a.image.fit img {
    padding:1px !important;
}
a.image.fit:hover {
    border: 1px solid #81c7b1 !important;
    box-shadow: 0 0 5px #81c7b1 !important;
}

#logo {
    font-size: 1em;
    font-weight: bold;
}

#logo:hover {
    color: #475fe7; 
    text-shadow: 1px 1px 3px #34639980;
}

.my_glow_octane {
    color: #81c7b1; 
    text-shadow: 0px 0px 1px #81c7b1, 0 0 2px #5b8b7c98, 0 0 3px #5b8b7c98;
}

#logo, .content header h2, .my_glow_light_blue {
    color: #3a5c72; 
    text-shadow: 0px 0px 1px #8ad8bf, 0 0 2px #8ad8bf, 0 0 3px #7dbeaab4, 0 0 100px #ffffff60;
}

.my_glow_octane_bis {
    color: #a9f8dd;
    text-shadow: 0 0 1px #a9f8dd, 0 0 2px rgba(74, 105, 96, 0.514)
}
.my_glow_octane_ter {
    color: #bdfafc;
    text-shadow: 0 0 1px #bdfafc, 0 0 2px #9ccacc83;
}

section[id="chi-siamo"] .content.box.style2 {
    width: 42%;
    background-color: rgba(255, 255, 255, 0.85); /* 0.5 è il 50% di opacità */
}

section[id="cosa-facciamo"] .content.box.style2 {
    width: 55%;
    background-color: rgba(255, 255, 255, 0.85); /* 0.5 è il 50% di opacità */
}

section[id="cosa-facciamo"] ul {
    list-style-type: disc !important;
    margin-left: 2em !important;
    padding-left: 1em !important;
}

section[id="cosa-facciamo"] li {
    display: list-item !important; /* Big Picture a volte mette display: block */
    margin-bottom: 0.5em;
}

section[id="5-x-1000"] .content.box.style2 {
    width: 45%;
    background-color: rgba(255, 255, 255, 0.85); /* 0.5 è il 50% di opacità */
    text-align: center;
}

#abbraccio {
    /* Stato normale: due ombre per profondità e leggibilità */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
    
    /* Transizione morbida per tutte le proprietà nel filtro */
    transition: filter 0.3s ease;
}

#abbraccio:hover {
    /* Stato hover: ombre più intense + leggero aumento di luminosità */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) 
            drop-shadow(0 0 40px rgba(255, 255, 255, 0.7))
            brightness(1.1);
}

#header {
    background: rgba(255, 255, 255, 0.85) !important; /* 0.75 è il 75% di opacità */
}

#header nav ul li a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 3em;
    line-height: 3em;
    padding: 0 0.5em;
    outline: 0;
    position: relative; /* Necessario per posizionare la linea */
    transition: color 0.3s ease; /* Transizione fluida per il testo */
}

/* La linea sotto il testo */
#header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0.6em; /* Alza o abbassa la linea */
    left: 0.5em;
    right: 0.5em;
    height: 2px;
    background-color: #2ab09a; /* Il verde del tuo logo */
    transform: scaleX(0); /* Parte da larghezza zero */
    transition: transform 0.3s ease; /* Animazione della linea */
}

/* Effetto al passaggio del mouse */
#header nav ul li a:hover {
    color: #2ab09a; /* Il testo cambia colore */
}

#header nav ul li a:hover::after {
    transform: scaleX(1); /* La linea si allunga fino ai bordi del padding */
}