VERDERAME | Serra e Orto Botanico by @Darkness977 - Codewith.it

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

Referenze

<tr>Definisce le righe di una tabella (rows)
application-x-www-form-urlencodedCodifica dei caratteri di un form
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<b>Formatta il testo in grassetto
_parentApre collegamenti ipertestuali nell'elemento genitore
<div>Crea contenitori generici o sezioni in una pagina

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio informatica 5

numeri primi e divisori pro

spotify dashboard

Generatore numeri casuali

tabella html(2)

questa sarà una pagina web dedic

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VERDEVIVO | Serra e Orto Botanico per la Biodiversità</title>
    <meta name="description" content="Entra in VERDEVIVO, la tua serra botanica dedicata alla coltura sostenibile. Scopri piante rare, semi autoctoni e un mondo verde da vivere.">
    <meta name="keywords" content="serra botanica, orto sostenibile, biodiversità, piante rare, semi autoctoni, verde">
    
    <!-- Open Graph / Social Media -->
    <meta property="og:title" content="VERDEVIVO | Dove la Natura Rigenera il Futuro">
    <meta property="og:description" content="Scopri la nostra serra botanica e l'orto sostenibili, un santuario per la biodiversità.">
    <meta property="og:image" content="./assets/images/hero-bg.jpg">
    <meta property="og:url" content="https://www.verdewivo.it">
    <meta property="og:type" content="website">

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="./assets/icons/leaf.svg">

    <!-- Google Fonts -->
    <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;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header class="main-header">
        <div class="container">
            <a href="#" class="logo">?VERDEVIVO </a>
            <nav class="main-nav">
                <ul>
                    <li><a href="#chi-siamo">Chi Siamo</a></li>
                    <li><a href="#catalogo">Catalogo</a></li>
                    <li><a href="#benefici">Benefici</a></li>
                    <li><a href="#faq">FAQ<a/></li>
                    <li><a href="#contatti">Contatti</a></li>
                </ul>
            </nav>
            <button class="hamburger" id="hamburger-menu" aria-label="Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <main>
        <!-- SEZIONE HERO -->
        <section class="hero" id="hero">
            <div class="hero__background parallax" data-speed="0.3"></div>
            <div class="hero__content">
                <div class="fade-in-up">
                    <h1>Dove la Natura Urbana Rigenera il nostro Futuro</h1>
                    <p class="subtitle">Scopri la nostra serra botanica e l'orto sostenibili, un santuario per la biodiversità a portata di mano a pochi passi dal centro urbano.</p>
                    <div class="hero__rating">
                        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                        <small>(4.9 da 127 recensioni)</small>
                    </div>
                    <a href="#catalogo" class="btn btn--primary">Scopri il nostro mondo verde</a>
                </div>
            </div>
            <div class="hero__shape shape-blob"></div>
        </section>

        <!-- SEZIONE CHI SIAMO (ALTERNATA) -->
        <section class="section section--alternate" id="chi-siamo">
            <div class="container">
                <div class="alternate-grid">
                    <div class="alternate-grid__text fade-in">
                        <h2>La Nostra Missione: Coltivare Consapevolezza</h2>
                        <p>VERDEVIVO non è solo una serra. È un progetto nato dalla passione per la terra e dalla convinzione che ogni piccolo gesto possa fare la differenza. La nostra missione è proteggere e promuovere la biodiversità attraverso la coltura sostenibile di piante e semi autoctoni oltre a un consumo responsabile del suolo.</p>
                        <a href="#" class="btn btn--outline">Unisciti alla nostra comunità</a>
                    </div>
                    <div class="alternate-grid__image fade-in">
                        <img src="https://images.unsplash.com/photo-1601125893070-735cd6e71408?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=870" alt="Team di VERDEVIVO nell'orto">
                    </div>
                </div>
            </div>
            <div class="section__shape shape-wave"></div>
        </section>

        <!-- SEZIONE BENEFICI -->
        <section class="section section--benefits" id="benefici">
            <div class="container">
                <h2 class="section-title fade-in">Oltre la Bellezza: I Benefici Tangibili del Verde</h2>
                <div class="benefits-grid">
                    <div class="benefit-card fade-in">
                        <div class="benefit-card__icon">☀️</div>
                        <h3>Aria Più Pura</h3>
                        <p>Le nostre piante sono naturali purificatori d'aria, migliorando la qualità del tuo ambiente.</p>
                    </div>
                    <div class="benefit-card fade-in">
                        <div class="benefit-card__icon">❤️</div>
                        <h3>Benessere Psicofisico</h3>
                        <p>Il contatto con la natura riduce lo stress e aumenta la creatività e la produttività.</p>
                    </div>
                    <div class="benefit-card fade-in">
                        <div class="benefit-card__icon">?</div>
                        <h3>Supporto alla Biodiversità</h3>
                        <p>Coltivando specie autoctone, contribuisci attivamente a proteggere gli ecosistemi locali.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- SEZIONE CATALOGO (GRAFICA ALTERNATA) -->
        <section class="section section--catalog" id="catalogo">
            <div class="container">
                <h2 class="section-title fade-in">Il Nucleo Verde: Il Nostro Catalogo Vivo</h2>
                <div class="catalog-grid">
                    <div class="catalog-item fade-in">
                        <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Pianta di Lavanda">
                        <div class="catalog-item__info">
                            <h3>Lavanda Officinalis</h3>
                            <p>Calma e relax per il tuo giardino e la tua casa.</p>
                            <span class="price">€12.99</span>
                        </div>
                    </div>
                    <div class="catalog-item fade-in">
                        <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80" alt="Pianta di Basilico">
                        <div class="catalog-item__info">
                            <h3>Basilico Genovese</h3>
                            <p>Il profumo del mediterraneo, perfetto per la tua cucina.</p>
                            <span class="price">€5.99</span>
                        </div>
                    </div>
                    <div class="catalog-item fade-in">
                        <img src="https://images.unsplash.com/photo-1601688815354-6e7ea76443b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Semi di Girasole">
                        <div class="catalog-item__info">
                            <h3>Semi di Girasole</h3>
                            <p>Porta il sole nel tuo orto con i nostri semi antichi.</p>
                            <span class="price">€3.99</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<!-- SEZIONE FAQ -->
