.experiences {
    width: 100%;
    max-width: 1920px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    gap: 56px;
    /* margin-bottom: 56px; */
}

.experiencesContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}



.experiencesContent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* opacity: 0; */
    transition: opacity 3s ease-in-out;
    position: relative;
    /* margin-top: 56px; */


}

.curriculum {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 112px; */


}

.station {
    /* border: solid; */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

}

.timeStamp {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;

}

.timeStamp p {
    font-size: 48px;
}

.stationLine {
    min-width: 60px;
    height: 4px;
    background-color: var(--secondary);
    border-radius: 10px;
}

.descriptionLine {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    background-color: var(--highlight);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    border-radius: 10px;
}

.changeLine {
    transform: scaleX(1);


}

.transOriginLeft {
    transform-origin: left !important;
}

.stationReverse {
    flex-direction: row-reverse;
}


.stampReverse {
    flex-direction: row-reverse;
}

.transOrigin {
    transform-origin: right !important;
}

.stationDot {
    min-width: 50px;
    height: 50px;
    background-color: var(--secondary);
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out, transform 0.5s ease-in-out;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;

}

.stationDot img {
    width: 30px;
    height: 30px;


}


.changeColor {
    background-color: var(--highlight);
}

.descriptionContainer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;


}

.stationImage {
    min-width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary);
    border-radius: 10px;
    transition: background-color 1.5s ease-in-out;

}

.stationImage img {
    width: 40px;
}

.imageBGColor {
    background-color: var(--highlight) !important;
}



.stationDescription {
    width: 100%;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    /* background-color: var(--text-bg);  */
    box-sizing: border-box;
    padding: 32px 32px 32px 32px;
    border-radius: 10px;



}

.stationDescription p {
    color: var(--highlight);
    font-size: 20px;
    font-weight: 500;
    padding: 8px;
    border-radius: 5px;
}

.stationDescription h4 {
    margin: 0;
    font-size: 20px;

}

.experiencesDivider {
    width: 100%;
    height: 4px;
    background-color: var(--secondary);
}

.stationDescription span {
    width: 100%;
    /* box-sizing: border-box;
    padding: 16px; */
    border-radius: 10px;
    /* background-color: var(--text-bg); */
}

.scrollbar {
    position: absolute;
    background-color: var(--secondary);
    width: 4px;
}

.scrollbarInner {
    position: absolute;
    top: 0;
    width: 100%;

    background-color: var(--highlight);
    border-radius: 100px;
}

.freelancer {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.freelancerTitle {
    width: 100%;

    text-align: center;
}

.freelancerTitle h2 {
    font-size: 56px;
}

.lineContainer {
    height: 150px;
    position: relative;
}


.freelancerContent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 56px;
}

.freelancerCard {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    border: solid 1px var(--bg-color);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 32px 32px 64px 32px;
    transition: border 1s ease-in-out;
}

.freelancerCardBorder {

    border: solid 2px var(--secondary);
}

.freelanceCardHead {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.freelanceCardHeadTitle {
    font-size: 18px;
}

.timeContainer {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.freelanceCardDivider {
    width: 80%;
    height: 1px;
    background-color: var(--highlight);
    border-radius: 10px;
}

.freelanceTasks {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.taskRow {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;

}

.bulletPoint {
    min-width: 16px;
    height: 4px;
    background-color: var(--secondary);
    border-radius: 10px;
}

@media(max-width: 1700px) {
    .stationDescription {
        height: 320px;
    }
}

@media(max-width: 1560px) {
    .stationDescription {
        height: 380px;
    }
}


@media(max-width: 1400px) {
    .curriculum {
        gap: 0px;
    }

    .stationImage {
        min-width: 70px;
        height: 70px;
    }

    .stationImage img {
        width: 30px;
        height: 30px;
    }

    .stationLine {
        min-width: 50px;
    }

    .station {
        gap: 12px;
    }

    .descriptionContainer {
        gap: 12px;
    }
}

@media(max-width: 1330px) {
    .stationDescription {
        height: 460px;
    }
}

@media(max-width: 1200px) {
    .experiencesContent {
        opacity: 1;
    }

    .stationDescription {
        height: 520px;
    }
}

@media(max-width: 1100px) {
    .stationImage {
        min-width: 50px;
        height: 50px;
    }

    .stationImage img {
        width: 20px;
        height: 20px;
    }

    .stationLine {
        min-width: 30px;
    }

    .station {
        gap: 6px;
    }

    .descriptionContainer {
        gap: 6px;
    }

    .freelancerTitle h2 {
        font-size: 48px;
    }
}

@media(max-width: 1000px) {
    .experiencesContainer {
        gap: 56px;
    }

    .curriculum {
        gap: 32px;
    }

    .stationImage {
        display: none;
    }

    .stationImage img {
        width: 20px;
        height: 20px;
    }

    .stationLine {
        display: none;
    }

    .timeStamp {
        display: none;
    }

    .stationDescription {
        background-color: var(--text-bg);
    }

    .freelancerContent {
        flex-direction: column;
    }

    .stationDescription {
        height: fit-content;
    }
}

@media(min-width: 1000px) {
    .stationDot img {
        display: none;
    }

    .stationDescription p {
        display: none;
    }
}

@media(max-width:760px) {
    .station {
        gap: 16px;
    }

    .freelancerTitle h2 {
        font-size: 40px;
    }
}

@media(max-width:600px) {
    .freelancerTitle h2 {
        font-size: 32px;
    }
}

@media(max-width:550px) {
    .taskRow {
        gap: 12px;
    }

    .freelanceCardDivider {
        width: 100%;
    }

    .bulletPoint {
        min-width: 10px;
    }
}

/* @media(max-width:770px) {
    .stationDescription {
        height: 380px;
    }
} */

/* @media(max-width:600px) {
    .stationDescription {
        height: 460px;
    }
} */

@media(max-width:450px) {
    .station {
        align-items: flex-start;
        position: relative;
        width: calc(100% - 10px);
    }

    .stationDot {
        min-width: 40px;
        height: 40px;
        position: absolute;
        left: -20px;
        top: -20px;
    }

    .stationDescription h4 {
        font-size: 16px;
    }

    .stationDot img {
        width: 24px;
        height: 24px;
    }
}

/* @media(max-width:400px) {
    .stationDescription {
        height: 560px;
    }
} */