/* experience*/

/* #experience {
    background-color: red;
} */

.box-exp {
    /* width: 65%; */
    /* min-width: 600px; */
    display: flex;
    flex-direction: column;
    /* gap: 30px; */
    width: 1100px;

    opacity: 0;
}
.box-exp.load {
    animation: slideRight 1s ease-out forwards;  
    animation-delay: 0s;
}

    .detail-box-exp {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0px 30px;
    }

        .time-detail-box-exp {
            position: relative;
            width: 100%;
            height: 50px;
            display: flex;

            font-size: clamp(14px, 3.4vw, 24px);
        }
            .time-detail-box-exp h4 {
                padding: 0px 12px;
            }

            .spe-box-exp {
                width: 50%;
                display: flex;
                align-items: center; 
            }
             
            .spe-box-exp:first-child{
                justify-content: right;
            }

                .spe-box-exp h1 {
                    margin: 0px;
                    white-space: nowrap;
                    padding: 0px 12px;
                    text-transform: capitalize;
                }
                    .from-time-detail-box-exp {
                        padding-right: 8px !important;
                    }

                    .to-time-detail-box-exp {
                        padding-left: 8px !important;
                    }

                .spe-exp {
                    height: 100%;
                    position: relative;
                    align-content: center;
                    flex-shrink: 0;
                }
                    .spe-exp::after {
                        content: "";
                        height: 2px;
                        width: 100%;
                        position: absolute;
                        /* background-color: #202020; */
                    }
                        .detail-box-exp.light .spe-exp::after {
                            background-color: var(--line-exp-color);
                        }
                        .detail-box-exp.dark .spe-exp::after {
                            background-color: var(--line-exp-color-dark);
                        }

                    .detail-box-exp:last-child {
                        padding-bottom: 22px;
                        /* border-bottom: 2px #202020 solid; */
                        border-bottom: 2px var(--line-exp-color) solid;
                        transition: border-color 0.5s;
                    }
                        .detail-box-exp.light:last-child {
                            border-color: var(--line-exp-color);
                        }
                        .detail-box-exp.dark:last-child {
                            border-color: var(--line-exp-color-dark);
                        }


                .spe1-exp {
                    flex-grow: 1;
                }

                .spe2-exp {
                    width: 7px; 
                }

        .content-box-exp {
            display: flex;
            position: relative;
            width: 100%;
            min-height: 164px;

            font-size: clamp(12px, 2.3vw, var(--main-font-size));
        }      

            .block-content-box-exp{
                width: 50%;
                display: flex;
                flex-direction: column;
            }
            
                .block-content-box-exp .description {
                    margin-bottom: 0px;
                    margin: 20px 0px;
                }

                .name-company-box-exp {
                    font-weight: 500;
                    display: flex;
                    flex-direction: column;
                    /* gap: 2px; */
                }

                .location-company-box-exp {
                    flex-grow: 2;
                    align-content: end;
                }