PixFlow Agency | Web Design, Video by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

_selfApre collegamenti ipertestuali nella stessa pagina del browser
<map>Inserisce immagini mappa cliccabili in un documento
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
formnovalidateImpedisce la convalida di un singolo elemento input
<label>Mostrare un testo di etichetta per un elemento di input.

Users

Log in to search for users

Explore

Find inspiration

sanchez ximena project 2

Tabella esercitazione esame

PROGETTO DIGITAL

Calcolo Costo Totale

TEST COLSPAN ROWSPAN

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PixelFlow Agency | Web Design, Comunicazione, Video & AI</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- Loader -->
    <div class="loader">
        <div class="loader-inner">
            <div class="loader-circle"></div>
            <p>PixelFlow</p>
        </div>
    </div>

    <!-- Header con Navigazione Sticky -->
    <header class="header">
        <nav class="navbar">
            <div class="nav-container">
                <div class="logo">
                    <a href="#home">Pixel<span class="accent">Flow</span></a>
                </div>
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">Chi Siamo</a>
                    </li>
                    <li class="nav-item">
                        <a href="#services" class="nav-link">Servizi</a>
                    </li>
                    <li class="nav-item">
                        <a href="#projects" class="nav-link">Progetti</a>
                    </li>
                    <li class="nav-item">
                        <a href="#videomakers" class="nav-link">Videomakers</a>
                    </li>
                    <li class="nav-item">
                        <a href="#blog" class="nav-link">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link">Contatti</a>
                    </li>
                </ul>
                <div class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <!-- Hero Section -->
        <section id="home" class="hero">
            <div class="hero-bg"></div>
            <div class="hero-content">
                <h1 class="hero-title fade-in">Creiamo <span class="accent">Esperienze Digitali</span> che emozionano e che convertono</h1>
                <p class="hero-subtitle fade-in">Uniamo design, comunicazione, video e intelligenza artificiale per trasformare le tue idee in realtà</p>
                <div class="hero-buttons fade-in">
                    <a href="#projects" class="btn btn-primary">Guarda i Nostri Lavori</a>
                    <a href="#contact" class="btn btn-outline">Parla con Noi</a>
                </div>
            </div>
            <div class="scroll-indicator fade-in">
                <div class="scroll-mouse">
                    <div class="scroll-wheel"></div>
                </div>
            </div>
        </section>

        <!-- Chi Siamo Section -->
        <section id="about" class="about">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Chi <span class="accent">Siamo</span></h2>
                    <p>Un team di creativi, tecnici e visionari uniti dalla passione per l'innovazione</p>
                </div>
                <div class="about-content">
                    <div class="about-text reveal">
                        <p>Siamo un'agenzia digitale che unisce creatività e tecnologia per creare esperienze uniche. Il nostro team è composto da designer, sviluppatori, comunicatori, videomakers e esperti di intelligenza artificiale che lavorano insieme per trasformare le tue idee in progetti di successo.</p>
                        <p>Crediamo che il design non sia solo estetica, ma un potente strumento di comunicazione. Per questo, ogni nostro progetto è pensato per essere non solo bello da vedere, ma anche efficace nel raggiungere gli obiettivi dei nostri clienti.</p>
                        <a href="#contact" class="btn btn-primary">Conosci il Team</a>
                    </div>
                    <div class="about-image reveal">
                        <div class="image-wrapper">
                            <img src="https://images.unsplash.com/photo-1729315823712-c846a02baee8?" alt="Il nostro team">
                            <div class="image-overlay"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Servizi Section -->
        <section id="services" class="services">
            <div class="container">
                <div class="section-header reveal">
                    <h2>I Nostri <span class="accent">Servizi</span></h2>
                    <p>Offriamo soluzioni integrate per ogni tua esigenza digitale</p>
                </div>
                <div class="services-grid">
                    <div class="service-card reveal" style="--delay: 0.1s;">
                        <div class="service-icon">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <h3>Web Design</h3>
                        <p>Creiamo siti web moderni, responsive e ottimizzati per l'esperienza utente</p>
                    </div>
                    <div class="service-card reveal" style="--delay: 0.2s;">
                        <div class="service-icon">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <h3>Strategie</h3>
                        <p>Sviluppiamo strategie di comunicazione efficaci per raggiungere il tuo pubblico</p>
                    </div>
                    <div class="service-card reveal" style="--delay: 0.3s;">
                        <div class="service-icon">
                            <i class="fas fa-video"></i>
                        </div>
                        <h3>Videomaking</h3>
                        <p>Produzioni video professionali per raccontare la tua storia in modo coinvolgente</p>
                    </div>
                    <div class="service-card reveal" style="--delay: 0.4s;">
                        <div class="service-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h3>Intelligenza Artificiale</h3>
                        <p>Integriamo soluzioni AI per ottimizzare processi e creare esperienze innovative</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Progetti Section -->
        <section id="projects" class="projects">
            <div class="container">
                <div class="section-header reveal">
                    <h2>I Nostri <span class="accent">Progetti</span></h2>
                    <p>Un assaggio delle storie che abbiamo aiutato a raccontare</p>
                </div>
                <div class="projects-filter reveal">
                    <button class="filter-btn active" data-filter="all">Tutti</button>
                    <button class="filter-btn" data-filter="web">Web Design</button>
                    <button class="filter-btn" data-filter="communication">Comunicazione</button>
                    <button class="filter-btn" data-filter="video">Video</button>
                    <button class="filter-btn" data-filter="ai">Intelligenza Artificiale</button>
                </div>
                <div class="projects-grid">
                    <div class="project-item reveal" data-category="web">
                        <div class="project-image">
                            <img src="https://images.unsplash.com/photo-1706700392626-5279fb90ae73?" alt="Progetto 1">
                            <div class="project-overlay">
                                <h3>Restyling E-commerce Fashion</h3>
                                <p>Web Design</p>
                                <a href="#" class="btn btn-outline">Scopri di più</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-item reveal" data-category="communication">
                        <div class="project-image">
                            <img src="https://images.unsplash.com/photo-1690883793939-f8cca2f28ee0?" alt="Progetto 2">
                            <div class="project-overlay">
                                <h3>Campaign Social Media</h3>
                                <p>Comunicazione</p>
                                <a href="#" class="btn btn-outline">Scopri di più</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-item reveal" data-category="video">
                        <div class="project-image">
                            <img src="https://picsum.photos/seed/project3/600/400.jpg" alt="Progetto 3">
                            <div class="project-overlay">
                                <h3>Video Corporate</h3>
                                <p>Videomaking</p>
                                <a href="#" class="btn btn-outline">Scopri di più</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-item reveal" data-category="ai">
                        <div class="project-image">
                            <img src="https://plus.unsplash.com/premium_photo-1725985758251-b49c6b581d17?" alt="Progetto 4">
                            <div class="project-overlay">
                                <h3>Chatbot Intelligente</h3>
                                <p>Intelligenza Artificiale</p>
                                <a href="#" class="btn btn-outline">Scopri di più</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-item reveal" data-category="web">
                        <div class="project-image">
                            <img src="https://picsum.photos/seed/project5/600/400.jpg" alt="Progetto 5">
                            <div class="project-overlay">
                                <h3>Sito Istituzionale</h3>
                                <p>Web Design</p>
                                <a href="#" class="btn btn-outline">Scopri di più</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-item reveal" data-category="video">
                        <div class="project-image">
                            <img src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?" alt="Progetto 6">
                            <div class="project-overlay">
                                <h3>Video Prodotto</h3>
                                <p>Videomaking</p>
                                <a href="#" class="btn btn-outline">Scopri di più</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Videomakers Section -->
        <section id="videomakers" class="videomakers">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Il Nostro <span class="accent">Settore Video</span></h2>
                    <p>Raccontiamo storie attraverso l'arte della cinematografia digitale</p>
                </div>
                <div class="video-showcase reveal">
                    <div class="video-player">
                        <div class="video-thumbnail">
                            <img src="https://picsum.photos/seed/video/1200/675.jpg" alt="Video Showcase">
                            <div class="play-button">
                                <i class="fas fa-play"></i>
                            </div>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3>Produzioni Video di Impatto</h3>
                        <p>Il nostro team di videomakers crea contenuti visivi che catturano l'attenzione e comunicano messaggi in modo efficace. Dalle campagne pubblicitarie ai video corporate, dai documentari ai contenuti per i social media, trasformiamo le tue idee in produzioni video professionali.</p>
                        <div class="video-services">
                            <div class="video-service">
                                <i class="fas fa-film"></i>
                                <h4>Video Corporate</h4>
                            </div>
                            <div class="video-service">
                                <i class="fas fa-bullhorn"></i>
                                <h4>Spot Pubblicitari</h4>
                            </div>
                            <div class="video-service">
                                <i class="fas fa-camera"></i>
                                <h4>Video Prodotti</h4>
                            </div>
                            <div class="video-service">
                                <i class="fas fa-users"></i>
                                <h4>Video Interviste</h4>
                            </div>
                        </div>
                        <a href="#contact" class="btn btn-primary">Richiedi un Preventivo</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Job Claim Section -->
        <section id="job-claim" class="job-claim">
            <div class="container">
                <div class="job-claim-content reveal">
                    <h2>Trasformiamo le Tue <span class="accent">Idee</span> in <span class="accent">Esperienze</span> Digitali</h2>
                    <p>Siamo più di un'agenzia digitale: siamo partner strategici che guidano il tuo brand verso il successo nell'era digitale</p>
                    <a href="#contact" class="btn btn-outline">Inizia il Tuo Progetto</a>
                </div>
            </div>
        </section>

        <!-- Blog Section -->
        <section id="blog" class="blog">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Novità dal <span class="accent">Blog</span></h2>
                    <p>Approfondimenti, tendenze e novità dal mondo digitale</p>
                </div>
                <div class="blog-grid">
                    <article class="blog-card reveal" style="--delay: 0.1s;">
                        <div class="blog-image">
                            <img src="https://picsum.photos/seed/blog1/600/400.jpg" alt="Blog 1">
                            <div class="blog-category">Web Design</div>
                        </div>
                        <div class="blog-content">
                            <h3>Tendenze Web Design per il 2024</h3>
                            <p>Scopri le ultime tendenze nel mondo del web design e come applicarle ai tuoi progetti</p>
                            <div class="blog-meta">
                                <span class="blog-date">15 Maggio 2024</span>
                                <a href="#" class="blog-link">Leggi di più <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </article>
                    <article class="blog-card reveal" style="--delay: 0.2s;">
                        <div class="blog-image">
                            <img src="https://picsum.photos/seed/blog2/600/400.jpg" alt="Blog 2">
                            <div class="blog-category">Intelligenza Artificiale</div>
                        </div>
                        <div class="blog-content">
                            <h3>Come l'AI sta Trasformando il Marketing Digitale</h3>
                            <p>Esplora le applicazioni dell'intelligenza artificiale nel marketing e come sfruttarle a tuo vantaggio</p>
                            <div class="blog-meta">
                                <span class="blog-date">10 Maggio 2024</span>
                                <a href="#" class="blog-link">Leggi di più <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </article>
                    <article class="blog-card reveal" style="--delay: 0.3s;">
                        <div class="blog-image">
                            <img src="https://picsum.photos/seed/blog3/600/400.jpg" alt="Blog 3">
                            <div class="blog-category">Videomaking</div>
                        </div>
                        <div class="blog-content">
                            <h3>Video Marketing: Strategie Efficaci per il 2024</h3>
                            <p>Scopri come creare una strategia di video marketing che catturi l'attenzione del tuo pubblico</p>
                            <div class="blog-meta">
                                <span class="blog-date">5 Maggio 2024</span>
                                <a href="#" class="blog-link">Leggi di più <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="blog-cta reveal">
                    <a href="#" class="btn btn-outline">Vedi Tutti gli Articoli</a>
                </div>
            </div>
        </section>

        <!-- FAQ Section -->
        <section id="faq" class="faq">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Domande <span class="accent">Frequenti</span></h2>
                    <p>Tutto quello che devi sapere sui nostri servizi</p>
                </div>
                <div class="faq-list reveal">
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Quali sono i tempi medi per realizzare un sito web?</h3>
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="faq-answer">
                            <p>I tempi di realizzazione dipendono dalla complessità del progetto. Un sito vetrina base richiede generalmente 2-3 settimane, mentre un e-commerce o un sito con funzionalità personalizzate può richiedere 1-3 mesi. Forniamo sempre una timeline dettagliata prima di iniziare il lavoro.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Lavorate anche con clienti internazionali?</h3>
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Sì, lavoriamo regolarmente con clienti sia nazionali che internazionali. Grazie alla nostra esperienza nella comunicazione multiculturale e alla nostra capacità di lavorare in remoto, possiamo seguire progetti per clienti in tutto il mondo.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Offrite assistenza dopo la consegna del progetto?</h3>
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Certo! Ogni progetto include un periodo di assistenza post-lancio gratuita. Inoltre, offriamo piani di manutenzione e supporto continuativi per garantire che il tuo sito o la tua applicazione siano sempre aggiornati, sicuri e performanti.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Come integrate l'intelligenza artificiale nei vostri progetti?</h3>
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Integriamo l'AI in vari modi: chatbot per il servizio clienti, sistemi di raccomandazione personalizzati, analisi predittiva per il marketing, ottimizzazione automatica delle campagne pubblicitarie e molto altro. Valutiamo caso per caso la soluzione AI più adatta alle esigenze del cliente.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Qual è il vostro approccio alla produzione video?</h3>
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Il nostro approccio alla produzione video è basato sulla narrazione. Partiamo sempre dagli obiettivi del cliente e dal pubblico di riferimento per creare un concept efficace. Dalla pre-produzione alla post-produzione, curiamo ogni dettaglio per garantire un risultato finale di alta qualità che comunichi il messaggio desiderato.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Posso richiedere un solo servizio specifico?</h3>
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Assolutamente sì. Anche se offriamo soluzioni integrate, siamo felici di fornire servizi singoli in base alle tue esigenze. Che tu abbia bisogno solo di un restyling del sito, di una campagna di comunicazione o di una produzione video, siamo a tua disposizione.</p>
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Come determinate il costo di un progetto?</h3>
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Il costo di un progetto dipende da diversi fattori: complessità, tempistiche, risorse necessarie e servizi richiesti. Dopo un'analisi dettagliata delle tue esigenze, prepariamo un preventivo personalizzato e trasparente, senza costi nascosti. Offriamo diverse soluzioni per adattarci a diversi budget.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section id="contact" class="contact">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Contattaci</h2>
                    <p>Parlaci del tuo progetto, troveremo insieme la soluzione perfetta</p>
                </div>
                <div class="contact-content reveal">
                    <div class="contact-info">
                        <h3>Informazioni di Contatto</h3>
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <div>
                                <h4>Indirizzo</h4>
                                <p>Via della Tecnologia 123, 20100 Milano, Italia</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <div>
                                <h4>Telefono</h4>
                                <p>+39 02 12345678</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <div>
                                <h4>Email</h4>
                                <p>info@pixelflow.agency</p>
                            </div>
                        </div>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                    <div class="contact-form">
                        <form id="contactForm">
                            <div class="form-group">
                                <input type="text" id="name" name="name" placeholder="Il tuo nome" required>
                            </div>
                            <div class="form-group">
                                <input type="email" id="email" name="email" placeholder="La tua email" required>
                            </div>
                            <div class="form-group">
                                <select id="service" name="service" required>
                                    <option value="" disabled selected>Seleziona un servizio</option>
                                    <option value="web-design">Web Design</option>
                                    <option value="communication">Comunicazione</option>
                                    <option value="videomaking">Videomaking</option>
                                    <option value="ai">Intelligenza Artificiale</option>
                                    <option value="other">Altro</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <textarea id="message" name="message" placeholder="Il tuo messaggio" rows="5" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Invia Messaggio</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- Newsletter Section -->
        <section id="newsletter" class="newsletter">
            <div class="container">
                <div class="newsletter-content reveal">
                    <h2>Rimani Aggiornato</h2>
                    <p>Iscriviti alla nostra newsletter per ricevere le ultime novità dal mondo digitale</p>
                    <form id="newsletterForm" class="newsletter-form">
                        <div class="form-group">
                            <input type="email" id="newsletter-email" placeholder="La tua email" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Iscriviti</button>
                    </form>
                    <p class="newsletter-privacy">Rispettiamo la tua privacy. Puoi annullare l'iscrizione in qualsiasi momento.</p>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <a href="#home">Pixel<span class="accent">Flow</span></a>
                    <p>Creatività, tecnologia e innovazione per esperienze digitali uniche. Prototipazione rapida con AI, UX design orientato alle conversioni e collaborazioni</p>
                </div>
                <div class="footer-links">
                    <h4>Link Utili</h4>
                    <ul>
                        <li><a href="#about">Chi Siamo</a></li>
                        <li><a href="#services">Servizi</a></li>
                        <li><a href="#projects">Progetti</a></li>
                        <li><a href="#blog">Blog</a></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4>Servizi</h4>
                    <ul>
                        <li><a href="#services">Web Design</a></li>
                        <li><a href="#services">Comunicazione</a></li>
                        <li><a href="#services">Videomaking</a></li>
                        <li><a href="#services">Intelligenza Artificiale</a></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4>Contatti</h4>
                    <ul>
                        <li><i class="fas fa-phone"></i> +39 02 12345678</li>
                        <li><i class="fas fa-envelope"></i> info@pixelflow.agency</li>
                        <li><i class="fas fa-map-marker-alt"></i> Milano, Italia</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 PixelFlow Agency. Tutti i diritti riservati. | <a href="#">Privacy Policy</a> | <a href="#">Cookie Policy</a></p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

