.first-slide {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: peachpuff;
}   

.second-slide {
    display: flex;
}

@media (max-width: 768px) {
    .second-slide {
        flex-direction: column;
        height: auto;
        min-height: 200vh;
    }
    .half-column {
        height: 100vh;
    }
}

.half-column-one {
    flex: 1;
    height: 100vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.half-column-two {
    flex: 1;
    height: 100vh;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.third-slide {
    display: flex;
}

@media (max-width: 768px) {
    .third-slide {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    .one-third-column {
        height: 100vh;
    }
    .two-thirds-column {
        height: auto;
        min-height: 100vh;
    }
}

.one-third-column {
    flex: 4;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: darkturquoise;
}

.one-third-column p {
    margin: 1em 0; /* Adds vertical spacing between paragraphs */
    line-height: 1.6; /* Makes text more readable */
    width: 100%; /* Ensures paragraphs take full width of column */
}

.two-thirds-column {
    flex: 8;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightcyan;
    color: white;
}

.big-circle {
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50px;
}

.fourth-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: peachpuff;
}