/* --- RESET & BASICS --- */
:root {
    --primary: #0070f3;        /* Blu Elettrico Logo/Bottoni */
    --secondary: #004aab;      /* Blu Ombra 3D */
    --text-dark: #1a2b3c;      /* Grigio fumo molto scuro (più moderno del blu notte) */
    --text-light: #556b82;     /* Grigio per i testi secondari */
    --services: #f0f7ff;       /* Blu ghiaccio leggermente più luminoso */
    --white: #ffffff;
}
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #333; background-color: #fff; overflow-x: hidden; }
        .container { max-width: 1800px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
        a { text-decoration: none; transition: 0.3s; }
        ul { list-style: none; }
		
		.section-title { font-size: 2.8rem; font-weight: 800; color: var(--text-dark); margin-bottom: 25px; line-height: 1.2; }
		.white-text h2, .white-text p { color: #fff !important; }
        /* --- 1. TOP BAR --- */
        .top-bar { background: #f8f9fa; border-bottom: 1px solid #eee; padding: 10px 0; }
        .top-bar-content { display: flex; justify-content: flex-end; align-items: center; }
        .emergency-notice {
            background: #d32f2f; color: white; padding: 5px 15px; border-radius: 50px;
            font-weight: 700; font-size: 0.9rem; animation: pulse 2s infinite;
        }
        .emergency-notice a { color: white; margin-left: 5px; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
        /* --- 2. HEADER & NAV --- */
/* --- NUOVO HEADER ASIMMETRICO --- */
/* --- STILE LOGO 3D E LAYOUT --- */
    header {
        background: #fff;
        padding: 15px 0;
        box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        position: sticky;
        top: 0;
        z-index: 2100;
    }
	body.menu-open .logo-wrapper, 
	body.menu-open .top-bar,
	body.menu-open .hamburger {
		opacity: 0;
		visibility: hidden;
		transition: 0.3s;
	}
	
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /* Container Logo + Icona */
    .logo-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1.5;
    }
    .logo-icon {
        height: 50px; /* Regola l'altezza della tua gif */
        width: auto;
    }
    .logo-text-group {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }
    /* Effetto 3D sul Testo */
    .logo-3d {
        font-family: 'Inter', sans-serif;
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0;
        /* Ombre multiple per l'effetto profondità */
        text-shadow: 
            1px 1px 0px var(--secondary),
            2px 2px 0px #003580,
            3px 3px 2px rgba(0,0,0,0.2);
    }
    .logo-subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--primary);
        text-transform: lowercase;
        letter-spacing: 4px; /* Spazia le lettere per un look moderno */
        margin-top: 2px;
        padding-left: 2px;
    }
    /* Menu Centrale */
    .main-nav {
        flex: 2;
        display: flex;
        justify-content: center;
    }
    .nav-menu {
        display: flex;
        gap: 25px;
    }
	.nav-menu a {
		color: var(--text-dark);   /* Colore neutro professionale */
		font-weight: 600;          /* Leggermente meno spesso (800 è troppo pesante qui) */
		font-size: 0.85rem;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		opacity: 0.85;             /* Rende il menu meno aggressivo rispetto al logo */
	}
	
	.nav-menu a:hover {
		color: var(--primary);     /* Si illumina del colore del logo al passaggio */
		opacity: 1;
	}
	
		/* --- STILI BASE OVERLAY (Sempre fuori dalle media query) --- */
	.menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 2500; /* Molto alto */
		display: none; /* Fondamentale: nascosto di default */
		backdrop-filter: blur(4px);
	}
	
	.menu-overlay.active {
		display: block !important;
	}
    .header-spacer { flex: 1; }
    /* Dropdown moderno */
    .has-dropdown { position: relative; }
    .dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        min-width: 280px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border-radius: 5px;
        border-top: 3px solid var(--primary);
        padding: 10px 0;
    }
    .has-dropdown:hover .dropdown { display: block; }
    .dropdown li a {
        display: block;
        padding: 10px 20px;
        font-size: 0.85rem;
        border-bottom: 1px solid #f4f4f4;
    }
    /* Icona freccia */
    .fa-chevron-down {
        font-size: 0.7rem;
        margin-left: 5px;
    }
        .nav-menu li:hover .dropdown { display: block; }
        .dropdown li a:hover { background: #f1f9ff; color: var(--primary); }
	.lang-selector {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-left: 20px;
		font-size: 0.85rem;
		font-weight: 700;
		}
	
	.lang-link {
		color: var(--text-dark);
		text-decoration: none;
		opacity: 0.6;
	}
	
	.lang-link.active, .lang-link:hover {
		color: var(--primary);
		opacity: 1;
	}
	
	.lang-divider {
		color: #ccc;
	}
	
	.lang-selector-mobile { display: none; }
        /* --- 3. HERO SLIDER SECTION --- */
        .hero {
            position: relative;
            height: 500px; /* Altezza fissa per lo slider */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            overflow: hidden;
        }
		
				/* Hero specifica per pagine interne */
		.hero-page {
			height: 350px;
			background-size: cover;
			background-position: center;
			display: flex;
			align-items: center;
			text-align: center;
			position: relative;
		}
        /* Contenitore delle immagini */
        .hero-slides {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
        }
        .slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover; background-position: center;
            opacity: 0; transition: opacity 1.5s ease-in-out;
        }
        .slide.active { opacity: 1; }
        /* Overlay scuro per leggibilità testo */
        .hero::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5); z-index: 2;
        }
		.hero .container {
			position: relative;
			z-index: 10; /* Un valore alto per stare sopra l'after */
		}
        .hero h1 { 
			font-size: 3.5rem; 
			font-weight: 800; 
			margin-bottom: 20px; 
			text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Protegge la lettura */
		}
        .hero p { font-size: 1.2rem; margin-bottom: 30px; }
		.btn-main {
			background: var(--primary); 
			color: white; 
			padding: 18px 40px; /* Più grande e cliccabile */
			border-radius: 50px;
			font-weight: 700; 
			text-transform: uppercase;
			letter-spacing: 1px;
			box-shadow: 0 4px 15px rgba(0, 112, 243, 0.4); /* Effetto neon blu */
			transition: 0.3s;
		}
		.btn-main:hover {
			background: var(--secondary);
			transform: scale(1.05);
			box-shadow: 0 6px 20px rgba(0, 112, 243, 0.6);
		}
		 /* --- 3.5. TRUST BAR --- */
		.trust-bar { 
			background: #fff; 
			padding: 25px 0; 
			border-bottom: 1px solid #eee; 
			position: relative; /* Fondamentale per non sovrapporsi */
			z-index: 5;
		}
		
		.trust-grid { 
			display: flex; 
			justify-content: space-around; 
			font-weight: 700; 
			color: var(--primary); 
			gap: 15px;
		}
		.trust-item i { margin-right: 8px; }
        /* --- 4. SERVICES SECTION --- */
        .section-header { text-align: center; margin-bottom: 50px; }
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
		.services { 
			padding: 100px 0; 
			/* Il tuo nuovo colore di sfondo */
			background-color: var(--services); 
			position: relative;
			/* Una sfumatura leggerissima in alto per non avere un taglio netto col bianco */
			border-top: 1px solid rgba(0,0,0,0.05);
		}
		
		.section-header h2 {
			color: var(--text-dark); /* Un verde bosco scuro per il titolo, sta benissimo sul menta */
			font-size: 2.5rem;
			font-weight: 900;
			margin-bottom: 15px;
			text-align: center;
		}
		
		.section-header p {
			color: #444; 
			font-weight: 500;
			text-align: center;
			margin-bottom: 60px;
			letter-spacing: 1px;
		}
		
		/* Le card bianche sul fondo menta */
		.service-card {
			background: #ffffff; 
			padding: 50px 35px; 
			border-radius: 20px; 
			text-align: center;
			/* Ombra colorata bluastra */
			box-shadow: 0 15px 35px rgba(0, 112, 243, 0.08); 
			transition: all 0.4s ease;
			border: 1px solid rgba(0, 112, 243, 0.05); /* Un tocco di classe: bordino finissimo azzurro */
		}
		
		.service-card:hover { 
			transform: translateY(-12px); 
			/* L'ombra aumenta quando "si alza" */
			box-shadow: 0 20px 40px rgba(0, 112, 243, 0.15);
			border-color: var(--primary);
		}
		
		.service-card i { 
			font-size: 3.2rem; 
			color: var(--primary); /* Il tuo verde acceso */
			margin-bottom: 25px;
			/* Un leggero riflesso sulle icone */
			filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
		}
		
		.service-card h3 { 
			color: var(--text-dark); 
			font-size: 1.5rem;
			margin-bottom: 15px;
			font-weight: 800;
		}
		
		.service-card p { 
			color: #555;
			font-size: 1rem;
			line-height: 1.6;
		}
		
		/* --- 4.5 SEZIONE MEZZI DINAAMICA --- */
		
		.sticker-title { font-size: 3rem; font-weight: 900; text-transform: uppercase; margin-bottom: 15px; }
		.sticker-subtitle { font-size: 1.25rem; max-width: 750px; margin: 0 auto 80px; opacity: 0.9; }
		.fleet-dynamic-section {
			padding: 120px 0;
			background-color: var(--secondary);
			background-image: radial-gradient(circle at 15% 50%, rgba(255,255,255,0.08) 0%, transparent 55%);
			color: #fff;
			overflow: hidden;
		}
		.sticker-title { font-size: 3rem; font-weight: 900; text-transform: uppercase; margin-bottom: 15px; }
		.sticker-subtitle { font-size: 1.25rem; max-width: 750px; margin: 0 auto 80px; opacity: 0.9; }
		.fleet-dynamic-grid {
			display: flex; flex-direction: column; gap: 60px;
		}
		.fleet-dynamic-item {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 50px;
			align-items: center;
			background: rgba(255,255,255,0.04);
			padding: 30px;
			border-radius: 25px;
			border: 1px solid rgba(255,255,255,0.08);
			transition: all 0.4s ease;
		}
		.fleet-dynamic-item:hover {
			background: rgba(255,255,255,0.07);
			transform: translateY(-5px);
			box-shadow: 0 20px 40px rgba(0,0,0,0.2);
		}
		/* Posizionamento accattivante delle immagini scontornate */
		.fleet-dynamic-image {
			position: relative;
			display: flex; justify-content: center; align-items: center;
		}
		.fleet-dynamic-image img {
			max-width: 130%; /* L'immagine esce leggermente dal container per impatto */
			height: auto;
			object-fit: contain;
			/* Ombra netta stile sticker ma senza bordo bianco per pulizia */
			filter: drop-shadow(15px 15px 0px rgba(0,0,0,0.25));
			transition: all 0.5s ease;
		}
		/* Animazione al passaggio del mouse sull'immagine scontornata */
		.fleet-dynamic-item:hover .fleet-dynamic-image img {
			transform: scale(1.1) rotate(2deg);
			filter: drop-shadow(20px 25px 15px rgba(0,0,0,0.35));
		}
		.fleet-dynamic-info h3 {
			font-size: 2.2rem; font-weight: 800; text-transform: uppercase;
			color: #fff; margin-bottom: 20px;
			background: linear-gradient(120deg, #fff, rgba(255,255,255,0.7));
			-webkit-background-clip: text; -webkit-text-fill-color: transparent;
		}
		.fleet-dynamic-info p { font-size: 1.15rem; color: rgba(255,255,255,0.85); line-height: 1.8; }
		/* Invertiamo l'ordine per il secondo e quarto elemento per dinamismo */
		.fleet-dynamic-item:nth-child(even) .fleet-dynamic-image { order: 2; }
		.fleet-dynamic-item:nth-child(even) .fleet-dynamic-info { order: 1; text-align: right; }
		
		/* --- STILI PAGINA SERVIZI --- */

		/* Badge sopra il titolo Hero */
		.service-badge {
			display: inline-block;
			background: var(--primary);
			color: white;
			padding: 5px 15px;
			border-radius: 50px;
			font-weight: 800;
			font-size: 0.8rem;
			text-transform: uppercase;
			margin-bottom: 15px;
			letter-spacing: 1px;
		}
		
		/* Lista icone descrizione */
		.service-features { margin: 25px 0; }
		.service-features li {
			margin-bottom: 12px;
			display: flex;
			align-items: center;
			gap: 10px;
			font-weight: 600;
			color: var(--text-dark);
		}
		.service-features i { color: var(--primary); font-size: 1.2rem; }
		
		/* Pulsante Chiama Ora Animato */
		.pulse-btn {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 1.1rem !important;
		}
		.pulse-btn i { animation: phoneShake 0.5s infinite alternate; }
		
		@keyframes phoneShake {
			0% { transform: rotate(-10deg); }
			100% { transform: rotate(10deg); }
		}
		
		/* Immagine fluttuante (stile sticker ma senza bordo se preferisci) */
		.floating-img {
			filter: drop-shadow(20px 20px 30px rgba(0,0,0,0.1));
			animation: float 4s ease-in-out infinite;
		}
		
		@keyframes float {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(-15px); }
		}
		
		/* --- SEZIONE GALLERIA BLU --- */
		.intervention-gallery-box {
			padding: 80px 0;
			background-color: #f4f7fa; /* Sfondo neutro esterno */
		}
		
		.gallery-blue-container {
			background-color: var(--secondary);
			padding: 60px 40px;
			border-radius: 30px;
			box-shadow: 0 20px 40px rgba(0,0,0,0.15);
		}
		
		.gallery-row {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 20px;
			margin-top: 40px;
		}
		
		.gallery-item {
			position: relative;
			height: 220px;
			border-radius: 15px;
			overflow: hidden;
			cursor: pointer;
			border: 3px solid rgba(255,255,255,0.1);
			transition: 0.3s ease;
		}
		
		.gallery-item img {
			width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
		}
		
		.gallery-item:hover img { transform: scale(1.1); }
		
		.gallery-hover-icon {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			background: rgba(0, 112, 243, 0.4);
			display: flex; align-items: center; justify-content: center;
			opacity: 0; transition: 0.3s; color: #fff; font-size: 2rem;
		}
		
		.gallery-item:hover .gallery-hover-icon { opacity: 1; }
		
		/* --- STILI LIGHTBOX (Schermo Intero) --- */
		.lightbox {
			display: none; position: fixed; z-index: 9999;
			top: 0; left: 0; width: 100%; height: 100%;
			background: rgba(0,0,0,0.9);
			align-items: center; justify-content: center; flex-direction: column;
			padding: 20px;
		}
		
		.lightbox img {
			max-width: 90%; max-height: 80%;
			border-radius: 10px; box-shadow: 0 0 30px rgba(0,0,0,0.5);
		}
		
		.lightbox-caption {
			color: #fff; margin-top: 20px; font-size: 1.2rem;
			text-align: center; max-width: 800px; font-weight: 600;
		}
		
		.close-lightbox {
			position: absolute; top: 30px; right: 40px;
			color: #fff; font-size: 40px; font-weight: bold; cursor: pointer;
		}
		
		/*---- CONTATTI----- */
		.contact-item-box {
			display: flex;
			align-items: center;
			transition: 0.3s;
		}
		.contact-item-box:hover {
			transform: translateX(10px);
		}
		.main-form input:focus, .main-form textarea:focus, .main-form select:focus {
			outline: none;
			border-color: var(--primary);
			box-shadow: 0 0 10px rgba(0, 112, 243, 0.1);
		}
		
        /* --- 5. FOOTER --- */
        footer { background: #1a1a1a; color: #ccc; padding: 70px 0 20px; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
        .footer-col h3 { color: var(--primary); margin-bottom: 25px; }
		
				/* --- PULSANTE WHATSAPP FLOTTANTE --- */
		.whatsapp-float {
			position: fixed;
			width: 60px;
			height: 60px;
			bottom: 30px;
			right: 30px;
			background-color: #25d366; /* Verde originale WhatsApp per riconoscibilità */
			color: #FFF;
			border-radius: 50px;
			text-align: center;
			font-size: 35px;
			box-shadow: 2px 2px 15px rgba(0,0,0,0.3);
			z-index: 2000;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}
		
		.whatsapp-float:hover {
			transform: scale(1.1);
			background-color: var(--primary); /* Passa al tuo verde aziendale al passaggio del mouse */
			color: #fff;
		}
		
		/* Tooltip (il fumetto sopra il pulsante) */
		.whatsapp-tooltip {
			position: absolute;
			right: 75px;
			background-color: #333;
			color: #fff;
			padding: 8px 15px;
			border-radius: 8px;
			font-size: 14px;
			font-weight: 600;
			white-space: nowrap;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease;
			box-shadow: 0 4px 10px rgba(0,0,0,0.1);
		}
		
		/* Freccetta del fumetto */
		.whatsapp-tooltip::after {
			content: '';
			position: absolute;
			right: -10px;
			top: 50%;
			transform: translateY(-50%);
			border-width: 5px;
			border-style: solid;
			border-color: transparent transparent transparent #333;
		}
		
		.whatsapp-float:hover .whatsapp-tooltip {
			opacity: 1;
			visibility: visible;
		}
		
		.social-links a {
			font-size: 1.8rem; /* Ingrandite (erano circa 1.2rem di default) */
			margin-right: 20px;
			transition: transform 0.3s ease;
		}
		
		.social-links a.social-fb {
			color: #1877F2; /* Blu ufficiale Facebook */
		}
		
		.social-links a.social-ig {
			color: #E4405F; /* Rosa/Rosso ufficiale Instagram */
		}
		
		.social-links a:hover {
			transform: scale(1.2); /* Effetto ingrandimento al passaggio */
			filter: brightness(1.2);
		}
/* --- MOBILE SETTINGS (Sotto i 992px) --- */
@media (max-width: 992px) {
    
    /* FIX OVERLAY: Di base deve essere invisibile */
    .menu-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1999;
        display: none; /* NASCOSTO DI BASE */
        backdrop-filter: blur(4px);
    }
    /* Mostra l'overlay solo quando ha la classe .active */
    .menu-overlay.active {
        display: block !important;
    }
    /* HEADER MOBILE: Logo a sinistra, Hamburger a destra */
    .header-content {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 10px 20px;
    }
    .logo-wrapper { flex: 1; justify-content: flex-start; }
    .header-spacer { display: none; }
    .hamburger {
        display: block !important;
        background: none; border: none;
        color: var(--primary);
        font-size: 1.8rem;
        cursor: pointer;
        order: 2;
    }
    /* PANNELLO MENU LATERALE */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%; /* Nascosto fuori dallo schermo */
        width: 280px;
        height: 100vh;
        background: #fff;
        z-index: 2200; /* Sopra l'overlay */
        transition: 0.4s ease-in-out;
        padding: 80px 20px;
        display: block !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    }
    .main-nav.active {
        right: 0; /* Entra in scena */
    }
    .close-menu {
        display: block !important;
        position: absolute;
        top: 20px; right: 20px;
        background: none; border: none;
        font-size: 1.5rem; color: var(--text-dark);
    }
    .nav-menu {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    .nav-menu li a {
        font-size: 1.1rem;
        padding: 10px 0;
        color: var(--text-dark) !important;
        display: block;
        width: 100%;
    }
    /* Dropdown semplificato per mobile */
    .dropdown {
        display: block !important;
        position: static;
        background: #f9f9f9;
        border-left: 3px solid var(--primary);
        margin: 10px 0;
        padding-left: 15px;
        box-shadow: none;
        transform: none;
    }
	
	.lang-selector { display: none; }
	.lang-selector-mobile {
		display: block;
		margin-top: 30px;
		padding-top: 20px;
		border-top: 1px solid #eee;
		font-weight: 700;
	}
	/* Colore base per la lingua NON attiva in mobile (Grigio chiaro) */
	.lang-selector-mobile .lang-link {
		color: #ccc !important; /* Grigio chiaro come richiesto */
		display: inline !important;
		opacity: 1; /* Rimuoviamo l'opacity per gestire tutto col colore */
	}
	
	/* Colore per la lingua ATTIVA in mobile (Blu) */
	.lang-selector-mobile .lang-link.active {
		color: var(--primary) !important; /* Usa il blu del tuo brand */
	}
	
	/* Colore del separatore | */
	.lang-selector-mobile .lang-divider {
		color: #eee;
		margin: 0 5px;
	}
		/* HERO E TRUST BAR MOBILE */
	.hero { height: auto; min-height: 350px; padding: 60px 0; }
	.hero h1 { font-size: 2.2rem; }
	.trust-grid { flex-direction: column; align-items: center; gap: 15px; }
	
	.about-text {
		text-align: center;
		order: 2;
	}
	.about-image {
		order: 1;
		margin-bottom: 30px;
	}
	.hero-page h1 {
		font-size: 2.2rem !important;
	}
    
    .fleet-dynamic-grid { gap: 40px; }
    .fleet-dynamic-item, .fleet-dynamic-item:nth-child(even) { grid-template-columns: 1fr; gap: 30px; text-align: center; padding: 25px; }
    .fleet-dynamic-image, .fleet-dynamic-item:nth-child(even) .fleet-dynamic-image { order: -1; }
    .fleet-dynamic-info h3 { font-size: 1.8rem; }
    .fleet-dynamic-image img { max-width: 100%; filter: drop-shadow(10px 10px 0px rgba(0,0,0,0.2)); }
	.gallery-row { grid-template-columns: 1fr 1fr; } /* Due colonne su mobile */

	}
/* Nascondi i bottoni su Desktop */
.hamburger, .close-menu { display: none; }