:root {
    --primary-color: #6C63FF;
    --secondary-color: #FF6584;
    --accent-color: #00D9FF;
    --dark-color: #0F0F0F;
    --light-color: #FFFFFF;
    --gray-color: #777777;
    --light-gray-color: #F5F5F5;
    --transition: all 0.3s ease;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Playfair Display', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--dark-color);
    color: var(--light-color);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--font-secondary);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-family: var(--font-secondary);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

p {
    margin-bottom: 20px;
    color: var(--gray-color);
}

a {
    color: var(--light-color);
    text-decoration: none;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

.accent {
    color: var(--accent-color);
}

/* Buttons *//*qui-cambi-forma-generale-bottoni*/
.btn {
    display: inline-block;
    padding: 14px 18px;/*altezza-bottoni*/
    border-radius: 18px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    z-index: -1;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: var(--light-color);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--light-color);
    border: 2px solid var(--light-color);
}

.btn-outline::before {
    background: var(--light-color);
    transform: translateX(-100%);
}

.btn-outline:hover {
    color: var(--dark-color);
}

.btn-outline:hover::before {
    transform: translateX(0);
}

/* Loader */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-inner {
    text-align: center;
}

.loader-circle {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(108, 99, 255, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loader p {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    color: var(--light-color);
}

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
}

.navbar {
    padding: 15px 0;
    background-color: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition);
}

