@font-face {
  font-family: 'figtree'; /* Choose a name for the font */
  src:url('../font/Figtree-VariableFont_wght.ttf') format('truetype'); /* Optional backup */
  font-weight: normal; /* Specify font weight if applicable */
  font-style: normal;  /* Specify font style if applicable */
}

.banner_container{
    width: 100%;
}

.banner{
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.content_container{
    width: 80%;
}

.content_container p{
    font-family: 'figtree',sans-serif;
    margin: 1rem 0;
}


.timeline_item
{   
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    

}
.timeline_year{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 35px;
    border-radius: 15px;
    font-size: 28px;
    font-weight: bold;
    color: white;
    border: 3px solid #404040;
    box-shadow: 5px 5px rgba(84, 84, 84, 0.258);
}

.timeline_content_container{
	background-image: url(../image/timeline-background.png);
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center 32px;
}

.timeline_content{
    font-family: 'figtree',sans-serif;
    width: 300px;
    gap:10px;
}

.timeline_content_container{
	width:830px !important;
}




.timeline_item:nth-of-type(even) .timeline_content {
    order: -1; /* Flip order for alternating sides */
  }


  .timeline_item:nth-of-type(3n+1) .timeline_year {
    background-color: #BEB08B; /* First color */
  }
  
  .timeline_item:nth-of-type(3n+2) .timeline_year {
    background-color: #6C828A; /* Second color */
  }
  
  .timeline_item:nth-of-type(3n+3) .timeline_year {
    background-color: #837B62; /* Third color */
  }