/* Container principal */
    #homepage {
        position: relative;
        background-color: gray;
        width: 100%;
        height: 100dvh;
        z-index: 100;
        overflow: hidden;
        clip-path: polygon(0 0, 0 100%, 20% 100%, 20% 0,
                /* Premier panneau */
                20% 0, 20% 100%, 40% 100%, 40% 0,
                /* Deuxième panneau */
                40% 0, 40% 100%, 60% 100%, 60% 0,
                /* Troisième panneau */
                60% 0, 60% 100%, 80% 100%, 80% 0,
                /* Quatrième panneau */
                80% 0, 80% 100%, 100% 100%, 100% 0
                /* Cinquième panneau */
            );
    }

    #homepage .split-text-homepage-title {
        font-family: var(--title-font);
        font-weight: var(--font-title-weight-extrabold);
        font-optical-sizing: auto;
        font-style: normal;
        font-size: 18vw;
        text-align: right;
        color: var(--text-primary);
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: 60px;
        right: 20px;
        left: 20px;
        line-height: 0.75;
    }



    #homepage .sub-title {
        font-family: var(--body-font);
        font-weight: var(--font-body-weight-regular);
        font-size: var(--font-size-sm);
        color: var(--text-primary);
        position: absolute;
        bottom: 20px;
        right: 20px;
        text-align: right;
        opacity: 0;
    }

    #canvas-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
    }

    /* Suppression des styles inutiles de panel-container et panel 
       car nous utilisons maintenant clip-path directement sur #homepage */

    #about-me-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 200px 20%;
    }

    .about-me-text {
        width: 70%;
        transform: translateX(2%);
    }

    .about-me-text h1 {
        font-family: var(--title-font);
        font-size: 100px;
        font-weight: var(--font-title-weight-extrabold);
        color: var(--text-primary);
        text-transform: uppercase;
        line-height: 0.8;
        margin: 0;
        padding: 0;
    }

    .about-me-text p {
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        font-weight: var(--font-body-weight-regular);
        color: var(--text-primary);
        width: 85%;
    }

    .about-me-text button {
        position: relative;
        height: 50px;
        padding: 0 30px;
        border-radius: 10px;
        background-color: var(--primary-color);
        color: var(--text-primary);
        border: none;
        margin-top: 10px;
    }

    .about-me-text button::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 100%;
        border-radius: 10px;
        background-color: var(--background-primary-invert);
        color: var(--text-primary-invert);
        transition: all 0.3s ease;
        z-index: -1;
        opacity: 0;
    }

    .about-me-text button::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 100%;
        border-radius: 10px;
        background-color: var(--background-primary-invert);
        transition: all 0.3s ease;
        z-index: -1;
        opacity: 0;
        -webkit-mask-image: url('../../assets/icons/links/arrow-right.svg');
        mask-image: url('../../assets/icons/links/arrow-right.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: right 5px center;
        mask-position: right 5px center;
        -webkit-mask-size: 20px;
        mask-size: 20px;
        background-color: var(--text-primary-invert);
        animation: shakeArrow 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes shakeArrow {

        0%,
        100% {
            transform: rotate(0deg);
        }

        10% {
            transform: rotate(2deg);
        }

        20% {
            transform: rotate(4deg);
        }

        30% {
            transform: rotate(5deg);
        }

        40% {
            transform: rotate(4deg);
        }

        50% {
            transform: rotate(2deg);
        }

        60% {
            transform: rotate(0deg);
        }

        70% {
            transform: rotate(-2deg);
        }

        80% {
            transform: rotate(-4deg);
        }

        90% {
            transform: rotate(-2deg);
        }
    }

    .about-me-text button:hover::after {
        right: -30px;
        opacity: 1;
    }

    .about-me-text button:hover::before {
        right: -30px;
        opacity: 1;
    }

    .about-me-text button:hover {
        background-color: var(--primary-color-hover);
        opacity: 1;
    }

    #about-me-section {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .moving-background {
        position: absolute;
        width: 300px;
        height: 400px;
        top: 40%;
        right: 20%;
        transform: translateY(-50%) rotate(10deg) scale(0.8);
        background-image: url('../../uploads/media/IMG_6191_2.webp');
        background-size: cover;
        background-position: center;
        opacity: 0;
        z-index: -1;
        pointer-events: none;
        will-change: transform;
        transition: opacity 0.5s ease;
        filter: grayscale(100%) contrast(1.2);
        overflow: hidden;
        border-radius: 10px;
        /* Important pour contenir le reflet */
    }

    .moving-background::before {
        content: '';
        position: absolute;
        width: 200%;
        /* Taille du reflet */
        height: 600%;
        top: -200%;
        left: 200%;
        background: linear-gradient(105deg,
                transparent 0%,
                transparent 30%,
                rgba(255, 255, 255, 0.8) 45%,
                transparent 60%,
                transparent 100%);
        transform: translate(var(--x, -50%), var(--y, -50%));
        pointer-events: none;
        mix-blend-mode: soft-light;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .moving-background.active::before {
        opacity: 1;
    }

    /* Styles pour l'animation split-text */
    .word-wrapper {
        display: inline-block;
        overflow: hidden;
    }

    .word {
        display: inline-block;
        will-change: transform;
    }

    /* Styles pour la section services */
    #services-section {
        position: relative;
        z-index: 20 !important;
        /* Plus élevé que works */
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
        pointer-events: auto;
        overflow: hidden;
    }

    /* Quadrillage de points */
    .grid-dots {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle, var(--text-primary) 1px, transparent 0px);
        background-size: 30px 30px;
        background-position: 0 0;
        z-index: 0;
        opacity: 0.5;
    }

    .title-container {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .fit {
        font-family: var(--title-font);
        font-weight: var(--font-title-weight-extrabold);
        font-size: 20vw;
        color: var(--text-primary);
        text-transform: uppercase;
        line-height: 1;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
        display: inline-block;
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .fit {
            font-size: 25vw;
        }
    }

    /* Styles pour les cartes de services glissables */
    .services-grid {
        position: relative;
        width: 100%;
        height: 60vh;
        /* Augmenter la hauteur pour plus d'espace vertical */
        margin: 0 auto;
        overflow: visible;
        z-index: 2;
    }

    .service-card {
        position: absolute;
        width: 300px;
        background-color: var(--background-opacity-invert);
        color: var(--text-primary-invert);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 40px;
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
        transform-style: preserve-3d;
        user-select: none;
        touch-action: none;
        z-index: 10;
    }

    .service-card:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .service-card:active {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

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

    .service-card .number-service {
        font-family: var(--body-font);
        display: block;
        font-size: 14px;
        color: var(--secondary-color);
        margin-bottom: 5px;
    }

    .service-card h3 {
        font-family: var(--title-font);
        font-size: 24px;
        margin: 0;
    }

    .service-card p {
        font-family: var(--body-font);
        font-size: 16px;
        line-height: 1.5;
    }

    .services-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        transition: opacity 0.5s ease;
        overflow: hidden;
    }

    #services-section.active .services-content {
        opacity: 1;
    }

    /* Styles de base */
    .pin-spacer-servicesAnimation {
        transition: z-index 0.1s;
    }

    /* Styles pour la section works */
    #works-section {
        position: relative;
        z-index: 10 !important;
        /* Plus bas que services */
        min-height: 100dvh;
        width: 100%;
        visibility: hidden;
        margin-top: -100vh;
        box-shadow: 0 -20px 100px rgba(0, 0, 0, 0.3),
            inset 0 0 100px rgba(0, 0, 0, 0.3);
        /* Pour compenser la hauteur de la section */
        background: rgba(255, 255, 255, 0.05);
    }

    .title-container-works {
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: fit-content;
        padding: 10px 20px;
        border-radius: 8px;
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        color: var(--text-primary);
    }

    .title-container-works div {
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: width 0.5s ease;
    }

    .works-grid {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 100px;
    }

    .project-link-container {
        position: absolute;
        overflow: hidden;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-origin: center center;
        will-change: transform, opacity;
        margin: 0;
        /* Supprimer les marges */
        padding: 0;
        /* Supprimer les paddings */
        pointer-events: none;
    }

    .project-link-container a {
        font-family: var(--title-font);
        font-size: 10vw;
        font-weight: var(--font-title-weight-extrabold);
        text-transform: uppercase;
        color: var(--text-primary);
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.3s ease;
        line-height: 1;
        padding: 10px 0;
        /* Ajouter un petit padding vertical */
    }

    /* Styles pour le conteneur des lignes centrales */
    .center-line-container {
        position: fixed;
        height: 20px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 100px;
        /* Valeur par défaut, sera mise à jour par JS */
        z-index: 1;
        pointer-events: none;
        transition: gap 0.3s ease-out;
        /* Transition fluide pour le changement de gap */
        overflow: hidden;
    }

    .center-line {
        height: 0.5px;
        background-color: var(--text-primary);
        opacity: 1;
        width: 100%;
    }

    .center-line.left {
        width: 50%;
        transform-origin: right;
    }

    .center-line.left::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 12px;
        height: 12px;
        border-radius: 4px;
        transform: translate(0%, -50%) rotate(45deg);
        background-color: var(--text-primary);
    }

    .center-line.right {
        width: 50%;
        transform-origin: left;
    }

    .center-line.right::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 12px;
        height: 12px;
        border-radius: 4px;
        transform: translate(0%, -50%) rotate(45deg);
        background-color: var(--text-primary);
    }

    .year-display {
        position: absolute;
        background-color: var(--background-primary-invert);
        padding: 5px 10px;
        border-radius: 8px 0 0 8px;
        top: 50%;
        right: 0px;
        transform: translate(0%, -50%);
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        color: var(--text-primary-invert);
        z-index: 10;
    }

    .see-all-projects {
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        bottom: 20px;
        padding: 15px 30px;
        border-radius: 8px;
        background-color: var(--text-primary);
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        color: var(--text-primary-invert);
    }

    .see-all-projects a {
        text-decoration: none;
        color: var(--text-primary-invert);
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-right: 0px;
        transition: padding-right 0.3s ease;
    }

    .see-all-projects a::after {
        content: '';
        position: absolute;
        right: 0;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        width: 16px;
        height: 16px;
        background-color: var(--text-primary-invert);
        -webkit-mask-image: url('../../assets/icons/links/arrow-right.svg');
        mask-image: url('../../assets/icons/links/arrow-right.svg');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .see-all-projects a:hover {
        padding-right: 25px;
    }

    .see-all-projects a:hover::after {
        opacity: 1;
        transform: translateX(0);
    }

    .center-line-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 100px;
        /* Valeur initiale, sera mise à jour dynamiquement */
        z-index: 1;
        pointer-events: none;
        transition: gap 0.5s ease;
        /* Transition fluide pour le changement de gap */
    }

    .project-background {
        position: fixed;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        opacity: 0.7;
        background-size: cover;
        background-position: center;
        transform-origin: center;

        /* Pour compenser la hauteur de la section */
    }

    .services-buttons {
        display: flex;
        gap: 20px;
    }

    .reset-cards-button {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 8px;
        border-radius: 8px;
        background-color: var(--text-primary);
        color: var(--text-primary-invert);
        border: none;
        cursor: pointer;
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .reset-cards-button svg {
        width: 30px;
        height: 30px;
        fill: var(--text-primary-invert);
    }

    .services-contact {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: end;
        bottom: 20px;
        right: 20px;
        padding: 8px 12px;
        background-color: var(--background-primary-invert);
        color: var(--text-primary-invert);
        border-radius: 8px;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        cursor: pointer;
        z-index: 1000;
    }

    .contact-header span {
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        margin: 0;
    }

    .contact-content {
        height: 0px;
        width: 110px;
        opacity: 0;
        margin-top: 0;
        overflow: hidden;
        transition: all 0.5s ease-in-out;
    }

    .services-contact.open .contact-content {
        height: 50px;
        width: 200px;
        opacity: 1;
        margin-top: 20px;
    }

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

    .contact-details ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
    }

    .contact-details li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .contact-details span {
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        color: var(--text-primary-invert);
    }

    .contact-details a {
        text-decoration: none;
        transition: color 0.3s ease;
        color: var(--text-primary-invert);
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
    }

    .contact-details a:hover {
        color: var(--accent-color);
    }

    @media (max-width: 768px) {
        .contact-details ul {
            flex-direction: column;
            gap: 15px;
        }
    }

    /* Styles pour les catégories de projets */
    .works-categories {
        position: absolute;
        bottom: 75px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        text-align: center;
        width: auto;
        max-width: 800px;
        transition: opacity 0.3s ease;
    }

    .categories-container {
        display: inline-block;
        background-color: var(--background-opacity-invert);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    #project-categories {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #project-categories li {
        margin: 0;
        padding: 0;
    }

    #project-categories a {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 8px;
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        text-decoration: none;
        color: var(--text-primary);
        background-color: transparent;
        border: 1px solid var(--text-primary);
        transition: all 0.3s ease;
    }

    #project-categories a:hover {
        background-color: var(--text-primary);
        color: var(--text-primary-invert);
    }

    .category-placeholder {
        font-family: var(--body-font);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        opacity: 0.7;
        padding: 5px 12px;
    }

    /* Styles pour les dégradés de pointillés */
    .dots-gradient {
        position: absolute;
        left: 0;
        width: 100%;
        height: 450px;
        z-index: 5;
        pointer-events: none;
    }

    .dots-gradient-top {
        top: 0;
        background-image: radial-gradient(circle, var(--text-primary) 1px, transparent 1px);
        background-size: 30px 30px;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .dots-gradient-bottom {
        bottom: 0;
        background-image: radial-gradient(circle, var(--text-primary) 1px, transparent 1px);
        background-size: 30px 30px;
        mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }

    /* Animation subtile pour les pointillés */
    @keyframes dotsFade {

        0%,
        100% {
            opacity: 0.7;
        }

        50% {
            opacity: 0.3;
        }
    }

    .dots-gradient {
        animation: dotsFade 8s infinite ease-in-out;
    }

    .dots-gradient-top {
        animation-delay: 0s;
    }

    .dots-gradient-bottom {
        animation-delay: 4s;
    }

    /* Ajustement pour les appareils mobiles */
    @media (max-width: 768px) {
        .dots-gradient {
            height: 100px;
            background-size: 15px 15px;
        }
    }

    /* Styles pour le texte défilant "WORKS" */
    .works-marquee-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 45%;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
        transform: translateY(-100%);
        /* Très subtil en arrière-plan */
    }

    .works-marquee-row {
        position: relative;
        width: 100%;
        height: 33%;
        /* Divise l'écran en 3 rangées égales */
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .works-marquee-content {
        display: flex;
        white-space: nowrap;
        will-change: transform;
        align-items: center;
    }

    .works-marquee-content span {
        display: inline-block;
        font-family: var(--title-font);
        font-weight: var(--font-title-weight-extrabold);
        font-size: 20vh;
        /* Taille relative à la hauteur de la fenêtre */
        text-transform: uppercase;
        color: var(--text-primary);
        padding: 0 2vw;
        letter-spacing: -0.03em;
        opacity: 1;
    }

    /* Styles pour les icônes de dossier */
    .marquee-folder-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2vw;
        opacity: 1;
        transform: scale(2);
    }

    /* Espacement vertical entre les rangées */
    .works-marquee-row:nth-child(1) {
        top: 5%;
    }

    .works-marquee-row:nth-child(2) {
        top: 10%;
    }

    .works-marquee-row:nth-child(3) {
        top: 15%;
    }

    .text-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 15.5vw;
    }

    .split-text-homepage-studio,
    .split-text-homepage-upercaze {
        display: inline-block;
        transform-origin: center;
        position: absolute;
        width: 100%;

    }

    .split-text-homepage-studio {
        right: 0;
        bottom: 0;
        transform: translateY(0%) rotate(5deg);
        opacity: 0;
        will-change: transform, opacity;
    }

    .split-text-homepage-upercaze {
        right: 0;
        bottom: 10px;
        opacity: 0;
        will-change: transform, opacity;
    }

    .swipe-icon {
        position: fixed;
        bottom: 50%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        opacity: 1;
        pointer-events: none;
        animation: fadeOut 2s ease-in-out forwards;
        animation-delay: 5s;
        background-color: var(--text-primary);
        padding: 7px;
        border-radius: 8px;
    }


    .swipe-icon svg {
        width: 30px;
        height: 30px;
    }

    .three-js-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        box-shadow: inset 0 0px 100px rgba(0, 0, 0, 0.3);
    }

    #three-js-canvas {
        width: 100%;
        height: 100%;
        display: block;
        box-shadow: inset 0 0px 100px rgba(0, 0, 0, 0.3);
    }

    .shadow-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        box-shadow: inset 0 0px 200px rgba(0, 0, 0, 0.2);
    }

    @media (min-width: 768px) {
        .swipe-icon {
            display: none;
        }
    }

    @media (max-width: 768px) {
        #homepage .split-text-homepage-title {
            font-size: 16vw;
            bottom: 105px;
        }

        #homepage .sub-title {
            bottom: 70px;
            left: 20px;
            text-align: left;
        }

        #about-me-section {
            padding: 0 60px;
        }

        #about-me-section .about-me-text {
            width: 100%;
        }

        .about-me-text h1 {
            font-size: 13vw;
            bottom: 105px;
        }

        .title-container {
            margin-top: 50px;
        }

        .fit {
            font-size: 20vw;
        }

        .about-me-text p {
            width: 100%;
        }

        .services-grid {
            height: 70vh;
        }

        .service-card {
            width: 200px;
            padding: 30px;
        }

        .services-contact {
            bottom: 70px;
            right: 50%;
            transform: translateX(50%);
        }

        .reset-cards-button {
            display: none;
        }

        .works-categories {
            width: 100%;
            bottom: 60px;
        }

        .see-all-projects {
            bottom: 20px;
            right: 20px;
            transform: translateX(0%);
            padding: 8px 12px;
        }

        .year-display {
            display: none;
        }

        .project-link-container a {
            font-size: 12vw;
        }

        .works-marquee-container {
            height: 25%;
        }

        .title-container-works {
            top: 80px;
        }

        .shadow-bottom {
            box-shadow: inset 0 0px 100px rgba(0, 0, 0, 0.1);
        }

        .moving-background {
            display: none;
        }

    }