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


.mission-section{

    padding:clamp(4rem,8vw,7rem) 0;

    background:var(--background);

    direction:rtl;

}



/* HEADER */


.mission-header{

    text-align:center;

    max-width:768px;

    margin:0 auto 3rem;

}



.section-label{

    display:inline-block;

    padding:.45rem 1rem;

    border-radius:var(--radius-round);

    background:rgba(96,165,250,.12);

    color:var(--secondary);

    font-family:var(--font-body);

    font-size:.9rem;

    margin-bottom:1rem;

}



.mission-header h2{

    font-family:var(--font-body);

    font-size:clamp(2rem,4vw,3rem);

    color:var(--text);

    margin-bottom:1rem;

}



.mission-header p{

    color:var(--text-muted);

    line-height:2;

    font-family:var(--font-body);

    font-size:1.1rem;

}



/* CARD */


.mission-card{

    position:relative;

    max-width:992px;

    margin:auto;

    padding:clamp(2.5rem,5vw,4rem);

    text-align:center;

    overflow:hidden;

    background:

    linear-gradient(

        145deg,

        #ffffff,

        var(--surface)

    );


    border:1px solid var(--border);

    border-radius:var(--radius-xl);


    box-shadow:

    0 25px 60px rgba(15,76,129,.08);

}



.mission-icon{

    width:60px;

    height:60px;

    margin:0 auto 1.5rem;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:rgba(37,99,235,.1);


    color:var(--secondary);

    font-family:var(--font-body);

    font-size:2rem;

}



.mission-card h3{

    color:var(--primary);

    font-family:var(--font-body);

    font-size:clamp(1.4rem,3vw,2rem);

    margin-bottom:1.2rem;

}



.mission-card p{

    max-width:768px;

    margin:auto;

    color:var(--text-muted);

    font-size:1.15rem;

    line-height:2.2;

}



/* BACKGROUND LIGHT EFFECT */


.mission-glow{

    position:absolute;

    width:350px;

    height:350px;

    left:-120px;

    bottom:-150px;


    background:

    radial-gradient(

        circle,

        rgba(96,165,250,.18),

        transparent 70%

    );


    filter:blur(20px);

}



/* WRAPPER FOR TWO CARDS */

.mission-cards{

    display:grid;

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

    align-items:stretch;

    gap:2rem;

    max-width:1100px;

    margin:auto;

}


.mission-cards .mission-card{

    max-width:none;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


@media (max-width:860px){

    .mission-cards{

        grid-template-columns:1fr;

    }

}


/* Slight color variation for the vision card icon */

.mission-card--vision .mission-icon{

    background:rgba(37,99,235,.14);

    color:var(--primary);

}