.full-screen-section {
    width: 100%;
    margin-bottom: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}

.full-screen-section img {
    width: 100%;
    display: block;
    height: auto;
    border-radius: 8px;
}

.two-col-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}

.two-col-section .col-item {
    width: calc(50% - 10px);
    border-radius: 8px;
    overflow: hidden;
}

.two-col-section .col-item img {
    width: 100%;
    display: block;
    height: auto;
    border-radius: 8px;
}

/* Animation classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .two-col-section {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    .two-col-section .col-item {
        width: 100%;
    }

    .full-screen-section {
        padding: 0px;
    }

    .sustainables {
        padding: 30px 0;
    }
    
    /* Ensure col-item images have margin-bottom if needed, but gap handles it in flex container */
}
.sustainables {
    padding: 30px 0;
}