<section class="section section--faq" id="faq">
    <div class="container">
        <h2 class="section-title fade-in">Domande Frequenti</h2>
        <div class="faq-grid fade-in">
            <div class="faq-column">
                <div class="faq-item">
                    <button class="faq-question">Come posso scegliere la pianta giusta per il mio spazio?</button>
                    <div class="faq-answer">
                        <p>Ogni scheda prodotto nel nostro catalogo include una guida dettagliata sulle esigenze di luce, acqua e temperatura. Inoltre, il nostro team è sempre a disposizione per una consulenza personalizzata!</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">Spedite in tutta Italia e quali sono i tempi di consegna?</button>
                    <div class="faq-answer">
                        <p>Sì, spediamo in tutta Italia con imballaggi eco-sostenibili. La consegna standard avviene in 3-5 giorni lavorativi.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">Le vostre piante sono coltivate in modo sostenibile?</button>
                    <div class="faq-answer">
                        <p>Absolutamente. Utilizziamo solo metodi di coltivazione biologici, senza pesticidi chimici, e promuoviamo l'uso di semi autoctoni per proteggere la biodiversità locale.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">Posso restituire una pianta se non sono soddisfatto?</button>
                    <div class="faq-answer">
                        <p>Certo! Offriamo una garanzia di soddisfazione di 30 giorni. Se la pianta arriva danneggiata o non sei contento, provvederemo a un rimborso o a una sostituzione.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">Offrite corsi o workshop di giardinaggio?</button>
                    <div class="faq-answer">
                        <p>Sì, organizziamo periodicamente workshop presso la nostra serra. Controlla la sezione "Eventi" del nostro sito o iscriviti alla newsletter per non perderteli!</p>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question">Come posso prendermi cura delle mie piante una volta ricevute?</button>
                    <div class="faq-answer">
                        <p>Insieme a ogni pianta, forniamo una guida cartacea e digitale con tutte le istruzioni di cura. Inoltre, il nostro blog è pieno di consigli utili per ogni tipo di pianta.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- SEZIONE COMMUNITY -->
