/* ==========================================================================

   01. RESET E BOX MODEL

   ========================================================================== */



/* Box sizing */

*, *::before, *::after {

    box-sizing: border-box;

}



/* Reset margini e padding */

* {

    margin: 0;

    padding: 0;

    /* text-align: center; */

}





/* ==========================================================================

   02. FONTS

   ========================================================================== */



@font-face {

    font-family: "orbitron";

    src: url(fonts/orbitron-light.otf) format("opentype");

}





/* ==========================================================================

   03. IMPOSTAZIONI GLOBALI

   ========================================================================== */



html,

body {

    font-size: 16px;

    scroll-behavior: smooth;

    position: relative;



    /* font-family: system-ui, -apple-system, BlinkMacSystemFont,

       'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,

       'Open Sans', 'Helvetica Neue', sans-serif; */

}



/* Liste senza stile */

ul,

ol {

    list-style-type: none;

}



/* Link senza stile */

a {

    text-decoration: none;

    color: inherit;

}



p {

    line-height: 1.5;

    width: 100%;

    margin: 0;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: "orbitron", sans-serif;

    padding: 0;

    margin: 0;

}



h1 {

    font-size: clamp(1.8rem, 2vw, 3rem);

}



/* Immagini responsive */

img {

    max-width: 100%;

    height: auto;

    mix-blend-mode: darken;

}





/* ==========================================================================

   04. BODY

   ========================================================================== */



body {

    /* background: rgba(230, 232, 235, 1); */

    background: linear-gradient(

        180deg,

        rgba(230, 232, 235, 1) 0%,

        rgba(152, 154, 157, 1) 100%

    );



    font-family: "poppins", sans-serif;

}





/* ==========================================================================

   CONTAINER GENERICI

   ========================================================================== */



.container {

    width: 100%;

    max-width: 1200px;



    margin: 0 auto;



    padding: 0 20px;

}



.text-center {

    text-align: center;

}





/* ==========================================================================

   GRIGLIE GENERICHE

   ========================================================================== */



.grid-4 {

    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 20px;

}



.grid-3 {

    display: flex;

    flex-wrap: wrap;



    gap: 25px;



    justify-content: space-around;

}







/* ==========================================================================

   05. PULSANTI MENU MOBILE

   ========================================================================== */



#open-sidebar-button,

#close-sidebar-button {

    display: none;

    background: none;

    border: none;

    padding: 1em;

    cursor: pointer;

    margin-left: auto;

}



#close-sidebar-button {

    display: none;

    background: none;

    padding: 1em;

    border: none;

    cursor: pointer;

}



.special {

    display: none;

}





/* ==========================================================================

   06. LOGO PRINCIPALE

   ========================================================================== */



.logo {

    filter: grayscale(100%);

    /* filter: brightness(0.7) */

    mix-blend-mode: darken;

    width: clamp(200px, 30vw, 400px);

}



/*

.logo{

    top: 1%;

    left: 1%;

    margin: 0 auto;

    width: 300px;

    height: auto;

    position: absolute;

}

*/



/*

.menu{

    display: flex;

    justify-content: center;

    margin-top: 10px;

}

*/





/* ==========================================================================

   07. NAVBAR

   ========================================================================== */



/* Creo la griglia su cui posiziono logo e menu */



.menu{

    margin-top: 15px;

}



nav ul {

    display: flex;

    flex-direction: row;

    justify-content: flex-end;

    align-items: center;

    width: 97%;

}



.logo-li {

    width: clamp(150px, 30vw, 350px);

    margin-right: auto;

}



nav a {

    display: flex;

    text-decoration: none;

    padding: 1em 2em;

    font-size: clamp(1rem, 1vw, 2rem);

    transition: color 0.3s ease;

    font-weight: 350;

    text-align: center;

}



/*

.menu a{

    margin: 0 15px;

    font-size: 18px;

    transition: color 0.3s ease;

}

*/





/* ==========================================================================

   08. RESPONSIVE NAVBAR

   ========================================================================== */



@media (max-width: 768px) {



    .menu {

        max-width: 100%;

    }

}



@media (max-width: 768px) {



    nav {

        position: fixed;

        top: 0;

        right: -100%;

        height: 100vh;

        width: 100%;

        background-color: rgba(255, 255, 255, 1);

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        transition: right 0.3s ease-out;

        z-index: 10

    }



    #open-sidebar-button,

    #close-sidebar-button {

        display: block;

    }



    nav.show {

        right: 0;

    }



    nav ul {

        flex-direction: column;

        justify-content: center;

        align-items: center;

        width: 100%;

    }



    nav .logo-li {

        margin: 0;

    }



    nav a {

        width: 100%;

        font-size: clamp(1.5rem, 5vw, 3rem);

        padding: 0;

        margin: 20px auto;

    }



    .special {

        display: block;

        max-width: 50%;

        position: absolute;

        top: 20px;

        left: 20px;

    }

}



/* ==========================================================================

   09. BADGE BOSCH (VERSIONE COMMENTATA PRECEDENTE)

   ========================================================================== */



