@media screen and (max-width: 768px) {
    body::before,
    body::after {
        background-attachment: scroll;
        background-size: 200px 200px;
    }
}

@keyframes floatLeaves {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1000px 1000px;
    }
}



@media screen and (max-width: 768px) {
    .hero-header::before {
        background-size: 150px, 125px;
        background-attachment: scroll;
    }
}

.featurs::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 100%;
    height: 100%;
    background: url('../img/lief2.png') no-repeat center;
    background-size: 400px;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    filter: contrast(130%) brightness(92%);
    mix-blend-mode: multiply;
}

/* Section background enhancements */
.container-fluid {
    position: relative;
    z-index: 1;
    width: 100%;
}

.container {
    max-width: 1320px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 991px) {
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

.bg-light {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.bg-light::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url('../img/lief1.png') repeat;
    opacity: 0.08;
    animation: rotateLeaves 180s linear infinite;
    pointer-events: none;
    z-index: 0;
    filter: contrast(125%) brightness(95%);
    mix-blend-mode: multiply;
    transform: translateZ(0);
    will-change: transform;
}

@media screen and (max-width: 768px) {
    .bg-light::before {
        animation: none;
        transform: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: 100px 100px;
    }
}

@keyframes rotateLeaves {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Ensure content stays above backgrounds */
.container-fluid,
.container {
    position: relative;
    z-index: 2;
}

/* Responsive container widths */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Page-specific enhancements */
.page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/lief1.png') no-repeat top left, url('../img/lief2.png') no-repeat bottom right;
    background-size: 250px, 200px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* Contact form and cart sections */
.contact-form,
.shopping-cart,
.consultation-form {
    position: relative;
    overflow: hidden;
}

.contact-form::before,
.shopping-cart::before,
.consultation-form::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: url('../img/lief2.png') no-repeat center;
    background-size: 350px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}