<section class="section section--community" id="community">
    <div class="container">
        <div class="community-banner">
            <div class="community-content">
                <h2 class="fade-in">Unisciti alla Community Greencity</h2>
                <p class="fade-in">Partecipa ai nostri tour guidati e scopri il mondo della biodiversità. Seguici sui social media per rimanere aggiornato sulle nostre iniziative itineranti in tutta Italia.</p>
                <div class="community-actions fade-in">
                    <a href="#" class="btn btn--primary">Prenota un Tour Guidato</a>
                    <div class="social-links">
                        <a href="#" class="social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                        </a>
                        <a href="#" class="social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                        </a>
                        <a href="#" class="social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="community-image fade-in">
                <img src="https://images.unsplash.com/photo-1523381210436-84785ddd2eb5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Tour guidato VERDEVIVO">
            </div>
        </div>
    </div>
</section>
        
        <!-- SEZIONE CONTATTI -->
        <section class="section section--contact" id="contatti">
            <div class="container">
                <h2 class="section-title fade-in">Coltiviamo un futuro Insieme</h2>
                <div class="contact-grid">
                    <div class="contact-info fade-in">
                        <h3>Vieni a Trovarci</h3>
                        <p><strong>Indirizzo:</strong> Via della Natura 123, 00100 Roma, Italia</p>
                        <p><strong>Email:</strong> info@verdevivo.it</p>
                        <p><strong>Telefono:</strong> +39 06 12345678</p>
                    </div>
                    <form class="contact-form fade-in">
                        <input type="text" placeholder="Il tuo nome" required>
                        <input type="email" placeholder="La tua email" required>
                        <textarea placeholder="Il tuo messaggio..." rows="5" required></textarea>
                        <button type="submit" class="btn btn--primary">Invia Messaggio</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2024 VERDEVIVO. Tutti i diritti riservati. Progettato con ? e passione.</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="js/script.js"></script>
</body>
</html>

/* --- Variabili Globali e Stile di Base --- */
:root {
    --primary-color: #2a6f4f;
    --secondary-color: #a7c957;
    --accent-color: #f2e8cf;
    --dark-color: #1a1a1a;
    --light-color: #ffffff;
    --text-color: #333;
    --font-primary: 'Poppins', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

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

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

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    line-height: 1.2;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
h3 { font-size: 1.5rem; }

.section {
    padding: 100px 0;
    position: relative;
}

.section-title {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

/* --- Header e Navigazione --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    z-index: 1000;
    padding: 10px 0;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.main-nav a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 600;
    position: relative;
    transition: var(--transition);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--dark-color);
    margin: 3px 0;
    transition: var(--transition);
    border-radius: 3px;
}

/* --- Bottoni --- */
.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    font-size: 1rem;
}

.btn--primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--light-color);
    box-shadow: var(--shadow-md);
}

.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.btn--outline {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn--outline:hover {
    background: var(--primary-color);
    color: var(--light-color);
    transform: translateY(-3px);
}

/* --- Sezione Hero --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--light-color);
    position: relative;
    overflow: hidden;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: url('https://images.unsplash.com/photo-1713664064571-48afdc5c8d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
    z-index: -2;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(42, 111, 79, 0.7) 0%, rgba(42, 111, 79, 0.4) 100%);
    z-index: -1;
}

.hero__content {
    max-width: 800px;
}

.hero__content h1 {
    color: var(--light-color);
    margin-bottom: 20px;
}

.hero__content .subtitle {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero__rating {
    margin-bottom: 30px;
    font-size: 1.2rem;
    color: #ffd700;
}

.hero__rating small {
    color: var(--light-color);
    font-size: 0.9rem;
    opacity: 0.7;
}

/* --- Forme Organiche (Shapes) --- */
.shape-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, rgba(167, 201, 87, 0.3), rgba(242, 232, 207, 0.3));
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    bottom: -300px;
    right: -200px;
    z-index: -1;
    animation: blob 10s infinite alternate;
}

.shape-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.shape-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.shape-wave .shape-fill {
    fill: var(--accent-color);
}

@keyframes blob {
    100% { transform: rotate(360deg) scale(1.1); }
}

/* --- Sezioni Alternate --- */
.section--alternate {
    background-color: var(--accent-color);
}

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

.alternate-grid__text h2 { margin-bottom: 20px; }
.alternate-grid__text p { margin-bottom: 30px; }

.alternate-grid__image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.alternate-grid__image img:hover {
    transform: scale(1.03);
}

