/* Set the container to be visible */

/* Ensure container has the correct z-index */
.container {
    position: relative;
    z-index: 10; /* Make sure it's below grid items */
}

/* Ensure opacity is applied to the text and grid items */
.grid img, .grid p {
    opacity: 1 !important;
}

.grid a {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 10;
}

.grid img {
    opacity: 1 !important;
    visibility: visible !important;
}



/* Set the initial state for visibility of the content */
.section-content {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* When content becomes visible */
.section-content-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Initial state before scroll */
.transition-transform {
    transform: translateY(20px);  /* Start below */
    opacity: 0; /* Initially invisible */
}

/* Apply transition to elements inside the container */
.section-content h2,
.section-content p,
.section-content .grid {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/* Final state (after scroll) */
.section-content-visible h2,
.section-content-visible p,
.section-content-visible .grid {
    transform: translateY(0);  /* Move upward to normal position */
    opacity: 1; /* Fully visible */
}

@media (max-width: 768px) {
    .section-content {
        transform: translateY(10px); /* Slightly less movement on smaller screens */
    }
}