/*==================================================
              MISSION & VISION SECTION
==================================================*/

.mission-vision-section{

    background:var(--light);

}

/*==============================
        Intro
==============================*/

.mission-intro{

    max-width:700px;

}

/*==============================
        Cards
==============================*/

.mission-vision-card{

    height:100%;

    display:flex;

    align-items:flex-start;

    gap:25px;

    padding:35px;

    background:var(--white);

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

    border-left:5px solid var(--primary);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.mission-vision-card:hover{

    transform:translateY(-8px);

    border-left-color:var(--secondary);

    box-shadow:var(--shadow-lg);

}

/*==============================
        Icon
==============================*/

.mission-vision-icon{

    width:65px;

    height:65px;

    min-width:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(11,93,59,.10);

    color:var(--primary);

    font-size:27px;

    transition:var(--transition);

}

.mission-vision-card:hover .mission-vision-icon{

    background:var(--primary);

    color:var(--white);

    transform:scale(1.08);

}

/*==============================
        Content
==============================*/

.mission-vision-label{

    display:block;

    margin-bottom:8px;

    color:var(--secondary);

    font-size:13px;

    font-weight:800;

    letter-spacing:1.5px;

}

.mission-vision-card h3{

    margin-bottom:15px;

    color:var(--dark);

    font-size:25px;

    font-weight:700;

}

.mission-vision-card p{

    margin:0;

    color:var(--text);

    line-height:1.8;

}

/*==============================
        Responsive
==============================*/

@media (max-width:768px){

    .mission-vision-card{

        padding:25px;

        gap:18px;

    }

    .mission-vision-icon{

        width:55px;

        height:55px;

        min-width:55px;

        font-size:22px;

    }

    .mission-vision-card h3{

        font-size:21px;

    }

}

@media (max-width:576px){

    .mission-vision-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .mission-vision-card p{

        font-size:15px;

    }

}