/*code by: Arif billah */

        .experience {
            padding: 100px 0;
            position: relative;
            background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9)), url('https://i.postimg.cc/L4kFVpHD/1-1.avif') center/cover no-repeat fixed;
            color: #fff;
            min-height: 100vh;
        }

        /* Animated background elements */
        .experience::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(46, 204, 113, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.15) 0%, transparent 40%);
            z-index: 0;
        }

        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            animation: experienceParticleFloat 30s infinite linear;
            opacity: 0.65 !important;
            filter: drop-shadow(0 0 5px currentColor);
            animation-fill-mode: both;
            will-change: transform, opacity;
        }

        @keyframes experienceParticleFloat {
            0% {
                transform: translate3d(0, 30vh, 0) rotate(0deg);
            }
            100% {
                transform: translate3d(100px, -80vh, 0) rotate(360deg);
            }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 2;
        }

        .section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 70px;
            position: relative;
            color: #fff;
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 5px;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            border-radius: 3px;
            box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
        }

        .timeline {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
            padding: 40px 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 100%;
            background: linear-gradient(to bottom, #3498db, #2ecc71);
            border-radius: 3px;
            box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 70px;
            width: 100%;
            display: flex;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .timeline-item.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .timeline-item:nth-child(odd) {
            justify-content: flex-start;
        }

        .timeline-item:nth-child(even) {
            justify-content: flex-end;
        }

        .timeline-content {
            position: relative;
            width: calc(50% - 60px);
            padding: 30px;
            background: rgba(20, 20, 30, 0.7);
            backdrop-filter: blur(8px);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }

        .timeline-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
            z-index: -1;
        }

        .timeline-item:nth-child(odd) .timeline-content {
            border-left: 4px solid #3498db;
            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
        }

        .timeline-item:nth-child(even) .timeline-content {
            border-right: 4px solid #2ecc71;
            box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3);
        }

        .timeline-content:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }

        .timeline-icon {
            position: absolute;
            top: -20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            box-shadow: 0 0 0 8px rgba(20, 20, 30, 0.8);
            z-index: 2;
        }

    .timeline-item:nth-child(odd) .timeline-icon {
    right: -40px;   /* closer to box */
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.timeline-item:nth-child(even) .timeline-icon {
    left: -40px;    /* closer to box */
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}


        .timeline-date {
            font-size: 0.95rem;
            font-weight: 600;
            color: #3498db;
            margin-bottom: 15px;
            display: inline-block;
            padding: 5px 15px;
            background: rgba(52, 152, 219, 0.1);
            border-radius: 20px;
            border: 1px solid rgba(52, 152, 219, 0.3);
        }

        .timeline-item:nth-child(even) .timeline-date {
            color: #2ecc71;
            background: rgba(46, 204, 113, 0.1);
            border: 1px solid rgba(46, 204, 113, 0.3);
        }

        .timeline-content h3 {
            margin-bottom: 15px;
            color: #fff;
            font-size: 1.6rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .timeline-content p {
            margin-bottom: 15px;
            color: #e0e0e0;
            line-height: 1.7;
        }

        .timeline-content p b {
            color: #fff;
            font-weight: 600;
        }

        .timeline-content ul {
            padding-left: 20px;
            margin-bottom: 20px;
        }

        .timeline-content li {
            margin-bottom: 10px;
            color: #e0e0e0;
            position: relative;
        }

        .timeline-content li::before {
            content: '▹';
            color: #3498db;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

        .timeline-item:nth-child(even) .timeline-content li::before {
            color: #2ecc71;
        }

        .certificate-btn {
            background: linear-gradient(90deg, #3498db, #2ecc71);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-top: 15px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        .certificate-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(52, 152, 219, 0.4);
            background: linear-gradient(90deg, #2ecc71, #3498db);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal.show {
            opacity: 1;
        }

        .modal-content {
            background: linear-gradient(135deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 30, 0.98));
            padding: 40px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
            text-align: center;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal.show .modal-content {
            transform: scale(1);
        }

        .modal-content h2 {
            margin-bottom: 20px;
            color: #fff;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .modal-content p {
            margin-bottom: 25px;
            color: #e0e0e0;
            line-height: 1.6;
        }

        #adminPassword {
            width: 100%;
            padding: 15px;
            margin-bottom: 25px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            font-size: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        #adminPassword:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .submit-btn, .cancel-btn {
            padding: 12px 30px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .submit-btn {
            background: linear-gradient(90deg, #3498db, #2ecc71);
            color: white;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        .cancel-btn {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .submit-btn:hover, .cancel-btn:hover {
            transform: translateY(-3px);
        }

        .submit-btn:hover {
            box-shadow: 0 7px 20px rgba(52, 152, 219, 0.4);
        }

        .cancel-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        /* Certificate Modal */
        #certificateModal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #certificateModal.show {
            opacity: 1;
        }

        .certificate-modal-content {
            max-width: 90%;
            max-height: 85%;
            background: #fff;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        #certificateModal.show .certificate-modal-content {
            transform: scale(1);
        }

        .certificate-modal-content img {
            max-width: 100%;
            max-height: 75vh;
            border-radius: 8px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
        }

        .close {
            position: absolute;
            top: 25px;
            right: 25px;
            color: #fff;
            font-size: 32px;
            cursor: pointer;
            transition: color 0.3s ease;
            z-index: 1002;
        }

        .close:hover {
            color: #3498db;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .section-title {
                font-size: 2.5rem;
            }
            
            .timeline-content {
                width: calc(55% - 40px);
            }
        }

        @media (max-width: 768px) {
            .experience {
                padding: 70px 0;
            }

            @media (min-width: 769px) {
                #experience .timeline {
                    max-width: 920px;
                    padding: 20px 0 20px 86px;
                }

                /* Keep the original Experience background image with the new card UI. */
                #experience.experience {
                    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9)), url('https://i.postimg.cc/L4kFVpHD/1-1.avif') center/cover no-repeat fixed !important;
                }

                /* Final Experience UI: clean professional timeline */
                #experience.experience {
                    padding: 110px 0 120px;
                    background-attachment: fixed !important;
                }

                #experience .section-title {
                    margin-bottom: 76px;
                    font-size: clamp(2rem, 4vw, 3.2rem);
                    letter-spacing: 1px;
                    text-transform: none;
                }

                #experience .section-title::after {
                    width: 74px;
                    height: 4px;
                    bottom: -18px;
                    background: #00f3ff;
                    box-shadow: 0 0 18px rgba(0, 243, 255, 0.8);
                }

                #experience .timeline {
                    max-width: 1080px;
                    padding: 18px 0 30px;
                }

                #experience .timeline::before {
                    left: 50%;
                    width: 2px;
                    transform: translateX(-50%);
                    background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.8) 10%, rgba(189, 0, 255, 0.8) 90%, transparent);
                    box-shadow: 0 0 16px rgba(0, 243, 255, 0.45);
                }

                #experience .timeline-item,
                #experience .timeline-item:nth-child(odd),
                #experience .timeline-item:nth-child(even) {
                    align-items: flex-start;
                    justify-content: space-between;
                    min-height: 220px;
                    margin-bottom: 34px;
                }

                #experience .timeline-content,
                #experience .timeline-item:nth-child(odd) .timeline-content,
                #experience .timeline-item:nth-child(even) .timeline-content {
                    width: calc(50% - 62px);
                    min-height: 190px;
                    padding: 28px 30px;
                    margin: 0;
                    border: 1px solid rgba(255, 255, 255, 0.16);
                    border-top: 3px solid #00f3ff;
                    border-right: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 18px;
                    background: rgba(8, 14, 29, 0.86);
                    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
                    backdrop-filter: blur(10px);
                }

                #experience .timeline-item:nth-child(even) .timeline-content {
                    border-top-color: #bd00ff;
                }

                #experience .timeline-content::before {
                    background: linear-gradient(135deg, rgba(0, 243, 255, 0.07), transparent 55%, rgba(189, 0, 255, 0.08));
                }

                #experience .timeline-content::after {
                    content: none;
                }

                #experience .timeline-content:hover {
                    transform: translateY(-7px);
                    border-color: rgba(0, 243, 255, 0.55);
                    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42), 0 0 24px rgba(0, 243, 255, 0.12);
                }

                #experience .timeline-item:nth-child(even) .timeline-content:hover {
                    border-color: rgba(189, 0, 255, 0.6);
                }

                #experience .timeline-icon,
                #experience .timeline-item:nth-child(odd) .timeline-icon,
                #experience .timeline-item:nth-child(even) .timeline-icon {
                    top: 26px;
                    left: 50%;
                    right: auto;
                    width: 54px;
                    height: 54px;
                    transform: translateX(-50%);
                    border: 5px solid rgba(5, 8, 20, 0.95);
                    background: linear-gradient(135deg, #00d9ff, #3158ff);
                    box-shadow: 0 0 0 1px rgba(0, 243, 255, 0.9), 0 0 22px rgba(0, 243, 255, 0.65);
                }

                #experience .timeline-item:nth-child(even) .timeline-icon {
                    background: linear-gradient(135deg, #bd00ff, #713bff);
                    box-shadow: 0 0 0 1px rgba(189, 0, 255, 0.9), 0 0 22px rgba(189, 0, 255, 0.65);
                }

                #experience .timeline-date {
                    margin-bottom: 14px;
                    padding: 7px 12px;
                    border-radius: 7px;
                    color: #9cefff;
                    background: rgba(0, 243, 255, 0.09);
                    border: 1px solid rgba(0, 243, 255, 0.28);
                    font-size: 0.76rem;
                    letter-spacing: 0.8px;
                    text-transform: uppercase;
                }

                #experience .timeline-item:nth-child(even) .timeline-date {
                    color: #e2b5ff;
                    background: rgba(189, 0, 255, 0.09);
                    border-color: rgba(189, 0, 255, 0.3);
                }

                #experience .timeline-content h3 {
                    margin-bottom: 10px;
                    font-size: clamp(1.25rem, 2.3vw, 1.65rem);
                }

                #experience .timeline-content p,
                #experience .timeline-content li {
                    color: rgba(239, 244, 255, 0.82);
                }

                @media (max-width: 768px) {
                    #experience.experience {
                        padding: 80px 0 90px;
                        background-attachment: scroll !important;
                    }

                    #experience .timeline {
                        padding: 10px 0 10px 48px;
                    }

                    #experience .timeline::before {
                        left: 18px;
                        transform: none;
                    }

                    #experience .timeline-item,
                    #experience .timeline-item:nth-child(odd),
                    #experience .timeline-item:nth-child(even) {
                        display: block;
                        min-height: 0;
                        margin-bottom: 24px;
                    }

                    #experience .timeline-content,
                    #experience .timeline-item:nth-child(odd) .timeline-content,
                    #experience .timeline-item:nth-child(even) .timeline-content {
                        width: 100%;
                        min-height: 0;
                        padding: 24px 21px;
                        border-top-width: 3px;
                        border-left: 1px solid rgba(255, 255, 255, 0.1);
                    }

                    #experience .timeline-icon,
                    #experience .timeline-item:nth-child(odd) .timeline-icon,
                    #experience .timeline-item:nth-child(even) .timeline-icon {
                        top: 25px;
                        left: -30px !important;
                        right: auto !important;
                        width: 42px;
                        height: 42px;
                        font-size: 1rem;
                    }
                }

                /* Premium card polish */
                #experience.experience .timeline-content {
                    isolation: isolate;
                    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
                }

                #experience.experience .timeline-content::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                    background:
                        linear-gradient(115deg, rgba(0, 243, 255, 0.11), transparent 34%),
                        linear-gradient(295deg, rgba(189, 0, 255, 0.1), transparent 36%);
                    pointer-events: none;
                }

                #experience.experience .timeline-content::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 12%;
                    width: 36%;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, #00f3ff, transparent);
                    box-shadow: 0 0 14px rgba(0, 243, 255, 0.8);
                    transition: width 0.35s ease, left 0.35s ease;
                }

                #experience.experience .timeline-item:nth-child(even) .timeline-content::after {
                    background: linear-gradient(90deg, transparent, #bd00ff, transparent);
                    box-shadow: 0 0 14px rgba(189, 0, 255, 0.8);
                }

                #experience.experience .timeline-content:hover::after {
                    left: 8%;
                    width: 58%;
                }

                #experience.experience .timeline-content h3 {
                    position: relative;
                    width: fit-content;
                    padding-bottom: 9px;
                }

                #experience.experience .timeline-content h3::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 34px;
                    height: 2px;
                    border-radius: 2px;
                    background: #00f3ff;
                }

                #experience.experience .timeline-item:nth-child(even) .timeline-content h3::after {
                    background: #bd00ff;
                }

                #experience.experience .timeline-content p b {
                    display: inline-flex;
                    align-items: center;
                    gap: 7px;
                    color: #dffcff;
                }

                #experience.experience .timeline-content p b::before {
                    content: '';
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    background: #00f3ff;
                    box-shadow: 0 0 10px #00f3ff;
                }

                #experience.experience .timeline-item:nth-child(even) .timeline-content p b::before {
                    background: #bd00ff;
                    box-shadow: 0 0 10px #bd00ff;
                }

                #experience.experience .timeline-content li {
                    padding-left: 4px;
                }

                #experience.experience .timeline-content li::before {
                    color: #00f3ff;
                }

                #experience.experience .timeline-item:nth-child(even) .timeline-content li::before {
                    color: #bd00ff;
                }

                #experience.experience .timeline-icon {
                    transition: transform 0.35s ease, box-shadow 0.35s ease;
                }

                #experience.experience .timeline-item:hover .timeline-icon {
                    transform: scale(1.1) rotate(6deg);
                }

                @media (max-width: 768px) {
                    #experience.experience .timeline-content::after {
                        left: 8%;
                        width: 48%;
                    }
                }

                #experience .timeline::before {
                    left: 28px;
                    transform: none;
                    width: 1px;
                    background: linear-gradient(to bottom, transparent, rgba(0,243,255,.85) 12%, rgba(189,0,255,.85) 88%, transparent);
                }

                #experience .timeline-item,
                #experience .timeline-item:nth-child(odd),
                #experience .timeline-item:nth-child(even) {
                    justify-content: flex-start;
                    width: 100%;
                    margin-bottom: 28px;
                }

                #experience .timeline-content,
                #experience .timeline-item:nth-child(odd) .timeline-content,
                #experience .timeline-item:nth-child(even) .timeline-content {
                    width: 100%;
                    min-height: 190px;
                    padding: 30px 34px 28px;
                    border: 1px solid rgba(255,255,255,.12);
                    border-left: 4px solid #00f3ff;
                    border-radius: 18px;
                    background: linear-gradient(110deg, rgba(16,27,47,.92), rgba(22,12,42,.84));
                }

                #experience .timeline-item:nth-child(even) .timeline-content {
                    border-left-color: #bd00ff;
                }

                #experience .timeline-content::after {
                    content: '0' counter(experience-card);
                    counter-increment: experience-card;
                    position: absolute;
                    right: 22px;
                    bottom: -12px;
                    color: rgba(255,255,255,.07);
                    font: 700 5.5rem/1 Orbitron, sans-serif;
                }

                #experience .timeline {
                    counter-reset: experience-card;
                }

                #experience .timeline-icon,
                #experience .timeline-item:nth-child(odd) .timeline-icon,
                #experience .timeline-item:nth-child(even) .timeline-icon {
                    left: -86px;
                    right: auto;
                    top: 32px;
                    width: 56px;
                    height: 56px;
                    border: 5px solid #080b18;
                    background: linear-gradient(135deg, #00d9ff, #3858ff);
                }

                #experience .timeline-item:nth-child(even) .timeline-icon {
                    background: linear-gradient(135deg, #bd00ff, #723cff);
                }

                #experience .timeline-content:hover {
                    transform: translateX(8px);
                }
            }

            /* Apply the mission-log theme at desktop sizes as well. */
            @media (min-width: 769px) {
                #experience.experience {
                    background:
                        radial-gradient(circle at 15% 15%, rgba(0, 243, 255, 0.12), transparent 30%),
                        radial-gradient(circle at 85% 80%, rgba(189, 0, 255, 0.14), transparent 32%),
                        linear-gradient(135deg, #050713 0%, #0a1020 52%, #10091d 100%);
                    isolation: isolate;
                }

                /* Alternate UI: editorial career cards with a clean vertical rail */
                #experience.experience {
                    background:
                        linear-gradient(180deg, rgba(5, 8, 20, 0.94), rgba(11, 7, 27, 0.96)),
                        url('https://i.postimg.cc/L4kFVpHD/1-1.avif') center/cover fixed;
                }

                #experience .section-title {
                    letter-spacing: 4px;
                    text-transform: uppercase;
                }

                #experience .timeline {
                    max-width: 920px;
                    padding: 20px 0 20px 86px;
                }

                #experience .timeline::before {
                    left: 28px;
                    transform: none;
                    width: 1px;
                    background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.85) 12%, rgba(189, 0, 255, 0.85) 88%, transparent);
                    box-shadow: 0 0 18px rgba(0, 243, 255, 0.45);
                }

                #experience .timeline-item,
                #experience .timeline-item:nth-child(odd),
                #experience .timeline-item:nth-child(even) {
                    justify-content: flex-start;
                    margin-bottom: 28px;
                    width: 100%;
                }

                #experience .timeline-content,
                #experience .timeline-item:nth-child(odd) .timeline-content,
                #experience .timeline-item:nth-child(even) .timeline-content {
                    width: 100%;
                    min-height: 190px;
                    padding: 30px 34px 28px;
                    margin: 0;
                    border: 1px solid rgba(255, 255, 255, 0.12);
                    border-left: 4px solid #00f3ff;
                    border-right: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 18px;
                    background: linear-gradient(110deg, rgba(16, 27, 47, 0.92), rgba(22, 12, 42, 0.84));
                    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
                }

                #experience .timeline-item:nth-child(even) .timeline-content {
                    border-left-color: #bd00ff;
                }

                #experience .timeline-content::before {
                    background: linear-gradient(120deg, rgba(0, 243, 255, 0.08), transparent 42%, rgba(189, 0, 255, 0.1));
                }

                #experience .timeline-content::after {
                    content: '0' counter(experience-card);
                    counter-increment: experience-card;
                    position: absolute;
                    right: 22px;
                    bottom: -12px;
                    color: rgba(255, 255, 255, 0.07);
                    font: 700 5.5rem/1 'Orbitron', sans-serif;
                    letter-spacing: -4px;
                }

                #experience .timeline {
                    counter-reset: experience-card;
                }

                #experience .timeline-date {
                    margin-bottom: 12px;
                    padding: 6px 13px;
                    border-radius: 8px;
                    font-size: 0.78rem;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                }

                #experience .timeline-content h3 {
                    margin-bottom: 10px;
                    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
                }

                #experience .timeline-content p,
                #experience .timeline-content li {
                    color: rgba(235, 241, 255, 0.78);
                }

                #experience .timeline-icon,
                #experience .timeline-item:nth-child(odd) .timeline-icon,
                #experience .timeline-item:nth-child(even) .timeline-icon {
                    left: -86px;
                    right: auto;
                    top: 32px;
                    width: 56px;
                    height: 56px;
                    border: 5px solid #080b18;
                    background: linear-gradient(135deg, #00d9ff, #3858ff);
                    box-shadow: 0 0 0 1px rgba(0, 243, 255, 0.8), 0 0 22px rgba(0, 243, 255, 0.55);
                }

                #experience .timeline-item:nth-child(even) .timeline-icon {
                    background: linear-gradient(135deg, #bd00ff, #723cff);
                    box-shadow: 0 0 0 1px rgba(189, 0, 255, 0.8), 0 0 22px rgba(189, 0, 255, 0.55);
                }

                #experience .timeline-content:hover {
                    transform: translateX(8px);
                    border-color: rgba(0, 243, 255, 0.52);
                    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42), 0 0 24px rgba(0, 243, 255, 0.1);
                }

                @media (max-width: 768px) {
                    #experience .timeline {
                        padding-left: 48px;
                    }

                    #experience .timeline::before {
                        left: 14px;
                    }

                    #experience .timeline-content,
                    #experience .timeline-item:nth-child(odd) .timeline-content,
                    #experience .timeline-item:nth-child(even) .timeline-content {
                        padding: 24px 22px;
                        border-left-width: 3px;
                    }

                    #experience .timeline-icon,
                    #experience .timeline-item:nth-child(odd) .timeline-icon,
                    #experience .timeline-item:nth-child(even) .timeline-icon {
                        left: -48px !important;
                        top: 28px;
                        width: 42px;
                        height: 42px;
                        font-size: 1rem;
                    }

                    #experience .timeline-content::after {
                        font-size: 4rem;
                    }

                    #experience .timeline-content:hover {
                        transform: translateY(-4px);
                    }
                }

                #experience.experience::before {
                    background:
                        linear-gradient(90deg, transparent 49.8%, rgba(0, 243, 255, 0.14) 50%, transparent 50.2%),
                        radial-gradient(circle at 50% 50%, rgba(0, 243, 255, 0.08), transparent 42%);
                }

                #experience .timeline::before {
                    width: 2px;
                    background: repeating-linear-gradient(to bottom, #00f3ff 0 14px, transparent 14px 24px);
                    box-shadow: 0 0 14px rgba(0, 243, 255, 0.75);
                }

                #experience .timeline-content {
                    width: calc(50% - 52px);
                    padding: 26px 28px;
                    background: linear-gradient(145deg, rgba(12, 25, 43, 0.92), rgba(16, 10, 34, 0.9));
                    border: 1px solid rgba(0, 243, 255, 0.3);
                    border-radius: 6px 22px 6px 22px;
                    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(0, 243, 255, 0.04);
                }

                #experience .timeline-item:nth-child(odd) .timeline-content {
                    border-left: 3px solid #00f3ff;
                    border-right: 1px solid rgba(0, 243, 255, 0.18);
                }

                #experience .timeline-item:nth-child(even) .timeline-content {
                    border-right: 3px solid #bd00ff;
                    border-left: 1px solid rgba(189, 0, 255, 0.18);
                }

                #experience .timeline-content::after {
                    content: 'ACTIVE LOG';
                    position: absolute;
                    top: 14px;
                    right: 18px;
                    color: rgba(0, 243, 255, 0.65);
                    font: 600 0.62rem/1 'Roboto', sans-serif;
                    letter-spacing: 1.5px;
                }

                #experience .timeline-item:nth-child(even) .timeline-content::after {
                    color: rgba(189, 0, 255, 0.7);
                }

                #experience .timeline-icon {
                    top: 30px;
                    width: 48px;
                    height: 48px;
                    border: 2px solid #07101e;
                    box-shadow: 0 0 0 4px rgba(0, 243, 255, 0.22), 0 0 22px rgba(0, 243, 255, 0.7);
                }

                #experience .timeline-item:nth-child(odd) .timeline-icon {
                    right: -75px;
                    background: linear-gradient(135deg, #00f3ff, #1473ff);
                }

                #experience .timeline-item:nth-child(even) .timeline-icon {
                    left: -75px;
                    background: linear-gradient(135deg, #bd00ff, #6d36ff);
                }

                #experience .timeline-content:hover {
                    transform: translateY(-6px);
                    border-color: rgba(0, 243, 255, 0.8);
                    box-shadow: 0 20px 45px rgba(0, 243, 255, 0.16);
                }
            }

            /* Experience refresh: a clean neon mission-log timeline */
            #experience.experience {
                background:
                    radial-gradient(circle at 15% 15%, rgba(0, 243, 255, 0.12), transparent 30%),
                    radial-gradient(circle at 85% 80%, rgba(189, 0, 255, 0.14), transparent 32%),
                    linear-gradient(135deg, #050713 0%, #0a1020 52%, #10091d 100%);
                isolation: isolate;
            }

            #experience.experience::before {
                background:
                    linear-gradient(90deg, transparent 49.8%, rgba(0, 243, 255, 0.14) 50%, transparent 50.2%),
                    radial-gradient(circle at 50% 50%, rgba(0, 243, 255, 0.08), transparent 42%);
                opacity: 0.9;
            }

            #experience .section-title {
                color: #e9fbff;
                text-shadow: 0 0 24px rgba(0, 243, 255, 0.45);
            }

            #experience .section-title::after {
                width: 150px;
                height: 3px;
                background: linear-gradient(90deg, transparent, #00f3ff 20%, #bd00ff 80%, transparent);
                box-shadow: 0 0 18px rgba(0, 243, 255, 0.7);
            }

            #experience .timeline {
                padding-top: 25px;
            }

            #experience .timeline::before {
                width: 2px;
                background: repeating-linear-gradient(
                    to bottom,
                    #00f3ff 0 14px,
                    transparent 14px 24px
                );
                box-shadow: 0 0 14px rgba(0, 243, 255, 0.75);
            }

            #experience .timeline-item {
                margin-bottom: 46px;
            }

            #experience .timeline-content {
                width: calc(50% - 52px);
                padding: 26px 28px;
                background: linear-gradient(145deg, rgba(12, 25, 43, 0.92), rgba(16, 10, 34, 0.9));
                border: 1px solid rgba(0, 243, 255, 0.3);
                border-radius: 6px 22px 6px 22px;
                box-shadow:
                    0 18px 40px rgba(0, 0, 0, 0.35),
                    inset 0 0 24px rgba(0, 243, 255, 0.04);
            }

            #experience .timeline-content::after {
                content: 'ACTIVE LOG';
                position: absolute;
                top: 14px;
                right: 18px;
                color: rgba(0, 243, 255, 0.65);
                font: 600 0.62rem/1 'Roboto', sans-serif;
                letter-spacing: 1.5px;
            }

            #experience .timeline-item:nth-child(even) .timeline-content::after {
                color: rgba(189, 0, 255, 0.7);
            }

            #experience .timeline-item:nth-child(odd) .timeline-content {
                border-left: 3px solid #00f3ff;
                border-right: 1px solid rgba(0, 243, 255, 0.18);
                box-shadow: -8px 16px 35px rgba(0, 243, 255, 0.08);
            }

            #experience .timeline-item:nth-child(even) .timeline-content {
                border-right: 3px solid #bd00ff;
                border-left: 1px solid rgba(189, 0, 255, 0.18);
                box-shadow: 8px 16px 35px rgba(189, 0, 255, 0.08);
            }

            #experience .timeline-content:hover {
                transform: translateY(-6px);
                border-color: rgba(0, 243, 255, 0.8);
                box-shadow: 0 20px 45px rgba(0, 243, 255, 0.16);
            }

            #experience .timeline-icon {
                top: 30px;
                width: 48px;
                height: 48px;
                border: 2px solid #07101e;
                box-shadow: 0 0 0 4px rgba(0, 243, 255, 0.22), 0 0 22px rgba(0, 243, 255, 0.7);
            }

            #experience .timeline-item:nth-child(odd) .timeline-icon {
                right: -75px;
                background: linear-gradient(135deg, #00f3ff, #1473ff);
            }

            #experience .timeline-item:nth-child(even) .timeline-icon {
                left: -75px;
                background: linear-gradient(135deg, #bd00ff, #6d36ff);
                box-shadow: 0 0 0 4px rgba(189, 0, 255, 0.22), 0 0 22px rgba(189, 0, 255, 0.7);
            }

            #experience .timeline-date {
                color: #00f3ff;
                background: rgba(0, 243, 255, 0.08);
                border-color: rgba(0, 243, 255, 0.35);
                letter-spacing: 0.5px;
            }

            #experience .timeline-item:nth-child(even) .timeline-date {
                color: #d58aff;
                background: rgba(189, 0, 255, 0.08);
                border-color: rgba(189, 0, 255, 0.35);
            }

            @media (max-width: 768px) {
                #experience.experience::before {
                    background: radial-gradient(circle at 50% 20%, rgba(0, 243, 255, 0.1), transparent 45%);
                }

                #experience .timeline {
                    padding-left: 34px;
                }

                #experience .timeline::before {
                    left: 12px;
                    transform: none;
                }

                #experience .timeline-item,
                #experience .timeline-item:nth-child(odd),
                #experience .timeline-item:nth-child(even) {
                    justify-content: flex-start;
                }

                #experience .timeline-content {
                    width: 100%;
                    margin-left: 0;
                    border-left: 3px solid #00f3ff !important;
                    border-right: 1px solid rgba(0, 243, 255, 0.18) !important;
                }

                #experience .timeline-item:nth-child(even) .timeline-content::after {
                    color: rgba(0, 243, 255, 0.65);
                }

                #experience .timeline-item .timeline-icon,
                #experience .timeline-item:nth-child(odd) .timeline-icon,
                #experience .timeline-item:nth-child(even) .timeline-icon {
                    left: -12px !important;
                    right: auto !important;
                    top: 30px;
                    width: 42px;
                    height: 42px;
                    transform: translateX(-50%);
                }
            }
            
            .section-title {
                font-size: 2.2rem;
                margin-bottom: 50px;
            }

            .timeline::before {
                left: 30px;
            }

            .timeline-item {
                justify-content: flex-start !important;
                margin-bottom: 50px;
            }

            .timeline-content {
                width: calc(100% - 70px);
                margin-left: 70px;
            }

          .timeline-icon {
    left: -40px !important;  /* closer on mobile too */
    right: auto !important;
    top: 0;
}

            
            .timeline-item:nth-child(odd) .timeline-content,
            .timeline-item:nth-child(even) .timeline-content {
                border-left: 4px solid #3498db;
                border-right: none;
            }
            
            .timeline-item:nth-child(even) .timeline-content li::before {
                color: #3498db;
            }
        }

        @media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }
            
            .timeline-content {
                padding: 20px;
            }
            
            .timeline-content h3 {
                font-size: 1.4rem;
            }
            
            .modal-content {
                padding: 25px;
            }
        }
        /* Responsive Design */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .section-title {
        font-size: 2.5rem;
    }
    
    .timeline-content {
        width: calc(55% - 40px);
    }
    
    .timeline-content h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .experience {
        padding: 70px 0;
        background-attachment: scroll;
    }
    
    .section-title {
        font-size: 2.2rem;
        margin-bottom: 50px;
    }

    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        justify-content: flex-start !important;
        margin-bottom: 50px;
    }

    .timeline-content {
        width: calc(100% - 70px);
        margin-left: 70px;
    }

    .timeline-icon {
        left: -40px !important;
        right: auto !important;
        top: 0;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        border-left: 4px solid #3498db;
        border-right: none;
    }
    
    .timeline-item:nth-child(even) .timeline-content li::before {
        color: #3498db;
    }
    
    .timeline-item:nth-child(even) .timeline-date {
        color: #3498db;
        background: rgba(52, 152, 219, 0.1);
        border: 1px solid rgba(52, 152, 219, 0.3);
    }
    
    .modal-content {
        width: 85%;
        padding: 30px;
    }
}

