/* Stile generico */

body {

    background-color: #f8f9fa;

    color: #343a40;

    margin-top: 0;

}



.container-fluid {

    display: flex;

    justify-content: space-between;

}



/* Navbar */

.navbar {

    background-color: black !important;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    z-index: 1000;

    padding: 10px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 0;

}



.navbar .container-fluid {

    display: flex;

    justify-content: space-between;

    width: 100%;

}



.navbar-toggler {

    border: 1px solid #ffffff;

    margin-left: 0;

}



#logoBrand {

    width: 8%;

    cursor: pointer;

    border: 1px solid white;

}



.navbar-brand {

    color: #ffffff !important;

    font-weight: bold;

}



.navbar-toggler-icon {

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}



.navbar-nav {

    display: flex;

    justify-content: center;

    flex: 1;

}



.nav-link {

    color: #ffffff !important;

    font-weight: 500;

    font-size: 1.5rem;

    margin: 0 20px;

    text-align: center;

}



.nav-link:hover {

    color: #ced4da !important;

}



/*Titolo certificazioni*/

.titoloCertificazioni {

    margin-bottom: 5%;

}



/* Certificazioni */

.certificazioni {

    margin-top: 8%;

}



@keyframes slide-in {

    from {

        transform: translateX(-100%);

    }

    to {

        transform: translateX(0%);

    }

}



.certificazionePNG {

    width: 100%;

    box-shadow: 4px 4px 20px #000000;

    animation: slide-in 1000ms;

    animation-timing-function: linear;

}



/* Terzo livello */

.terzoLivello {

    background-color: #212529;

    display: flex;

    justify-content: center;

    padding: 20px 0;

    margin-top: 8%;

}



.containerTerzoLivello {

    margin-top: 2%;

    display: flex;

    flex-direction: row;

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;

}



.containerTerzoLivello div {

    color: #495057;

    font-size: 1rem;

    margin: 10px;

}



.via {

    color: #495057;

    font-weight: bolder;

}



.sezioni {

    margin: 0 10%;

}



.titolo {

    font-weight: bolder;

}



.logoBrandSottostante {

    width: 45%;

}



.paragrafoUltimoLivello {

    font-weight: bolder;

    font-size: 1.5rem;

}



/* Responsive Design */

@media (max-width: 768px) {

    .navbar {

        flex-direction: column;

        align-items: flex-start;

        padding: 10px;

    }



    #logoBrand {

        width: 15%;

    }



    .navbar-nav {

        flex-direction: column;

        align-items: flex-start;

        width: 100%;

        align-items: center;

    }



    .nav-link {

        margin: 10px 0;

        font-size: 1.2rem;

    }



    .certificazioni {

        margin-top: 20%;

    }



    .certificazionePNG {

        width: 80%;

    }



    /* Terzo Livello */

    .containerTerzoLivello {

        gap: 15px; /* Riduce la spaziatura tra gli elementi */

        flex-direction: column;

    }

    

    .containerTerzoLivello div {

        font-size: 0.8rem; /* Font leggermente più piccolo */

    }

    

    /* Sezioni */

    .sezioni {

        margin: 0 5%; /* Riduce i margini laterali */

    }

    

    .logoBrandSottostante {

        width: 60%; /* Riduce la dimensione del logo */

        margin: 20px auto;

    }

    

    .paragrafoUltimoLivello {

        font-size: 1.2rem; /* Font più piccolo per leggibilità */

    }

}



@media (max-width: 576px) {

    .navbar {

        padding: 10px 5px;

    }



    #logoBrand {

        width: 20%;

    }



    .nav-link {

        font-size: 1rem;

    }



    .certificazionePNG {

        width: 90%;

    }



    .terzoLivello {

        padding: 15px;

        width: 100%;

    }



    .containerTerzoLivello {

        gap: 10px;

    }



    .paragrafoUltimoLivello {

        font-size: 1.2rem;

    }

}