/* ========================================= */
/* INNER HERO */
/* ========================================= */

.inner-hero{

    position:relative;

    padding-top:220px;

    padding-bottom:140px;

    overflow:hidden;

}

/* GLOW */

.inner-hero::before{

    content:'';

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(126,211,33,0.10);

    top:-180px;

    right:-120px;

    filter:blur(120px);

}

/* CONTENT */

.inner-hero-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.inner-hero-content h1{

    font-size:72px;

    line-height:1.1;

    margin-bottom:28px;

    color:#222222;

}

.inner-hero-content p{

    font-size:20px;

    line-height:1.9;

    color:#7C7C7C;

}

/* ========================================= */
/* STORY SECTION */
/* ========================================= */

.story-section{

    position:relative;

    padding:120px 0;

}

/* VISUAL */

.about-visual{

    position:relative;

    width:420px;

    height:420px;

    margin:auto;

}

/* RINGS */

.about-ring{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1.5px solid rgba(126,211,33,0.18);

}

/* OUTER */

.about-ring-1{

    width:420px;

    height:420px;

    animation:spin 18s linear infinite;

}

/* MIDDLE */

.about-ring-2{

    width:300px;

    height:300px;

    border-style:dashed;

    animation:spinReverse 14s linear infinite;

}

/* INNER */

.about-ring-3{

    width:180px;

    height:180px;

    animation:spin 10s linear infinite;

}

/* CENTER */

.about-center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(255,255,255,0.85);

    backdrop-filter:blur(12px);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 30px rgba(0,0,0,0.05);

}

/* CENTER TEXT */

.about-center span{

    font-size:24px;

    font-weight:700;

    color:#7ED321;

}

/* FLOATING TAGS */

.about-floating{

    position:absolute;

    padding:14px 22px;

    border-radius:50px;

    background:rgba(255,255,255,0.78);

    backdrop-filter:blur(12px);

    font-size:14px;

    font-weight:600;

    color:#222222;

    box-shadow:0 10px 25px rgba(0,0,0,0.06);

}

/* POSITIONS */

.floating-1{

    top:40px;

    left:0;

}

.floating-2{

    top:90px;

    right:-10px;

}

.floating-3{

    bottom:70px;

    left:-10px;

}

.floating-4{

    bottom:30px;

    right:20px;

}

/* ========================================= */
/* MISSION SECTION */
/* ========================================= */

.mission-section{

    padding:120px 0;

}

/* GRID */

.mission-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

/* CARD */

.mission-card{

    padding:50px;

    border-radius:36px;

    background:rgba(255,255,255,0.78);

    backdrop-filter:blur(12px);

    box-shadow:0 10px 30px rgba(0,0,0,0.05);

}

/* ICON */

.mission-icon{

    width:72px;

    height:72px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:rgba(126,211,33,0.12);

}

.mission-icon i{

    font-size:30px;

    color:#7ED321;

}

/* TITLE */

.mission-card h3{

    font-size:32px;

    margin-bottom:18px;

}

/* TEXT */

.mission-card p{

    font-size:17px;

    line-height:1.8;

    color:#7C7C7C;

}

/* ========================================= */
/* PROCESS SECTION */
/* ========================================= */

.process-section{

    padding:120px 0;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:70px;

}

/* CARD */

.process-card{

    padding:45px 30px;

    border-radius:32px;

    background:rgba(255,255,255,0.78);

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,0.05);

    transition:0.35s ease;

}

.process-card:hover{

    transform:translateY(-10px);

}

/* NUMBER */

.process-card span{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#F4FBE7;

    color:#7ED321;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

    margin-bottom:24px;

}

/* TITLE */

.process-card h3{

    font-size:28px;

    margin-bottom:18px;

}

/* TEXT */

.process-card p{

    color:#7C7C7C;

    line-height:1.8;

}

/* ========================================= */
/* ANIMATIONS */
/* ========================================= */

@keyframes spin{

    from{

        transform:translate(-50%,-50%) rotate(0deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(360deg);

    }

}

@keyframes spinReverse{

    from{

        transform:translate(-50%,-50%) rotate(360deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(0deg);

    }

}