/*

.logo-bosch{

    display: flex;

    align-items: center;

    width: 45%;

    margin-left: 25px;

    border: 1px rgba(70, 171, 248, 0.5) solid;

    border-radius: 15px;

}



.logo-bosch svg{

    width: 45%;

    padding: 0%;

    margin: 0;

    margin-left: 5px;

    mix-blend-mode: darken;

}



.logo-bosch p{

    width: 100%;

    padding-left: 20px;

    padding-top: 0;

    margin: 0;

    padding-right: 5px;



    color: rgb(57, 32, 200);

    font-size: 0.55rem;

    font-weight: 700;

}



.logo-bosch p::before{

    content: " ";



    position: absolute;



    top: 50%;

    right: 0;



    width: 1px;

    height: 40%;



    background: rgba(5, 0, 0, 0.12);



    transform: translateY(-50%);

}



@media(max-width: 768px){

    .logo-bosch{

        margin: 0 auto;

        width: 60%;

    }

}

*/





/* ==========================================================================

   10. BADGE BOSCH ATTUALE

   ========================================================================== */



.bosch-badge {

    background: transparent;

    border: 1.5px solid #c8d4e8;

    border-radius: 10px;

    padding: 0;

    margin-top: 70px;

    display: inline-flex;

    align-items: center;

    width: fit-content;

    gap: 0;

    margin-left: 25px;

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);

}





/* ── Logo Bosch ── */



.bosch-logo-icon {

    flex-shrink: 0;

    margin-right: 10px;

    padding: 3px 0;

}



.bosch-logo-icon svg {

    width: clamp(24px, 2vw, 52px);

    height: clamp(24px, 2vw, 52px);

    display: block;

    margin-left: 10px;

}





/* ── Scritta Bosch ── */



.bosch-wordmark {

    font-size: clamp(15px, 1vw, 38px);

    font-weight: 800;

    color: #e30613;

    letter-spacing: -1px;

    line-height: 1;

    margin-right: 10px;

}





/* ── Divisore ── */



.divider {

    width: 1.5px;

    height: 10px;

    background: #c8d4e8;

    margin-right: 10px;

}





/* ── Testo certificazione ── */



.cert-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.cert-text span {

    font-size: clamp(7px, 0.5vw, 15px);

    font-weight: 800;

    color: #1a56db;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    line-height: 1.3;

    margin-right: 10px;

}





/* ==========================================================================

   11. RESPONSIVE BADGE BOSCH

   ========================================================================== */



@media(max-width: 768px) {



    .bosch-badge {

        display: flex;

        margin: 40px auto;

        margin-bottom: 0;

    }



    .bosch-logo-icon {

        margin-right: 0;

        padding: 0;

    }



    .divider {

        max-height: 30px;

        margin: 0 5px;

        padding: 0;

    }



    .bosch-wordmark {

        margin-right: 5px;

    }



    .cert-text span {

        margin-right: 5px;

        margin-left: 5px;

    }

}





/* ==========================================================================

   12. HERO SECTION

   ========================================================================== */



.hero {

    padding-top: 0px;

    display: flex;

    position: relative;

    flex-direction: row;

    margin: 0px auto;

    align-self: center;

    align-items: center;

    height: 50%;

    width: 97%;

}





/* Contenitore testo */



.hero-box {

    display: flex;

    flex-direction: column;

    max-width: 60%;

    text-align: left;

    align-items: flex-start;

}





/* Titolo hero */



.hero-title {

    margin: 0;

    margin-top: 20px;

    margin-left: 20px;

    font-size: clamp(2rem, 3vw, 4rem);

    font: "orbitron", sans-serif;

    width: 90%;

    font-weight: 1000;

    padding-bottom: 10px;

}





/* Immagine hero */



.hero-image {

    display: block;

    margin: 0px auto;

    width: 45%;

    height: auto;

    opacity: 0;

    transition: opacity 0.8s ease;

    position: absolute;

    top: -10%;

    right: 0;

}



.hero-image.active {

    opacity: 1;

}





/* Testo hero */



.hero-p {

    margin: 0;

    margin-left: 20px;

    margin-top: 20px;

    margin-bottom: 20px;

    padding-bottom: 10px;

    width: 80%;

}





/* ==========================================================================

   13. BOTTONE HERO (.fancy)

   ========================================================================== */



/* From Uiverse.io by cssbuttons-io */



.fancy {

    background-color: transparent;

    border: 2px solid #000;

    border-radius: 0;

    box-sizing: border-box;

    color: inherit;

    cursor: pointer;

    display: inline-block;

    float: right;

    font-weight: 700;

    letter-spacing: 0.05em;

    margin-left: 20px;

    outline: none;

    overflow: visible;

    padding: 1.25em 2em;

    position: relative;

    text-align: center;

    text-decoration: none;

    text-transform: none;

    transition: all 0.3s ease-in-out;

    user-select: none;

    font-size: 13px;

}



.fancy::before {

    content: " ";

    width: 1.5625rem;

    height: 2px;

    background: black;

    top: 50%;

    left: 1.5em;

    position: absolute;

    transform: translateY(-50%);

    transform-origin: center;

    transition: background 0.3s linear, width 0.3s linear;

}



.fancy .text {

    font-size: 1.125em;

    line-height: 1.33333em;

    padding-left: 2em;

    display: block;

    text-align: left;

    transition: all 0.3s ease-in-out;

    text-transform: uppercase;

    text-decoration: none;

    color: black;

}



