/*
 * Styles for Section 3 (With Scroll Animation)
 */

#section3 {
    display: flex;
    justify-content: flex-start; 
    align-items: flex-start;
    padding: 10vh 8vw;
    background-color: #dfedf1;
}

#section3 .content-wrapper {
    position: relative;
    text-align: left;
}


/* --- Title Animation Setup --- */

.mask-container-line img {
    display: none;
}

#section3 .section-title {
    font-family: "Josefin Sans", sans-serif;
    letter-spacing: -2px;
    font-weight: 900;
    font-size: 5vw;
    color: #354747;
    line-height: 1.1;
    margin: 0;
    padding-right: 15vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* NEW: This is the mask for each line */
#section3 .mask-container-line {
    overflow: hidden;
}

/* These rules align the content on each line of the title */
#section3 .title-top-line,
#section3 .title-bottom-line {
    display: flex;
    align-items: center;
    /* Add the transition for the slide effect */
    transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Set the initial "hidden" positions */
#section3 .title-top-line {
    transform: translateX(-101%); /* Start off-screen to the left */
}
#section3 .title-bottom-line {
    transform: translateX(101%);  /* Start off-screen to the right */
}

/* When the section is .active, slide both lines into view */
#section3.active .title-top-line,
#section3.active .title-bottom-line {
    transform: translateX(0);
}


/* --- Other Styles (no changes needed below) --- */

#section3 .title-line {
    display: block;
}

#section3 .section-paragraph {
    font-family: "Josefin Slab", serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #354747;
    margin-top: 25px;
    text-align: left;
    max-width: 60vw;
    margin-right: 0;
}

#section3 .inline-gif {
    width: 100%;
    height: auto; 
}
#section3 .lightbulb-gif {
    margin-left: 0.25em; 
}
#section3 .clock-gif {
    margin-right: 0.25em;
}

#section3 .section3-bottom-gif {
    width: 100%;
    height: auto;
    border: 1px solid #859091;
    border-radius: 10px;
}


@media screen and (max-width: 1070px){
    /* #section3 .section3-bottom-gif{
        top: 30vh;
        right: 0;
        max-width: 60vw;
    } */
}


/* Responsive adjustments for smaller screens */
@media screen and (max-width: 780px) {
    #section3 .section-title {
        font-size: 8vw;
    }
    #section3 .section-paragraph {
        max-width: 80vw;
        font-size: 0.9rem;
    }
    /* #section3 .section3-bottom-gif{
        transform: translateX(0);
        max-width: 80vw;
        right: 15vw;
    } */
}

@media screen and (max-width: 480px){
    /* #section3 .section3-bottom-gif{
        top: 47vh;
        left: -3vw;
        max-width: 90vw;
    } */
}