.logo-scroller {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 100px;
  margin-bottom: 30px;
}

.logo-track {
  display: flex;
  align-items: center;
  height: 100%;
  animation-duration: 40s; /* Increased duration for more logos */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  width: max-content; /* Changed from 200% to max-content */
}

.logo-item {
  flex: 0 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.logo-item img {
  max-height: 80px;
  max-width: 150px; /* Added max-width for consistency */
  object-fit: contain;
}

/* Animation for first row: scrolls left */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-left {
  animation-name: scroll-left;
}

/* Animation for second row: scrolls right */
@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.animate-right {
  animation-name: scroll-right;
}

/* Pause on hover */
.logo-scroller:hover .logo-track {
  /* animation-play-state: paused; */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo-item {
    padding: 0 15px;
  }
  .logo-track {
    animation-duration: 30s;
  }
  .logo-item img {
    max-width: 120px;
  }
}

.flip-card {
  perspective: 1000px;
  height: 180px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.flip-card-front {
  background: #fff;
  z-index: 2;
}

.flip-card-back {
  background: #ff4157 !important;
  color: white;
  transform: rotateY(180deg);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
}

.flip-card-front h4 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

.flip-card-back p {
  margin: 0;
  line-height: 1.5;
}

.text-white {
  color: #fff !important;
}

/* Smooth base transitions for all elements */
.project-item * {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Overlay background transition */
.project-over {
  opacity: 1 !important;
  transform: translateY(0) !important;
  background: rgba(30, 32, 47, 0.6) !important;
}

/* Hover effects */
.project-item:hover h4 {
  transform: scale(1.05);
  font-size: 1.3rem !important;
  /* color: var(--yellow) !important; */ /* Uncomment if you want color change */
}

.project-item:hover .project-explore {
  transform: translateY(-2px);
  font-size: 18px !important;
  /* color: var(--yellow) !important; */ /* Uncomment if you want color change */
}

/* Project content layout */
.project-content {
  justify-content: space-between;
  justify-items: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* h4 base styles */
.project-item h4 {
  color: #ffffff !important;
  margin: 0;
  transform: scale(1); /* Initial state */
}

/* Explore button base styles */
.project-explore {
  transform: translateY(0); /* Initial state */
}

/* Image zoom on hover */
.project-image {
  overflow: hidden;
}

.project-image img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.project-item:hover .project-image img {
  transform: scale(1.08); /* Slightly stronger zoom */
}

/* Make the entire project-item fill the link area */
.project-item {
  position: relative;
  cursor: pointer;
}

.banner .banner-content a {
  margin-top: 10px !important;
  margin-right: 1rem !important;
}