.about-experience {
   /* background-color: #070707; */
    padding-top: 20px;
}

.experience-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Adjust as needed */
    gap: 120px;
}

.experience-title h2 {
    font-family: 'Gotham Ultra', sans-serif;
    font-size: 24px;
    font-weight: 400;
    padding-top: 32px;
    color: #FFFFFF; /* Default color */
}

.experience-title .bracket {
    color: #6C2EFF;
}

/* Centers the heart icon visually with the 16px font */
.love-icon {
    height: 16px;           /* Matches your font-size */
    width: auto;
    display: inline-block;
    vertical-align: middle; /* Centers it vertically with the text */
    margin-left: 4 px;       /* Adds a small gap after the word 'do' */
    margin-bottom: 2px;     /* Fine-tunes the 'visual center' alignment */
}

/* Image reveal @Workshop section */
.reveal-img {
    position: fixed;         /* Floats above the layout */
    top: 0;
    left: 0;
    width: 240px;           /* Adjust size as needed */
    box-shadow: 0 4px 60px 12px rgba(0, 0, 0, 0.60);
    height: auto;
    pointer-events: none !important;    /* Ensures mouse clicks pass through to links */
    opacity: 0;              /* Hidden by default */
    z-index: 9999;            /* Sits above text but below cursor */
    transform: scale(0.8);   /* Pre-shrunk for the "pop" entrance */
    will-change: transform;
}

/* --- Certifications Styling --- */
.certification-badges {
    display: flex;
    align-items: center; /* Vertically centers badges with the text */
    gap: 32px;           /* Spacing between images */
    flex-wrap: wrap;     /* Ensures badges stack nicely on smaller screens */
}

.cert-badge {
    height: 100px;        /* Consistent height for all badges */
    width: auto;
    filter: grayscale(1); /* Optional: makes them look premium/minimalist */
    transition: filter 0.3s ease;
}

.cert-badge:hover {
    filter: grayscale(0); /* Brings color back on hover */
}

.more-text {
    font-family: 'Geist Mono', monospace;
    font-size: 16px;
    font-weight: 400;
    color: #727373;      /* Matches your role/meta grey */
    letter-spacing: 0.05em;
}

/* --- 4. MOBILE RESPONSIVENESS (Experiences Section) --- */
@media (max-width: 768px) {
    
    /* 1. COLLAPSE THE GRID: From side-by-side to vertical stack */
    .experience-grid {
        grid-template-columns: 1fr !important; 
        gap: 48px !important; /* Reduces the 120px desktop gap to a cleaner vertical space */
    }

    /* 2. TITLE ALIGNMENT: Ensures titles stay on one line at the top */
    .experience-title h2 {
        padding-top: 0 !important; /* Removes desktop offset */
        font-size: 20px !important; /* Scales down slightly for mobile screens */
        margin-bottom: 12px; /* Small gap before the content starts below */
    }

    /* 3. CERTIFICATION BADGES: Ensures badges don't overflow the phone width */
    .certification-badges {
        gap: 20px !important; /* Tighter spacing for mobile rows */
        justify-content: flex-start; /* Aligns with the text above */
    }

    .cert-badge {
        height: 70px !important; /* Scales down the logos for mobile view */
    }
    
}