@media screen and (max-width: 1350px) {
    .def h2, .mission h2, .value h2,
    .def p, .mission p, .value p {
        text-align: center !important;
    }

    .def, .mission, .value {
        padding: 10% 10% 0;
    }

    .value {
        padding-bottom: 10%;
    }

    .def p, .mission p, .value p {
        padding: 2% 15% 0;
    }

    .buttons {
        width: 20% !important;
    }
}

@media screen and (max-width: 1080px) {

    .def h2, .mission h2, .value h2 {
        font-size: 4rem !important;
    }

    .def p, .mission p, .value p {
        padding: 2% 10% 0;
        font-size: 1.8rem !important;
    }

    .buttons {
        width: 25% !important;
    }
}

@media screen and (max-width: 760px) {
    .def h2, .mission h2, .value h2 {
        font-size: 3.5rem !important;
    }

    .def p, .mission p, .value p {
        padding: 2% 5% 0;
    }

    .desktop {
        display: none !important;
    }

    .mobile {
        display: block !important;
    }
}

@media screen and (max-width: 570px) {
    .def h2, .mission h2, .value h2 {
        font-size: 3rem !important;
    }

    .def p, .mission p, .value p {
        padding: 2% 0 0;
    }

    .mobile h3 {
        font-size: 2.1rem !important;
    }

    .mobile p {
        font-size: 1.8rem !important;
        padding: 0 7% !important;
    }
}

@media screen and (max-width: 490px) {
    .def h2, .mission h2, .value h2 {
        font-size: 2.6rem !important;
    }

    .def p, .mission p, .value p {
        font-size: 1.5rem !important;
        line-height: 3rem;
    }
}