.skills {
    min-height: 100vh;
    padding: 60px 0;
}

.skills h1 {
    color: #000;
    margin-bottom: 40px;
}

.skill-card {
    display: flex;
    flex-direction: column; /* Default to column layout for smaller screens */
    align-items: center; /* Center content horizontally */
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative; /* Ensure small images can be positioned inside */
    animation: none; /* Default no animation */
}
.skill-card.slide-left {
    animation: slideInFromLeft 1.2s ease-out forwards; /* Adjust duration and easing as needed */
}

/* Class for cards to slide in from right */
.skill-card.slide-right {
    animation: slideInFromRight 1.2s ease-out forwards; /* Adjust duration and easing as needed */
}
/* Responsive styles for larger screens */
@media (min-width: 768px) {
    .skill-card {
        flex-direction: row; /* Change to row layout for larger screens */
        align-items: flex-start; /* Align items to the top of the container */
    }
}

/* Keyframes for sliding from the left */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100vw); /* Start from outside the viewport on the left */
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Keyframes for sliding from the right */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100vw); /* Start from outside the viewport on the right */
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}