@media (min-width: 769px) {
    #experience.experience {
        background: radial-gradient(circle at 15% 15%, rgba(0,243,255,.12), transparent 30%), radial-gradient(circle at 85% 80%, rgba(189,0,255,.14), transparent 32%), linear-gradient(135deg, #050713 0%, #0a1020 52%, #10091d 100%);
        isolation: isolate;
    }

    #experience .timeline::before {
        width: 2px;
        background: repeating-linear-gradient(to bottom, #00f3ff 0 14px, transparent 14px 24px);
        box-shadow: 0 0 14px rgba(0,243,255,.75);
    }

    #experience .timeline-content {
        width: calc(50% - 52px);
        padding: 26px 28px;
        background: linear-gradient(145deg, rgba(12,25,43,.92), rgba(16,10,34,.9));
        border: 1px solid rgba(0,243,255,.3);
        border-radius: 6px 22px 6px 22px;
        box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 0 24px rgba(0,243,255,.04);
    }

    #experience .timeline-item:nth-child(odd) .timeline-content { border-left: 3px solid #00f3ff; }
    #experience .timeline-item:nth-child(even) .timeline-content { border-right: 3px solid #bd00ff; }

    #experience .timeline-content::after {
        content: 'ACTIVE LOG';
        position: absolute;
        top: 14px;
        right: 18px;
        color: rgba(0,243,255,.65);
        font: 600 .62rem/1 Roboto, sans-serif;
        letter-spacing: 1.5px;
    }

    #experience .timeline-icon {
        top: 30px;
        width: 48px;
        height: 48px;
        border: 2px solid #07101e;
        box-shadow: 0 0 0 4px rgba(0,243,255,.22), 0 0 22px rgba(0,243,255,.7);
    }

    #experience .timeline-item:nth-child(odd) .timeline-icon {
        right: -75px;
        background: linear-gradient(135deg, #00f3ff, #1473ff);
    }

    #experience .timeline-item:nth-child(even) .timeline-icon {
        left: -75px;
        background: linear-gradient(135deg, #bd00ff, #6d36ff);
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .timeline-content {
        padding: 20px;
        margin-left: 50px;
        width: calc(100% - 50px);
    }
    
    .timeline-content h3 {
        font-size: 1.4rem;
    }
    
    .timeline-icon {
        left: -30px !important;
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .modal-content {
        padding: 20px;
        width: 90%;
    }
    
    .modal-content h2 {
        font-size: 1.5rem;
    }
    
    .modal-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .submit-btn, .cancel-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .section-title {
        font-size: 1.6rem;
    }
    
    .timeline-content {
        padding: 15px;
        margin-left: 40px;
        width: calc(100% - 40px);
    }
    
    .timeline-content h3 {
        font-size: 1.3rem;
    }
    
    .timeline-date {
        font-size: 0.85rem;
    }
    
    .certificate-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

#experience.experience {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9)), url('https://i.postimg.cc/L4kFVpHD/1-1.avif') center/cover no-repeat fixed !important;
}

/* Final UI override - intentionally outside all earlier media blocks. */
#experience.experience .timeline {
    max-width: 1040px !important;
    padding: 24px 0 24px 92px !important;
}