/* --- Sezione Benefici --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.benefit-card {
    background: var(--light-color);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.benefit-card__icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

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

/* --- Sezione Catalogo --- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.catalog-item {
    background: var(--light-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.catalog-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.catalog-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.catalog-item__info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.catalog-item__info h3 {
    margin-bottom: 10px;
}

.catalog-item__info p {
    margin-bottom: 20px;
    flex-grow: 1;
}

.price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* --- Sezione Contatti --- */
.section--contact {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--light-color);
}

.section--contact .section-title { color: var(--light-color); }

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

.contact-info h3 { margin-bottom: 20px; }
.contact-info p { margin-bottom: 10px; }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1rem;
}

.contact-form button {
    border: none;
    align-self: flex-start;
}

/* --- Sezione Community --- */
.section--community {
    padding: 80px 0;
}

.community-banner {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

.community-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--light-color);
}

.community-content h2 {
    color: var(--light-color);
    margin-bottom: 20px;
}

.community-content p {
    margin-bottom: 30px;
    opacity: 0.9;
}

.community-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

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

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

.social-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

.community-image {
    overflow: hidden;
}

.community-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* --- Footer --- */
.main-footer {
    background: var(--dark-color);
    color: var(--light-color);
    text-align: center;
    padding: 30px 0;
}

/* --- Animazioni allo Scroll --- */
.fade-in, .fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .benefits-grid, .catalog-grid, .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
    .alternate-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .alternate-grid__image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .main-nav {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--light-color);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: left 0.5s ease;
    }
    .main-nav.is-open {
        left: 0;
    }
    .hamburger {
        display: flex;
    }
    .hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.is-open span:nth-child(2) { opacity: 0; }
    .hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

    .benefits-grid, .catalog-grid, .contact-grid {
        grid-template-columns: 1fr;
    }
    .section {
        padding: 50px 0;
    }
}

/* Stile Sezione FAQ */
.section--faq {
    background-color: #f9f9f9;
}

.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--light-color);
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item.active {
    box-shadow: var(--shadow-md);
}

.faq-question {
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    transition: transform 0.3s ease;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    padding: 0 20px;
    color: var(--text-color);
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Valore abbastanza alto da contenere il testo */
    padding: 0 20px 20px 20px;
}

document.addEventListener('DOMContentLoaded', () => {

    // --- Menu Hamburger per Mobile ---
    const hamburgerMenu = document.getElementById('hamburger-menu');
    const mainNav = document.querySelector('.main-nav');

    hamburgerMenu.addEventListener('click', () => {
        hamburgerMenu.classList.toggle('is-open');
        mainNav.classList.toggle('is-open');
    });

    // Chiudi il menu al click su un link
    const navLinks = document.querySelectorAll('.main-nav a');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            hamburgerMenu.classList.remove('is-open');
            mainNav.classList.remove('is-open');
        });
    });

    // --- Animazioni allo Scroll con Intersection Observer ---
    const animatedElements = document.querySelectorAll('.fade-in, .fade-in-up');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                // Opzionale: smetti di osservare l'elemento dopo l'animazione
                // observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1 // Attiva quando il 10% dell'elemento è visibile
    });

    animatedElements.forEach(el => {
        observer.observe(el);
    });

    // --- Effetto Parallax ---
    const parallaxElements = document.querySelectorAll('.parallax');

    window.addEventListener('scroll', () => {
        let scrolled = window.pageYOffset;
        
        parallaxElements.forEach(el => {
            let speed = el.dataset.speed || 0.5;
            el.style.transform = `translateY(${scrolled * speed}px)`;
        });
    });

    // --- Header che cambia stile allo scroll ---
    const header = document.querySelector('.main-header');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.style.background = 'rgba(255, 255, 255, 0.95)';
            header.style.boxShadow = 'var(--shadow-md)';
        } else {
            header.style.background = 'rgba(255, 255, 255, 0.9)';
            header.style.boxShadow = 'var(--shadow-sm)';
        }
    });

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

    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');

        question.addEventListener('click', () => {
            // Chiudi l'altro item aperto, se esiste
            const currentlyActiveItem = document.querySelector('.faq-item.active');
            if (currentlyActiveItem && currentlyActiveItem !== item) {
                currentlyActiveItem.classList.remove('active');
            }

            // Apri/chiudi l'item cliccato
            item.classList.toggle('active');
        });
    });