.fancy .top-key {

    height: 2px;

    width: 1.5625rem;

    top: -2px;

    left: 0.625rem;

    position: absolute;

    background: transparent;

    transition: width 0.5s ease-out, left 0.3s ease-out;

}



.fancy .bottom-key-1 {

    height: 2px;

    width: 1.5625rem;

    right: 1.875rem;

    bottom: -2px;

    position: absolute;

    background: transparent;

    transition: width 0.5s ease-out, right 0.3s ease-out;

}



.fancy .bottom-key-2 {

    height: 2px;

    width: 0.625rem;

    right: 0.625rem;

    bottom: -2px;

    position: absolute;

    background: transparent;

    transition: width 0.5s ease-out, right 0.3s ease-out;

}



.fancy:hover {

    color: white;

    background: black;

}



.fancy:hover::before {

    width: 0.9375rem;

    background: white;

}



.fancy:hover .text {

    color: white;

    padding-left: 1.5em;

}



.fancy:hover .top-key {

    left: -2px;

    width: 0px;

}



.fancy:hover .bottom-key-1,

.fancy:hover .bottom-key-2 {

    right: 0;

    width: 0;

}





/* ==========================================================================

   14. HERO RESPONSIVE

   ========================================================================== */



@media (max-width: 768px) {



    .hero {

        width: 100%;

        justify-content: center;

    }



    .hero-title {

        width: 100%;

        text-align: center;

        margin: 20px auto;

    }



    .hero-p {

        text-align: center;

        width: 100%;

        margin: 20px auto;

        margin-top: 0;

    }



    .hero-image {

        display: none;

    }



    .fancy {

        margin: 0 auto;

    }

}



@media(min-width: 1100px) {



    .hero-image {

        top: -20%;

    }

}





/* ==========================================================================

   15. BRANDS SECTION

   ========================================================================== */



/*

|--------------------------------------------------------------------------

| SECTION CONTAINER

|--------------------------------------------------------------------------

| Definisce la section principale:

| - padding verticale equilibrato

| - sfondo neutro

| - contenimento del layout

*/



.brands-section {

    width: 100%;

    padding: 40px 0;

    background: transparent;

    overflow: hidden;

}





/*

|--------------------------------------------------------------------------

| LOGOS WRAPPER

|--------------------------------------------------------------------------

| Layout flex professionale:

| - distribuzione uniforme

| - allineamento verticale perfetto

| - altezza consistente

| - linea divisoria ottenuta con border

*/



.brands-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;



    max-width: 1400px;



    margin: 0 auto;

    padding: 0 48px;

}





/*

|--------------------------------------------------------------------------

| SINGLE LOGO ITEM

|--------------------------------------------------------------------------

| Ogni logo:

| - occupa spazio identico

| - centra il contenuto

| - crea separatori verticali

| - mantiene altezza coerente

*/



.brand-item {

    position: relative;



    flex: 1;



    display: flex;

    align-items: center;

    justify-content: center;



    min-height: 120px;

}





/*

|--------------------------------------------------------------------------

| VERTICAL DIVIDER

|--------------------------------------------------------------------------

| Pseudo-elemento che genera il divisore:

| - altezza al 40% della section

| - centrato verticalmente

| - escluso ultimo elemento

*/



.brand-item:not(:last-child)::after {

    content: "";



    position: absolute;



    top: 50%;

    right: 0;



    width: 1px;

    height: 40%;



    background: rgba(0, 0, 0, 0.12);



    transform: translateY(-50%);

}





/*

|--------------------------------------------------------------------------

| SVG STYLING

|--------------------------------------------------------------------------

| Uniforma le dimensioni dei loghi:

| - scaling responsivo

| - stessa presenza visiva

| - mantiene proporzioni originali

*/



.brand-item svg {

    width: auto;

    height: 48px;



    max-width: 80%;



    display: block;



    opacity: 0.9;



    transition:

        opacity 0.3s ease,

        transform 0.3s ease;

}





/*

|--------------------------------------------------------------------------

| HOVER EFFECT

|--------------------------------------------------------------------------

| Interazione premium minimale:

| - leggera enfasi

| - piccolo sollevamento

*/



.brand-item:hover svg {

    opacity: 1;

    transform: scale(1.2);

    transform: translateY(-2px);

}





/*

|--------------------------------------------------------------------------

| RESPONSIVE TABLET

|--------------------------------------------------------------------------

*/



@media screen and (max-width: 991px) {



    .brands-wrapper {

        padding: 0 24px;

    }



    .brand-item {

        min-height: 100px;

    }



    .brand-item svg {

        height: 45px;

    }

}





/*

|--------------------------------------------------------------------------

| RESPONSIVE MOBILE

|--------------------------------------------------------------------------

*/



@media screen and (max-width: 767px) {



    .brands-section {

        display: none;

    }



    .brand-item {

        width: 100%;

        min-height: 96px;

    }



    .brand-item:not(:last-child)::after {

        top: auto;

        bottom: 0;

        right: 50%;



        width: 40%;

        height: 1px;



        transform: translateX(50%);

    }



    .brand-item svg {

        height: 34px;

    }

}





/* ==========================================================================

   16. GLASSMORPHISM

   ========================================================================== */



.glassmorphism {

    background: rgba(138, 136, 136, 0.15);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}





/* ==========================================================================

   17. COLONNE LOGHI

   ========================================================================== */



