/* Stili che avevi già, li ho solo formattati */
/* Stili per il Preloader a Schermo Intero */
.page-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Sfondo bianco */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Assicura che sia sopra tutto */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.page-preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disabilita interazioni quando nascosto */
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preloader-logo {
    max-width: 200px; /* Dimensione del logo */
    margin-bottom: 30px;
}

.progress-container {
    width: 250px;
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar {
    height: 100%;
    background-color: #01a2dd; /* Il tuo colore primario */
    transition: width 0.3s ease; /* Transizione fluida per la barra */
}

.progress-percentage {
    font-size: 0.9rem;
    color: #666666;
}


/* AGGIORNAMENTO: Nascondi la galleria solo quando il preloader è attivo, 
   non con la classe 'loading' che usavamo prima */
.portfolio-gallery {
    opacity: 0; /* Invisibile di default */
    visibility: hidden;
    transition: opacity 0.8s ease-in-out;
}

/* Quando la galleria è caricata, apparirà */
.portfolio-gallery.loaded {
    opacity: 1;
    visibility: visible;
}   
.admin-project-item { position: relative; border: 1px solid #ddd; border-radius: 0.25rem; overflow: hidden; aspect-ratio: 1 / 1; }
.admin-project-item img { width: 100%; height: 100%; object-fit: cover; }
.admin-drag-handle { position: absolute; top: 8px; left: 8px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 6px 8px; border-radius: 4px; cursor: move; transition: background-color 0.2s; z-index: 10; }
.admin-drag-handle:hover { background-color: rgba(0, 0, 0, 0.8); }
body { margin: 0; }
.portfolio-layout { display: flex; }
.portfolio-sidebar { width: 280px; min-width: 280px; background-color: #f8f9fa; border-right: 1px solid #dee2e6; height: 100vh; position: sticky; top: 0; }
.sidebar-sticky-content { display: flex; flex-direction: column; height: 100%; padding: 2rem;justify-content: space-between; }
.sidebar-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 2rem; line-height: 1.2; }
.sidebar-title a { color: #343a40; }
.sidebar-nav .nav-link { color: #6c757d; font-size: 1.1rem; padding: 0.5rem 0; }
.sidebar-nav .nav-link:hover { color: #212529; }
.portfolio-content { flex-grow: 1; }
.hero-slider-wrapper { position: relative; height: 80vh; margin: 0 auto; width: 95vw; }
.hero-slider .slider-item { height: calc(100vh - 140px); background-size: cover; background-position: center center; position: relative; color: #fff; }
.hero-slider .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); }
.hero-slider .slide-content { position: absolute; bottom: 10%; left: 5%; z-index: 2; }
.hero-slider .slide-text { font-size: 35px; font-weight: 300; line-height: 1.2; background: rgba(0, 0, 0, 0.5); padding: 20px; }
.hero-slider .slide-text span { color: #01a2dd; }
.slider-button { display: inline-block; margin-top: 1.5rem; margin-left: 120px; color: #fff; font-size: 14px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; text-transform: uppercase; position: relative; }
.slider-button i { transition: all 0.3s ease; }
.slider-button span:before { width: 100px; content: ""; height: 1px; background-color: #fff; position: absolute; left: -120px; top: 13px; }
.slider-button:hover { text-decoration: underline; }
.slider-button:hover i { transform: translateX(5px); }
.hero-slider .owl-nav { position: absolute; top: 50%; right: -40px; transform: translateY(-50%); }
.hero-slider .owl-nav button {
    display: block !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: #9b9b9b !important;
    font-size: 1rem !important;
    margin: 5px 0 !important;
    padding: 5px 15px !important;
    border-radius: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease; /* Aggiunto per un hover più fluido */
}
.hero-slider .owl-nav button:hover {
    background: #fff !important;
    color: #01a2dd !important; /* Colore al click/hover su desktop */
} 
#modalVideoPlayer {
    background-color: #000;
}
/* Stile per il trigger del modale video */
.video-modal-trigger {
    cursor: pointer;
}
/* Per mobile (schermi fino a 767px, tipicamente sm e md di Bootstrap) */
@media (max-width: 767.98px) {
    .hero-slider .owl-nav { 
        top: auto;
        bottom: 0;
        right: 0 !important;
        right: auto;
        transform: none;
        width: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0px;
    }
    .hero-slider .slider-item { height: calc(100vh - 180px); }

    .hero-slider.owl-carousel .owl-nav button {
        background: rgba(0, 0, 0, 0.6) !important; /* Sfondo scuro per contrasto su immagini chiare */
        color: #fff !important; /* Testo bianco */
        padding: 15px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 0px !important; /* Angoli arrotondati su mobile */
        margin: 0 !important; /* Rimuove i margini verticali */
    }
    
    .hero-slider .owl-nav button:hover {
        color: rgba(0, 0, 0, 0.8) !important; /* Sfondo leggermente più scuro in hover */
        background: #fff !important;
    }
}
/* Stile per gli elementi della galleria */
.gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none; /* Rimuoviamo il bordo standard delle card */
    overflow: hidden;
}

.gallery-item:hover {
    transform: scale(1.05); /* Leggero zoom in hover */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.video-container {
    position: relative;
    display: block;
}

.video-container .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    pointer-events: none; /* Per non interferire con il click sul link */
}

a:hover .video-container .play-icon {
    background-color: rgba(1, 162, 221, 0.8); /* Il tuo colore blu */
}
.social-sidebar { position: absolute; top: 50%; left: -70px; transform: translateY(-50%); z-index: 10; color: #9b9b9b; writing-mode: vertical-rl; height: 260px; display: flex; justify-content: space-between; align-items: center; }
.social-sidebar .social-text { margin-bottom: 20px; font-weight: 300; }
.social-sidebar a { color: #9b9b9b; margin-top: 20px; display: inline-block; font-size: 1.2rem; transform: rotate(90deg); }
.social-sidebar .divisoreSocial { width: 100px; height: 0.5px; background-color: #6c757d; transform: rotate(90deg); }
@media (min-width: 992px) { .container-header { padding: 0 50px}.dropdown:hover .dropdown-menu { display: block; margin-top: 0; } }
.sidebar-nav .nav-link.active { color: #01a2dd; font-weight: bold; }
.navbar-nav .nav-link.active { color: #01a2dd !important; }
.dropdown-menu .dropdown-item.active { background-color: #e9ecef; color: #01a2dd; }
.nav-link:hover { color: #01a2dd; }

/* NUOVI STILI PER PAGINA ABOUT E CONTATTI */
.services-list li {
    padding: 5px 0;
    font-size: 1.1rem;
}
.contact-info a {
    text-decoration: none;
    font-size: 1.2rem;
    color: #343a40;
}
.contact-info a:hover {
    color: #01a2dd;
}
.contact-social .social-icon {
    font-size: 2rem;
    margin-right: 15px;
    color: #6c757d;
    transition: color 0.3s ease;
}
.contact-social .social-icon:hover {
    color: #01a2dd;
}
.contact-form {
    background-color: #f8f9fa;
}