.navbar.scrolled {
    padding: 10px 0;
    background-color: rgba(15, 15, 15, 0.95);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 150px; /* MODIFICA: Sposto l'intero contenitore e-il-menu-top-a sinistra */
}

.logo a {
    font-family: var(--font-secondary);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--light-color);
    margin-left: 150px; /* MODIFICA: Sposto il logo verso il centro */
}

.nav-menu {
    display: flex;
    gap: 35px;
    margin-left: 150px; /* MODIFICA: Sposto le voci del menu verso sinistra */
}

.nav-link {
    position: relative;
    font-weight: 500;
    padding: 5px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--light-color);
    margin: 3px 0;
    transition: var(--transition);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(255, 101, 132, 0.1)), /*qui-metto-sfondo.abovethefold*/url('https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?');
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
    z-index: -1;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--light-color);
    border-radius: 25px;
    position: relative;
}

.scroll-wheel {
    width: 6px;
    height: 10px;
    background-color: var(--light-color);
    border-radius: 3px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }
}

/* Sections */
section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    margin-bottom: 15px;
}

.section-header p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* About Section */
.about {
    background-color: #111111;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text p {
    margin-bottom: 30px;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.image-wrapper img {
    transition: var(--transition);
}

.image-wrapper:hover img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.2), rgba(255, 101, 132, 0.2));
    opacity: 0;
    transition: var(--transition);
}

