.aboutx-section{
    padding:60px 20px;
    color:#fff;
}

.aboutx-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    max-width:1200px;
    margin:auto;
    align-items:start;
}

/* TEXT */
.aboutx-text{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.aboutx-title{
    font-size:3rem;
    font-weight:900;
}

.aboutx-main{
    color:#e2e8f0;
    line-height:1.7;
}

.aboutx-sub{
    color:#94a3b8;
}

/* BADGES */
.aboutx-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.aboutx-badges span{
    padding:6px 12px;
    border-radius:999px;
    background:rgba(37,99,235,0.15);
    color:#60a5fa;
    font-size:12px;
}

/* MISSION */
.aboutx-mission{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.aboutx-card{
    padding:16px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
}

/* FRAME (NO STRETCH FIX) */
.aboutx-frame{
    position:relative;
    width:100%;
    aspect-ratio:16 / 10;
    border-radius:18px;
    overflow:hidden;
    background:#000;
}

.aboutx-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.aboutx-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

/* THUMB WRAPPER (LOCKED SIZE) */

.aboutx-thumb-wrapper{
    margin-top:12px;

    width:100%;
    height:70px;          /* 🔥 LOCK HEIGHT */
    overflow:hidden;      /* 🔥 PREVENT GROWTH */

    display:block;        /* IMPORTANT */
    position:relative;
}

/* TRACK (movement only, NEVER affects layout) */
.aboutx-thumb-track{
    display:flex;
    gap:10px;

    height:70px;          /* 🔥 LOCK HEIGHT */
    width:max-content;    /* allow scroll only */

    align-items:center;

    position:absolute;    /* 🔥 CRITICAL FIX */
    left:0;
    top:0;

    will-change:transform;
    transition:transform 0.6s ease;
}

/* THUMB FIXED SIZE (NO AUTO RESIZE EVER) */
.aboutx-thumb{
    flex:0 0 auto;

    width:85px;
    height:60px;

    min-width:85px;
    max-width:85px;
    min-height:60px;
    max-height:60px;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    opacity:0.5;

    border:2px solid transparent;

    display:block; /* 🔥 prevents inline spacing issues */
}

/* ACTIVE */
.aboutx-thumb.active{
    opacity:1;
    transform:scale(1.08);
    border-color:#60a5fa;
}


#aboutxMain{
    transition: opacity 0.4s ease, transform 0.4s ease;
    will-change: opacity, transform;
}

/* optional cinematic feel */
.aboutx-frame img{
    transform: scale(1);
}