/*
========================================================
 VOLTCORE AFRICA
 MOBILE VISIBILITY BOOST
========================================================
 Desktop is NOT changed.
 Mobile gets a larger, clearer presentation.
========================================================
*/


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

@media (max-width:699px) {

    html,
    body {

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        overflow-x:hidden !important;

        font-size:16px !important;

    }


    /*
       MAIN MOBILE PRESENTATION
       125% internal zoom
    */

    main {

        zoom:1.25 !important;

        width:
            80% !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

    }


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

    main p {

        font-size:
            1.08em !important;

        line-height:
            1.6 !important;

    }


    main h1 {

        font-size:
            clamp(
                36px,
                10vw,
                50px
            ) !important;

        line-height:
            1.0 !important;

    }


    main h2 {

        font-size:
            31px !important;

        line-height:
            1.08 !important;

    }


    main h3 {

        font-size:
            21px !important;

        line-height:
            1.2 !important;

    }


    /* ==================================================
       NAVIGATION
    ================================================== */

    nav {

        width:
            100% !important;

        display:
            flex !important;

        flex-wrap:
            wrap !important;

        justify-content:
            center !important;

        gap:
            9px 14px !important;

    }


    nav a {

        font-size:
            12px !important;

        font-weight:
            800 !important;

    }


    /* ==================================================
       BUTTONS
    ================================================== */

    main button,
    main .btn,
    main .button,
    main .cta,
    main a.button,
    main a.btn {

        min-height:
            48px !important;

        padding:
            13px 18px !important;

        font-size:
            12px !important;

        font-weight:
            800 !important;

    }


    /* ==================================================
       IMAGES
    ================================================== */

    main img {

        max-width:
            100% !important;

        height:
            auto !important;

    }


    /* ==================================================
       CARDS
    ================================================== */

    .service-card,
    .services-card,
    .service,
    .product-card,
    .products-card,
    .product {

        width:
            100% !important;

        box-sizing:
            border-box !important;

    }


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

    .service-card h3,
    .services-card h3,
    .service h3 {

        font-size:
            21px !important;

    }


    .service-card p,
    .services-card p,
    .service p {

        font-size:
            15px !important;

        line-height:
            1.6 !important;

    }


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

    .product-card h3,
    .products-card h3,
    .product h3 {

        font-size:
            21px !important;

    }


    .product-card p,
    .products-card p,
    .product p {

        font-size:
            15px !important;

        line-height:
            1.6 !important;

    }


    /* ==================================================
       SECTIONS
    ================================================== */

    section {

        scroll-margin-top:
            70px !important;

    }

}


/* ======================================================
   SMALL PHONES
====================================================== */

@media (max-width:420px) {

    main {

        zoom:
            1.25 !important;

        width:
            80% !important;

    }


    main h1 {

        font-size:
            35px !important;

    }


    main h2 {

        font-size:
            29px !important;

    }


    main h3 {

        font-size:
            20px !important;

    }


    main p {

        font-size:
            15px !important;

    }

}


/* ======================================================
   VERY SMALL PHONES
====================================================== */

@media (max-width:360px) {

    main {

        zoom:
            1.20 !important;

        width:
            83.333% !important;

    }

}