/* ======================================================
   VOLTCORE AFRICA
   LARGE READABLE DESIGN
   ====================================================== */

html {
    font-size: 18px !important;
    overflow-x: hidden !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 18px !important;
    line-height: 1.6 !important;

    background: #030709 !important;
    color: #f5f7f8 !important;
}


/* ======================================================
   PAGE
   ====================================================== */

main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}


/* ======================================================
   MAIN WEBSITE FRAME
   ====================================================== */

main > div,
main > section,
main .container,
main .wrapper,
main .content,
main .site-container {

    width:
        calc(100% - 40px) !important;

    max-width:
        1800px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/* ======================================================
   HERO
   ====================================================== */

.hero {
    padding:
        80px 0 !important;
}


.hero h1,
.hero-title,
.hero-heading {

    font-size:
        clamp(52px, 5vw, 86px) !important;

    line-height:
        .95 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -1.5px !important;
}


.hero p,
.hero-description,
.hero-text {

    max-width:
        760px !important;

    font-size:
        19px !important;

    line-height:
        1.65 !important;

}


/* ======================================================
   ALL SECTION HEADINGS
   ====================================================== */

section h2 {

    font-size:
        clamp(36px, 3vw, 48px) !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    margin-bottom:
        18px !important;

}


section h3 {

    font-size:
        22px !important;

    line-height:
        1.25 !important;

}


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

section p {

    font-size:
        17px !important;

    line-height:
        1.65 !important;

    color:
        #c3cdd1 !important;

}


/* ======================================================
   SERVICES
   ====================================================== */

.services,
.service-grid,
.services-grid {

    display:
        grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:
        24px !important;

}


/* ======================================================
   SERVICE CARD
   ====================================================== */

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

    min-width:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(98,255,37,.20) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            145deg,
            #102027,
            #071014
        ) !important;

    padding:
        0 !important;

}


/* ======================================================
   SERVICE CARD IMAGES
   ====================================================== */

.service-card > img,
.services-card > img,
.service > img,

.service-card .service-image,
.services-card .service-image,
.service .service-image {

    width:
        100% !important;

    height:
        180px !important;

    object-fit:
        cover !important;

}


/* ======================================================
   SERVICE CONTENT
   ====================================================== */

.service-card > div,
.services-card > div,
.service > div {

    padding:
        28px !important;

}


/* ======================================================
   SERVICE TITLE
   ====================================================== */

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

    font-size:
        22px !important;

    line-height:
        1.25 !important;

    margin:
        0 0 12px 0 !important;

    color:
        #ffffff !important;

}


/* ======================================================
   SERVICE DESCRIPTION
   ====================================================== */

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

    font-size:
        16px !important;

    line-height:
        1.65 !important;

    color:
        #c4cdd1 !important;

}


/* ======================================================
   PRODUCTS
   ====================================================== */

.products,
.product-grid,
.products-grid {

    display:
        grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:
        24px !important;

}


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

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

    min-width:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(98,255,37,.20) !important;

    border-radius:
        14px !important;

    background:
        #0a151b !important;

}


/* ======================================================
   PRODUCT IMAGE
   ====================================================== */

.product-card img,
.products-card img,
.product img {

    width:
        100% !important;

    height:
        210px !important;

    object-fit:
        cover !important;

}


/* ======================================================
   PRODUCT CONTENT
   ====================================================== */

.product-card > div,
.products-card > div,
.product > div {

    padding:
        25px !important;

}


/* ======================================================
   PRODUCT TITLE
   ====================================================== */

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

    font-size:
        21px !important;

    line-height:
        1.25 !important;

}


/* ======================================================
   PRODUCT DESCRIPTION
   ====================================================== */

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

    font-size:
        16px !important;

    line-height:
        1.6 !important;

}


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

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

    min-height:
        46px !important;

    padding:
        12px 20px !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

}


/* ======================================================
   HEADER
   ====================================================== */

header {

    min-height:
        82px !important;

}


header a,
nav a {

    font-size:
        15px !important;

    font-weight:
        700 !important;

}


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

@media (max-width:1100px) {

    main > div,
    main > section,
    main .container,
    main .wrapper,
    main .content,
    main .site-container {

        width:
            calc(100% - 28px) !important;

    }


    .services,
    .service-grid,
    .services-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:
            20px !important;

    }


    .products,
    .product-grid,
    .products-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:
            20px !important;

    }

}


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

@media (max-width:700px) {

    html {

        font-size:
            16px !important;

    }

    body {

        font-size:
            16px !important;

    }


    main {

        width:
            100% !important;

        max-width:
            100% !important;

    }


    main > div,
    main > section,
    main .container,
    main .wrapper,
    main .content,
    main .site-container {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding-left:
            14px !important;

        padding-right:
            14px !important;

    }


    /* HERO */

    .hero {

        padding:
            50px 14px !important;

    }


    .hero h1,
    .hero-title,
    .hero-heading {

        font-size:
            42px !important;

        line-height:
            .98 !important;

    }


    .hero p,
    .hero-description,
    .hero-text {

        font-size:
            16px !important;

    }


    /* SECTION HEADINGS */

    section h2 {

        font-size:
            32px !important;

    }


    section h3 {

        font-size:
            21px !important;

    }


    section p {

        font-size:
            16px !important;

    }


    /* SERVICES */

    .services,
    .service-grid,
    .services-grid {

        grid-template-columns:
            1fr !important;

        gap:
            18px !important;

    }


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

        width:
            100% !important;

    }


    .service-card > img,
    .services-card > img,
    .service > img,

    .service-card .service-image,
    .services-card .service-image,
    .service .service-image {

        height:
            200px !important;

    }


    .service-card > div,
    .services-card > div,
    .service > div {

        padding:
            25px !important;

    }


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

        font-size:
            22px !important;

    }


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

        font-size:
            16px !important;

    }


    /* PRODUCTS */

    .products,
    .product-grid,
    .products-grid {

        grid-template-columns:
            1fr !important;

        gap:
            18px !important;

    }


    .product-card img,
    .products-card img,
    .product img {

        height:
            auto !important;

    }


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

        font-size:
            21px !important;

    }


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

        font-size:
            16px !important;

    }


    /* BUTTONS */

    button,
    .btn,
    .button,
    .cta {

        min-height:
            48px !important;

        font-size:
            13px !important;

    }

}


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

@media (max-width:400px) {

    .hero h1,
    .hero-title,
    .hero-heading {

        font-size:
            36px !important;

    }


    section h2 {

        font-size:
            29px !important;

    }


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

        font-size:
            20px !important;

    }


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

        font-size:
            15px !important;

    }

}