@font-face {
    font-family: "Vonique 43_D"; src: url("../fonts/Vonique\ 43_D.otf");    
    }

    body {
        margin: 0;
        padding: 0;
        font-size: 14px;
        background-color: #141414;
        color: white;
        font-family: "Vonique 43_D", Arial, Helvetica, sans-serif;
        }
    
    /* Estilos para el preloader */
    #preloader {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        opacity: 1; /* Inicialmente visible */
        transition: opacity 0.5s ease; /* Efecto de suavizado */
    }

    #preloader img {
        width: 150px;
        height: auto;
    }

    /* Oculta el contenido de la página */
    .content {
        display: none;
    }

    /* Estilos para el contenido visible después de cargar */
    .content.visible {
        display: block;
    }

    /* Resto de tus estilos CSS aquí */
    .container {
        display: flex;
        justify-content: space-around;
        align-items:center;
        padding: 20px 20px;
    }
    
    .saviezza a {
        text-decoration: none;
        color: white;
        font-size: 20px;
    }
    
    .saviezza a:hover {
        color: gold;
    }
    
    .logo img {
        width: 60px;
        height: auto;
        transition: transform 0.3s ease-in-out;       
    }
    
    .logo img:hover {
        transform: scale(1.1);
        color: gold;
    }
    
    .social-icons a {
        color: white;
        text-decoration: none;
        margin-left: 20px;
    }
    
    .social-icons a:hover {
        color: gold;
    }
    
    .hamburger-menu {
        display: none;
    }

    .navbar {
        background-color: gold;
        height: 30px;
        display: flex;
        justify-content:space-around; /* Centrar horizontalmente */
        align-items: center; /* Centrar verticalmente */
        padding: 0 20px; /* Espacio alrededor del texto */
    }
    
    .nav-link {
        text-decoration: none;
        color: #141414; /* Color del texto */
        font-size: 14px; /* Tamaño del texto */
        margin: 0 10px; /* Espacio entre enlaces */
    }
    
    .nav-link:hover {
        color: rgb(255, 255, 255); /* Cambio de color al pasar el mouse */
    }
    
    /* Estilos para la imagen de construcción */
    .construction-image {
        text-align: center; /* Centrar horizontalmente */
        margin-top: 50px; /* Margen superior para separar del contenido superior */
        max-width: 100%; /* La imagen no puede ser más ancha que su contenedor */
        height: auto; /* La altura se ajusta automáticamente para mantener la proporción */
    }

    .construction-image img {
        border-radius: 15px; /* Esquinas redondeadas */
        max-width: 100%; /* Asegura que la imagen no supere el ancho del contenedor */
    }


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

       .navbar{
        text-decoration: none;
        color: #141414;
        font-size: 12px;
        justify-content: space-around;
       } 

       .logo img {
        width: 40px;
        height: auto;
        transition: transform 0.3s ease-in-out;       
    }
    
    .logo img:hover {
        transform: scale(1.1);
        color: gold;
    }

    .saviezza a{
        text-decoration: none;
        color: white;
        font-size: 30px;
    }
    
    .saviezza a:hover {
        color: gold;
    }

    /* Estilos para la imagen de construcción */
    .construction-image {
        text-align: center; /* Centrar horizontalmente */
        margin-top: 50px; /* Margen superior para separar del contenido superior */
        max-width: 100%; /* La imagen no puede ser más ancha que su contenedor */
        height: auto; /* La altura se ajusta automáticamente para mantener la proporción */
    }

    .construction-image img {
        border-radius: 15px; /* Esquinas redondeadas */
        max-width: 100%; /* La imagen no puede ser más ancha que su contenedor */
        height: auto; /* La altura se ajusta automáticamente para mantener la proporción */
    }

    }