.carousel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.carousel-container-1 {
    width: 100%; /* Full width for the container */
    overflow: hidden; /* Hide overflowing items */
    margin: 0 auto;
  }
  
  .carousel-track-1 {
    display: flex;
    animation: scrollCarouselLeft 13s linear infinite alternate; /* Adding 'alternate' for reverse animation */
    gap: 20px; /* Set gap between items */
  }
  
  .carousel-item-1 {
    flex: 0 0 calc(25% - 15px); /* Adjust width to fit 4 items with gaps (4 * (25% + gap)) */
    padding: 90px;
    box-sizing: border-box;
    background-color: #181D1E;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 280px
  }
  
  .carousel-item-1 img {
    width: 70%; /* Adjust image width */
    height: auto; /* Maintain aspect ratio */
  }





  .carousel-container-2 {
    width: 100%; /* Full width for the container */
    overflow: hidden; /* Hide overflowing items */
    margin: 0 auto;
  }
  
  .carousel-track-2 {
    display: flex;
    animation: scrollCarouselRight 13s linear infinite alternate; /* Adding 'alternate' for reverse animation */
    gap: 20px; /* Set gap between items */
    flex-shrink: 0;
    transform: translateX(-100%); /* Adjust this to show the fourth item at the start */
  }
  
  .carousel-item-2 {
    flex: 0 0 calc(25% - 15px); /* Adjust width to fit 4 items with gaps (4 * (25% + gap)) */
    padding: 90px;
    box-sizing: border-box;
    background-color: #181D1E;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 280px
  }
  
  .carousel-item-2 img {
    width: 70%; /* Adjust image width */
    height: auto; /* Maintain aspect ratio */
  }
  
  @keyframes scrollCarouselLeft {
    0% {
      transform: translateX(0); /* Start from the initial position */
    }
    100% {
      transform: translateX(-100%); /* Move to the last item */
    }
  }

  @keyframes scrollCarouselRight {
    0% {
        transform: translateX(-100%); /* Start from the fourth item */
      }
      100% {
        transform: translateX(0%); /* Move to show all items */
      }
  }


  .skills-title {
    color: white;
    display: flex;
    justify-content: center;
    font-size: 100px;
    font-family: roboto;
    font-weight: 700;
    margin-bottom: 0px;
  }
  
  /* Responsive styles */
/* Responsive styles */
@media (max-width: 768px) {
  .skills-title {
      font-size: 40px; /* Smaller font size for mobile */
      margin-bottom: 20px;
  }

  .carousel-item-1,
  .carousel-item-2 {
      padding: 20px;
      flex: 0 0 calc(24.8% - 15px); /* Adjust width for 2 items on mobile */
      height: auto; /* Adjusted height for smaller screens */
  }

  .carousel-item-1 img {
      width: 50%; /* Increase image size on mobile */
  }
  .carousel-item-2 img {
    width: 62.45%; /* Increase image size on mobile */
}


  .carousel-track-1 {
    animation: scrollCarouselLeft 6s linear infinite alternate; /* Adjusted speed */
  }
  .carousel-track-2 {
    animation: scrollCarouselRight 6s linear infinite alternate; /* Adjusted speed */
  }
}