/* Use the pink color from the Tweezzo logo for the background */
  .introduction {
    background-color: #da1884;  /* Adjust with the exact pink color from the logo */
  }
.feature-icon {
    font-size: 2rem;
    color: #0d6efd;
  }

  .screenshot img {
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

  footer {
    background-color: #da1884 !important;
    padding: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: #f8f9fa;
  }
.bg-pink {
    background-color: #da1884 !important;
  }
  .text-pink{
    color: #da1884 !important;
  }
  .carousel-item {
    transition: transform 2s ease-in-out; /* 1s duration for sliding effect */
  }

  .feature-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
  }
  .feature-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    min-width: 280px;
    max-width: 280px;
    margin-right: 1rem;
    flex: 0 0 auto;
  }

  @keyframes autoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .auto-scroll-wrapper {
    animation: autoScroll 30s linear infinite;
    display: flex;
  }

  .feature-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
  }
  .feature-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    min-width: 280px;
    max-width: 280px;
    margin-right: 1rem;
    flex: 0 0 auto;
  }

  @keyframes autoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .auto-scroll-wrapper {
    animation: autoScroll 30s linear infinite;
    display: flex;
  }

    /* Fade-in animation for the introduction text */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animate the feature section sliding in from the left */
.slide-in-left {
  opacity: 0;
  transform: translateX(-30%);
  animation: slideInLeft 1.5s forwards;
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}