/**
 * Theme Name: Hello Elementor Child
 * Theme URI: https://github.com/elementor/hello-theme-child/
 * Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
 * Author: Elementor Team
 * Author URI: https://elementor.com/
 * Template: hello-elementor
 * Version: 2.0.0
 * Text Domain: hello-elementor-child
 * License: GNU General Public License v3 or later.
 * License URI: https://www.gnu.org/licenses/gpl-3.0.html
 * Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
 *
 * @format
 */

/* Add your custom styles here */

@import url('https://fonts.cdnfonts.com/css/euclid-circular-a');

/* Global Styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Milestones Section */

.swiper-container {
  width: 100% !important;
  overflow: hidden !important;
}

.swiper-container .swiper-slide {
  width: 100% !important;
  overflow: hidden !important;
}

.milestones {
  text-align: center;
  padding: 40px 20px;
  font-family: 'Poppins', sans-serif;
  max-width: 1024px !important;
  margin: auto;
}

.milestones h2 {
  margin-bottom: 32px;
  font-size: 2.5rem;
  color: black; /* Tailwind: text-tsdarkgreen */
}

.swiper-arranger {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#timeline-slider {
  margin-bottom: 16px;
}

/* Swiper Slide */
.milestone-card {
  padding: 24px;
  background: #f6f9e6; /* Tailwind: bg-gray-100 */
  border-radius: 8px;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.milestone-card h3 {
  color: #00944d; /* Tailwind: text-tsdarkgreen */
  font-size: 36px; /* Tailwind: text-xl */
  margin-bottom: 16px;
}

.milestone-card p {
  margin: 0 auto 24px;
  max-width: 700px; /* Tailwind: max-w-[700px] */
  font-size: 24px;
  color: black; /* Tailwind: text-gray-600 */
  font-weight: 400;
  text-align: justify; /* Tailwind: text-justify */
  white-space: pre-line; /* Tailwind: whitespace-pre-line */
}

.milestone-card img {
  width: 100%; /* Tailwind: w-full */
  height: auto;
  max-width: 400px;
  object-fit: contain; /* Tailwind: object-contain */
  object-position: center; /* Tailwind: object-center */
  aspect-ratio: 16/9; /* Tailwind: aspect-video */
}

/* Timeline Pagination */
.timeline-pagination {
  display: flex;
  justify-content: space-between; /* Tailwind: justify-between */
  align-items: center; /* Tailwind: items-center */
  padding: 20px 0;
  position: relative;
}

.timeline-pagination::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  width: 93%;
  margin: auto;
  height: 2px;
  background-color: #f9b002; /* Tailwind: bg-tsdarkgreen */
  z-index: 1;
}

#timeline-slider .bullet-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#timeline-slider .swiper-pagination-bullet {
  width: fit-content;
  height: fit-content;
  border: none;
  background-color: transparent;
  opacity: 1;
  z-index: 5;
}

#timeline-slider .swiper-pagination-bullet-active {
  border-radius: 50%;
  background-color: transparent !important;
  transition: background 0.3s ease-in-out;
}

#timeline-slider .bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f9b002;
  transition: background 0.3s ease-in-out;
  opacity: 1;
}

.timeline-pagination .swiper-pagination-bullet-active .bullet {
  background-color: #f6f9e6 !important;
  border: 3px solid #ad2428; /* Tailwind: border-yellow-500 */
}

/* Year Text */
.year {
  font-size: 0.8rem;
  color: #004414; /* Tailwind: text-tsdarkgreen */
}

.year.active {
  font-size: 1.375rem; /* 22px */
  color: #004414;
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 768px) {
	#timeline-slider {
		display: none !important;
	}
}
/*
@media screen and (min-width: 768px) {
	.milestones-no-slider {
		display: none !important;
	}
}

.milestones-no-slider {
  text-align: center;
  padding: 40px 20px;
  font-family: 'Poppins', sans-serif;
  max-width: 1024px !important;
  margin: auto;
}

.milestones-no-slider h2 {
  margin-bottom: 32px;
  font-size: 2.5rem;
  color: black;
}

.milestones-no-slider .milestone-card {
	padding: 28px;
	margin-bottom: 10px;
} */