.colonna-20 {

    width: 12%;

    padding: 10px;

    text-align: center;

    font-size: 23px;

    font: bold;



    /* border: 1px solid red; */

}



.margin {

    border-right: 1px rgb(218, 219, 222) solid;

}



@media (max-width: 768px) {



    .grid2 {

        display: none;

    }

}





/* ==========================================================================

   18. BOSCH CERTIFICATE SECTION

   ========================================================================== */



.bosch-certificate {

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    font-family: 'Barlow', sans-serif;

}



.bosch-banner {

    background: transparent;

    border-radius: 12px;

    padding: 32px 40px;



    display: flex;

    flex-wrap: wrap;

    align-items: center;



    gap: 0;



    max-width: 900px;

    width: auto;



    border: 1px #868fa1 solid;



    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

}





/* ==========================================================================

   19. BLOCCO LOGO BOSCH

   ========================================================================== */



.logo-block {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    flex-shrink: 0;



    padding-right: 32px;

}



.logo-bosch {

    font-size: 36px;

    font-weight: 800;

    color: #e30613;



    letter-spacing: -1px;

    line-height: 1;

}



.logo-sub {

    font-size: 11px;

    font-weight: 700;

    color: #1a56db;



    letter-spacing: 1.5px;

    text-transform: uppercase;



    margin-top: 2px;

}





/* ==========================================================================

   20. DIVISORE CENTRALE

   ========================================================================== */



.divider-second {

    width: 1px;

    height: 100px;



    background: #060607;



    flex-shrink: 0;



    margin: 0 32px;

}





/* ==========================================================================

   21. BLOCCO TESTO

   ========================================================================== */



.text-block {

    flex: 1;

    min-width: 0;



    padding-right: 16px;

}



.text-block .headline {

    font-size: 16px;

    font-weight: 800;

    color: #1a1a1a;



    letter-spacing: 0.3px;

    line-height: 1.3;



    text-transform: uppercase;

}



.text-block .subheadline {

    font-size: 16px;

    font-weight: 700;

    color: #1a56db;



    text-transform: uppercase;



    letter-spacing: 0.3px;

    line-height: 1.3;



    margin-bottom: 12px;

}



.text-block .description {

    font-size: 13px;

    font-weight: 400;

    color: #4a4f5a;



    line-height: 1.55;



    max-width: 280px;

}





/* ==========================================================================

   22. ICONE CERTIFICAZIONE

   ========================================================================== */



.icons-block {

    display: flex;

    gap: 28px;



    flex-shrink: 0;

    align-items: flex-start;



    padding-left: 16px;

}



.icon-item {

    display: flex;

    flex-direction: column;



    align-items: center;



    gap: 10px;



    text-align: center;



    min-width: 80px;

}



.icon-wrap {

    width: 56px;

    height: 56px;



    display: flex;

    align-items: center;

    justify-content: center;



    position: relative;

}





/* Trattino blu sotto l'icona */



.icon-wrap::after {

    content: '';



    position: absolute;



    bottom: -6px;

    left: 50%;



    transform: translateX(-50%);



    width: 28px;

    height: 2px;



    background: #1a56db;

}



.icon-wrap svg {

    width: 42px;

    height: 42px;



    stroke: #1a1a1a;

    fill: none;



    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}



.icon-label {

    font-size: 10px;

    font-weight: 700;



    color: #1a1a1a;



    text-transform: uppercase;

    letter-spacing: 0.6px;

    line-height: 1.4;



    margin-top: 8px;

}





/* ==========================================================================

   23. RESPONSIVE BOSCH CERTIFICATE

   ========================================================================== */



@media(max-width: 850px) {



    .bosch-banner {

        flex-direction: column;

    }



    .icons-block{

        padding-left: 0;

        padding-top: 15px;

    }



    .divider-second {

        width: 100px;

        height: 1px;



        flex-shrink: 0;



        margin: 32px auto;

    }

}



@media(max-width: 400px) {



    .bosch-banner {

        padding: 10px;

    }

}



/* ==========================================================================

   24. GRID CONTENT HOME

   ========================================================================== */



/* Prima griglia con immagine e testo */



.grid-content {

    display: flex;

    flex-wrap: wrap;

    max-width: 90%;

    margin: 0 auto;

    margin-top: 5%;

    align-self: auto;

}





/* ==========================================================================

   25. COLONNE GRID

   ========================================================================== */



.colonna50 {

    width: 50%;

    position: relative;

    padding: 10px;

    align-content: center;

    text-align: left;

    font-size: 20px;

    font: bold;



    /* border: 1px solid red; */

}



.uno {

    padding-top: 50px;

}



.tre {

    padding-top: 30px;

    padding-bottom: 50px;

    margin-bottom: 5%;

}



.content-p {

    font-size: smaller;

}



/*

.svg-content{

    position: absolute;

    top: 0;

    left: 0;

    margin: 10px;

}

*/





/* ==========================================================================

   26. RESPONSIVE GRID CONTENT

   ========================================================================== */



@media (max-width: 768px) {



    .grid-content {

        flex-direction: column-reverse;

        text-align: center;

    }



    .colonna50 {

        width: 100%;

        display: flex;

        flex-direction: column;

        text-align: center;

    }



    .content-title {

        padding-top: 25px;

    }



    .due {

        display: none;

    }



    .svg-content {

        position: unset;

        align-self: center;

        margin: 10px;

    }



    .uno {

        padding: 20px;

    }

}





