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

.mission{

    width:100%;

    background:linear-gradient(90deg,#083b87,#0b2f73);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:25px 40px;

    border-radius:8px;

    overflow:hidden;

    margin:80px auto;
}

/* ==========================
TITLE
========================== */

.mission-title{

    min-width:170px;

    text-align:center;
}

.mission-title h2{

    color:#f6c443;

    font-size:34px;

    font-weight:700;

}

/* ==========================
DIVIDER
========================== */

.divider{

    width:1px;

    height:70px;

    background:rgba(255,255,255,.18);

}

/* ==========================
MISSION ITEM
========================== */

.mission-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:0 25px;

    transition:.35s ease;

    cursor:pointer;

}

.mission-item:hover{

    transform:translateY(-8px);

}

/* ==========================
ICON
========================== */

.icon{

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    border:2px solid rgba(246,196,67,.25);

    background:rgba(255,255,255,.04);

}

.icon i{

    font-size:34px;

    color:#f6c443;

    transition:.35s;

}

.mission-item:hover .icon{

    background:#f6c443;

    transform:rotate(8deg) scale(1.08);

}

.mission-item:hover .icon i{

    color:#083b87;

}

/* ==========================
TEXT
========================== */

.mission-item p{

    color:#ffffff;

    font-size:17px;

    line-height:1.6;

    font-weight:500;

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:1100px){

.mission{

    flex-wrap:wrap;

    gap:30px;

    justify-content:center;

}

.divider{

    display:none;

}

.mission-title{

    width:100%;

}

}

@media(max-width:768px){

.mission{

    padding:30px 20px;

}

.mission-item{

    width:100%;

    justify-content:center;

    text-align:left;

}

.mission-title h2{

    font-size:28px;

}

}
/* ==========================
   MOBILE RESPONSIVE
========================== */

@media (max-width:768px){

    .mission{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:25px;
        padding:30px 20px;
        border-radius:0;
    }

    .mission-title{
        width:100%;
    }

    .mission-title h2{
        font-size:30px;
    }

    .mission-item{
        width:100%;
        flex-direction:column;
        justify-content:center;
        text-align:center;
        gap:15px;
        padding:10px 0;
    }

    .mission-item p{
        font-size:16px;
    }

    .icon{
        width:60px;
        height:60px;
    }

    .icon i{
        font-size:28px;
    }

    .divider{
        display:none;
    }
}