/*Vertical scrollable cards*/

.how-it-works-wrapper {
    padding: 5.6rem 0;
}

.vertical-scrollable-cards {
    max-width: 1600px;
    width: 90%;
    margin: auto;
    display: flex;
}

.vertical-scrollable-cards .col-1 {
    flex-basis: 55%;
    align-self: flex-start;
    position: sticky;
    top: 25%;
}

.vertical-scrollable-cards .col-1 .fixed-copy {
    max-width: 50.3rem;
    margin-left: 5rem;
}

.vertical-scrollable-cards .col-1 .fixed-copy h1 {
    font-size: 4.8rem;
    font-weight: 500;
    margin-bottom: 3rem;
    line-height: 140%;
}

.vertical-scrollable-cards .col-1 .fixed-copy p {
    font-size: 1.8rem;
    line-height: 153%;
    font-family: "Lato", sans-serif;
    margin-bottom: 6rem;
    font-weight: 400;
}

.vertical-scrollable-cards .col-2 {
    flex-basis: calc(40% - 5rem);
}

.vertical-scrollable-cards .step-item-card {
    padding: 6rem;
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(0.98);
    opacity: 0.8;
    transition: all 0.6s ease;
    border-radius: 4rem;
    margin-bottom: 4rem;
}

.vertical-scrollable-cards .step-item-card h3 {
    font-size: 3.2rem;
    font-weight: 500;
    margin-bottom: 2rem;
    line-height: 130%;
    overflow-wrap: break-word;
}

.vertical-scrollable-cards .step-item-card p {
    font-family: "lato", sans-serif;
    font-size: 1.6rem;
    line-height: 1.53;
    font-weight: 400;
}

.vertical-scrollable-cards .step-item-card.active {
    background-color: rgb(255, 255, 255);
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

.vertical-scrollable-cards .col-3 {
    flex-basis: 10rem;
    position: sticky;
    top: 20%;
    align-self: flex-start;
    display: flex;
    justify-content: flex-end;
}

.vertical-scrollable-cards .col-3 .anchor-holder {
    width: 1rem;
}

.vertical-scrollable-cards .col-3 .anchor-holder .anchor-item {
    height: calc(20vh - 8rem);
    margin-bottom: 1rem;
    background-color: #b3b3b3;
}

.vertical-scrollable-cards .col-3 .anchor-holder .anchor-item:hover {
    opacity: 0.4;
    background-color: #00bd1e;
    cursor: pointer;
}

.vertical-scrollable-cards .col-3 .anchor-holder .anchor-item.active {
    background-color: #00bd1e;
}

@media only screen and (min-width: 320px) and (max-width: 801px) {
    .vertical-scrollable-cards {
        flex-direction: column;
    }

    .vertical-scrollable-cards .col-1 {
        position: static;
    }

    .vertical-scrollable-cards .col-1 .fixed-copy {
        margin-left: 0;
        margin-bottom: 3rem;
    }

    .vertical-scrollable-cards .col-1 .fixed-copy h1 {
        font-size: 3.2rem;
    }

    .vertical-scrollable-cards .col-3 {
        position: static;
        display: none;
    }
}

/* End of Vertical Scrollable cards */