/* achievements */

#achievements .achievements-images-wrapper {
    width: 100%;
    background-color: var(--clr);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.25));
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.33);
    position: relative;
}

#achievements .achievements-images-wrapper::before {
    content: "";
    position: absolute;
    right: -1%;
    bottom: -15%;
    width: 40%;
    aspect-ratio: 1/1;
    background-image: url(/assets/images/about-us/certificate.jpg);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 1rem 1rem 0 0;
    transform: rotate(-10deg);
}

#achievements .achievements-images-wrapper .achievement-content p {
    width: min-content;
    color: var(--clr-text-light);
}

/* journey */

#journey-section {
    background-color: var(--bg-body);
    /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/images/plot-call.jpg); */
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

#journey-section .journey-wrapper .journey-box {
    /* border: 1px solid var(--clr-text-light); */
    position: relative;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0) 70%);
    /* background-color: rgba(255, 255, 255, 0.21); */
    border-radius: 5px;
    border: 1px solid var(--clr-primary);
}





@media (width > 1000px) {

    #journey-section .journey-wrapper .journey-box:before {
        position: absolute;
        content: "";
        width: 30px;
        height: 30px;
        background-color: var(--clr-primary);
        left: 0;
        top: 50%;
        transform: translateY(-50%) translateX(-215%);
        border-radius: 50%;
        border: 1px dashed var(---clr-primary);
    }

    #journey-section .journey-wrapper .journey-box:after {
        position: absolute;
        content: "";
        width: 50px;
        height: 3px;
        background-color: var(--clr-primary);
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;

    }

    #journey-section .journey-wrapper {
        height: 100%;
        border-left: 2px dashed var(--clr-primary);
    }
}

@media (width < 1000px) {
    .journey-sec {
        background-color: white;
        z-index: 10;
    }

    .journey-wrapper {
        padding-inline: 1rem !important;
    }
}