/* ==========================================================================

   27. TITOLO CTA

   ========================================================================== */



.btn-title {

    width: 75%;

    text-align: center;

    font-size: 2.5rem;

    margin: 0 auto;

    margin-top: 8%;

}



.box {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}





/* ==========================================================================

   28. BOTTONE CUSTOM (.btn)

   ========================================================================== */



.btn {

    border: none;

    cursor: pointer;

    font-family: sans-serif;

    position: relative;



    display: inline-block;

    margin: 0 auto;

    margin-top: 2%;



    padding: 15px 30px;



    background-color: inherit;



    /*

    background-color: rgba(152, 154, 157, 1);



    background-color: rgba(98, 153, 225, 0.62);

    color: #fff;

    */



    font-size: 14.6px;

    text-align: center;



    /*

    border-radius: 35px;

    font: Poppins;

    */



    transition: background-color 0.3s ease;

}



.btn::before {

    content: "";



    width: 1.5px;

    height: .8rem;



    position: absolute;



    bottom: 1%;

    left: 1%;



    background-color: rgb(8, 4, 4);



    transition: .5s cubic-bezier(

        0.215,

        0.610,

        0.355,

        1

    );

}



.btn span::after {

    content: "";



    width: .8rem;

    height: 1.5px;



    position: absolute;



    bottom: 1%;

    left: 1%;



    background-color: rgb(8, 4, 4);



    transition: .5s cubic-bezier(

        0.215,

        0.610,

        0.355,

        1

    );

}



.btn span::before {

    content: "";



    width: .8rem;

    height: 1.5px;



    position: absolute;



    top: 1%;

    right: 1%;



    background-color: rgb(8, 4, 4);



    transition: .5s cubic-bezier(

        0.215,

        0.610,

        0.355,

        1

    );

}



.btn::after {

    content: "";



    width: 1.5px;

    height: .8rem;



    position: absolute;



    top: 1%;

    right: 1%;



    background-color: rgb(8, 4, 4);



    transition: .5s cubic-bezier(

        0.215,

        0.610,

        0.355,

        1

    );

}





/* Hover */



.btn:hover::after,

.btn:hover::before {

    height: 98%;

}



.btn:hover span::after,

.btn:hover span::before {

    width: 98%;

}



.plus {

    margin: 20px auto;

}





/* ==========================================================================

   29. SEZIONE CONTATTI

   ========================================================================== */



#contatti {

    transition: all 0.5s ease;

    scroll-margin-top: 40px;

}





/* ==========================================================================

   30. GRID CONTATTI

   ========================================================================== */



.grid-contatti {

    display: grid;



    max-width: 90%;



    margin: 0 auto;

    margin-top: 10%;



    grid-template-columns:

        repeat(auto-fit, minmax(250px, 1fr));



    justify-items: center;

    grid-template-rows: auto;

}



.elemento-contatti {

    display: flex;

    flex-direction: column;



    padding: 10px;



    align-items: center;

    text-align: center;



    width: 70%;



    gap: 10px;



    font-size: clamp(0.8rem, 0.5vw, 1.5rem);



    /* position: relative; */

}



@media(max-width: 833px) {



    .grid-contatti {

        width: 95%;

        display: flex;

        flex-wrap: wrap;

        justify-content: space-evenly;

    }



    .elemento-contatti {

        width: 250px;

    }

}



.elemento-contatti h2 {

    transition: all 2s cubic-bezier(

        0.075,

        0.82,

        0.165,

        1

    );

}



.elemento-contatti h2:hover::before {

    content: ">";

}





/* ==========================================================================

   31. FOOTER V1

   ========================================================================== */



footer {

    width: 100%;

    margin: 0 auto;

    margin-top: 10%;



    position: relative;



    text-align: center;



    padding: 20px;

    padding-right: 10px;



    background-color:

        rgba(217, 217, 217, 1);

}





/* Linea separatrice */



hr {

    margin: 20px auto;

    border: none;

    border-top: 1px solid #ccc;

    width: 80%;

}





/*

.footer{

    width: 350px;

    height: auto;

    padding-right: 5%;

}

*/





/* ==========================================================================

   32. FOOTER LAYOUT

   ========================================================================== */



footer {

    background: #e8e8e4;

    padding: 30px 30px;

}



.footer-main {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding-bottom: 40px;

}





/* ==========================================================================

   COLONNA SINISTRA

   ========================================================================== */



.footer-left {

    display: flex;

    flex-direction: column;

    gap: 28px;

    max-width: 380px;

    text-align: left;

}



.footer-logo img {

    max-width: 20vw;

    height: auto;

}



.footer-info h4 {

    font-size: 14px;

    font-weight: 700;

    color: #111;

    margin-bottom: 6px;

}



.footer-info p {

    font-size: 14px;

    color: #111;

    font-weight: 400;

}



.footer-contacts h4 {

    font-size: 14px;

    font-weight: 700;

    color: #111;

    margin-bottom: 8px;

}



.footer-contacts a {

    display: block;

    font-size: 14px;

    color: #111;

    text-decoration: underline;

    line-height: 1.8;

}





