/*
================================================================
 VOLTCORE AFRICA
 SERVICES SECTION - PROFESSIONAL READABILITY
================================================================
*/


/* --------------------------------------------------------------
   SERVICES SECTION
-------------------------------------------------------------- */

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

    width:100% !important;

}


/* --------------------------------------------------------------
   SERVICE GRID
-------------------------------------------------------------- */

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

    display:grid !important;

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

    gap:18px !important;

    align-items:stretch !important;

}


/* --------------------------------------------------------------
   SERVICE CARDS
-------------------------------------------------------------- */

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

    position:relative !important;

    min-width:0 !important;

    min-height:0 !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:flex-start !important;

    padding:0 !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            145deg,
            #0d1b21,
            #071015
        ) !important;

    border:
        1px solid
        rgba(96,255,37,.16) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.30) !important;

}


/* --------------------------------------------------------------
   REMOVE THE REPEATED HOMEPAGE IMAGE
-------------------------------------------------------------- */

/*
   The service cards were displaying the entire homepage
   screenshot. Remove that image from the cards.

   This does NOT affect the main hero image.
*/

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

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

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

    display:none !important;

}


/* --------------------------------------------------------------
   ALSO HIDE IMAGE/Picture WRAPPERS INSIDE SERVICE CARDS
-------------------------------------------------------------- */

.service-card > picture,
.services-card > picture,
.service > picture,

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

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

    display:none !important;

}


/* --------------------------------------------------------------
   SERVICE CARD CONTENT
-------------------------------------------------------------- */

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

    padding:
        25px 23px !important;

}


/*
   If the card contains multiple divs, keep them readable.
*/

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

    min-width:0 !important;

}


/* --------------------------------------------------------------
   SERVICE ICON
-------------------------------------------------------------- */

.service-card .icon,
.services-card .icon,
.service .icon,

.service-icon {

    width:
        48px !important;

    height:
        48px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin-bottom:
        17px !important;

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

    border-radius:
        10px !important;

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

    color:
        #63ff25 !important;

    font-size:
        22px !important;

}


/* --------------------------------------------------------------
   SERVICE TITLE
-------------------------------------------------------------- */

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

    margin:
        0 0 10px 0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    font-size:
        19px !important;

    line-height:
        1.25 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.2px !important;

}


/* --------------------------------------------------------------
   SERVICE DESCRIPTION
-------------------------------------------------------------- */

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

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #b9c5ca !important;

    font-size:
        14px !important;

    line-height:
        1.65 !important;

}


/* --------------------------------------------------------------
   SERVICE CARD BUTTON
-------------------------------------------------------------- */

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

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        fit-content !important;

    min-height:
        38px !important;

    margin-top:
        20px !important;

    padding:
        9px 14px !important;

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

    border-radius:
        6px !important;

    color:
        #63ff25 !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

}


/* --------------------------------------------------------------
   SERVICE CARD HOVER
-------------------------------------------------------------- */

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

    border-color:
        rgba(98,255,37,.55) !important;

    transform:
        translateY(-3px) !important;

    transition:
        all .2s ease !important;

}


/* --------------------------------------------------------------
   DESKTOP
-------------------------------------------------------------- */

@media (min-width:1400px) {

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

        gap:
            20px !important;

    }

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

        padding:
            28px 26px !important;

    }

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

        font-size:
            20px !important;

    }

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

        font-size:
            14px !important;

    }

}


/* --------------------------------------------------------------
   TABLET
-------------------------------------------------------------- */

@media (max-width:1100px) {

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

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

        gap:
            15px !important;

    }

}


/* --------------------------------------------------------------
   MOBILE
-------------------------------------------------------------- */

@media (max-width:700px) {

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

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

    }


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

        padding:
            22px 20px !important;

    }


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

        font-size:
            19px !important;

    }


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

        font-size:
            14px !important;

        line-height:
            1.65 !important;

    }


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

        min-height:
            44px !important;

        padding:
            11px 16px !important;

    }

}


/* --------------------------------------------------------------
   SMALL PHONE
-------------------------------------------------------------- */

@media (max-width:480px) {

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

        padding:
            21px 18px !important;

    }


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

        font-size:
            18px !important;

    }


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

        font-size:
            14px !important;

    }

}