/* Import font dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Global styles */
body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

/* Gradient background class */
.gradient-bg {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

/* Hover effect untuk service card */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Hover effect untuk team card image */
.team-card:hover img {
    transform: scale(1.05);
}

 .chart-container {
            position: relative;
            height: 60vh; /* Adjust height as needed */
            width: 100%;
            max-width: 900px; /* Adjust max-width for better display */
            margin: auto;
        }
        /* Adjustments for chart containers */
        .chart-container {
            position: relative;
            height: 40vh; /* Using viewport height for responsiveness */
            width: 100%; /* Take full width of parent */
            max-width: 500px; /* Default max width */
        }
        #cattleBarChart-container { /* Specific max width for bar chart */
            max-width: 700px;
        }
       .timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: #bfdbfe;
    transform: translateX(-50%);
    z-index: 0;
  }

  .timeline-item {
    position: relative;
    margin-bottom: 3rem;
  }

  .timeline-dot {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25rem;
    height: 1.25rem;
    background-color: #2563eb;
    border: 4px solid #dbeafe;
    border-radius: 9999px;
    z-index: 2;
  }

  .timeline-content-wrapper {
    width: 45%;
    position: relative;
    z-index: 1;
  }

  .timeline-item.left-aligned .timeline-content-wrapper {
    margin-right: auto;
    text-align: right;
  }

  .timeline-item.right-aligned .timeline-content-wrapper {
    margin-left: auto;
    text-align: left;
  }

  .timeline-content {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    .timeline-line {
      left: 1.25rem;
      transform: none;
    }

    .timeline-item .timeline-content-wrapper {
      width: 100%;
      margin: 0;
      padding-left: 2.5rem;
      text-align: left !important;
    }

    .timeline-dot {
      left: 1.25rem;
    }
  }