.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 */
}
/* Styles for the skill image */
.skill-image {
    text-align: center; /* Center image horizontally */
}

.skill-image img {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    display: block; /* Ensure image is treated as a block-level element */
    margin: 0 auto; /* Center image horizontally */
}

/* Styles for the skill content */
.skill-content {
    text-align: center; /* Center text for smaller screens */
    padding: 10px;
}

/* 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 */
    }

    .skill-image {
        margin-right: 20px; /* Space between image and text */
        margin-bottom: 0; /* Remove bottom margin for row layout */
        text-align: left; /* Align image to the left */
    }

    .skill-content {
        text-align: left; /* Align text to the left for larger screens */
    }
}

.badge-image {
    position: absolute; /* Position small images inside the card */
    bottom: -15px; /* Increase space from the bottom */
    right: 20px; /* Increase space from the right */
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Increase space between small images */
    z-index: 2; /* Ensure they stay above background but below content */
}

.badge-image img {
    width: 40px; /* Size of small images */
    height: auto;
}

/* 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;
    }
}