/* ======== css for web main page ======== */

/* SPACE SIZE (px)
8px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px */

/* FONT SIZE (px)
 12px 14px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px  */

/* FONT WEIGHT 
400 500 600 700 */

/* LINE HEIGHT 
1 1.2 1.5 2   */

/* COLORS 
main color   #6461f6
shade main color  #504ec5
second color #fcf800
Gary color: #141331  #5c5c5c
*/

.history-section {
  padding: 3.2rem 0;
}

.history-container {
  /* background-color: aquamarine; */

  padding: 0 3.2rem;

  display: flex;
  flex-direction: column;
  gap: 6.4rem;
}

.history-year {
  font-size: 4rem;
  font-weight: 600;
  color: #828282;

  margin-bottom: 2.4rem;
}

.history-content-lists {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;

  padding: 1.6rem 0 1.6rem 2rem;

  position: relative;
}

.history-content-lists::before {
  content: "";
  width: 2px;
  height: 100%;
  display: block;
  background-color: #dee2e6;

  position: absolute;
  left: 2.7rem;
  top: 0;
}

.history-content-list {
  list-style: none;

  display: flex;
  align-items: center;
  gap: 2rem;
}

.history-content-list::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;

  flex-shrink: 0;
  border-radius: 50%;
  background-color: #dee2e6;
}

.history-content-list .content-title:link,
.history-content-list .content-title:visited {
  font-size: 1.8rem;
  font-weight: 400;

  margin-bottom: 0;
}