/* ==========================================================================

   COLONNA CENTRALE

   ========================================================================== */



.footer-nav {

    display: flex;

    flex-direction: column;

    gap: 18px;

    padding-top: 4px;

    text-align: left;

}



.footer-logo-special {

    display: none;

}



.footer-nav a {

    font-size: 15px;

    font-weight: 700;

    color: #111;

    text-decoration: none;

}



.footer-nav a:hover {

    text-decoration: underline;

}





/* ==========================================================================

   COLONNA DESTRA

   ========================================================================== */



.footer-hours {

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding-top: 4px;

    text-align: left;

}



.footer-hours h4 {

    font-size: 15px;

    font-weight: 700;

    color: #111;

    margin-bottom: 12px;

}



.footer-hours p {

    font-size: 14px;

    color: #111;

    line-height: 1.85;

}



.footer-hours p strong {

    font-weight: 700;

}





/* ==========================================================================

   FOOTER BOTTOM

   ========================================================================== */



.footer-bottom {

    border-top: 1px solid #c0c0bc;



    padding: 18px 0;



    display: flex;

    justify-content: space-between;

    align-items: center;

}



.footer-bottom .copy {

    font-size: 13px;

    color: #111;

}



.footer-bottom .legal {

    display: flex;

    gap: 32px;

}



.footer-bottom .legal a {

    font-size: 13px;

    color: #111;

    text-decoration: underline;

}





/* ==========================================================================

   FOOTER V1 RESPONSIVE

   ========================================================================== */



@media(max-width: 768px) {



    .footer-left {

        display: none;

    }



    .footer-logo-special {

        display: block;

        width: 25vw;

        max-width: 170px;

        height: auto;

    }



    .footer-bottom {

        flex-direction: column;

        gap: 10px;

    }

}



/* ==========================================================================

   ==========================================================================

   FOOTER V2 (NUOVA VERSIONE)

   ==========================================================================

   ========================================================================== */





/* ==========================================================================

   CTA SECTION

   ========================================================================== */



.cta-section {

    background: transparent;

    padding: 60px 0 40px 0;

}



.cta-subtitle {

    color: #0054a6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    display: block;

    margin-bottom: 20px;

}



.cta-title {

    font-size: 42px;

    font-weight: 800;

    color: #0a141d;

    line-height: 1.2;

    margin-bottom: 20px;

}



.cta-description {

    color: #556370;

    font-size: 16px;

    max-width: 700px;

    margin: 0 auto 35px auto;

}





/* ==========================================================================

   CTA BUTTONS

   ========================================================================== */

/*

.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;



    padding: 14px 28px;



    font-size: 14px;

    font-weight: 700;



    border-radius: 6px;



    text-decoration: none;



    transition: all 0.3s ease;

}



.btn-primary {

    background-color: #0054a6;

    color: #ffffff;

    border: 2px solid #0054a6;

}



.btn-primary:hover {

    background-color: #004080;

    border-color: #004080;

}



.btn-outline {

    background-color: transparent;

    color: #0054a6;

    border: 2px solid #0054a6;

}



.btn-outline:hover {

    background-color: #f0f4f8;

}

*/



/* ==========================================================================

   BADGES SECTION

   ========================================================================== */



.badges-section {

    padding: 40px 0;

    background-color: transparent;

}



.badges-section .container {

    --badge-gap: 30px;



    display: flex;

    justify-content: center;



    gap: var(--badge-gap);



    flex-wrap: nowrap;

}



.badge-item {



    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 250px;

    gap: 15px;



    position: relative;



    flex-wrap: nowrap;

}



.badges-section .badge-item:not(:last-child)::after {

    content: "";



    position: absolute;



    right: calc(var(--badge-gap) / -2);



    top: 15%;



    height: 70%;

    width: 1px;



    background-color: #2c2e30;

}



.badge-icon {

    width: 46px;

    height: 46px;



    background-color: #f0f5fa;



    border-radius: 50%;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-shrink: 0;

}



.badge-text h3 {

    font-size: 14px;

    font-weight: 700;

    color: #0a141d;



    margin-bottom: 2px;



    white-space: wrap;

}



.badge-text p {

    font-size: 13px;

    color: #707e8c;

    white-space: wrap;

}





/* ==========================================================================

   CONTACT CARDS

   ========================================================================== */



.cards-section {

    background-color: transparent;

    padding: 50px 0;

}



.contact-card {

    background-color: rgba(230, 232, 235, 1);



    border-radius: 8px;



    padding: 25px;



    display: flex;

    align-items: flex-start;



    gap: 20px;



    width: clamp(250px, 70vw, 350px);



    box-shadow:

        0 4px 12px rgba(0, 0, 0, 0.02);

}



.card-icon-box {

    width: 50px;

    height: 50px;

    background-color: transparent;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.card-content {

    display: flex;

    flex-direction: column;

}



.card-label {

    font-size: 13px;

    color: #181a1d58;

    margin-bottom: 4px;

}



#email {

    font-size: clamp(13.5px, 2vw, 18px);

}



.card-value {

    font-size: 18px;

    

    font-weight: 700;



    color: #000000;



    text-decoration: none;



    margin-bottom: 12px;



    transition: all 0.3 ease-in-out;

}



.card-value:hover{

    text-decoration: underline;

}