#experience.experience .timeline::before {
    left: 30px !important;
    transform: none !important;
    width: 2px !important;
    height: calc(100% - 20px) !important;
    background: linear-gradient(to bottom, transparent, #00f3ff 15%, #bd00ff 85%, transparent) !important;
    box-shadow: 0 0 18px rgba(0, 243, 255, 0.7) !important;
}

#experience.experience .timeline-item,
#experience.experience .timeline-item:nth-child(odd),
#experience.experience .timeline-item:nth-child(even) {
    display: block !important;
    width: 100% !important;
    margin: 0 0 28px !important;
    min-height: 0 !important;
}

#experience.experience .timeline-content,
#experience.experience .timeline-item:nth-child(odd) .timeline-content,
#experience.experience .timeline-item:nth-child(even) .timeline-content {
    width: 100% !important;
    min-height: 180px !important;
    margin: 0 !important;
    padding: 30px 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-left: 4px solid #00f3ff !important;
    border-radius: 18px !important;
    background: rgba(7, 16, 32, 0.9) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(10px);
}

#experience.experience .timeline-item:nth-child(even) .timeline-content {
    border-left-color: #bd00ff !important;
}

#experience.experience .timeline-content::after {
    content: none !important;
}

#experience.experience .timeline-content:hover {
    transform: translateX(8px) !important;
    border-color: rgba(0, 243, 255, 0.75) !important;
    box-shadow: 0 22px 44px rgba(0, 243, 255, 0.18) !important;
}

