/*--------------------- About ---------------------*/

.about-section {
    display:flex;
    align-items:center;
    gap:80px;
}

.about-stats{
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-top:40px;
}

/*--------------------- About Image ---------------------*/

.about-image-wrapper{
    position:relative;
    display:inline-block;
    overflow:hidden;
    border-radius:14px;
    border:1px solid rgba(0,255,136,.45);
    box-shadow:
        0 0 20px rgba(0,255,136,.15);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/*--------------------- About Image Picture ---------------------*/

.about-image-wrapper img{
    display:block;
    width:100%;
    transition:
        transform .45s ease,
        filter .45s ease;
    filter:
        contrast(1.05)
        brightness(.96)
        saturate(.92);
}

/*--------------------- About Image Hover ---------------------*/

.about-image-wrapper:hover{
    transform:translateY(-6px);
    border-color:#00ff88;
    box-shadow:
        0 0 15px #00ff88,
        0 0 35px rgba(0,255,136,.45);
}

/*--------------------- About Image Zoom ---------------------*/

.about-image-wrapper:hover img{
    transform:scale(1.03);
}

/*--------------------- About Image Badge ---------------------*/

.status-badge{
    position:absolute;
    right:18px;
    bottom:18px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border:1px solid #00ff88;
    border-radius:8px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(6px);
    color:#00ff88;
    font-size:14px;
    font-family:monospace;
}

/*--------------------- About Image LED ---------------------*/

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#00ff88;
    box-shadow:
        0 0 10px #00ff88,
        0 0 18px rgba(0,255,136,.8);
    animation:statusPulse 2s infinite;
}

/*--------------------- About Image Animation ---------------------*/

@keyframes statusPulse{
    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.25);
        opacity:.65;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

/*--------------------- Stat Cards ---------------------*/

.stat-main{
    margin-top:18px;
    font-size:1.35rem;
    font-weight:700;
    color:#00ff88;
    letter-spacing:1px;
}

.stat-sub{
    margin-top:16px;
    color:#9b9b9b;
    font-size:.95rem;
    line-height:1.6;
}

/*--------------------- Stat Cards Hover ---------------------*/

.stat-card{
    padding:24px;
    background:rgba(5,10,8,.55);
    border:1px solid rgba(0,255,136,.25);
    border-radius:12px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.stat-card:hover{
    transform:translateY(-6px);
    border-color:#00ff88;
    box-shadow:
        0 0 15px rgba(0,255,136,.30),
        0 0 35px rgba(0,255,136,.12);
}