.font-normal {

    font-style: normal;



    color: #0a141d;

}



.card-link {

    font-size: 14px;



    font-weight: 600;



    color: #000000;



    text-decoration: none;



    display: inline-flex;



    align-items: center;



    gap: 5px;

}



.card-link:hover span {

    transform: translateX(4px);

}



.card-link span {

    transition: transform 0.2s ease;

}





/* ==========================================================================

   FOOTER MAIN V2

   ========================================================================== */



.footer-main2 {

    background-color: rgba(230, 232, 235, 1);

    color: #000;

    padding: 60px 0 0 0;

}



.grid-footer {

    display: grid;

    grid-template-columns:

        1.2fr 0.9fr 1fr 0.9fr;



    gap: 40px;



    padding-bottom: 50px;

}



.footer-title {

    font-size: 14px;

    font-weight: 700;



    letter-spacing: 1px;



    margin-bottom: 25px;



    position: relative;



    color: #000;

}





/* ==========================================================================

   BRAND COLUMN

   ========================================================================== */



.footer-brand {

    display: flex;

    align-items: center;

    gap: 15px;



    margin-bottom: 20px;

}



.footer-brand img {

    height: clamp(30px, 3cqw, 50px);

    width: auto;

    display: block;

}



.bosch-logo-placeholder {

    padding: 0;



    display: flex;

    flex-direction: column;

    align-items: center;

}



.brand-text h2 {

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 0.5px;

}



.brand-sub {

    font-size: 9px;

    color: #a0aec0;

    letter-spacing: 0.5px;

}



.footer-desc {

    color: #929da8;

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 25px;

}





/* ==========================================================================

   SOCIAL

   ========================================================================== */



.social-links {

    display: flex;

    gap: 10px;

}



.social-links a {

    width: 36px;

    height: 36px;



    background-color: #1e2d38;



    border-radius: 50%;



    color: #ffffff;



    display: flex;

    align-items: center;

    justify-content: center;



    text-decoration: none;



    font-size: 14px;

    font-weight: bold;



    transition: background-color 0.3s;

}



.social-links a:hover {

    background-color: #0054a6;

}



/* Link del Footer (Servizi) */

.footer-links {

    list-style: none;

}



.footer-links li {

    margin-bottom: 12px;

}



.footer-links a {

    color: #929da8;

    text-decoration: none;

    font-size: 14px;

    transition: color 0.2s;

    display: inline-flex;

    align-items: center;

}



.footer-links a::before {

    content: "›";

    margin-right: 8px;

    color: #000000;

    font-size: 18px;

    line-height: 1;

}



.footer-links a:hover {

    color: #000;

}



/* Info Contatto */

.footer-contact-info {

    list-style: none;

    margin-bottom: 25px;

}



.footer-contact-info li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    font-size: 14px;

    color: #929da8;

    justify-content: center;

}



.footer-contact-info a {

    color: #929da8;

    text-decoration: none;

    text-align: center;

}



.footer-contact-info a:hover {

    color: #000;

}



.info-icon {

    color: #0054a6;

}



.btn-maps {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    border: 1px solid #1e2d38;

    padding: 10px 18px;

    color: #000000;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    border-radius: 4px;

    transition: background-color 0.3s;

}



.btn-maps:hover {

    background-color: #1e2d38;

    color: #ffffff;

}



/* Orari di apertura */

.opening-hours {

    font-size: 14px;

    color: #929da8;

}



.opening-hours strong {

    color: #333333;

}



.hours-time {

    margin-top: 2px;

}



.closed {

    color: #ff4d4d;

}



.mb-4 {

    margin-bottom: 15px;

}

/* ==========================================================================

   MAP MODAL

   ========================================================================== */



.map-modal {

    display: none;



    position: fixed;



    z-index: 9999;



    left: 0;

    top: 0;



    width: 100%;

    height: 100%;



    background-color: rgba(0, 0, 0, 0.8);



    align-items: center;

    justify-content: center;

}



.map-modal-content {

    position: relative;



    width: 90%;

    max-width: 800px;



    height: 60vh;



    background: #ffffff;



    padding: 10px;



    border-radius: 8px;



    box-shadow:

        0 4px 20px rgba(0,0,0,0.5);

}



.map-modal-content iframe {

    border-radius: 4px;

}



.map-close-btn {

    position: absolute;



    top: -40px;

    right: 0;



    color: #ffffff;



    font-size: 35px;

    font-weight: bold;



    cursor: pointer;



    transition: color 0.3s ease;

}



.map-close-btn:hover {

    color: #d8e2eb;

}





/* ==========================================================================

   FOOTER SOCKET

   ========================================================================== */



.footer-socket {

    background-color: #0a1116;



    border-top: 1px solid #1a252f;



    padding: 20px 0;



    font-size: 13px;



    color: #626e7a;



    text-align: left;

}

.copyright{

    margin: 10px;

    width: auto;

    min-width: 248px;

}

.mobile-only {

    display: none;

}



.socket-container {

    display: flex;

    justify-content: space-between;

    align-items: center;



}



.socket-links{

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

}



.socket-links a {

    color: #626e7a;

    text-decoration: none;

    margin-left: 10px;

    transition: color 0.2s;



}



.socket-links a:hover {

    color: #ffffff;

}





