:root {
    /* Colors */
    --color-bg-base: #0A0A0A;
    --color-bg-teal: #2D9B8E;
    --color-bg-dark: #1A1A1A;
    --color-surface: #2A2A2A;
    --color-primary: #2D9B8E;
    --color-accent: #45C4B0;
    --color-text: #FFFFFF;
    --color-text-secondary: #B0B0B0;
    --color-border: #3A3A3A;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;

    /* Shadows */
    --shadow-glow: 0 0 20px rgba(45, 155, 142, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(45, 155, 142, 0.5);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
}



.tech-stack-carousel-section {
        width: 100%;
        max-width: 1400px;
    }

    .tech-stack-section-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .tech-stack-section-header h2 {
        font-size: 2.5rem;
        color: #4dd0c4;
        margin-bottom: 15px;
        font-weight: 600;
    }




        .tech-stack-section-header p {
            font-size: 1.2rem;
            color: #b0b0b0;
        }

        /* Carousel Container */
        .tech-stack-carousel-container {
            display: flex;
            flex-direction: column;
            gap: 40px;
            overflow: hidden;
        }

        /* Single Row */
        .tech-stack-carousel-row {
            position: relative;
            overflow: hidden;
        }

        .tech-stack-carousel-row::before,
        .tech-stack-carousel-row::after {
            content: '';
            position: absolute;
            top: 0;
            width: 150px;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .tech-stack-carousel-row::before {
            left: 0;
            background: linear-gradient(to right, 135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%, transparent);
        }
        .tech-stack-carousel-row::after {
            right: 0;
            background: linear-gradient(to left, 135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%, transparent);
        }

        .tech-stack-carousel-track {
            display: flex;
            width: fit-content;
            gap: 0;
        }

        /* Logo Item */
        .tech-stack-logo-item {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 30px 40px;
            min-width: 180px;
            transition: transform 0.3s ease;
            
        }

        

        /* SVG Icon Placeholder */
        .tech-stack-logo-icon {
            width: 100%;
            height: 100%;
            background: rgb(42, 42, 42, 0.18);  /* Solid dark background */
            border-radius: 12px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .tech-stack-logo-icon img{
            width: 90px;
            height: 90px;
            object-fit: contain;
        }
        

        .tech-stack-logo-icon {
            background: rgb(42, 42, 42, 0);
            box-shadow: 0 5px 20px rgb(42, 42, 42, 0);
            transform: scale(1.1);
        }

        

         .tech-stack-logo-icon {
            transform: scale(1.1);
        }

        /* SVG placeholder - Replace with actual SVG */
        .tech-stack-logo-icon svg {
            width: 70%;
            height: 70%;
            fill: #4dd0c4;
            transition: fill 0.3s ease;
        }

        

        /* Logo Text */
        .logo-text {
            font-size: 0.95rem;
            color: #ffff;
            font-weight: 500;
            text-align: center;
            transition: color 0.3s ease;
            white-space: nowrap;
        }

        

        /* Pause on hover */
        .tech-stack-carousel-row:hover .tech-stack-carousel-track {
            animation-play-state: paused !important;
        }

        @media (max-width: 768px) {
            .tech-stack-section-header h2 {
                font-size: 2rem;
            }
            
            .tech-stack-logo-icon img{
                width: 55px;
                height: 55px;
            }

            .tech-stack-logo-item {
                padding: 20px 30px;
                min-width: 140px;
            }

            .tech-stack-logo-icon {
                width: 50px;
                height: 50px;
            }

            .logo-text {
                font-size: 1.05rem;
            }

            .tech-stack-carousel-row::before,
            .tech-stack-carousel-row::after {
                width: 50px;
            }
        }