.history-container {

      display: flex;



      gap: 60px;

       width: 100%;

    padding: 0;

    }



    .timeline {

      position: relative;

      display: flex;

      flex-direction: column;

      align-items: flex-start;

      gap: 30px;

      padding-top: 0px;

      flex-basis:102px;

    

        height: 100%; 

    position: absolute;

    left: 5vw;top:0;

    justify-content: center;

    }



    .timeline-line {

      position: absolute;

      right: 11px;

      top: 0;

      width: 1px;

      height: 100%; 

      background: rgba(194, 149, 55, 1); 

    }

    

    

    #history{position:relative;}



    .timeline-fill {

      display:none;

         }



    .year {

      position: relative;

      font-size: 24px;

      color: #b2d9df;

      padding-right: 60px;

      cursor: pointer;    width: 90px;cursor:pointer;

      

    }

.year span{opacity:0.3;}

.year.active span{opacity:1;}





    .year-dot {

      position: absolute;

      top: 50%;

      right: 5px;

      width: 14px;

      height: 14px;

      border-radius: 50%;

     background:#025b6a;

      z-index: 2;

      transform: translateY(-50%);border: 1px solid rgba(194, 149, 55, 1);cursor:pointer;

    }

    

     .year.active .year-dot{

        right: 1px;

    width: 22px;

    height: 22px;}



    .year.active {

      color: #ffaa2b;

      font-weight: bold;

      opacity:1;

    }



    .year.active .year-dot {

      background: #ffaa2b;

    }



    .content-area {

      flex: 1;

      display: flex;

      align-items: flex-start;

      gap: 40px;

          display: inline-flex !important;

    left: 190px;

    position: relative;    max-width: calc(100% - 190px);

      

    }


        .slide >.text{
          flex:0 0 50%;
        }
        .slide >.image{
          flex:0 0 50%;
        }
    .slide {

      display: none;

      opacity: 0;

      transition: opacity 0.6s ease;    align-items: end;

    padding-top: 4rem;    width: 100%;    gap: 50px;
    align-items: center;

    }



    .slide.active {

      display: flex;

      opacity: 1;

    }



    .text {

      max-width: 42vw;

          display: flex;

    flex-direction: column;

    gap: 15px;

    }



.text h1{    color: rgba(73, 255, 255, 1);

    font-size: 7rem;

    opacity: 0.14;

    line-height: 1;}



    .text h2 {

    color: var(--golden);

    margin-bottom: 0;    font-size: 2rem;

    font-weight: 900;

    }

    

    

    .text p{    color: var(--white);

    font-size: 1.375rem;}



    .image img {

      width: 100%;

      border-radius: 8px;

    }



    .controls {

      padding-top: 15px;

      text-align: left;

    justify-content: flex-start;

    position: relative;

    left: 190px;

    display: inline-flex !important;

    width: 100%;

    flex: 1;

    align-items: flex-start;

    gap: 0.5rem;

    max-width: calc(100% - 190px);

    }



    .controls button {

    background:transparent;outline:none;border:none;cursor:pointer;

    }



    .controls button:hover {

     

    }

    

    .slide .image{width:100%;}

    

    

   @media only screen and (max-width: 1700px) and (min-width: 1100px)  {

    

    

    

    

    

     .text h1{font-size:5rem;}

    .text h2{font-size:1.75rem;}

    

    

    

    

    

    

   } 

    
@media screen and (min-width:1100px) {

       .text h1{font-size:5vw;}
}