/*
============================================================
 VOLTCORE AFRICA
 EXPANDED PRODUCT DETAILS
============================================================
*/


/* ==========================================================
   PRODUCT CARD
   ========================================================== */

.vc-expanded-product-card {

    /*
    IMPORTANT:
    Give the card enough vertical room for customers
    to actually read the information.
    */

    min-height: 330px !important;

    height: 330px !important;

    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

}


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

.vc-expanded-product-card
.vc-expanded-product-image {

    width: 100% !important;

    height: 125px !important;

    min-height: 125px !important;

    object-fit: cover !important;

    object-position: center !important;

    display: block !important;

}


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

.vc-expanded-product-card
.vc-expanded-product-content {

    flex: 1 1 auto !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-start !important;

    padding:
        14px 16px 16px 16px !important;

    box-sizing: border-box !important;

}


/* ==========================================================
   PRODUCT NAME
   ========================================================== */

.vc-expanded-product-card
.vc-expanded-product-name {

    display: block !important;

    font-size: 22px !important;

    line-height: 1.25 !important;

    font-weight: 900 !important;

    color: #ffffff !important;

    margin:
        0 0 9px 0 !important;

    padding: 0 !important;

    letter-spacing: 0 !important;

}


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

.vc-expanded-product-card
.vc-expanded-product-description {

    display: block !important;

    font-size: 17px !important;

    line-height: 1.5 !important;

    font-weight: 500 !important;

    color: #f0f4f5 !important;

    margin:
        0 0 13px 0 !important;

    padding: 0 !important;

}


/* ==========================================================
   PRODUCT BOTTOM AREA
   ========================================================== */

.vc-expanded-product-card
.vc-expanded-product-bottom {

    margin-top: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 10px !important;

    flex-wrap: wrap !important;

}


/* ==========================================================
   SPECIFICATION
   ========================================================== */

.vc-expanded-product-card
.vc-expanded-product-spec {

    display: inline-flex !important;

    align-items: center !important;

    min-height: 34px !important;

    box-sizing: border-box !important;

    font-size: 14px !important;

    line-height: 1.2 !important;

    font-weight: 900 !important;

    color: #79ed69 !important;

    background:
        #0b2516 !important;

    border:
        2px solid #43c63b !important;

    border-radius: 7px !important;

    padding:
        7px 10px !important;

}


/* ==========================================================
   VIEW PRODUCT BUTTON
   ========================================================== */

.vc-expanded-product-card
.vc-expanded-product-button {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 40px !important;

    box-sizing: border-box !important;

    padding:
        8px 14px !important;

    font-size: 14px !important;

    line-height: 1.2 !important;

    font-weight: 900 !important;

    color: #ffffff !important;

    background:
        transparent !important;

    border:
        2px solid #58d647 !important;

    border-radius: 7px !important;

    text-decoration: none !important;

    white-space: nowrap !important;

}


/* ==========================================================
   CARD HOVER
   ========================================================== */

.vc-expanded-product-card:hover {

    border-color:
        rgba(88, 214, 71, 0.70) !important;

}


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

.vc-expanded-service-card {

    min-height: 190px !important;

    height: 190px !important;

    overflow: visible !important;

    box-sizing: border-box !important;

}


/* SERVICE TITLE */

.vc-expanded-service-card
.vc-expanded-service-name {

    display: block !important;

    font-size: 20px !important;

    line-height: 1.3 !important;

    font-weight: 900 !important;

    color: #ffffff !important;

    margin:
        9px 0 8px 0 !important;

}


/* SERVICE DESCRIPTION */

.vc-expanded-service-card
.vc-expanded-service-description {

    display: block !important;

    font-size: 16px !important;

    line-height: 1.5 !important;

    font-weight: 500 !important;

    color: #edf2f4 !important;

}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1400px) {

    .vc-expanded-product-card {

        min-height: 350px !important;

        height: 350px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-image {

        height: 135px !important;

        min-height: 135px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-name {

        font-size: 23px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-description {

        font-size: 18px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-spec {

        font-size: 14px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-button {

        font-size: 14px !important;

    }


    .vc-expanded-service-card
    .vc-expanded-service-name {

        font-size: 21px !important;

    }


    .vc-expanded-service-card
    .vc-expanded-service-description {

        font-size: 17px !important;

    }

}


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

@media (max-width: 768px) {

    .vc-expanded-product-card {

        height: auto !important;

        min-height: 0 !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-image {

        height: auto !important;

        min-height: 0 !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-content {

        padding:
            16px 17px 18px 17px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-name {

        font-size: 22px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-description {

        font-size: 17px !important;

        line-height: 1.55 !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-bottom {

        align-items: stretch !important;

        flex-direction: column !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-spec {

        width: fit-content !important;

        font-size: 14px !important;

    }


    .vc-expanded-product-card
    .vc-expanded-product-button {

        width: 100% !important;

        min-height: 45px !important;

        font-size: 15px !important;

    }


    .vc-expanded-service-card {

        height: auto !important;

        min-height: 0 !important;

    }


    .vc-expanded-service-card
    .vc-expanded-service-name {

        font-size: 20px !important;

    }


    .vc-expanded-service-card
    .vc-expanded-service-description {

        font-size: 17px !important;

    }

}