Luce & Forma - Agenzia di Fotograf by @Darkness977 - Codewith.it

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

References

mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
srcIndica la provenienza di una risorsa esterna (tramite URL).
<a>Inserisce link e collegamenti ipertestuali
<select>Usato per creare un menu a tendina.
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
listCollega un elemento input con una lista di opzioni datalist

Users

Log in to search for users

Explore

Find inspiration

Le meraviglie d\'Italia

Esercitazione 2

Curriculum vitae

riepilogativo 2

Notizie dai Monti(2)

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>Luce & Forma - Agenzia di Fotografia, Comunicazione e Design</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #e8e6e1;
            --accent-color: #c9a961;
            --text-color: #333;
            --light-text: #777;
            --dark-bg: #1a1a1a;
            --light-bg: #f8f8f8;
            --transition: all 0.3s ease;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --glass-bg: rgba(255, 255, 255, 0.85);
            --glass-border: rgba(255, 255, 255, 0.18);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Raleway', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--primary-color);
        }

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

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

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

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        section {
            padding: 100px 0;
        }

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

        header.scrolled {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .logo {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-color);
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            color: var(--primary-color);
            font-weight: 500;
            position: relative;
            padding-bottom: 5px;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-color);
            transition: var(--transition);
        }

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

        .menu-toggle {
            display: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--primary-color);
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/seed/photography/1920/1080.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            max-width: 800px;
            z-index: 2;
            animation: fadeInUp 1s ease;
        }

        .hero h1 {
            font-size: 60px;
            margin-bottom: 20px;
            color: white;
            transform: translateY(0);
            transition: transform 0.5s ease;
        }

        .hero p {
            font-size: 20px;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
            transform: translateY(0);
            transition: transform 0.7s ease;
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--accent-color);
            color: white;
            border: none;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn:hover {
            background: var(--primary-color);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

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

        .scroll-indicator i {
            font-size: 30px;
            color: white;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-20px);
            }
            60% {
                transform: translateX(-50%) translateY(-10px);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* About Section */
        .about {
            background: var(--light-bg);
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .section-title h2 {
            font-size: 42px;
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--accent-color);
        }

        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

        .about-text {
            flex: 1;
        }

        .about-text p {
            margin-bottom: 20px;
            color: var(--light-text);
            font-size: 16px;
            line-height: 1.8;
        }

        .about-image {
            flex: 1;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

        .about-image img {
            transition: transform 0.5s ease;
        }

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

        /* Services Section */
        .services {
            background: white;
        }

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

        .service-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
        }

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

        .service-image {
            height: 200px;
            overflow: hidden;
        }

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

        .service-card:hover .service-image img {
            transform: scale(1.1);
        }

        .service-content {
            padding: 30px;
        }

        .service-content h3 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .service-content p {
            color: var(--light-text);
            margin-bottom: 20px;
        }

        .service-link {
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            color: var(--accent-color);
        }

        .service-link i {
            margin-left: 5px;
            transition: transform 0.3s ease;
        }

        .service-link:hover i {
            transform: translateX(5px);
        }

        /* Team Section */
        .team {
            background: var(--light-bg);
        }

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

        .team-member {
            text-align: center;
            transition: var(--transition);
        }

        .team-member:hover {
            transform: translateY(-10px);
        }

        .member-image {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 20px;
            border: 5px solid white;
            box-shadow: var(--shadow);
        }

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

        .team-member:hover .member-image img {
            transform: scale(1.1);
        }

        .member-info h3 {
            font-size: 22px;
            margin-bottom: 5px;
        }

        .member-info p {
            color: var(--accent-color);
            font-style: italic;
            margin-bottom: 15px;
        }

        .member-socials {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .member-socials a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            transition: var(--transition);
        }

        .member-socials a:hover {
            background: var(--accent-color);
            transform: translateY(-3px);
        }

        /* Portfolio Section */
        .portfolio {
            background: white;
        }

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

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

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

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: var(--shadow);
            height: 250px;
            cursor: pointer;
        }

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

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            padding: 20px;
            text-align: center;
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

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

        .portfolio-overlay h3 {
            color: white;
            margin-bottom: 10px;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .portfolio-overlay p {
            color: rgba(255, 255, 255, 0.8);
            transform: translateY(20px);
            transition: transform 0.3s ease 0.1s;
        }

        .portfolio-item:hover .portfolio-overlay h3,
        .portfolio-item:hover .portfolio-overlay p {
            transform: translateY(0);
        }

        /* Professional Portfolio Section */
        .professional-portfolio {
            background: var(--light-bg);
        }

        .mosaic-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-auto-rows: 200px;
            gap: 15px;
        }

        .mosaic-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: var(--shadow);
            cursor: pointer;
        }

        .mosaic-item:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
        }

        .mosaic-item:nth-child(4) {
            grid-column: span 2;
        }

        .mosaic-item:nth-child(7) {
            grid-row: span 2;
        }

        .mosaic-item:nth-child(10) {
            grid-column: span 2;
        }

        .mosaic-item:nth-child(13) {
            grid-column: span 2;
            grid-row: span 2;
        }

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

        .mosaic-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            padding: 20px;
            text-align: center;
        }

        .mosaic-item:hover .mosaic-overlay {
            opacity: 1;
        }

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

        .mosaic-overlay h3 {
            color: white;
            margin-bottom: 10px;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .mosaic-overlay p {
            color: rgba(255, 255, 255, 0.8);
            transform: translateY(20px);
            transition: transform 0.3s ease 0.1s;
        }

        .mosaic-item:hover .mosaic-overlay h3,
        .mosaic-item:hover .mosaic-overlay p {
            transform: translateY(0);
        }

        /* Testimonials Section */
        .testimonials {
            background: var(--primary-color);
            color: white;
        }

        .testimonials .section-title h2 {
            color: white;
        }

        .testimonials .section-title h2::after {
            background: var(--accent-color);
        }

        .testimonial-slider {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .testimonial {
            padding: 0 20px;
        }

        .testimonial-text {
            font-size: 20px;
            font-style: italic;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--accent-color);
        }

        .author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .author-info h4 {
            font-size: 18px;
            margin-bottom: 5px;
            color: white;
        }

        .author-info p {
            color: var(--accent-color);
            font-style: italic;
        }

        .testimonial-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: var(--transition);
        }

        .dot.active {
            background: var(--accent-color);
        }

        /* Process Section */
        .process {
            background: white;
        }

        .process-timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .process-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background: var(--accent-color);
        }

        .process-step {
            position: relative;
            margin-bottom: 50px;
        }

        .process-step:nth-child(odd) .step-content {
            margin-right: 50%;
            padding-right: 40px;
            text-align: right;
        }

        .process-step:nth-child(even) .step-content {
            margin-left: 50%;
            padding-left: 40px;
        }

        .step-number {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            background: var(--accent-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            z-index: 1;
        }

        .step-content h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .step-content p {
            color: var(--light-text);
        }

        /* Pricing Section */
        .pricing {
            background: var(--light-bg);
        }

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

        .pricing-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
        }

        .pricing-card.featured {
            transform: scale(1.05);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .pricing-card.featured::before {
            content: 'POPOLARE';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--accent-color);
            color: white;
            padding: 5px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            font-weight: 600;
        }

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

        .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }

        .pricing-header {
            padding: 30px;
            text-align: center;
            background: var(--primary-color);
            color: white;
        }

        .pricing-header h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: white;
        }

        .price {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .price span {
            font-size: 18px;
            font-weight: 400;
        }

        .pricing-body {
            padding: 30px;
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 30px;
        }

        .pricing-features li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
        }

        .pricing-features li i {
            color: var(--accent-color);
            margin-right: 10px;
        }

        .pricing-footer {
            text-align: center;
            padding-bottom: 30px;
        }

        /* FAQ Section */
        .faq {
            background: white;
        }

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

        .faq-item {
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

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

        .faq-question:hover {
            background: #e0e0e0;
        }

        .faq-question h3 {
            font-size: 18px;
            margin: 0;
            color: var(--primary-color);
        }

        .faq-toggle {
            font-size: 20px;
            color: var(--accent-color);
            transition: transform 0.3s ease;
        }

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

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

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

        .faq-answer p {
            color: var(--light-text);
            line-height: 1.6;
        }

        /* Contact Section */
        .contact {
            background: var(--light-bg);
        }

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

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .contact-details h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .contact-details p {
            color: var(--light-text);
        }

        .contact-form {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

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

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: inherit;
            transition: var(--transition);
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent-color);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 150px;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .submit-btn:hover {
            background: var(--accent-color);
        }

        /* Footer */
        footer {
            background: var(--dark-bg);
            color: white;
            padding: 50px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: white;
        }

        .footer-column p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
        }

        .footer-links {
            list-style: none;
        }

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

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: var(--accent-color);
        }

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

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

        .social-links a:hover {
            background: var(--accent-color);
        }

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

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            overflow: auto;
        }

        .modal-content {
            position: relative;
            margin: 50px auto;
            max-width: 900px;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            animation: modalFadeIn 0.5s ease;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 30px;
            color: white;
            cursor: pointer;
            z-index: 1;
            background: rgba(0, 0, 0, 0.5);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .modal-close:hover {
            background: var(--accent-color);
        }

        .modal-image {
            width: 100%;
            max-height: 500px;
            object-fit: cover;
        }

        .modal-info {
            padding: 30px;
        }

        .modal-info h2 {
            margin-bottom: 15px;
        }

        .modal-info p {
            color: var(--light-text);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .modal-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tag {
            padding: 5px 15px;
            background: var(--light-bg);
            border-radius: 20px;
            font-size: 14px;
            color: var(--primary-color);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 48px;
            }

            .about-content {
                flex-direction: column;
            }

            .contact-content {
                grid-template-columns: 1fr;
            }

            .process-timeline::before {
                left: 30px;
            }

            .process-step:nth-child(odd) .step-content,
            .process-step:nth-child(even) .step-content {
                margin-left: 70px;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0;
                text-align: left;
            }

            .step-number {
                left: 30px;
            }
        }

        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }

            .nav-links {
                position: fixed;
                top: 0;
                left: -100%;
                width: 70%;
                height: 100vh;
                background: white;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: left 0.5s ease;
                box-shadow: var(--shadow);
            }

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

            .nav-links li {
                margin: 15px 0;
            }

            .hero h1 {
                font-size: 36px;
            }

            .hero p {
                font-size: 16px;
            }

            .section-title h2 {
                font-size: 32px;
            }

            .mosaic-item:nth-child(1),
            .mosaic-item:nth-child(4),
            .mosaic-item:nth-child(10),
            .mosaic-item:nth-child(13) {
                grid-column: span 1;
            }

            .mosaic-item:nth-child(1),
            .mosaic-item:nth-child(7),
            .mosaic-item:nth-child(13) {
                grid-row: span 1;
            }
        }

        @media (max-width: 576px) {
            .hero h1 {
                font-size: 28px;
            }

            .section-title h2 {
                font-size: 28px;
            }

            .pricing-card.featured {
                transform: scale(1);
            }

            .modal-content {
                margin: 20px;
            }
        }

        /* Animations on scroll */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header id="header">
        <div class="container">
            <nav>
                <div class="logo">Luce & Forma</div>
                <ul class="nav-links" id="navLinks">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">Chi Siamo</a></li>
                    <li><a href="#services">Servizi</a></li>
                    <li><a href="#team">Team</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#professional-portfolio">Lavori</a></li>
                    <li><a href="#testimonials">Testimonianze</a></li>
                    <li><a href="#process">Processo</a></li>
                    <li><a href="#pricing">Prezzi</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#contact">Contatti</a></li>
                </ul>
                <div class="menu-toggle" id="menuToggle">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>Catturiamo l'essenza della tua visione</h1>
            <p>Fotografia, comunicazione e design che raccontano la tua storia con eleganza e impatto</p>
            <a href="#portfolio" class="btn">Scopri i nostri lavori</a>
        </div>
        <div class="scroll-indicator">
            <i class="fas fa-chevron-down"></i>
        </div>
    </section>

    <!-- About Section -->
    <section class="about reveal" id="about">
        <div class="container">
            <div class="section-title">
                <h2>Chi Siamo</h2>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <p>Luce & Forma nasce dalla passione per la bellezza e dalla convinzione che ogni progetto meriti di essere raccontato in modo unico. Il nostro team di fotografi, designer e comunicatori lavora in sinergia per trasformare le tue idee in esperienze visive indimenticabili.</p>
                    <p>Con oltre un decennio di esperienza nel settore, abbiamo collaborato con brand di lusso, aziende innovative e creativi visionari, aiutandoli a definire la loro identità visiva e a comunicare i loro valori con autenticità ed eleganza.</p>
                    <p>La nostra filosofia si basa sull'ascolto attento, sulla ricerca estetica e sull'attenzione ai dettagli. Crediamo che ogni immagine, ogni design e ogni parola debbano contribuire a creare una narrazione coerente e coinvolgente.</p>
                </div>
                <div class="about-image">
                    <img src="https://picsum.photos/seed/about/600/500.jpg" alt="Chi Siamo">
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services reveal" id="services">
        <div class="container">
            <div class="section-title">
                <h2>I Nostri Servizi</h2>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://picsum.photos/seed/photography/400/300.jpg" alt="Fotografia">
                    </div>
                    <div class="service-content">
                        <h3>Fotografia</h3>
                        <p>Ritratti, eventi, still life e reportage aziendali realizzati con tecnica d'avanguardia e sensibilità artistica per catturare l'essenza del tuo brand.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://picsum.photos/seed/branding/400/300.jpg" alt="Branding">
                    </div>
                    <div class="service-content">
                        <h3>Branding</h3>
                        <p>Creazione di identità visive uniche e memorabili, dal logo al sistema di comunicazione completo, per distinguerti nel mercato.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://picsum.photos/seed/webdesign/400/300.jpg" alt="Web Design">
                    </div>
                    <div class="service-content">
                        <h3>Web Design</h3>
                        <p>Siti web eleganti e funzionali, ottimizzati per l'esperienza utente e per i motori di ricerca, per valorizzare la tua presenza online.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://picsum.photos/seed/content/400/300.jpg" alt="Content Strategy">
                    </div>
                    <div class="service-content">
                        <h3>Content Strategy</h3>
                        <p>Pianificazione e creazione di contenuti di valore che raccontano la tua storia e coinvolgono il tuo pubblico con autenticità.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://picsum.photos/seed/social/400/300.jpg" alt="Social Media">
                    </div>
                    <div class="service-content">
                        <h3>Social Media</h3>
                        <p>Gestione strategica dei canali social per costruire community attive e promuovere la tua immagine con contenuti di qualità.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://picsum.photos/seed/video/400/300.jpg" alt="Video Production">
                    </div>
                    <div class="service-content">
                        <h3>Video Production</h3>
                        <p>Video aziendali, spot pubblicitari e contenuti cinematografici per comunicare i tuoi valori in modo dinamico ed emozionale.</p>
                        <a href="#" class="service-link">Scopri di più <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="team reveal" id="team">
        <div class="container">
            <div class="section-title">
                <h2>I Nostri Architetti</h2>
            </div>
            <div class="team-grid">
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team1/400/400.jpg" alt="Marco Rossi">
                    </div>
                    <div class="member-info">
                        <h3>Marco Rossi</h3>
                        <p>Fondatore & Direttore Creativo</p>
                        <div class="member-socials">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-behance"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team2/400/400.jpg" alt="Elena Bianchi">
                    </div>
                    <div class="member-info">
                        <h3>Elena Bianchi</h3>
                        <p>Head of Photography</p>
                        <div class="member-socials">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-behance"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team3/400/400.jpg" alt="Giulia Ferrari">
                    </div>
                    <div class="member-info">
                        <h3>Giulia Ferrari</h3>
                        <p>Senior Designer</p>
                        <div class="member-socials">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-behance"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://picsum.photos/seed/team4/400/400.jpg" alt="Alessandro Conti">
                    </div>
                    <div class="member-info">
                        <h3>Alessandro Conti</h3>
                        <p>Stratega della Comunicazione</p>
                        <div class="member-socials">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-behance"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section class="portfolio reveal" id="portfolio">
        <div class="container">
            <div class="section-title">
                <h2>Portfolio</h2>
            </div>
            <div class="portfolio-filters">
                <button class="filter-btn active" data-filter="all">Tutti</button>
                <button class="filter-btn" data-filter="photography">Fotografia</button>
                <button class="filter-btn" data-filter="branding">Branding</button>
                <button class="filter-btn" data-filter="web">Web Design</button>
                <button class="filter-btn" data-filter="video">Video</button>
            </div>
            <div class="portfolio-grid">
                <div class="portfolio-item" data-category="photography">
                    <img src="https://picsum.photos/seed/portfolio1/400/300.jpg" alt="Progetto 1">
                    <div class="portfolio-overlay">
                        <h3>Ritratti d'Autore</h3>
                        <p>Fotografia</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="branding">
                    <img src="https://picsum.photos/seed/portfolio2/400/300.jpg" alt="Progetto 2">
                    <div class="portfolio-overlay">
                        <h3>Identity Restyling</h3>
                        <p>Branding</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="web">
                    <img src="https://picsum.photos/seed/portfolio3/400/300.jpg" alt="Progetto 3">
                    <div class="portfolio-overlay">
                        <h3>E-commerce Luxury</h3>
                        <p>Web Design</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="video">
                    <img src="https://picsum.photos/seed/portfolio4/400/300.jpg" alt="Progetto 4">
                    <div class="portfolio-overlay">
                        <h3>Campaign Video</h3>
                        <p>Video</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="photography">
                    <img src="https://picsum.photos/seed/portfolio5/400/300.jpg" alt="Progetto 5">
                    <div class="portfolio-overlay">
                        <h3>Still Life Food</h3>
                        <p>Fotografia</p>
                    </div>
                </div>
                <div class="portfolio-item" data-category="branding">
                    <img src="https://picsum.photos/seed/portfolio6/400/300.jpg" alt="Progetto 6">
                    <div class="portfolio-overlay">
                        <h3>Logo Design</h3>
                        <p>Branding</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Professional Portfolio Section -->
    <section class="professional-portfolio reveal" id="professional-portfolio">
        <div class="container">
            <div class="section-title">
                <h2>Lavori Recenti</h2>
            </div>
            <div class="mosaic-gallery">
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work1/600/600.jpg" alt="Lavoro 1">
                    <div class="mosaic-overlay">
                        <h3>Campagna Pubblicitaria</h3>
                        <p>Brand di moda internazionale</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work2/300/200.jpg" alt="Lavoro 2">
                    <div class="mosaic-overlay">
                        <h3>Ritratto Corporate</h3>
                        <p>CEO azienda tech</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work3/300/200.jpg" alt="Lavoro 3">
                    <div class="mosaic-overlay">
                        <h3>Food Photography</h3>
                        <p>Ristorante stellato</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work4/600/200.jpg" alt="Lavoro 4">
                    <div class="mosaic-overlay">
                        <h3>Web Design</h3>
                        <p>Sito e-commerce luxury</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work5/300/200.jpg" alt="Lavoro 5">
                    <div class="mosaic-overlay">
                        <h3>Branding</h3>
                        <p>Startup innovativa</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work6/300/200.jpg" alt="Lavoro 6">
                    <div class="mosaic-overlay">
                        <h3>Video Production</h3>
                        <p>Documentario aziendale</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work7/300/400.jpg" alt="Lavoro 7">
                    <div class="mosaic-overlay">
                        <h3>Architectural Photography</h3>
                        <p>Progetto residenziale</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work8/300/200.jpg" alt="Lavoro 8">
                    <div class="mosaic-overlay">
                        <h3>Event Photography</h3>
                        <p>Lancio prodotto</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work9/300/200.jpg" alt="Lavoro 9">
                    <div class="mosaic-overlay">
                        <h3>Content Creation</h3>
                        <p>Campagna social media</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work10/600/200.jpg" alt="Lavoro 10">
                    <div class="mosaic-overlay">
                        <h3>UI/UX Design</h3>
                        <p>App mobile banking</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work11/300/200.jpg" alt="Lavoro 11">
                    <div class="mosaic-overlay">
                        <h3>Fashion Editorial</h3>
                        <p>Rivista di settore</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work12/300/200.jpg" alt="Lavoro 12">
                    <div class="mosaic-overlay">
                        <h3>Product Photography</h3>
                        <p>Catalogo gioielli</p>
                    </div>
                </div>
                <div class="mosaic-item">
                    <img src="https://picsum.photos/seed/work13/600/600.jpg" alt="Lavoro 13">
                    <div class="mosaic-overlay">
                        <h3>Corporate Rebranding</h3>
                        <p>Azienda multinazionale</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials reveal" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Cosa Dicono di Noi</h2>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial">
                    <p class="testimonial-text">"Lavorare con Luce & Forma ha trasformato completamente la nostra immagine aziendale. La loro capacità di interpretare i nostri valori e tradurli in una comunicazione visiva efficace è stata fondamentale per il nostro successo."</p>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://picsum.photos/seed/author1/100/100.jpg" alt="Cliente 1">
                        </div>
                        <div class="author-info">
                            <h4>Francesca Moretti</h4>
                            <p>CEO, Luxury Brand</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-dots">
                <span class="dot active"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <section class="process reveal" id="process">
        <div class="container">
            <div class="section-title">
                <h2>Il Nostro Processo</h2>
            </div>
            <div class="process-timeline">
                <div class="process-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>Ascolto e Analisi</h3>
                        <p>Iniziamo con un colloquio approfondito per comprendere la tua visione, i tuoi obiettivi e il tuo pubblico di riferimento.</p>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Strategia Creativa</h3>
                        <p>Definiamo la direzione creativa più adatta al tuo brand, sviluppando un concept che unisce estetica e funzionalità.</p>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Sviluppo e Produzione</h3>
                        <p>Realizziamo i materiali con la massima attenzione ai dettagli, utilizzando tecnologie d'avanguardia e tecniche artigianali.</p>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>Revisione e Affinamento</h3>
                        <p>Presentiamo i risultati e raccogliamo il tuo feedback per perfezionare ogni aspetto del progetto.</p>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <h3>Lancio e Supporto</h3>
                        <p>Accompagniamo il lancio del progetto e forniamo supporto continuo per garantire il massimo impatto nel tempo.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="pricing reveal" id="pricing">
        <div class="container">
            <div class="section-title">
                <h2>I Nostri Pacchetti</h2>
            </div>
            <div class="pricing-cards">
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Essenziale</h3>
                        <div class="price">€1.500<span>/progetto</span></div>
                    </div>
                    <div class="pricing-body">
                        <ul class="pricing-features">
                            <li><i class="fas fa-check"></i> Consulenza iniziale</li>
                            <li><i class="fas fa-check"></i> Concept creativo</li>
                            <li><i class="fas fa-check"></i> 2 revisioni</li>
                            <li><i class="fas fa-check"></i> Consegna in 2 settimane</li>
                            <li><i class="fas fa-check"></i> Supporto via email</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <a href="#contact" class="btn">Contattaci</a>
                    </div>
                </div>
                <div class="pricing-card featured">
                    <div class="pricing-header">
                        <h3>Professionale</h3>
                        <div class="price">€3.500<span>/progetto</span></div>
                    </div>
                    <div class="pricing-body">
                        <ul class="pricing-features">
                            <li><i class="fas fa-check"></i> Consulenza strategica</li>
                            <li><i class="fas fa-check"></i> Concept creativo completo</li>
                            <li><i class="fas fa-check"></i> 5 revisioni</li>
                            <li><i class="fas fa-check"></i> Consegna in 3 settimane</li>
                            <li><i class="fas fa-check"></i> Supporto prioritario</li>
                            <li><i class="fas fa-check"></i> Report performance</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <a href="#contact" class="btn">Contattaci</a>
                    </div>
                </div>
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Elite</h3>
                        <div class="price">€7.000<span>/progetto</span></div>
                    </div>
                    <div class="pricing-body">
                        <ul class="pricing-features">
                            <li><i class="fas fa-check"></i> Consulenza dedicata</li>
                            <li><i class="fas fa-check"></i> Concept creativo premium</li>
                            <li><i class="fas fa-check"></i> Revisioni illimitate</li>
                            <li><i class="fas fa-check"></i> Consegna flessibile</li>
                            <li><i class="fas fa-check"></i> Supporto 24/7</li>
                            <li><i class="fas fa-check"></i> Report performance dettagliati</li>
                            <li><i class="fas fa-check"></i> Manutenzione trimestrale</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <a href="#contact" class="btn">Contattaci</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq reveal" id="faq">
        <div class="container">
            <div class="section-title">
                <h2>Domande Frequenti</h2>
            </div>
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Quanto tempo richiede un progetto completo?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>I tempi di realizzazione variano in base alla complessità del progetto. Un servizio fotografico può richiedere da 1 a 3 giorni tra preparazione, shooting e post-produzione. Un progetto di branding completo richiede generalmente 4-6 settimane, mentre un sito web personalizzato può richiedere da 6 a 12 settimane a seconda delle funzionalità richieste. Forniamo sempre una tempistica dettagliata durante la fase di consulenza iniziale.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Lavorate anche con clienti internazionali?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, abbiamo esperienza nella collaborazione con clienti a livello internazionale. Grazie alla nostra rete di professionisti e agli strumenti di comunicazione digitale, possiamo gestire progetti per clienti in qualsiasi parte del mondo. Siamo fluenti in italiano, inglese e francese, e possiamo organizzare shooting e sopralluoghi anche all'estero.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Posso richiedere un servizio specifico o solo un pacchetetto completo?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Offriamo sia servizi individuali che pacchetti completi. Comprendiamo che ogni cliente ha esigenze diverse, quindi siamo flessibili e possiamo creare soluzioni personalizzate. Che tu abbia bisogno solo di un servizio fotografico, di un restyling del logo o di una strategia di comunicazione completa, siamo in grado di soddisfare le tue necessità.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Come viene gestita la proprietà intellettuale dei materiali creati?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>La proprietà intellettuale viene gestita caso per caso in base al tipo di servizio. Generalmente, per i servizi fotografici, i diritti d'uso vengono ceduti al cliente secondo termini concordati, mentre l'autore mantiene i diritti morali. Per i progetti di branding e design, trasferiamo la proprietà completa al cliente al saldo finale. Tutti i dettagli vengono specificati nel contratto prima dell'inizio del lavoro.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Offrite supporto anche dopo la consegna del progetto?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, il nostro impegno non termina con la consegna del progetto. Offriamo diversi livelli di supporto post-progetto, inclusi pacchetti di manutenzione per siti web, aggiornamenti di branding e consulenze continue. I clienti dei pacchetti Professionale ed Elite hanno incluso un periodo di supporto gratuito, mentre per tutti gli altri possiamo creare accordi di assistenza personalizzati.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Qual è il vostro approccio alla sostenibilità nei progetti?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>La sostenibilità è un valore fondamentale per noi. Adottiamo pratiche eco-sostenibili nei nostri processi, dall'utilizzo di materiali riciclati per la stampa alla scelta di fornitori locali. Per i progetti digitali, ottimizziamo le risorse per ridurre il consumo energetico. Inoltre, supportiamo attivamente progetti culturali e sociali che promuovono la sostenibilità ambientale e sociale.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Come posso essere sicuro che il risultato corrisponda alle mie aspettative?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Il nostro processo è strutturato per garantire la massima soddisfazione del cliente. Iniziamo con un briefing dettagliato per comprendere esattamente le tue aspettative. Durante lo sviluppo, organizziamo momenti di revisione intermedi per raccogliere feedback e apportare modifiche. Prima della consegna finale, presentiamo una bozza completa per l'approvazione. Inoltre, il nostro portfolio testimonia la qualità e la coerenza del nostro lavoro.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact reveal" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contattaci</h2>
            </div>
            <div class="contact-content">
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Sede</h3>
                            <p>Via della Luce, 15<br>20121 Milano, Italia</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Telefono</h3>
                            <p>+39 02 12345678</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Email</h3>
                            <p>info@luceeforma.it</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Orari</h3>
                            <p>Lunedì - Venerdì: 9:00 - 18:00<br>Sabato: 10:00 - 14:00</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Nome</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">Oggetto</label>
                            <input type="text" id="subject" name="subject" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Messaggio</label>
                            <textarea id="message" name="message" required></textarea>
                        </div>
                        <button type="submit" class="submit-btn">Invia Messaggio</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Luce & Forma</h3>
                    <p>Agenzia di fotografia, comunicazione e design di alto livello. Trasformiamo le tue idee in esperienze visive indimenticabili.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-behance"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Link Utili</h3>
                    <ul class="footer-links">
                        <li><a href="#about">Chi Siamo</a></li>
                        <li><a href="#services">Servizi</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#process">Processo</a></li>
                        <li><a href="#contact">Contatti</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Servizi</h3>
                    <ul class="footer-links">
                        <li><a href="#">Fotografia</a></li>
                        <li><a href="#">Branding</a></li>
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">Content Strategy</a></li>
                        <li><a href="#">Video Production</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Iscriviti per ricevere aggiornamenti sui nostri progetti e offerte esclusive.</p>
                    <form id="newsletterForm">
                        <div class="form-group">
                            <input type="email" placeholder="La tua email" required>
                        </div>
                        <button type="submit" class="btn">Iscriviti</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Luce & Forma. Tutti i diritti riservati. | <a href="#" style="color: var(--accent-color);">Privacy Policy</a> | <a href="#" style="color: var(--accent-color);">Termini di Utilizzo</a></p>
            </div>
        </div>
    </footer>

    <!-- Modal -->
    <div class="modal" id="portfolioModal">
        <div class="modal-content">
            <span class="modal-close">&times;</span>
            <img class="modal-image" src="" alt="">
            <div class="modal-info">
                <h2></h2>
                <p></p>
                <div class="modal-tags"></div>
            </div>
        </div>
    </div>

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

        // Mobile Menu Toggle
        const menuToggle = document.getElementById('menuToggle');
        const navLinks = document.getElementById('navLinks');

        menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('active');
        });

        // Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', function() {
                navLinks.classList.remove('active');
            });
        });

        // Parallax Effect on Hero
        window.addEventListener('scroll', function() {
            const scrolled = window.pageYOffset;
            const heroTitle = document.querySelector('.hero h1');
            const heroSubtitle = document.querySelector('.hero p');
            
            if (heroTitle && heroSubtitle) {
                heroTitle.style.transform = `translateY(${scrolled * 0.5}px)`;
                heroSubtitle.style.transform = `translateY(${scrolled * 0.3}px)`;
            }
        });

        // Reveal on Scroll
        function reveal() {
            const reveals = document.querySelectorAll('.reveal');
            
            for (let i = 0; i < reveals.length; i++) {
                const windowHeight = window.innerHeight;
                const elementTop = reveals[i].getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < windowHeight - elementVisible) {
                    reveals[i].classList.add('active');
                }
            }
        }

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

        // Portfolio Filter
        const filterBtns = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-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 filter = this.getAttribute('data-filter');
                
                portfolioItems.forEach(item => {
                    if (filter === 'all' || item.getAttribute('data-category') === filter) {
                        item.style.display = 'block';
                        setTimeout(() => {
                            item.style.opacity = '1';
                            item.style.transform = 'scale(1)';
                        }, 10);
                    } else {
                        item.style.opacity = '0';
                        item.style.transform = 'scale(0.8)';
                        setTimeout(() => {
                            item.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });

        // Portfolio Modal
        const modal = document.getElementById('portfolioModal');
        const modalClose = document.querySelector('.modal-close');
        const modalImage = document.querySelector('.modal-image');
        const modalTitle = document.querySelector('.modal-info h2');
        const modalDescription = document.querySelector('.modal-info p');
        const modalTags = document.querySelector('.modal-tags');

        // Open modal when clicking on portfolio item
        document.querySelectorAll('.portfolio-item').forEach(item => {
            item.addEventListener('click', function() {
                const imgSrc = this.querySelector('img').getAttribute('src');
                const title = this.querySelector('h3').textContent;
                const category = this.querySelector('p').textContent;
                
                modalImage.setAttribute('src', imgSrc);
                modalTitle.textContent = title;
                modalDescription.textContent = `Questo progetto rappresenta l'eccellenza nel campo della ${category.toLowerCase()}, combinando tecnica avanzata e sensibilità artistica per creare un risultato di grande impatto.`;
                
                // Add tags
                modalTags.innerHTML = '';
                const tags = [category, 'Creatività', 'Innovazione', 'Qualità'];
                tags.forEach(tag => {
                    const tagElement = document.createElement('span');
                    tagElement.classList.add('tag');
                    tagElement.textContent = tag;
                    modalTags.appendChild(tagElement);
                });
                
                modal.style.display = 'block';
                document.body.style.overflow = 'hidden';
            });
        });

        // Close modal
        modalClose.addEventListener('click', function() {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        });

        // Close modal when clicking outside of modal content
        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        });

        // 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');
            });
        });

        // Form Submission
        const contactForm = document.getElementById('contactForm');
        const newsletterForm = document.getElementById('newsletterForm');

        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            
            // Here you would normally send the form data to a server
            // For this example, we'll just show a success message
            alert(`Grazie, ${name}! Il tuo messaggio è stato inviato con successo. Ti risponderemo al più presto.`);
            
            // Reset form
            contactForm.reset();
        });

        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get email value
            const email = this.querySelector('input[type="email"]').value;
            
            // Here you would normally send the email to a server
            // For this example, we'll just show a success message
            alert(`Grazie per l'iscrizione alla nostra newsletter! Riceverai aggiornamenti su ${email}.`);
            
            // Reset form
            this.reset();
        });

        // Testimonial Slider
        const dots = document.querySelectorAll('.dot');
        const testimonial = document.querySelector('.testimonial');
        
        // Testimonial data
        const testimonials = [
            {
                text: "Lavorare con Luce & Forma ha trasformato completamente la nostra immagine aziendale. La loro capacità di interpretare i nostri valori e tradurli in una comunicazione visiva efficace è stata fondamentale per il nostro successo.",
                author: "Francesca Moretti",
                role: "CEO, Luxury Brand",
                image: "https://picsum.photos/seed/author1/100/100.jpg"
            },
            {
                text: "La professionalità e la creatività del team di Luce & Forma hanno superato le nostre aspettative. Hanno saputo cogliere l'essenza del nostro brand e tradurla in una campagna visiva di grande impatto.",
                author: "Marco Gentile",
                role: "Direttore Marketing, Tech Startup",
                image: "https://picsum.photos/seed/author2/100/100.jpg"
            },
            {
                text: "Ho collaborato con molti fotografi e designer nel corso della mia carriera, ma nessuno come il team di Luce & Forma. La loro attenzione ai dettagli e la loro visione artistica sono davvero uniche.",
                author: "Giulia Romano",
                role: "Fashion Designer",
                image: "https://picsum.photos/seed/author3/100/100.jpg"
            }
        ];
        
        let currentTestimonial = 0;
        
        // Function to update testimonial
        function updateTestimonial(index) {
            const testimonialData = testimonials[index];
            
            testimonial.innerHTML = `
                <p class="testimonial-text">"${testimonialData.text}"</p>
                <div class="testimonial-author">
                    <div class="author-image">
                        <img src="${testimonialData.image}" alt="${testimonialData.author}">
                    </div>
                    <div class="author-info">
                        <h4>${testimonialData.author}</h4>
                        <p>${testimonialData.role}</p>
                    </div>
                </div>
            `;
            
            // Update dots
            dots.forEach((dot, i) => {
                if (i === index) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }
        
        // Add click event to dots
        dots.forEach((dot, index) => {
            dot.addEventListener('click', function() {
                currentTestimonial = index;
                updateTestimonial(currentTestimonial);
            });
        });
        
        // Auto-change testimonial
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            updateTestimonial(currentTestimonial);
        }, 5000);
    </script>
</body>
</html>