<style>
           
.titillium-web-extralight {
                  font-family: "Titillium Web", sans-serif;
                  font-weight: 200;
                  font-style: normal;
                }
                
                
                * {
                    margin: 0px;
                    padding: 0px;
                    box-sizing: border-box;
                    font-family: 'Titillium', sans-serif;
                }
                body {
                    background: black;
                    color: white;
                    overflow-x: hidden;
                    text-align: center;
                    animation: fadeIn 1.2s ease-in;

                }
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
    width:100%;
}

                
                #titolo {
                    font-size: 35px;
                    letter-spacing: 4px;
                }
                #sottotitolo {
                    font-size: 15px;
                    padding: 0px;
                    letter-spacing: 5px;

                }
                #poesia {
                    padding: 30px 15% 30px 15%;
                    color: black;
                    font-size: 15px;
                    background: white;
                    text-align: justify;
                    text-align-last: right;
                }
                .content {
                    padding: 30px;
                    text-align: center;
                }
                .projects {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    gap: 0px;
                    padding: 0px;
                }
                .project {
                    min-width: 300px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    flex: 1 1 400px;
                    margin: 0;
                    padding: 0;
                }
                .project img {
                    display: block;
                    width: 100%;
                    height: 240px;
                    object-fit: cover;
                    transition: opacity 0.3s ease-in-out;

                }
                .project-info {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    text-align: center;
                    padding: 10px;
                    background: rgba(0, 0, 0, 0.7);
                    opacity: 0;
                    transition: opacity 0.3s;
                }
                .project-info h3{
                font-size: 13px;
                }
                .project-info p{
                font-size: 12px;
                }

                .project:hover img {
                    opacity: 0.3;

                }
                .project:hover .project-info {
                    opacity: 1;
                }
                
                .overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    flex-direction: column;

                    background: rgba(0, 0, 0, 0.9);
                    justify-content: center;
                    align-items: center;
                    z-index: 2000;
                }
                .overlay video {
                    max-width: 80%;
                    max-height: 80%;
                    border-radius: 10px;
                }
                #works {
                    padding: 0px;
                    }
                .close-btn {
                    position: absolute;
                    top: 20px;
                    right: 30px;
                    font-size: 30px;
                    cursor: pointer;
                    color: white;
                }
                .testobrand {
                    color: black;
                    font-size: 1rem;
                }
                .brands-list img {
                    object-fit: contain;
                    flex-wrap: wrap;
                    width: 100px;
                    height: 100px;
                }
                .social-list img {
                    object-fit: contain;
                    width: 60px;
                    padding: 0px 10px;
                    transition: opacity 0.3s;

                }
                .social-list a:hover img {
                    opacity: 0.3;
                    }
                    
                #arrow {
                    position: absolute;
                    bottom: 10px;
                    width: 40px;
                    height: 40px;
                }
                #arrow img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
                .zoom-thumbnail {
                    transform: scale(1.45); 
                    transition: transform 0.3s ease-in-out;
                }
                .video-container {
                    position: relative;
                    display: inline-block;
                }
.video-info {
        margin-top: 20px;
        color: #c0c0c0;
        left: 0px;
        position: relative;
        font-size: 14px;
}
                .nav-arrow {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    color: white;
                    font-size: 24px;
                    font-weight: bold;
                    background: rgba(0,0,0,0.4);
                    border-radius: 50%;
                    cursor: pointer;
                    user-select: none;
                    transition: background 0.3s;
                }

                .nav-arrow:hover {
                    background: rgba(0,0,0,0.8);
                }

                .nav-arrow.left {
                    left: 15px;
                }

                .nav-arrow.right {
                    right: 15px;
                }

                .video-container video {
                    width: 100%;
                    max-height: 80vh;
                    border-radius: 10px;
                }

                .share-btn {
                    padding: 8px;
                    border: none;
                    background: transparent; /* sfondo completamente trasparente */
                    cursor: pointer;
                    transition: opacity 0.3s;
                }

                .share-btn:hover {
                    opacity: 0.7; /* leggero effetto hover sull'icona */
                }
                .share-btn img {
                    width: 25px;
                    height: 25px;
                    object-fit: contain;
                    display: block;
                }
                #filter-buttons {
                    margin-bottom: 5px;
                }

                .filter-btn {
                    background: transparent;
                    color: white;
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    padding: 8px 15px;
                    border-radius: 5px;
                    cursor: pointer;
                    margin: 5px 5px;
                    transition: all 0.3s;
                }

                .filter-btn.active, .filter-btn:hover {
                    background: rgba(255, 255, 255, 0.2);
                }
#colorist {
    background: #121212;
    color: white;
    padding: 40px 10%;
    font-family: 'Titillium Web', sans-serif;
}

.colorist-section {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.colorist-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: space-around;
}


.aces-logo img {
    width: 100%;
    padding: 0px 40px 0px 40px;
    min-width: 300px;
}
.colonna-sinistra {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 300px;
}

.colonna-destra {
    flex: 1;
    min-width: 300px;
}
.colonna-destra img {
    width: 100%;
        max-width: 490px;
        border-radius: 10px;
}
.colorist-text {
    min-width: 300px;
        font-size: 14px;
        line-height: 1.6;
        color: #ddd;
        text-align: justify;
}

blockquote {
    font-style: italic;
    text-align: center;
    color: #e6c34d;
    font-size: 15px;
}

.colorist-review {
    display: flex;
        gap: 40px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
}

.video-review {
    flex: 1;
        min-width: 300px;
}
.video-review img {
    width: 100%;
    max-width: 480px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.review-text {
    flex: 1;
        min-width: 280px;
        font-size: 14px;
        color: #ccc;
        line-height: 1.6;
        text-align: justify;
}

.demo-link {
    display: inline-block;
    margin-top: 20px;
    color: #f9b100;
    font-weight: bold;
    text-decoration: none;
}
.demo-link:hover {
    text-decoration: underline;
}

                @media (max-width: 768px) {
                    .hero #titolo {
                        font-size: 25px;
                    }
                    .projects {
                        align-items: center;
                    }
                }
                }
</style>