#experience.experience .timeline-icon,
#experience.experience .timeline-item:nth-child(odd) .timeline-icon,
#experience.experience .timeline-item:nth-child(even) .timeline-icon {
    left: -92px !important;
    right: auto !important;
    top: 28px !important;
    width: 56px !important;
    height: 56px !important;
    transform: none !important;
    border: 5px solid #070b18 !important;
    background: linear-gradient(135deg, #00d9ff, #3158ff) !important;
    box-shadow: 0 0 0 2px #00f3ff, 0 0 22px rgba(0, 243, 255, 0.65) !important;
}

#experience.experience .timeline-item:nth-child(even) .timeline-icon {
    background: linear-gradient(135deg, #bd00ff, #713bff) !important;
    box-shadow: 0 0 0 2px #bd00ff, 0 0 22px rgba(189, 0, 255, 0.65) !important;
}

@media (max-width: 768px) {
    #experience.experience .timeline {
        padding: 12px 0 12px 52px !important;
    }

    #experience.experience .timeline::before {
        left: 16px !important;
    }

    #experience.experience .timeline-content,
    #experience.experience .timeline-item:nth-child(odd) .timeline-content,
    #experience.experience .timeline-item:nth-child(even) .timeline-content {
        padding: 24px 20px !important;
        min-height: 0 !important;
    }

    #experience.experience .timeline-icon,
    #experience.experience .timeline-item:nth-child(odd) .timeline-icon,
    #experience.experience .timeline-item:nth-child(even) .timeline-icon {
        left: -52px !important;
        top: 24px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }
}