/* Base font for the entire body */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom styles for the hamburger icon animation */
.hamburger-icon span {
    display: block;
    width: 25px;
    height: 3px;
    margin-bottom: 5px;
    background-color: #333; /* Dark grey for visibility */
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Dark mode specific hamburger icon color */
html.dark .hamburger-icon span {
    background-color: #e0e7ff; /* Lighter color in dark mode */
}

.hamburger-icon.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-icon.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-icon.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Keyframes for the continuous horizontal scroll animation */
@keyframes scroll-skills {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Scrolls half the width to loop seamlessly */
    }
}

/* Apply animation to the skills container */
.skills-marquee-container {
    display: flex; /* Ensure items are in a row */
    width: 200%; /* Make it wider than its parent to allow scrolling */
    animation: scroll-skills 10s linear infinite; /* Adjust duration for speed */
}

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

/* Ensure skill cards don't wrap and have consistent sizing */
.skill-card {
    flex-shrink: 0; /* Prevent cards from shrinking */
    width: 180px; /* Fixed width for each card */
    margin-right: 1.5rem; /* Space between cards */
}
/* Custom CSS for brand colors */
.fa-html5 { color: #E44D26; /* HTML5 Orange */ }
.fa-css3-alt { color: #264DE4; /* CSS3 Blue */ }
.fa-js { color: #F7DF1E; /* JavaScript Yellow */ }
.fa-react { color: #61DAFB; /* React Blue */ }
.fa-node-js { color: #339933; /* Node.js Green */ }
.fa-git-alt { color: #F05033; /* Git Red */ }
.fa-github { color: #181717; /* GitHub Black */ }
.fa-python { color: #3776AB; /* Python Blue */ }
.fa-database { color: #4479A1; /* Common SQL/DB blue */ }
.fa-code { color: #007ACC; /* Visual Studio Code blue*/ }
.fa-lightbulb { color: #FFD700; /* Gold/Yellow for problem solving */ }
.fa-aws { color: #FF9900; /* AWS Orange */ }
.fa-code-branch.vscode-color { color: #007ACC; /* VS Code Blue (using code-branch for now) */ }
.fa-vscode { color: #007ACC; /* Visual Studio Code Blue */ }

/* General icon sizing and spacing if not already handled by Tailwind */
.skill-card i {
    font-size: 3.5rem; /* Adjust as needed, equivalent to text-5xl or slightly larger */
    margin-bottom: 0.5rem; /* Space between icon and text */
}