.workex{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: 0;
}

.workex h2{
  /* margin: 5%; */
  /* margin-bottom: 3%; */
  font-family: 'Ubuntu-Medium';
  font-size: clamp(1.5rem, 3vw, 1.7rem);
}

.timeline{
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin: 0 2.5rem; */
}

.workex p {
  font-size: 1rem;
}

.timeline__event{
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90%;
}

.timeline__event__content {
  padding: 1.5rem;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
  background: #fff;
  /* border-radius: 0 6px 6px 0; */
}

.timeline__event__date {
  color: #f6a4ec;
  font-size: 1.2rem;
  font-weight: 600;
  background: #9251ac;
  display: flex;
  align-items: center;
  justify-content: center;
  /* white-space: nowrap; */
  padding: 1.5rem;
  width: 100%;
  /*border-radius: 6px 0 0 6px;*/
}
.timeline__event__icon {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  display: none;
  color: #9251ac;
  background: #f6a4ec;
  height: 5rem;
  width: 100%;
  border-radius: 6px 6px 0px 0px;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
}

.timeline__event__title{
  font-weight: 100;
  margin-bottom: 1rem;
  font-family: 'Ubuntu-Medium';
  font-size: 1.25rem;
}
.timeline__event__description{
  text-align: justify;
}

.timeline__event--type1 .timeline__event__title, .timeline__event--type4 .timeline__event__title{
  color: #9251ac;
}

.timeline__event--type2 .timeline__event__icon, .timeline__event--type5 .timeline__event__icon{
  background: #87bbfe;
  color: #555ac0;
}
.timeline__event--type2 .timeline__event__date, .timeline__event--type5 .timeline__event__date {
  color: #87bbfe;
  background: #555ac0;
}
.timeline__event--type2 .timeline__event__title,.timeline__event--type5 .timeline__event__title {
  color: #555ac0;
}

.timeline__event--type3 .timeline__event__icon, .timeline__event--type6 .timeline__event__icon {
  background: #aff1b6;
  color: #24b47e;
}
.timeline__event--type3 .timeline__event__date, .timeline__event--type6 .timeline__event__date {
  color: #aff1b6;
  background-color: #24b47e;
}
.timeline__event--type3 .timeline__event__title, .timeline__event--type6 .timeline__event__title {
  color: #24b47e;
}

