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

}

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

    body {
        font-size: 16px;
    }

    .home section {
        margin: 2em 0;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        font-size: 16px;
        padding: 2em 0.3em 0;
    }

    nav svg {
        width: 85px;
    }

    section.banner {
        padding: 2em;
    }

    h1, .h1 {
        font-size: 48px;
    }

    h2, .h2 {
        font-size: 40px;
    }

    .flex-logos img {
        max-height: 42px;
    }

    .media-body {
        margin: 1em;
    }

    .media img {
        max-width: 200px;
    }

    .quote h2 {
        font-size: 30px;
        padding: 2em;
        background: none;
    }

    .quick-contact a {
        max-height: 50px;
        margin-top: 1em;
    }

    .cat-list figure {
        max-height: 240px;
    }

    .flex-sec {
        flex-direction: column;
    }

    .second-sec .content {
        padding: 2em;
    }

    .third-sec .content {
        padding: 2em;
    }

    .third-sec {
        flex-direction: column-reverse;
    }

}

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

    body {
        font-size: 18px;
    }

    h2, .h2 {
        font-size: 30px;
    }

    h3, .h3 {
        font-size: 20px;
    }

    header {
        padding: 1em 0;
    }

    .home section {
        margin: 1em 0;
    }

    .quote h2 {
        font-size: 20px;
        padding: .5em;
        background: none;
    }

    .flex-logos {
        flex-direction: column;
        align-items: center;
    }

    .flex-logos img {
        margin-bottom: .5em;
    }

    .quick-contact div {
        flex-direction: column !important;
    }

    .quick-contact h3 {
        float: left;
        text-align: center;
    }

    .formulating p {
        margin: .5em;
        font-size: 20px;
    }

    #search-btn {
        display: none;
    }

    .media {
        flex-direction: column;
    }

    .media-body {
        margin: 1em 0;
    }

    .media img {
        float: left;
        width: 100%;
        align-self: flex-start !important;
        max-width: fit-content;
    }

    .cat-list figure {
        max-height: 420px;
        width: 100%;
    }

    .cat-list figure img {
        width: 100%;
    }

    #menu-footer a {
        font-size: 12px;
    }

    article {
        border: none;
    }

    .mob-reverse {
        flex-direction: column-reverse;
    }

    section.bg-right, section.bg-left {
        padding: 0;
    }

    .bg-right img,.bg-left img {
        margin-bottom: 2em;
    }

}

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

}