.image-wrapper:hover .image-overlay {
    opacity: 1;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: #111111;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid transparent;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px rgba(108, 99, 255, 0.2);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    font-size: 1.8rem;
}

.service-card h3 {
    margin-bottom: 15px;
}

/* Projects Section */
.projects {
    background-color: #111111;
}

.projects-filter {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 20px;
    background-color: transparent;
    border: 2px solid var(--gray-color);
    color: var(--gray-color);
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-item {
    overflow: hidden;
    border-radius: 10px;
    transition: var(--transition);
}

.project-image {
    position: relative;
    overflow: hidden;
}

.project-image img {
    transition: var(--transition);
}

.project-item:hover .project-image img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.1), rgba(15, 15, 15, 0.8));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;/*scritta-era-bassa*/
    transform: translateY(100%);
    transition: var(--transition);
}

.project-item:hover .project-overlay {
    transform: translateY(0);
}

.project-overlay h3 {
    margin-bottom: 5px;
}

.project-overlay p {
    margin-bottom: 20px;
}

/* Videomakers Section */
.video-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.video-player {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.video-thumbnail {
    position: relative;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.play-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button i {
    font-size: 2rem;
    color: var(--light-color);
    margin-left: 5px;
}

.video-info h3 {
    margin-bottom: 20px;
}

.video-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
}

.video-service {
    display: flex;
    align-items: center;
    gap: 15px;
}

.video-service i {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Job Claim Section */
.job-claim {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(255, 101, 132, 0.1));
    text-align: center;
}

.job-claim-content h2 {
    margin-bottom: 20px;
}

.job-claim-content p {
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
}

/* Blog Section */
.blog {
    background-color: #111111;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.blog-card {
    background-color: var(--dark-color);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.blog-image {
    position: relative;
}

.blog-image img {
    transition: var(--transition);
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
}

.blog-content {
    padding: 30px;
}

.blog-content h3 {
    margin-bottom: 15px;
}

.blog-content p {
    margin-bottom: 20px;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-date {
    font-size: 0.9rem;
    color: var(--gray-color);
}

.blog-link {
    color: var(--primary-color);
    font-weight: 600;
}

.blog-link:hover {
    color: var(--secondary-color);
}

.blog-cta {
    text-align: center;
    margin-top: 40px;
}

/* FAQ Section */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: #1e1e1e;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.faq-question {
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question:hover {
    background-color: rgba(108, 99, 255, 0.1);
}

.faq-question h3 {
    margin-bottom: 0;
    font-size: 1.5rem; /* MODIFICA: Ridotto il font@1.5rem per le domande FAQ */
}

.faq-question i {
    transition: var(--transition);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 30px 20px;
}

/* Contact Section */
.contact {
    background-color: #111111;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h3 {
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.contact-item i {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-item h4 {
    margin-bottom: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-color);
    transform: translateY(-5px);
}

.contact-form {
    background-color: var(--dark-color);
    padding: 40px;
    border-radius: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: var(--light-color);
    font-family: var(--font-primary);
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.08);
}

.form-group select {
    cursor: pointer;
}

/* Newsletter Section */
.newsletter {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(255, 101, 132, 0.1));
    text-align: center;
}

.newsletter-content h2 {
    margin-bottom: 15px;
}

.newsletter-content p {
    max-width: 600px;
    margin: 0 auto 30px;
}

.newsletter-form {
    display: flex;
    max-width: 650px;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.newsletter-form input {
    flex: 1;
    padding: 15px 145px;/*allungato.placeholder*/
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px 0 0 30px;
    color: var(--light-color);
    font-family: var(--font-primary);
    border-right: none;
    height: 50px; /* Altezza fissa per allineamento */
}

.newsletter-form button {
    border-radius: 0 30px 30px 0;
    height: 50px; /* Altezza fissa per allineamento */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    border: none;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: var(--light-color);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 45px rgba(108, 99, 255, 0.3);
}

.newsletter-privacy {
    font-size: 0.9rem;
    margin-top: 150px;
    color: var(--gray-color);
}

/* Footer */
.footer {
    background-color: #0a0a0a;
    padding: 50px 0 20px;/*quanto-.alto-il-footer*/
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 25px;/*distanza-iterlinea.voci-footer*/
    margin-bottom: 30px;
}

.footer-logo a {
    font-family: var(--font-secondary);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--light-color);
    display: inline-block;
    margin-bottom: 15px;
}

.footer-logo p {
    max-width: 300px;
}

.footer-links h4 {
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.footer-links ul li {
    margin-bottom: 25px;
}

.footer-links ul li a {
    color: var(--gray-color);
    transition: var(--transition);
}

.footer-links ul li a:hover {
    color: var(--primary-color);
}

.footer-links ul li i {
    margin-right: 10px;
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.footer-bottom a {
    color: var(--gray-color);
    margin: 0 10px;
}

.footer-bottom a:hover {
    color: var(--primary-color);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal.is-visible {
    transition-delay: var(--delay);
}

/* Responsive Design */
@media (max-width: 992px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: rgba(15, 15, 15, 0.95);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 20px 0;
        margin-left: 0; /* Resetto il margine per mobile */
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-container {
        padding-left: 0; /* Resetto il padding per mobile */
    }

    .logo a {
        margin-left: 0; /* Resetto il margine del logo per mobile */
    }

    .about-content,
    .video-showcase,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .video-services {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .projects-filter {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        flex-direction: column;
        max-width: 400px; /* Riadatto la larghezza per mobile */
    }

    .newsletter-form input {
        border-radius: 30px;
        margin-bottom: 15px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .newsletter-form button {
        border-radius: 30px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo p {
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    section {
        padding: 60px 0;
    }

    .contact-form {
        padding: 30px 20px;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Loader
    const loader = document.querySelector('.loader');
    window.addEventListener('load', function() {
        setTimeout(function() {
            loader.classList.add('fade-out');
        }, 1000);
    });

    // Sticky Navigation
    const navbar = document.querySelector('.navbar');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 100) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });

    // Mobile Navigation
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    const navLinks = document.querySelectorAll('.nav-link');

    hamburger.addEventListener('click', function() {
        hamburger.classList.toggle('active');
        navMenu.classList.toggle('active');
    });

    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            hamburger.classList.remove('active');
            navMenu.classList.remove('active');
        });
    });

    // Active Navigation Link
    const sections = document.querySelectorAll('section');
    const navItems = document.querySelectorAll('.nav-link');

    window.addEventListener('scroll', function() {
        let current = '';
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            
            if (scrollY >= (sectionTop - 200)) {
                current = section.getAttribute('id');
            }
        });

        navItems.forEach(item => {
            item.classList.remove('active');
            if (item.getAttribute('href').slice(1) === current) {
                item.classList.add('active');
            }
        });
    });

    // Reveal on Scroll
    const revealElements = document.querySelectorAll('.reveal');
    const fadeElements = document.querySelectorAll('.fade-in');

    function reveal() {
        revealElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            
            if (elementTop < windowHeight - 100) {
                element.classList.add('is-visible');
            }
        });

        fadeElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            
            if (elementTop < windowHeight - 100) {
                element.classList.add('is-visible');
            }
        });
    }

    window.addEventListener('scroll', reveal);
    reveal();

    // Projects Filter
    const filterBtns = document.querySelectorAll('.filter-btn');
    const projectItems = document.querySelectorAll('.project-item');

    filterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // Remove active class from all buttons
            filterBtns.forEach(btn => btn.classList.remove('active'));
            // Add active class to clicked button
            this.classList.add('active');
            
            const filterValue = this.getAttribute('data-filter');
            
            projectItems.forEach(item => {
                if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                    item.style.display = 'block';
                    // Re-trigger animation
                    item.classList.remove('is-visible');
                    setTimeout(() => {
                        item.classList.add('is-visible');
                    }, 100);
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });

    // FAQ Accordion
    const faqItems = document.querySelectorAll('.faq-item');

    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        
        question.addEventListener('click', function() {
            // Close all other items
            faqItems.forEach(otherItem => {
                if (otherItem !== item) {
                    otherItem.classList.remove('active');
                }
            });
            
            // Toggle current item
            item.classList.toggle('active');
        });
    });

    // Contact Form
    const contactForm = document.getElementById('contactForm');
    
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Here you would normally send the form data to a server
            // For this example, we'll just show a success message
            
            const formElements = this.elements;
            for (let i = 0; i < formElements.length; i++) {
                if (formElements[i].type !== 'submit') {
                    formElements[i].value = '';
                }
            }
            
            // Show success message
            const successMessage = document.createElement('div');
            successMessage.textContent = 'Messaggio inviato con successo!';
            successMessage.style.color = 'var(--accent-color)';
            successMessage.style.marginTop = '20px';
            successMessage.style.textAlign = 'center';
            this.appendChild(successMessage);
            
            // Remove message after 3 seconds
            setTimeout(() => {
                successMessage.remove();
            }, 3000);
        });
    }

    // Newsletter Form
    const newsletterForm = document.getElementById('newsletterForm');
    
    if (newsletterForm) {
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const emailInput = document.getElementById('newsletter-email');
            
            // Here you would normally send the email to a server
            // For this example, we'll just show a success message
            
            emailInput.value = '';
            
            // Show success message
            const successMessage = document.createElement('p');
            successMessage.textContent = 'Iscrizione completata con successo!';
            successMessage.style.color = 'var(--accent-color)';
            successMessage.style.marginTop = '15px';
            
            // Replace the privacy text with success message
            const privacyText = document.querySelector('.newsletter-privacy');
            privacyText.style.display = 'none';
            
            this.appendChild(successMessage);
            
            // Restore original state after 3 seconds
            setTimeout(() => {
                successMessage.remove();
                privacyText.style.display = 'block';
            }, 3000);
        });
    }

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
});