@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
        
:root {
    --primary: 0 200 83;           /* RGB for the green – used in gradients/hovers if needed */
    --green-300: #10df74;          /* Main accent color */
    --green-400: #00a651;          /* Main accent color */
    --green-500: #009624;          /* Slightly darker variant for buttons/hovers */
    --green-300: #69f0ae;          /* Lighter for subtle highlights if used */
}

.text-sslgreen-300 { color: var(--green-300); }
.text-sslgreen-400 { color: var(--green-400); } 
.bg-sslgreen-500  { background-color: var(--green-500); }
.hover\:bg-sslgreen-400:hover { background-color: var(--green-400); }

/* Logo / brand green (for .logo-font or "S" icon) */
.bg-sslgreen-500 { background-color: var(--green-500); }  /* the "S" circle */

/* Navigation hover underline */
.nav-link:after {
    background-color: var(--green-400);
}

/* Hover effects on cards */
.service-card:hover,
.portfolio-card:hover,
.testimonial-card:hover {
    border-color: rgba(0, 200, 83, 0.3);  /* semi-transparent green */
}

/* If you have any gradients (e.g., hero) */
.hero-bg {
    background: linear-gradient(135deg, #0a1729 0%, #98b0cf 100%);  /* keep dark base */
    /* Optional: subtle green tint overlay if desired */
    /* background: linear-gradient(135deg, #0a1729 0%, #003d1f 100%); */
}

/* Marquee Carousel */
.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 2rem 0;
}

.marquee-track {
    display: flex;
    animation: marquee 30s linear infinite;  /* Adjust 30s for speed */
    will-change: transform;
}

.marquee-item {
    flex: 0 0 auto;
    width: 180px;               /* Adjust based on your logo size */
    height: 80px;
    margin: 0 2rem;             /* Space between logos */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.marquee-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(80%);
    opacity: 0.7;
    transition: all 0.4s ease;
}

.marquee-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause on hover (optional) */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

/* Responsive – slower on mobile if desired */
@media (max-width: 768px) {
    .marquee-track {
        animation-duration: 45s; /* slower on small screens */
    }
    .marquee-item {
        width: 140px;
        margin: 0 1.5rem;
    }
}