.dynamic-scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.dynamic-scroll-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s ease-in-out;
    will-change: opacity, transform, visibility;
    background-color: inherit;
}

/* Ensures container background matches site background */
.dynamic-scroll-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    z-index: -1;
}

.dynamic-scroll-item:first-child,
.dynamic-scroll-item.active {
    opacity: 1;
    visibility: visible;
}

/* Animation for text elements (titles, headings, paragraphs) */
.animated-text {
    opacity: 0;
    transform: translateX(20px);
    transition: transform 200ms ease-out, opacity 200ms ease-out;
    will-change: transform, opacity;
}

/* Images appear instantly - VERY important overrides */
.elementor-image img, 
.elementor-widget-image img,
.animated-image {
    opacity: 1 !important; /* Force opacity */
    transform: none !important; /* Prevent any transform */
    transition: none !important; /* Disable transitions */
}

/* Placeholder styling - match your site's background color */
.elementor-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit; /* Match your site background */
    z-index: 0;
}

/* Animation classes */
.scroll-up {
    transform: translateY(-30px);
}

.scroll-down {
    transform: translateY(30px);
}

/* Prevent default scrolling when active */
body.dynamic-scroll-active {
    overflow: hidden;
    height: 100vh;
}

/* Dynamic content transitions */
[data-dynamic] {
    transition: opacity 0.3s ease-in-out;
}

[data-dynamic].loading {
    opacity: 0.5;
}

/* Make sure the content inside each item is properly positioned */
.elementor-section-wrap {
    height: 100%;
}

.elementor-section.elementor-section-height-full {
    height: 100vh;
}

/* Responsive styles */
@media (max-width: 768px) {
    .dynamic-scroll-item {
        padding: 15px;
    }
}

.animated-image {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}