/* Custom font import and application */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
        
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #cee4f3; /* Light gray background */
        }
        /* Style the Lucide icons */
        .icon {
            stroke-width: 1.5;
            color: #0d9488; /* Teal color for accents */
        }
        .section-padding {
            padding: 4rem 1rem;
        }
        @media (min-width: 640px) {
            .section-padding {
                padding: 6rem 4rem;
            }
        }
        /* Styling for the detail panels - starts hidden */
        .service-detail-panel {
            display: none;
            /* Added transition for smoother appearance */
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }
        /* Style for active panel */
        .service-detail-panel.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        /* Styling for the chevron icon rotation */
        .chevron-icon {
            transition: transform 0.3s ease;
        }
        .rotate-90 {
            transform: rotate(90deg);
        }
        #hero {
            background-size: cover;
            background-position: center;
            min-height: 85vh;
        }
        #skills {
            background-size: cover;
            background-position: center;
            min-height: 85vh;
            line-height: inherit;
        }
        /* Custom CSS for Skill Scroll Animation */

/* Define the animation */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        /* This must be half the width of the scrolling-skills-content 
           to move one complete set of skills off-screen and loop seamlessly */
        transform: translateX(-50%);
    }
}

/* Apply the animation to the container holding the duplicate skill sets */
.scrolling-skills-content {
    /* The total width must be at least double the viewport width 
    since it contains two sets of skills
    */
    display: flex;
    animation: scroll-left 40s linear infinite; /* 40s for speed, linear for smoothness, infinite for loop */
}

/* Pause animation on hover */
.scrolling-skills-container:hover .scrolling-skills-content {
    animation-play-state: paused;
}

/* Optional: Add a subtle text shadow to the skill card text for better contrast */
.skill-card p {
    text-shadow: 0 0px 1px rgba(0, 0, 0, 0.05);
}

/* Optional: Style adjustments for icons */
.skill-card i {
    transition: color 0.3s ease;
}

.skill-card:hover i {
    color: #047857; /* A slightly darker teal on hover */
}
/* Custom CSS for Skill Scroll Animation (Ensure this is still in your CSS file) */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.scrolling-skills-content {
    display: flex;
    animation: scroll-left 40s linear infinite;
    /* Performance hint for the browser */
    will-change: transform;
}
.scrolling-skills-container:hover .scrolling-skills-content {
    animation-play-state: paused;
}
/* ... other skill-card related styles */