:root {
    --main-heading-color: #1a86d5;
}

.about-section {
    margin: 58px 0 96px 0;
}

/* start  new mission */


.new-mission {
    /* margin: 0 auto; */
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    align-items: center;
    .new-mission-title {
        text-align: center;
        margin: 40px 0;
        color: var(--text-color);
        font-family: var(--second-font);
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: capitalize;
    }

    .cards {

        .p-item {
            padding: 10px 20px;

            .item {
                background: #fff;
                border-radius: 16px;
                height: 100%;
                padding:24px;
                border-radius: 16px;
                border: 1px solid rgba(211, 211, 211, 0.08);
                background: #FFF;
                box-shadow: 0px 1px 40px 0px rgba(0, 0, 0, 0.08);
                /* width: 378px; */
                width: 100%;
                .p-img {
                    width: 88px;
                    height: 88px;
                    background-color: var(--orange-color);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 20px 0 20px 0;
                    .tow{
                        display: none;
                    }
                    .one{
                        display: block;
                    }
                }

                h4 {
                    color: var(--text-color);
                    font-family: var(--main-font);
                    font-size: 32px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 30px;
                    margin: 24px 0 16px 0;
                }

                p {
                    color: #56585B;

                    font-family: var(--main-font);
                    margin-bottom: 8px;
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 24px;
                    letter-spacing: normal;
                    text-align: left;
                    color: rgba(14, 17, 20, 0.7);
                    /* width: 329px; */
                }


                &:hover {
                    background:var(--text-color);
                    transition: all 0.3s ease;
                    .p-img {

                        /* background-color: var(--text-color); */
                        .one{
                            display: none;
                        }
                        /* .tow{
                            display: none;
                        } */
                         .one{
                            display: block;
                         }


                    }

                    h4 {
                        color: #fff;

                    }

                    p {
                        color: rgba(255, 255, 255, 0.80);


                    }



                }
            }
        }
    }
}


/* end  new mission */







.what-is-heading {
    font-family: var(--second-font);
    font-size: 32px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.64px;
    text-align: left;
    color: var(--text-color);
    margin-bottom: 16px;
}

.what-is-content,
.why-content {
    font-family: var(--main-font);

    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.78;
    letter-spacing: normal;
    text-align: left;
    color: rgba(14, 17, 20, 0.7);
    max-width: 67ch;
    margin-top: 8px;
}

.why-meta {
    margin: 72px 0 !important;
}

.why-list-container {
    margin-top: 8px;
}

.mission {
    font-family: var(--main-font);
    font-size: 24px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: var(--main-heading-color);

}

.content p {
    font-family: var(--main-font);
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.78;
    letter-spacing: normal;
    text-align: left;
    color: rgba(14, 17, 20, 0.7);
    max-width: 67ch;

}

.mission p {
    max-width: unset;
}

.content ul li {
    font-family: var(--main-font);
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.78;
    letter-spacing: normal;
    text-align: left;
    color: rgba(14, 17, 20, 0.7);
   list-style-image: url(../images/cr.svg);
}

.content-1 ul{
    padding: 0;
}

.content-1 ul li {
    font-family: var(--main-font);
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.78;
    letter-spacing: normal;
    text-align: left;
    color: rgba(14, 17, 20, 0.7);
    list-style: none;
}
   /* list-style-image: url(../images/cr.svg); *
   
}

.PRISMA {
    max-width: 66ch !important;
}

.vision-section {
    margin-bottom: 96px;
}

.vision {

    max-width: unset !important;
}



@media (max-width: 768px) {
    .about-section {
        margin-top: 32px;
    }

    .about-section {

        margin: 16px 0 !important;
    }

    .what-is-heading {

        font-size: 24px;
    }

    .what-is-content,
    .why-content {
        font-size: 14px;
        max-width: 53.5ch;
    }

    .what-image-container {
        display: block;
        max-width: 260px;
    }

    .why-image-container {
        display: block;

        max-width: 265px;

    }

    .PRISMA {
        max-width: 49ch !important;
    }

    .vision-section {
        margin-bottom: 48px;
    }

}

@media (max-width: 576px) {
    .about-section {
        margin-top: 24px;
    }

    .why-meta {
        margin: 16px 0;
    }

    .what-image-container {
        display: none;
    }

    .why-image-container {
        display: none;

    }

    .what-is-heading {

        font-size: 16px;
    }

    .what-is-content,
    .why-content {
        font-size: 12px;

    }

    .vision-section {
        margin-bottom: 40px
    }

}