.stages_of_travel {
    display: flex;
    width: 100%;
    padding: var(--module-vertical-padding-l, 48px) var(--grid-margin, 20px) 48px var(--grid-margin, 20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--module-between-elements, 24px);
    background: var(--background-default, #004652);
}

.stages_of_travel_content {
    display: flex;
    max-width: var(--width-max-width, 1248px);
    flex-direction: column;
    align-items: center;
    gap: var(--sds-size-space-800);
    align-self: stretch;
    width: 100%;
}

.stages_of_travel_tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: var(--sds-size-space-100);
    gap: var(--sds-size-space-0);
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 70, 82, 0.08), 0 4px 8px 0 rgba(0, 70, 82, 0.05);
    width: 100%;
    max-width: 435px;
}

    .stages_of_travel_tabs .stages_of_travel_tab {
        flex: 1;
        line-height: 20px;
        letter-spacing: 0.14px;
        border-radius: 99px;
        border: none;
        display: flex;
        height: 40px;
        padding: var(--sds-size-space-300) var(--sds-size-space-400);
        justify-content: center;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        background-color: #fff;
    }

        .stages_of_travel_tabs .stages_of_travel_tab span {
            color: var(--text-brand, #004652);
            font-family: var(--family-sans, averta);
            font-size: var(--typography-label-s, 14px);
            font-style: normal;
            font-weight: var(--weight-bold, 700);
            line-height: 20px;
            letter-spacing: 0.14px;
        }

        .stages_of_travel_tabs .stages_of_travel_tab:hover {
            background: var(--background-neutral-hover, #e42900);
            color: var(--text-positive, #fff);
        }

        .stages_of_travel_tabs .stages_of_travel_tab.traininfo-tab-active {
            background: var(--background-action, #e42900);
            color: var(--text-inverse, #fff);
        }

            .stages_of_travel_tabs .stages_of_travel_tab.traininfo-tab-active span {
                color: var(--text-inverse, #fff);
            }

.stages_of_travel_cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sds-size-space-400);
    align-self: stretch;
}

.stages_of_travel_cards {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--grid-gutter, 16px);
    align-self: stretch;
}

.stages_of_travel_card {
    display: flex;
    padding: var(--cards-and-containers-inset-m, 20px) var(--cards-and-containers-inset-l, 24px);
    flex-direction: column;
    align-items: center;
    gap: var(--cards-and-containers-between-elements, 16px);
    align-self: stretch;
    border-radius: var(--radius-l, 12px);
    background: var(--background-default, #fff);
    box-shadow: 0 2px 4px 0 rgba(0, 70, 82, 0.08), 0 4px 8px 0 rgba(0, 70, 82, 0.05);
    flex: 1 0 0;
    width: 100%;
}
.stages_of_travel_card:hover {
    background: #E2F5E9 !important;
    transition-delay: .05s;
}
    .stages_of_travel_card_content {
        grid-gap: 16px;
        gap: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }

.stages_of_travel_card_icon {
    height: 80px;
    width: 80px;
    aspect-ratio: 1 / 1;
}

.stages_of_travel_card_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cards-and-containers-between-text, 8px);
    align-self: stretch;
}

.stages_of_travel_card_title {
    color: var(--text-heading, #004652) !important;
    text-align: center;
    font-family: var(--family-sans, averta) !important;
    font-size: var(--typography-heading-averna-s, 18px) !important;
    font-style: normal;
    font-weight: var(--weight-semibold, 600) !important;
    line-height: 130%;
    letter-spacing: -0.18px;
    margin: 0px;
}

.stages_of_travel_card_desc {
    color: var(--text-body, #3b3935) !important;
    font-family: var(--family-sans, averta);
    font-size: var(--typography-body-s, 13px) !important;
    font-style: normal !important;
    font-weight: var(--weight-regular, 400);
    line-height: 145% !important;
    margin: 0;
}

.imagelinkurl:hover, .imagelinkurl:visited {
    cursor: pointer;
}

.stages_of_travel .right {
    justify-content: flex-end !important;
    align-items: flex-end;
    flex-direction: row;
}

@media only screen and (max-width: 420px) {
    .stages_of_travel_tabs .stages_of_travel_tab {
        padding: var(--sds-size-space-300) var(--sds-size-space-300);
    }
}

@media only screen and (min-width: 1025px) {
    .stages_of_travel {
        width: 100%;
        padding: var(--module-vertical-padding-l, 96px) var(--grid-margin, 24px) 96px var(--grid-margin, 24px);
        gap: var(--module-between-elements, 32px);
    }

    .stages_of_travel_content {
        max-width: var(--width-max-width, 1248px);
        gap: var(--sds-size-space-800);
        margin: 0 auto;
    }

    .stages_of_travel_tabs {
        padding: var(--sds-size-space-100);
        gap: var(--sds-size-space-200);
    }

        .stages_of_travel_tabs .stages_of_travel_tab {
            padding: var(--sds-size-space-300) var(--sds-size-space-600);
        }

    .stages_of_travel_cards {
        display: flex;
        align-items: flex-start;
        gap: var(--grid-gutter, 24px);
        align-self: stretch;
        flex-direction: row;
        flex: 1;
        justify-content: center;
    }

    .stages_of_travel_card {
        padding: var(--cards-and-containers-inset-m, 24px) var(--cards-and-containers-inset-l, 32px);
        gap: var(--cards-and-containers-between-elements, 24px);
    }

    .stages_of_travel_card_title {
        font-size: var(--typography-heading-averna-s, 20px) !important;
        letter-spacing: -0.2px;
    }

    .stages_of_travel_card_desc {
        color: var(--text-body, #3B3935);
        text-align: center;
        font-family: var(--family-sans, averta);
        font-size: var(--typography-body-m, 16px) !important;
        font-style: normal;
        font-weight: var(--weight-regular, 400) !important;
        line-height: 145% !important;
    }
}

.stages_of_travel_tab:focus-visible {
    border: 4px solid #FF4713;
    outline-offset: 0px;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 2px;
}