/* ==========================================================================

   ==========================================================================

   PAGINA SERVIZI

   ==========================================================================

   ========================================================================== */



.hero-serv-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-evenly;



    padding-left: 0;



    margin-top: 15px;

}



.hero-serv-title {

    margin: 5vh auto;

}



.hero-serv-section {

    text-align: center;

    margin-bottom: 5vh;

}



.hero-serv-p {

    width: 90vw;

    margin: 0 auto;

}



.hero-serv-section p {

    margin-bottom: 5vh;

}



@media (max-width: 768px) {



    .hero-serv-section {

        margin-top: 0;

    }

}





/* ==========================================================================

   LISTA SERVIZI

   ========================================================================== */



.servizi {

    text-align: center;

}



.servizi li button {

    font-family: "orbitron";

    font-size: clamp(1.2em, 2vh, 2.2em);

    font-weight: 500;



    margin: clamp(20px, 3vh, 40px);



    cursor: pointer;



    background-color: inherit;

    border: none;

}



.servizi .content ul {

    list-style: disc;

    list-style-position: inside;

}





/* ==========================================================================

   CARD SERVIZI

   ========================================================================== */



.odd {

    text-align: left;



    box-shadow:

        -6px -6px 10px -1px rgba(255, 255, 255, 0.75);



    box-shadow:

        6px 6px 10px -1px rgba(69, 69, 69, 0.971);

}



.even {

    text-align: right;



    box-shadow:

        -6px -6px 10px -1px rgba(255, 255, 255, 0.75);



    box-shadow:

        6px 6px 10px -1px rgba(69, 69, 69, 0.971);

}



.servizi .servizi-li {

    list-style: none;



    width: 95%;



    margin: 20px;



    padding: 10px;



    border-radius: 8px;

}





/* ==========================================================================

   ACCORDION SERVIZI

   ========================================================================== */



.servizi .content {

    margin: 30px auto;



    max-height: 0;



    overflow: hidden;



    transition: max-height 0.5s ease-out;

}



.servizi .open {

    max-height: 50vh;

}



.content {

    display: flex;

    flex-direction: column;

}





/* ==========================================================================

   LABEL ODD

   ========================================================================== */



.label-odd::before {

    content: "+";



    margin-right: 10px;



    font-size: 24px;

    font-weight: 600;

}



.label-odd.open-button::before {

    content: "−";

}





/* ==========================================================================

   LABEL EVEN

   ========================================================================== */



.label-even::after {

    content: "+";



    margin-left: 10px;



    font-size: 24px;

    font-weight: 600;

}



.label-even.open-button::after {

    content: "−";

}



br {

    margin: 15px auto;

}





/* ==========================================================================

   ==========================================================================

   CHI SIAMO

   ==========================================================================

   ========================================================================== */



#svg-about {

    width: 85%;

    height: auto;



    margin: 35px auto;



    display: block;

}



.chi-siamo-container {

    margin-top: 30px;

    padding: 30px;

    text-align: center;

}



.about-content {

    margin: 0 auto;



    padding: 0;



    width: 90vw;



    display: block;



    align-content: center;

}



.about-content p {

    text-align: center;

}





/* ==========================================================================

   RESPONSIVE TABLET

   ========================================================================== */



@media (max-width: 992px) {



    .grid-footer {

        grid-template-columns: repeat(2, 1fr);

    }



    .grid-4 {

        grid-template-columns: repeat(2, 1fr);

        gap: 30px;

    }



    .grid-3 {

        grid-template-columns:

            repeat(auto-fit, minmax(285px, 1fr));

    }



    .desktop-only {

        display: none;

    }



    .mobile-only {

        display: block;

    }



    .footer-brand img {

        height: clamp(30px, 6vw, 50px);

        width: auto;

        display: block;

    }



    .badges-section .container {

        display: flex;

        gap: 30px;

        flex-wrap: wrap;

    }



    .badge-item{

    width:  250px;

    }



    .badges-section .badge-item::after {

        display: none;

    }



    .footer-about {

        grid-column: 1 / -1;



        display: flex;

        flex-direction: column;



        align-items: center;



        text-align: center;



        margin-bottom: 40px;

    }



    .footer-brand {

        justify-content: center;

        width: 100%;

    }

}





/* ==========================================================================

   RESPONSIVE MOBILE

   ========================================================================== */



@media (max-width: 576px) {



    .cta-title {

        font-size: 30px;

    }



    .cta-buttons {

        flex-direction: column;

    }





    .grid-4 {

        display: flex;

        align-items: center;

        justify-content: center;



    }

    .badge-item{

        width: 250px;

    }

    .socket-container {

        flex-direction: column;



        gap: 10px;



        text-align: center;

    }



    .socket-links a {

        margin: 0 10px;

    }



/*    .badges-section .container {

        grid-template-columns: 1fr;

    }*/



    .grid-footer {

        grid-template-columns: 1fr;



        text-align: center;

    }



    .footer-links a,

    .opening-hours {

        justify-content: center;

    }



    .footer-links a::before {

        display: none;

    }

}



@media (max-width:350px) {

    .bosch-certificate{

        text-align: center;



        

    }

    .bosch-banner{

        padding: 0;

        border: none;

        box-shadow: none;

    }

    .logo-block{

        align-items: center;

        padding-right: 0;

    }

}