/* General styling for the section */
/* Mobile landscape media query */
.timeline .container {
  max-width: 1300px; }

.timeline .intro {
  text-align: center;
  margin-bottom: 40px; }
  .timeline .intro h2 {
    color: #001480; }

.timeline .side-nav .content {
  min-width: 120px; }

.timeline .slider-prev-arrow:disabled,
.timeline .slider-next-arrow:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important; }

.timeline .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%; }
  .timeline .wrapper .side-nav-container {
    width: 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative; }
    @media (min-width: 768px) and (max-width: 1199px) {
      .timeline .wrapper .side-nav-container {
        width: 25%; } }
    @media (min-width: 768px) {
      .timeline .wrapper .side-nav-container {
        min-width: 200px;
        max-width: 200px; }
        .timeline .wrapper .side-nav-container .content:nth-child(odd) {
          text-align: left; }
        .timeline .wrapper .side-nav-container .content:nth-child(even) {
          text-align: right; } }
    .timeline .wrapper .side-nav-container .slider-prev-arrow {
      position: relative;
      outline: navajowhite;
      border: navajowhite;
      background: unset;
      cursor: pointer;
      opacity: 0.6; }
      @media (min-width: 768px) {
        .timeline .wrapper .side-nav-container .slider-prev-arrow {
          -webkit-transform: rotate(88deg);
                  transform: rotate(88deg);
          left: unset;
          top: unset;
          bottom: 0; } }
      @media (max-width: 767px) {
        .timeline .wrapper .side-nav-container .slider-prev-arrow {
          left: -10px;
          top: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%); } }
    .timeline .wrapper .side-nav-container .slider-prev-arrow:hover {
      opacity: 1; }
    .timeline .wrapper .side-nav-container .slider-next-arrow {
      position: relative;
      outline: navajowhite;
      border: navajowhite;
      background: unset;
      cursor: pointer;
      opacity: 0.6; }
      @media (min-width: 768px) {
        .timeline .wrapper .side-nav-container .slider-next-arrow {
          -webkit-transform: rotate(88deg);
                  transform: rotate(88deg);
          left: unset;
          top: unset;
          bottom: 0; } }
      @media (max-width: 767px) {
        .timeline .wrapper .side-nav-container .slider-next-arrow {
          right: -10px;
          top: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%); } }
    .timeline .wrapper .side-nav-container .slider-next-arrow:hover {
      opacity: 1; }
    .timeline .wrapper .side-nav-container .side-nav {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 40px;
      margin: 20px 0;
      /* Add a connecting line */ }
      .timeline .wrapper .side-nav-container .side-nav::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        background-color: #0084f2;
        z-index: 0;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); }
      .timeline .wrapper .side-nav-container .side-nav .content {
        position: relative;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 15px 20px 15px;
        cursor: pointer;
        opacity: 0.5;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease; }
        .timeline .wrapper .side-nav-container .side-nav .content h5 {
          -ms-flex-negative: 0;
              flex-shrink: 0;
          font-size: 20px;
          font-weight: 500;
          color: #001480; }
        .timeline .wrapper .side-nav-container .side-nav .content::before {
          content: "";
          position: absolute;
          border: 2px solid #0084f2;
          background-color: #ffffff;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 12px;
          height: 12px;
          -ms-flex-negative: 0;
              flex-shrink: 0;
          z-index: 1;
          -webkit-transition: background-color 0.3s ease;
          transition: background-color 0.3s ease; }
        .timeline .wrapper .side-nav-container .side-nav .content.slick-current {
          opacity: 1; }
        .timeline .wrapper .side-nav-container .side-nav .content.slick-current::before {
          background-color: #0084f2; }
        .timeline .wrapper .side-nav-container .side-nav .content .hidden-content {
          opacity: 0.6;
          position: relative;
          -webkit-box-flex: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1;
          text-align: center;
          font-size: 14px;
          color: #001480;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out; }
        .timeline .wrapper .side-nav-container .side-nav .content:hover .hidden-content,
        .timeline .wrapper .side-nav-container .side-nav .content.slick-current .hidden-content {
          opacity: 1; }
  .timeline .wrapper .slider-container {
    width: 75%;
    max-width: 800px;
    position: relative; }
    @media (min-width: 768px) {
      .timeline .wrapper .slider-container .content-wrapper {
        min-height: 360px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; } }
    @media (max-width: 767px) {
      .timeline .wrapper .slider-container .content-wrapper {
        min-height: 255px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; } }
    .timeline .wrapper .slider-container .image-wrapper {
      width: 100%;
      max-width: 280px;
      height: 280px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: auto;
      padding: 0 20px; }
      @media (max-width: 767px) {
        .timeline .wrapper .slider-container .image-wrapper {
          max-width: 185px;
          height: 130px; } }
      .timeline .wrapper .slider-container .image-wrapper img {
        border-radius: 8px;
        overflow: hidden;
        -o-object-fit: contain;
           object-fit: contain;
        height: auto;
        max-height: 100%;
        margin: auto; }
    .timeline .wrapper .slider-container .text-wrap {
      text-align: center;
      width: 100%;
      max-width: 700px;
      margin: 20px auto 20px;
      padding: 0 20px; }
    .timeline .wrapper .slider-container h4 {
      color: #001480;
      margin-bottom: 10px; }
  .timeline .wrapper .slider-arrows {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 20px; }
    .timeline .wrapper .slider-arrows button {
      margin-left: 10px;
      margin-right: 10px; }

@media (max-width: 1024px) {
  .timeline .wrapper .slider-container {
    width: 65%; } }

@media (max-width: 767px) {
  .timeline .wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    .timeline .wrapper .side-nav-container {
      width: 100%;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; }
      .timeline .wrapper .side-nav-container .side-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap; }
        .timeline .wrapper .side-nav-container .side-nav .content {
          padding: 28px 10px 10px;
          margin: 0 5px;
          width: auto !important;
          min-width: -webkit-fit-content;
          min-width: -moz-fit-content;
          min-width: fit-content; }
    .timeline .wrapper .slider-container {
      width: 100%;
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; } }

@media (max-width: 767px) {
  .timeline .side-nav {
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow-x: auto;
    white-space: nowrap;
    /* Add a horizontal connecting line */ }
    .timeline .side-nav::before {
      top: 7px !important;
      right: 0;
      width: 100% !important;
      height: 2px; }
    .timeline .side-nav .content {
      position: relative;
      display: inline-block;
      min-width: 100px;
      /* Adjust as needed */
      text-align: center;
      padding: 20px 10px;
      cursor: pointer;
      z-index: 1;
      /* Ensure dots appear above the line */ }
      .timeline .side-nav .content h5 {
        font-size: 16px;
        font-weight: 500;
        color: #001480; }
      .timeline .side-nav .content::before {
        top: 0 !important;
        left: 50%;
        -webkit-transform: translateX(-50%) !important;
                transform: translateX(-50%) !important; }
      .timeline .side-nav .content.slick-current {
        opacity: 1; }
      .timeline .side-nav .content.slick-current::before {
        background-color: #0084f2; }
      .timeline .side-nav .content .hidden-content {
        display: none;
        font-size: 12px;
        color: #001480; }
      .timeline .side-nav .content:hover .hidden-content,
      .timeline .side-nav .content.slick-current .hidden-content {
        display: block; } }

.timeline .slider-prev-arrow,
.timeline .slider-next-arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: transparent;
  width: 40px;
  height: 40px;
  z-index: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0; }
  .timeline .slider-prev-arrow::before,
  .timeline .slider-next-arrow::before {
    width: 0;
    height: 0;
    display: none; }
  .timeline .slider-prev-arrow svg:hover path,
  .timeline .slider-next-arrow svg:hover path {
    fill: #001480; }
  .timeline .slider-prev-arrow svg path,
  .timeline .slider-next-arrow svg path {
    fill: #545859;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }