/*
============================================================
 VOLTCORE AFRICA
 PROFESSIONAL RESPONSIVE WEBSITE OVERRIDE
============================================================

IMPORTANT:

This file is an ADDITIVE visual layer.

It does NOT replace index.php.
It does NOT change the database.
It does NOT modify WiiConnect.
It does NOT modify Netcore.

============================================================
*/


/* ==========================================================
   GLOBAL RESET
========================================================== */

html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(57,255,20,.08),
            transparent 38%
        ),
        #030709 !important;

    color: #f4f7f8 !important;

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

    font-size: 15px !important;
    line-height: 1.55 !important;
}


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

img {
    max-width: 100%;
    height: auto;
}

picture {
    display: block;
    max-width: 100%;
}


/* ==========================================================
   LINKS
========================================================== */

a {
    -webkit-tap-highlight-color: transparent;
}


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

/*
   Use much more of the available desktop screen.
*/

main,
.site,
.page,
.home,
.homepage,
.content,
.container {
    max-width: 1600px !important;
}


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

header {
    width: 100% !important;
    min-height: 76px !important;

    background:
        rgba(3,7,9,.97) !important;

    border-bottom:
        1px solid rgba(110,255,40,.10) !important;

    backdrop-filter:
        blur(16px);

    position: relative;
    z-index: 1000;
}


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

header img {
    max-height: 58px;
    width: auto;
}

.logo,
.brand,
.brand-logo {
    font-weight: 900 !important;
}


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

nav {
    gap: 24px !important;
}

nav a {
    color: #d9e0e3 !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    white-space: nowrap;

    transition:
        color .2s ease,
        opacity .2s ease;
}

nav a:hover {
    color: #5dff1f !important;
}

nav a.active {
    color: #5dff1f !important;
}


/* ==========================================================
   QUOTE BUTTON
========================================================== */

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

    border-radius: 6px !important;

    font-weight: 800 !important;

    letter-spacing: .1px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}

button:hover,
.btn:hover,
.button:hover,
.quote:hover,
.cta:hover {

    transform:
        translateY(-1px);

}


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

.hero {
    width: 100% !important;

    margin: 0 !important;

    padding-top: 65px !important;
    padding-bottom: 65px !important;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(57,255,20,.05),
            transparent 35%
        );
}


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

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

    font-size:
        clamp(
            42px,
            5vw,
            76px
        ) !important;

    line-height:
        .98 !important;

    letter-spacing:
        -1px !important;

    font-weight:
        900 !important;
}


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

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

    max-width:
        680px !important;

    font-size:
        16px !important;

    line-height:
        1.65 !important;

    color:
        #c5ced2 !important;
}


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

section h2 {

    font-size:
        clamp(
            27px,
            3vw,
            39px
        ) !important;

    line-height:
        1.08 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.4px !important;

}


section h3 {

    font-size:
        18px !important;

    line-height:
        1.25 !important;

    font-weight:
        800 !important;

}


/* ==========================================================
   SECTION DESCRIPTION
========================================================== */

section p {

    color:
        #aebbc0 !important;

    line-height:
        1.55 !important;

}


/* ==========================================================
   SERVICE GRID
========================================================== */

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

    width:
        100% !important;

    display:
        grid !important;

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

    gap:
        16px !important;

}


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

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

    min-width:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(255,255,255,.08) !important;

    background:
        linear-gradient(
            145deg,
            rgba(13,26,32,.96),
            rgba(5,13,17,.98)
        ) !important;

    border-radius:
        10px !important;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.20) !important;

    transition:
        border-color .2s ease,
        transform .2s ease;

}


.service-card:hover,
.services-card:hover,
.service:hover,
.card:hover {

    border-color:
        rgba(91,255,31,.35) !important;

    transform:
        translateY(-2px);

}


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

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

    display:
        block;

    width:
        100%;

    height:
        auto;

    object-fit:
        cover;
}


/* ==========================================================
   CARD HEADINGS
========================================================== */

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

    font-size:
        16px !important;

    line-height:
        1.25 !important;

    margin-bottom:
        7px !important;

}


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

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

    font-size:
        12px !important;

    line-height:
        1.45 !important;

    color:
        #aebbc0 !important;

}


/* ==========================================================
   PRODUCT GRID
========================================================== */

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

    display:
        grid !important;

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

    gap:
        18px !important;

}


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

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

    min-width:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(255,255,255,.08) !important;

    background:
        #091218 !important;

    border-radius:
        10px !important;

}


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

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

    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;

    object-fit:
        cover !important;

}


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

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

    font-size:
        16px !important;

    line-height:
        1.25 !important;

}

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

    font-size:
        12px !important;

    line-height:
        1.45 !important;

}


/* ==========================================================
   GREEN ACCENTS
========================================================== */

.green,
.highlight,
.accent,
.kicker,
.label {

    color:
        #61ff24 !important;

}


/* ==========================================================
   BADGES
========================================================== */

.badge,
.tag,
.product-badge,
.spec {

    display:
        inline-block !important;

    color:
        #62ff25 !important;

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

    background:
        rgba(98,255,37,.05) !important;

    border-radius:
        5px !important;

    padding:
        5px 8px !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

}


/* ==========================================================
   MONITORING
========================================================== */

.monitoring,
.monitor,
.monitor-section {

    overflow:
        hidden !important;

}

.monitoring img,
.monitor img,
.monitor-section img {

    max-width:
        100% !important;

    height:
        auto !important;

}


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

button,
.btn,
.button,
.cta {

    min-height:
        38px;

    padding:
        10px 16px !important;

    font-size:
        11px !important;

}


/* ==========================================================
   CONTENT SPACING
========================================================== */

section {

    scroll-margin-top:
        90px;

}


/* ==========================================================
   DESKTOP 1600+
========================================================== */

@media (min-width: 1600px) {

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

        gap:
            18px !important;

    }

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

        gap:
            20px !important;

    }

}


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

@media (max-width: 1100px) {

    nav {

        gap:
            15px !important;

    }

    nav a {

        font-size:
            12px !important;

    }

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

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

    }

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

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

    }

}


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

@media (max-width: 760px) {

    body {

        font-size:
            14px !important;

    }


    /*
       Make the header compact.
    */

    header {

        min-height:
            64px !important;

    }


    /*
       Navigation can wrap instead of
       causing horizontal scrolling.
    */

    nav {

        width:
            100% !important;

        display:
            flex !important;

        flex-wrap:
            wrap !important;

        justify-content:
            center !important;

        gap:
            7px 12px !important;

        padding:
            8px 10px !important;

    }

    nav a {

        font-size:
            11px !important;

    }


    /*
       Hero
    */

    .hero {

        padding:
            45px 18px !important;

    }


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

        font-size:
            clamp(
                34px,
                10vw,
                48px
            ) !important;

        letter-spacing:
            -.5px !important;

    }


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

        font-size:
            14px !important;

        line-height:
            1.6 !important;

    }


    /*
       Sections
    */

    section {

        padding-left:
            16px !important;

        padding-right:
            16px !important;

    }


    section h2 {

        font-size:
            27px !important;

    }


    /*
       One service per row.
       Much easier to read on phones.
    */

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

        grid-template-columns:
            1fr !important;

        gap:
            12px !important;

    }


    /*
       One product per row.
    */

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

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

    }


    /*
       Cards
    */

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

        border-radius:
            9px !important;

    }


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

        font-size:
            17px !important;

    }


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

        font-size:
            13px !important;

        line-height:
            1.5 !important;

    }


    /*
       Buttons become finger-friendly.
    */

    button,
    .btn,
    .button,
    .cta {

        min-height:
            44px !important;

        padding:
            12px 17px !important;

        font-size:
            11px !important;

    }


    /*
       Images
    */

    img {

        max-width:
            100% !important;

    }

}


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

@media (max-width: 480px) {

    header {

        min-height:
            auto !important;

    }


    nav {

        gap:
            8px !important;

        padding:
            8px 6px !important;

    }


    nav a {

        font-size:
            10px !important;

    }


    .hero {

        padding:
            38px 14px !important;

    }


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

        font-size:
            34px !important;

    }


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

        font-size:
            13px !important;

    }


    section {

        padding-left:
            12px !important;

        padding-right:
            12px !important;

    }


    section h2 {

        font-size:
            25px !important;

    }


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

        font-size:
            16px !important;

    }


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

        font-size:
            12px !important;

    }


    button,
    .btn,
    .button,
    .cta {

        width:
            auto !important;

        min-height:
            44px !important;

    }

}


/* ==========================================================
   PREVENT OVERFLOW
========================================================== */

table,
pre,
iframe,
video {

    max-width:
        100% !important;

}


/* ==========================================================
   FOOTER
========================================================== */

footer {

    padding:
        40px 18px !important;

    font-size:
        11px !important;

    color:
        #78868c !important;

}


footer a {

    color:
        #aab6ba !important;

}


footer a:hover {

    color:
        #61ff24 !important;

}