/* Breakpoints */
@media (min-width: 768px) {
  .container { padding-left: 5px; padding-right: 5px; }
}

@media (max-width: 1366px) {
  .text-row { flex-direction: column; gap: 20px; align-items: flex-start; margin-bottom: 60px; }
  .text-row .right-col { width: 100%; max-width: 834px; margin: 0 auto; }
}

@media (max-width: 767px) {
  .milestone-card { flex-direction: column;}
  .milestone-card .card-content { width: 100%; background-color: transparent; }
  .milestone-card .card-image { width: 100%; /*height: 180px;*/ }
  .milestone-card.top { flex-direction: column-reverse; }
  .text-row .left-col .heading { font-size: 64px; line-height: 51px; }
  .text-row .left-col h2 { font-size: 26px; text-align: center; }
  .milestone-card.bottom .card-content { border: none;}
  .arrow-indicator.top { bottom: -30px; left: 50%; margin-left: -12px; }
  .timeline-dot { left: 50%; margin-left: -12px; }
  .arrow-indicator.bottom { left: 50%; margin-left: -12px; }
  .timeline-nav-container { display: none;}
}


.timeline_hidden {opacity: 0; visibility: hidden;}
.timeline-container { display: flex; align-items: center; }
.timeline-section { width: 100%; position: relative; margin: 0 auto; overflow: hidden; }
.timeline-container,
.timeline-nav-container { transition: opacity 0.2s ease; }
.timeline-section.timeline-is-loading .timeline-container,
.timeline-section.timeline-is-loading .timeline-nav-container {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.timeline-slider-row { position: relative; max-width: 1255px; width: 100%; }
/* Fixed Timeline Line */
.timeline-line { position: absolute; top: 50%; left: 50%; width: calc(100% - 40px); height: 2px; background-color: #EB711E; transform: translate(-50%, -50%); z-index: 1; }

/* Swiper Styles */
.swiper { width: 100%; overflow: visible !important; }
.swiper-slide { width: 268px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }

/* Dots */
.timeline-dot { width: 24px; height: 24px; border: 2px solid #EB711E; background-color: #fff; border-radius: 50%; position: absolute; left: 134px; bottom: -57px; z-index: 10; }

/* Arrows */
.arrow-indicator { position: absolute; color: #EB711E; font-size: 18px; left: 134px; z-index: 5; width: 24px; height: 24px; background-image: url(../images/arrow-up.svg); background-position: center center; background-repeat: no-repeat; }
.arrow-indicator.top { bottom: -30px; }
.arrow-indicator.bottom { top: -30px; transform: rotate(180deg); }

/* Card Styles */
.milestone-card { width: 713px; max-width: 90vw; display: flex; position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; }
.milestone-card.top { bottom: calc(50% + 45px); }
.milestone-card.bottom { top: calc(50% + 45px); }

.card-content { width: 293px; background-color: #F5F5F5; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 20px; }

.card-image { width: 420px; flex: none;min-height: 270px; background-color: #e7e7e7;}
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev { width: 44px; height: 44px; background-color: #EB711E; color: #fff; border-radius: 50px; opacity: 1; margin: 0; transform: translateY(-50%); }
.mySwiper .swiper-button-next:after,
.mySwiper .swiper-button-prev:after { font-size: 14px; }
.mySwiper .swiper-button-next { right: 0; }
.mySwiper .swiper-button-prev { left: 0; }
.milestone-card .icon { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; margin: 0; }
.card-content h2 { margin: 0; font-size: 35px; line-height: 1; font-weight: 600; color: #444543; }
.card-content p { margin: 0;}
.milestone-card.bottom .timeline-dot { top: -57px; }
/*.milestone-card.bottom .card-content { background-color: #fff; border: 2px solid #E7E7E7; border-right: 0; }*/

.text-row { display: flex; gap: 20px; flex-direction: column; justify-content: space-between; margin-bottom: 60px; }
.text-row .left-col { width: 100%; max-width: 862px; }
.text-row .left-col .heading { font-size: 128px; line-height: 102px; font-weight: 600; color: #F5F5F5; }
.text-row .left-col h2 { font-size: 35px; line-height: 1; color: #444543; font-weight: 600; text-align: right; margin-top: -30px; margin-bottom: 15px; }
.text-row .right-col { max-width: 832px; width: 100%; margin: 0 auto; }
.text-row .right-col p { margin: 0 0 24px 0; }
.text-row .right-col p:last-child { margin: 0; }

.timeline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
.timeline-nav-container { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 78px; background-color: #F5F5F5; padding: 10px; position: relative; }
.timeline-nav-container .jump-to-label { font-size: 16px; line-height: 24px; color: #444543; font-weight: 400; }
.timeline-nav-container .timeline-nav { display: flex; flex-wrap: wrap; gap: 10px }
.timeline-nav-container .timeline-nav .nav-btn { white-space: nowrap; background: transparent; border: none; color: #EB711E; font-size: 16px; line-height: 16px; font-weight: 400; padding: 14px 28px; border-radius: 24px; cursor: pointer; transition: all 0.3s ease; font-family: "Inter", sans-serif; }
.timeline-nav-container .timeline-nav .nav-btn:hover {color: #444F50;}
.timeline-nav-container .timeline-nav .nav-btn.active { background-color: #fff; color: #444543; }





/* Breakpoints */
@media (min-width: 768px) {
  .container { padding-left: 5px; padding-right: 5px; }
}

@media (max-width: 1366px) {
  .text-row { flex-direction: column; gap: 20px; align-items: flex-start; margin-bottom: 60px; }
  .text-row .right-col { width: 100%; max-width: 834px; margin: 0 auto; }
}

@media (max-width: 991px) {
  .timeline-nav-container .timeline-nav .nav-btn { padding: 14px 15px; }
}

@media (max-width: 767px) {
  .milestone-card { flex-direction: column;}
  .milestone-card .card-content { width: 60%; background-color: transparent;margin: 0px auto; }
  .milestone-card .card-image { width: 60%; margin: 0px auto; background-color: transparent; min-height: 1px;}
  .milestone-card.top { flex-direction: column-reverse; }
  .text-row .left-col .heading { font-size: 64px; line-height: 51px; }
  .text-row .left-col h2 { font-size: 26px; text-align: center; }
  .milestone-card.bottom .card-content { border: none;}
  .arrow-indicator.top { bottom: -30px; left: 50%; margin-left: -12px; }
  .timeline-dot { left: 50%; margin-left: -12px; }
  .arrow-indicator.bottom { left: 50%; margin-left: -12px; }
  .timeline-nav-container { display: none;}
}

@media (max-width: 480px) {
  .milestone-card .card-content { width: 90%;}
  .milestone-card .card-image { width: 90%;}
}