/* Work Experience Section */
#work-experience {
    padding: 0.938rem; /* Reduced by 25% from 1.25rem */
}

/* Work Cards Container */
.work-cards {
    width: 100%;
}

/* Work Card Styling */
.work-card {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 25.781rem; /* Reduced by 25% from 34.375rem */
    margin: 1.406rem 0; /* Reduced by 25% from 1.875rem */
    border-radius: 0.703rem; /* Reduced by 25% from 0.938rem */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    position: relative;
    overflow: hidden;
    background-color: black;
    opacity: 0;
    transform: translateX(-23.438rem); /* Reduced by 25% from -31.25rem */
    transition: opacity 0.5s ease, transform 1.0s ease;
}

/* Reverse the layout for alternating cards */
.work-card.reverse {
    justify-content: flex-end;
    background-position: center left;
    transform: translateX(23.438rem); /* Reduced by 25% from 31.25rem */
}

/* Class to slide in when in view */
.work-card.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Gradient Overlay */
.work-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    z-index: 1;
}

.work-card.reverse::before {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

/* Work Info */
.work-info-left, .work-info-right {
    position: relative;
    z-index: 2;
    padding: 1.406rem; /* Reduced by 25% from 1.875rem */
    width: 50%;
    color: var(--text-color);
}

.work-info-left h3, .work-info-right h3 {
    font-size: 1.875rem; /* Reduced by 25% from 2.5rem */
    margin-bottom: 0.469rem; /* Reduced by 25% from 0.625rem */
    color: var(--secondary-color);
}

.work-info-left p, .work-info-right p {
    font-size: 1.125rem; /* Reduced by 25% from 1.5rem */
}

.job-title {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 0.844rem; /* Reduced by 25% from 1.125rem */
    margin: 0.234rem 0 0.469rem; /* Reduced by 25% from 0.313rem 0 0.625rem */
}

.duration {
    color: var(--primary-color);
    font-size: 0.844rem; /* Reduced by 25% from 1.125rem */
    margin: 0.234rem 0 0.469rem; /* Reduced by 25% from 0.313rem 0 0.625rem */
}

/* Skill Tags */
#workskill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.469rem; /* Reduced by 25% from 0.625rem */
}

.worktag {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.375rem 0.563rem; /* Reduced by 25% from 0.5rem 0.75rem */
    border-radius: 0.375rem; /* Reduced by 25% from 0.5rem */
    font-size: 0.844rem; /* Reduced by 25% from 1.125rem */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 36rem) { /* Reduced by 25% from 48rem */
    .work-card {
        flex-direction: column;
        height: auto;
    }

    .work-card.reverse {
        flex-direction: column;
    }

    .work-info-left, .work-info-right {
        width: 100%;
        padding: 0.938rem; /* Reduced by 25% from 1.25rem */
    }
}