.sidebar {
  width: 100%; /* Full width on mobile */
}

@media (min-width: 768px) { /* Assuming md is >= 768px */
  .sidebar {
    width: 23%; /* Adjust as necessary for larger screens */
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

/* Additional mobile styles */
@media (max-width: 767px) { /* For mobile view */
  .sidebar {
    width: 80%; /* Adjust the width to be narrower on mobile */
    margin: 0 auto; /* Center the sidebar */
  }
}

.sidebar-header {
  background-color: #E7B4EC;
  color: white;
  text-align: center;
  padding: 12px 0; /* Equivalent to py-3 */
  border-top-left-radius: 8px; /* Adjust as necessary */
  border-top-right-radius: 8px; /* Adjust as necessary */
}

.sidebar-title {
  font-size: 1.125rem; /* Equivalent to text-lg */
  font-weight: bold; /* Equivalent to font-bold */
}

.sidebar-content {
  background-color: #E2F2F4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px; /* Equivalent to p-6 */
  border-bottom-left-radius: 8px; /* Adjust as necessary */
  border-bottom-right-radius: 8px; /* Adjust as necessary */
  height: 100%; /* Equivalent to h-full */
}

.image-wrapper {
  width: 100%;
  display: flex;
}

.image-wrapper.left {
  justify-content: flex-start;
}

.image-wrapper.right {
  justify-content: flex-end;
}


.icon {
  width: 80px; /* Set to your desired width */
  height: 80px; /* Set to your desired height */
  object-fit: contain; /* Maintain aspect ratio while filling the box */
  transition: transform 0.3s; /* Equivalent to transition-transform duration-300 */
  cursor: pointer;
}

.icon:hover {
  transform: scaleX(-1); /* Equivalent to hover:scale-x-[-1] */
}




/* Animation begins for left sidebar */


@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.job-item {
  opacity: 0;
}

.job-item.animate {
  animation: slideInLeft 0.8s ease forwards;
}

.job-item.delay-0.animate { animation-delay: 0.2s; }
.job-item.delay-1.animate { animation-delay: 0.6s; }
.job-item.delay-2.animate { animation-delay: 1s; }
.job-item.delay-3.animate { animation-delay: 1.4s; }
.job-item.delay-4.animate { animation-delay: 1.8s; }
.job-item.delay-5.animate { animation-delay: 2.2s; }



.text-justify {
  text-align: justify;
}


/* Animation ends for left sidebar */