@media (min-width: 850px){
  .timeline{
    /* width: min(90%, 75rem); */
    margin: 0;
  }

  .timeline__event{
    flex-direction: row;
  }

  .timeline__event__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    margin: 20px;
  }

  .timeline__event__date{
    width: 15%;
    height: 100%;
  }

  .timeline__event__content{
    width: 75%;
  }

  .timeline__event--type1,.timeline__event--type3,.timeline__event--type5{
    flex-direction: row-reverse;
  }

  .timeline__event--type1 .timeline__event__icon:before, .timeline__event--type3 .timeline__event__icon:before, .timeline__event--type5 .timeline__event__icon:before{
    content: '';
    width: 100%;
    height: 2px;
    background: #f6a4ec;
    position: relative;
    top: 0%;
    z-index: -1;
    right: 50%;
  }
  .timeline__event--type1 .timeline__event__icon:after, .timeline__event--type3 .timeline__event__icon:after, .timeline__event--type5 .timeline__event__icon:after{
    content: '';
    width: 2px;
    height: 250%;
    background: #f6a4ec;
    position: relative;
    top: 150%;
    right: 50%;
    z-index: -1;
  }

  .timeline__event--type2 .timeline__event__icon:before, .timeline__event--type4 .timeline__event__icon:before, .timeline__event--type6 .timeline__event__icon:before{
    content: '';
    width: 100%;
    height: 2px;
    background: #f6a4ec;
    position: relative;
    top: 0%;
    z-index: -1;
    left: 50%;
  }
  .timeline__event--type2 .timeline__event__icon:after, .timeline__event--type4 .timeline__event__icon:after{
    content: '';
    width: 2px;
    height: 250%;
    background: #f6a4ec;
    position: relative;
    top: 150%;
    right: 50%;
    z-index: -1;
  }

  .timeline__event--type2 .timeline__event__icon:before,.timeline__event--type2 .timeline__event__icon:after,.timeline__event--type5 .timeline__event__icon:before,.timeline__event--type5 .timeline__event__icon:after{
    background: #87bbfe;
  }
  .timeline__event--type3 .timeline__event__icon:before,.timeline__event--type3 .timeline__event__icon:after, .timeline__event--type6 .timeline__event__icon:before,.timeline__event--type6 .timeline__event__icon:after{
    background: #aff1b6;
  }

  .timeline__event--type1 .timeline__event__icon:before{
    margin-right: 100%;
    animation: 2s ease-in 0s 1 normal forwards running before1;
  }
  .timeline__event--type1 .timeline__event__icon:after{
    animation: 2s ease-in 2s 1 normal forwards running after1;
    height:0%;
  }
  
  @keyframes before1 {
    0%{
      width: 0%;
      margin-right: 100%;
    }
    100%{
      width: 100%;
      margin-right: 0%;
    }
  }
  @keyframes after1 {
    0%{
      height: 0%;
      margin-bottom: 250%;
    }
    100%{
      height: 250%;
      margin-bottom: 0%;
    }
  }

  .timeline__event--type2 .timeline__event__icon:before{
    margin-right: -200%;
    animation: 2s ease-in 4s 1 normal forwards running before2;
  }
  .timeline__event--type2 .timeline__event__icon:after{
    animation: 2s ease-in 6s 1 normal forwards running after2;
    height:0%;
  }
  
  @keyframes before2 {
    0%{
      width: 0%;
      margin-right: -100%;
    }
    100%{
      width: 100%;
      margin-right: 0%;
    }
  }
  @keyframes after2 {
    0%{
      height: 0%;
      margin-bottom: 250%;
    }
    100%{
      height: 250%;
      margin-bottom: 0%;
    }
  }

  .timeline__event--type3 .timeline__event__icon:before{
    margin-right: 100%;
    animation: 2s ease-in 8s 1 normal forwards running before3;
  }
  .timeline__event--type3 .timeline__event__icon:after{
    animation: 2s ease-in 10s 1 normal forwards running after3;
    height:0%;
  }
  
  @keyframes before3 {
    0%{
      width: 0%;
      margin-right: 100%;
    }
    100%{
      width: 100%;
      margin-right: 0%;
    }
  }
  @keyframes after3 {
    0%{
      height: 0%;
      margin-bottom: 250%;
    }
    100%{
      height: 250%;
      margin-bottom: 0%;
    }
  }

  .timeline__event--type4 .timeline__event__icon:before{
    margin-right: -200%;
    animation: 2s ease-in 12s 1 normal forwards running before4;
  }
  .timeline__event--type4 .timeline__event__icon:after{
    animation: 2s ease-in 14s 1 normal forwards running after4;
    height:0%;
  }
  
  @keyframes before4 {
    0%{
      width: 0%;
      margin-right: -100%;
    }
    100%{
      width: 100%;
      margin-right: 0%;
    }
  }
  @keyframes after4 {
    0%{
      height: 0%;
      margin-bottom: 250%;
    }
    100%{
      height: 250%;
      margin-bottom: 0%;
    }
  }

  .timeline__event--type5 .timeline__event__icon:before{
    margin-right: 100%;
    animation: 2s ease-in 16s 1 normal forwards running before5;
  }
  .timeline__event--type5 .timeline__event__icon:after{
    animation: 2s ease-in 18s 1 normal forwards running after5;
    height:0%;
  }
  
  @keyframes before5 {
    0%{
      width: 0%;
      margin-right: 100%;
    }
    100%{
      width: 100%;
      margin-right: 0%;
    }
  }
  @keyframes after5 {
    0%{
      height: 0%;
      margin-bottom: 250%;
    }
    100%{
      height: 250%;
      margin-bottom: 0%;
    }
  }

  .timeline__event--type6 .timeline__event__icon:before{
    margin-right: -200%;
    animation: 2s ease-in 20s 1 normal forwards running before6;
  }
  
  @keyframes before6 {
    0%{
      width: 0%;
      margin-right: -100%;
    }
    100%{
      width: 100%;
      margin-right: 0%;
    }
  }
}

@media (min-width:950px){
  .timeline{
    width: min(90%, 75rem);
  }
}