/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .metraf-main-section .metraf-container {
        max-width: 750px;
    }

    .trade-map {
        height: 380px;
    }

    .country-grid {
        gap: 15px;
    }

    .quote-wrapper {
        gap: 30px;

        padding: 25px;
    }

    .blog-grid {
        max-width: 700px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .metraf-main-section .metraf-container {
        padding-left: 16px;
        padding-right: 16px;
    }


    /* TRADE */

    .trade-network-section {
        padding-top: 40px;
    }

    .trade-heading h2 {
        font-size: 22px;
    }

    .trade-heading p {
        font-size: 9px;
    }


    /* MAP */

    .trade-map {
        height: 260px;

        border-width: 5px;
    }

    .map-filters {
        top: 8px;
        left: 8px;
    }

    .map-filters button {
        padding: 5px 8px;

        font-size: 7px;
    }

    .map-legend-box {
        left: 8px;
        bottom: 8px;
    }

    .countries-count {
        right: 8px;
        bottom: 8px;
    }

    .map-bottom-legend {
        flex-wrap: wrap;

        gap: 8px 15px;

        font-size: 7px;
    }


    /* DESCRIPTION */

    .global-description-section {
        padding: 30px 0 20px;
    }

    .global-description-section p {
        font-size: 9px;
    }


    /* COUNTRIES */

    .country-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .country-card {
        padding: 16px;
    }


    /* FAQ */

    .metraf-faq-section {
        padding: 35px 0 45px;
    }

    .faq-heading h2 {
        font-size: 22px;
    }

    .faq-heading p {
        font-size: 8px;
    }

    .faq-grid {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    /* QUOTE */

    .quote-section {
        padding: 10px 0 50px;
    }

    .quote-wrapper {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 20px 16px;
    }

    .quote-content h2 {
        font-size: 23px;
    }

    .quote-form-wrapper {
        padding: 15px;
    }


    /* BLOG */

    .metraf-blog-section {
        padding-bottom: 50px;
    }

    .blog-grid {
        grid-template-columns: 1fr;

        max-width: 360px;

        gap: 16px;
    }

    .blog-card img {
        height: 190px;
    }
    .blog-grid.blog-page .blog-card {
    display: block;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .trade-map {
        height: 220px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .vision-title {
        font-size: 26px;
    }

}