body {
         font-family: 'Inter', sans-serif;
         background-color: #f3f4f6;
     }

     /* Logo Scroller Styles */
     .logo-scroller {
         max-width: 1200px;
         margin: auto;
         overflow: hidden;
         -webkit-mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0));
         mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0));
     }

     .logo-scroller-inner {
         display: flex;
         gap: 2rem;
         width: max-content;
         animation: scroll 30s linear infinite;
     }

     .logo-scroller:hover .logo-scroller-inner {
         animation-play-state: paused;
     }

     @keyframes scroll {
         to {
             transform: translateX(calc(-50% - 1rem));
         }
     }

     .logo-item {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 1rem;
         background-color: #ffffff;
         border-radius: 0.5rem;
         opacity: 0.8;
         transition: all 0.3s ease-in-out;
         box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     }

     .logo-item:hover {
         opacity: 1;
         transform: scale(1.05);
     }

     .logo-item img {
         height: 5rem;
         width: auto;
         object-fit: contain;
     }

     /* Testimonials */
     .testimonial-card {
         background-color: #f9fafb;
         border-radius: 1rem;
         padding: 2rem;
         text-align: center;
         max-width: 48rem;
         margin: auto;
     }

     .testimonial-text {
         font-size: 1.25rem;
         color: #374151;
         margin-bottom: 1.5rem;
         font-style: italic;
         font-weight: 300;
     }

     .carousel-dot {
         width: 0.75rem;
         height: 0.75rem;
         border-radius: 9999px;
         background-color: #d1d5db;
         transition: background-color 0.3s;
     }

     .carousel-dot.active,
     .carousel-dot:hover {
         background-color: #3b82f6;
         /* Primary color */
     }
 
      .filter-btn.active {
          background-color: #3b82f6;
          /* Tailwind's gray-800 */
          color: white;
      }

.portfolio-slider .swiper-slide {
    max-width: 350px; /* or any card width you want */
}
.portfolio-slider .swiper-wrapper {
    justify-content: center;
}
/* Center align when loop is off */
.portfolio-slider.no-loop .swiper-wrapper {
    justify-content: center;
}

/* Hide horizontal overflow */
.portfolio-slider {
    overflow: hidden;
}

/* Ensure slides adapt to smaller screens */
.portfolio-slider .swiper-slide {
    width: 350px; /* default for large screens */
}

@media (max-width: 1024px) {
    .portfolio-slider .swiper-slide {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .portfolio-slider .swiper-slide {
        width: 90% !important;
        margin: 0 auto;
    }
}

/* Filter button responsiveness */
.filter-btn {
    font-size: 1rem;
}

@media (max-width: 640px) {
    .filter-btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* Make portfolio items stack neatly in static layout */
.no-swiper .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
}

.no-swiper .swiper-slide {
    flex: 1 1 300px;
    max-width: 37%;
}