/* Experience Section Styles with Progressive Reveal and Distinguished Colors */
.experience .section-content {
    width: calc(100% - var(--section-title-width) - var(--section-gap));
}

.experience-item {
    margin-bottom: 3rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    transition: all 0.4s ease;
    border-left: 5px solid var(--accent-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    opacity: 0.6;
    transform: translateY(20px);
}

/* Progressive reveal states */
.experience-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.experience-item.active {
    opacity: 1;
    transform: translateY(0);
    border-left-color: #48b0c5;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.experience-item.faded {
    opacity: 0.7;
    transform: translateY(0);
}

.experience-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(85, 194, 218, 0.05) 0%, rgba(85, 194, 218, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.experience-item.active::before {
    opacity: 1;
}

.experience-item:last-child {
    margin-bottom: 0;
}

/* Experience Header */
.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.experience-title-section {
    flex: 1;
    min-width: 250px;
}

.experience-date-section {
    text-align: right;
    color: var(--secondary-color);
    font-size: 0.95rem;
    font-weight: 500;
    background-color: rgba(85, 194, 218, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    white-space: nowrap;
}

.experience-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.experience-company {
    font-size: 1.2rem;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.experience-location {
    font-size: 0.95rem;
    color: var(--secondary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* BIGGER SVG Location Icon */
.experience-location::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd' viewBox='0 0 423 511.844'%3E%3Cpath fill='%232394E0' d='M213.96 88.857c3.289.037 6.559.16 9.808.35l.002.003a201.6 201.6 0 00-2.467-.128c2.594 31.529 16.938 61.876 36.479 86.403 13.735 17.241 31.144 33.137 51.852 46.292 5.47 3.47 12.311 3.022 17.234-.594 20.503-12.655 38.023-29.538 51.787-49.269l.002-.001.235-.339.18-.26-.004.005C406.611 207.025 423 251.771 423 300.341c0 116.797-94.712 211.502-211.503 211.502C94.707 511.848 0 417.14 0 300.341 0 184.657 92.928 90.631 208.199 88.87c1.921-.03 3.841-.034 5.761-.013z'/%3E%3Cpath fill='%23A1E367' d='M40.475 409.608a197.972 197.972 0 01-27.248-62.741l37.251 17.963.19 11.113c0 4.084-6.972 12.773-9.181 16.074l-1.012 17.591zm328.444-224.962c18.345 25.696 30.741 55.93 35.158 88.698l-6.723-.721c-1.194 5.148-2.291 5.277-2.291 11.475 0 5.467 6.884 9.126 6.884 20.665 0 3.092-7.26 9.274-7.579 10.352l-10.783-12.648v16.071l-1.637-.062-2.906-29.657-6.021 1.898-7.164-22.062-23.597 24.629-.283 18.036-7.703 5.167-8.183-46.259-4.894 3.577-11.086-14.959-16.568.493-6.347-7.254-6.497 1.786-12.777-14.642-2.469 1.679 7.917 20.234 9.187.001v-4.593l4.589.002c3.311 9.151 6.888 3.731 6.888 9.188 0 19.094-23.585 33.133-39.033 36.727.825 3.453.506 6.895 4.587 6.895 8.652 0 4.352-1.515 13.782-2.296-.439 19.508-22.377 42.806-31.744 57.33l4.194 29.914c1.104 6.497-13.49 13.37-18.453 20.687l2.381 11.459-6.722 2.716c-1.178 11.773-12.606 24.834-25.427 24.834l-13.771-.002c0-16.119-11.484-39.126-11.484-50.518 0-9.673 4.588-10.974 4.588-22.957 0-11.071-11.474-26.947-11.474-29.845v-18.368h-9.186c-1.364-5.119-.531-6.886-6.885-6.886h-2.297c-10.03 0-8.335 4.59-18.367 4.59h-9.189c-8.281 0-22.957-26.579-22.957-29.85v-27.55c0-11.891 10.881-24.833 18.369-29.854v-11.474l10.333-10.506 5.74-.977c12.319 0 10.857-6.885 18.369-6.885l20.667.002v16.071l22.721 9.702 2.141-9.804c10.297 2.413 12.974 6.994 25.659 6.994h4.588c8.713 0 9.182-11.56 9.182-20.661l-18.394 1.818-8.001-17.433-7.956 2.117c1.429 6.237 2.211 3.645 2.211 8.906 0 3.097-2.552 3.442-4.596 4.592l-7.956-20.19-17.104-12.217-2.272 2.232 14.566 15.326c-1.935 5.496-2.163 21.373-10.193 10.253l7.511-3.614-18.721-19.618-11.215 4.386-11.07 10.602c-1.157 8.54-3.485 12.837-12.42 12.837-5.949 0-2.357-1.54-11.484-2.296v-22.957h20.662l-6.695-15.291-2.483 1.514v-4.596l33.552-15.469c-.633-4.817-1.404-2.234-1.404-7.488 0-.314 2.254-4.551 2.296-4.599l8.678 5.388-2.074-9.883-13.39 2.754-2.484-12.014c10.616-5.591 33.976-25.266 41.405-25.266l6.892-.002c4.995 0 15.76 3.394 23.014 6.916.344 1.33.708 2.656 1.091 3.977l-12.686-1.286 13.67 11.261.997-3.651c6.526 19.331 16.935 37.491 29.489 53.248 13.735 17.241 31.144 33.137 51.852 46.292 5.47 3.47 12.311 3.022 17.234-.594 15.941-9.839 30.079-22.235 42.051-36.537z'/%3E%3Cpath fill='%23EF4136' d='M353.188 176.548c-9.285 10.181-20.099 19.302-32.242 26.678a4.549 4.549 0 01-5.182.166c-17.941-11.412-33.007-25.117-44.851-40.018-16.347-20.498-26.628-43.224-30.15-65.116-3.589-22.192-.232-43.556 10.815-60.913 4.351-6.862 9.916-13.107 16.693-18.507C283.853 6.43 301.644-.131 319.384.002c17.077.132 33.938 6.495 48.505 19.8 5.117 4.652 9.42 9.985 12.941 15.764 11.877 19.568 14.434 44.518 9.219 69.801-5.149 24.983-17.939 50.366-36.861 71.129v.052zM315.996 39.47c21.062 0 38.123 17.076 38.123 38.123 0 21.064-17.077 38.124-38.123 38.124-21.064 0-38.123-17.06-38.123-38.124-.016-21.063 17.059-38.123 38.123-38.123z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Two-Column Layout */
.experience-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

/* Left Column - Job Description */
.experience-description {
    padding-right: 1rem;
}

.experience-achievements {
    margin-top: 1rem;
}

.achievement-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    line-height: 1.7;
    padding: 0.5rem 0;
}

.achievement-item:last-child {
    margin-bottom: 0;
}

.achievement-icon {
    color: var(--accent-color);
    font-size: 1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.experience-item.active .achievement-icon {
    color: #48b0c5;
}

.achievement-item span {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Right Column - Skills Tags with DISTINGUISHED COLOR PALETTE */
.experience-skills {
    border-left: 2px solid rgba(85, 194, 218, 0.2);
    padding-left: 1.5rem;
}

.skills-category {
    margin-bottom: 1.5rem;
}

.skills-category:last-child {
    margin-bottom: 0;
}

.skills-category-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* DISTINGUISHED COLOR PALETTE - 4 Distinct Gradients */

/* BASE: Dark Technical Skills (1st tag in each category) */
.skill-tag {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(44, 62, 80, 0.3);
    border: 1px solid transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.skill-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(85, 194, 218, 0.2) 0%, rgba(72, 176, 197, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.skill-tag:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(44, 62, 80, 0.4);
}

.skill-tag:hover::before {
    opacity: 1;
}

/* LEVEL 1: Medium Technical Skills (2nd tag) */
.skill-tag:nth-child(2) {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
}

.skill-tag:nth-child(2)::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.skill-tag:nth-child(2):hover {
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.4);
}

/* LEVEL 2: Intermediate Skills (3rd tag) */
.skill-tag:nth-child(3) {
    background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%);
    color: white;
    box-shadow: 0 5px 20px rgba(22, 160, 133, 0.3);
}

.skill-tag:nth-child(3)::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.skill-tag:nth-child(3):hover {
    box-shadow: 0 15px 35px rgba(22, 160, 133, 0.4);
}

/* LEVEL 3: Management/Leadership Skills (4th+ tags) */
.skill-tag:nth-child(n+4) {
    background: linear-gradient(135deg, var(--accent-color) 0%, #48b0c5 100%);
    color: white;
    box-shadow: 0 5px 20px rgba(85, 194, 218, 0.3);
}

.skill-tag:nth-child(n+4)::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.skill-tag:nth-child(n+4):hover {
    box-shadow: 0 15px 35px rgba(85, 194, 218, 0.4);
}

/* CLASS-BASED OVERRIDES for manual assignment */
.skill-tag.secondary {
    background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%);
    color: white;
    box-shadow: 0 5px 20px rgba(22, 160, 133, 0.3);
}

.skill-tag.outline {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
}

.skill-tag.primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #48b0c5 100%);
    color: white;
    box-shadow: 0 5px 20px rgba(85, 194, 218, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .experience-content {
        grid-template-columns: 1fr 250px;
        gap: 1.5rem;
    }

    .experience-item {
        padding: 2rem;
        margin-bottom: 2.5rem;
    }

    .experience-title {
        font-size: 1.4rem;
    }

    .experience-company {
        font-size: 1.1rem;
    }

    .experience-skills {
        padding-left: 1rem;
    }
}

@media (max-width: 768px) {
    .experience .section-title {
        width: 100%;
    }

    .experience .section-content {
        width: 100%;
    }

    .experience-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .experience-item {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .experience-header {
        flex-direction: column;
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .experience-date-section {
        text-align: left;
        align-self: flex-start;
    }

    .experience-title-section {
        min-width: auto;
    }

    .experience-title {
        font-size: 1.3rem;
    }

    .experience-description {
        padding-right: 0;
    }

    .experience-skills {
        border-left: none;
        border-top: 2px solid rgba(85, 194, 218, 0.2);
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 1rem;
    }

    .achievement-item {
        gap: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .achievement-icon {
        font-size: 0.9rem;
    }

    .achievement-item span {
        font-size: 0.9rem;
    }

    .experience-location::before {
        width: 1rem;
        height: 1rem;
    }
}

@media (max-width: 480px) {
    .experience-item {
        padding: 1.2rem;
        border-left-width: 3px;
    }

    .experience-title {
        font-size: 1.2rem;
    }

    .experience-company {
        font-size: 1rem;
    }

    .experience-location {
        font-size: 0.85rem;
    }

    .experience-date-section {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .achievement-item {
        gap: 0.6rem;
    }

    .achievement-item span {
        font-size: 0.85rem;
    }

    .skills-category-title {
        font-size: 0.8rem;
    }

    .skill-tag {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
}