/* styling for roadmap */

/* container for all aspect points */
.roadmap-container {
    background-color: var(--color-secondary-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 0 50px;
}

/* aspect container for image and information */
.aspect-container {
    display: flex;
    width: 1000px;
    gap: 50px;
    margin-bottom: 100px;
}

/* image for aspect */
.aspect-image {
    width: 50%;
}

.aspect-image > img {
    width: 100%;
    border-radius: 25px;
    height: 356px;
}

/* information for aspect with title, text and button */
.aspect-information {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    text-align: left;
}

.aspect-information h3 {
    letter-spacing: var(--h4-header-spacing);
    line-height: 50px;
}

.aspect-information p {
    max-width: 400px;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    line-height: var(--catch-text-line-height);
    color: var(--color-catch-text);
    letter-spacing: -0.7px;
}


/* responsive size for medium and small screens */
@media screen and (max-width: 1100px) {
    /* arrangement of aspect image and information -> first image than info */
    .roadmap-container { 
        display: flex;
        flex-direction: column;
        padding: 100px 20px 50px;
     }
    .first { order: 2; }
    .second { order: 1; }

    .aspect-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 700px;
        gap: 30px;
    }
    
    .aspect-image {
        width: 100%;
    }
    
    .aspect-image > img {
        width: 100%;
        border-radius: 25px;
        height: 100%;
    }

    .aspect-information {
        width: 100%;
    }
}