/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Child theme for Divi
Author: Biochar Club
Template: Divi
Version: 1.0.0
*/


/* =========================================================
   BIOCHAR CLUB CUSTOM CSS
   ========================================================= */


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


/* ---------------------------------------------------------
   BENEFIT IMAGE
   --------------------------------------------------------- */

.biochar-benefit-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.biochar-benefit-image .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 5px 10px rgba(0, 0, 0, 0.08);
}

.biochar-benefit-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 22px 22px 0 0 !important;
}


/* ---------------------------------------------------------
   BENEFIT GREEN TITLE BAR
   --------------------------------------------------------- */

.biochar-benefit-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0b3525 !important;
    border-radius: 0 0 22px 22px !important;
    overflow: hidden !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 5px 10px rgba(0, 0, 0, 0.08);
}

.biochar-benefit-title .et_pb_text_inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.biochar-benefit-title .et_pb_text_inner > * {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    transform: translateY(-5px) !important;
}

.biochar-benefit-title p,
.biochar-benefit-title span,
.biochar-benefit-title h1,
.biochar-benefit-title h2,
.biochar-benefit-title h3,
.biochar-benefit-title h4,
.biochar-benefit-title h5,
.biochar-benefit-title h6 {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
}


/* ---------------------------------------------------------
   BENEFIT DESCRIPTION
   --------------------------------------------------------- */

.biochar-benefit-description {
    display: block !important;
    width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
}

.biochar-benefit-description .et_pb_text_inner {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.biochar-benefit-description p {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   WHERE CAN BIOCHAR BE USED?
   ========================================================= */


/* ---------------------------------------------------------
   ROW LAYOUT
   --------------------------------------------------------- */

.biochar-use-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.biochar-use-row > .et_pb_column,
.biochar-use-card {
    flex: 0 0 calc((100% - 60px) / 7) !important;
    max-width: calc((100% - 60px) / 7) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Remove Divi module spacing inside each card column */

.biochar-use-card .et_pb_module {
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   CARD IMAGE
   --------------------------------------------------------- */

.biochar-use-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.biochar-use-image .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.10),
        0 5px 10px rgba(0, 0, 0, 0.10);
}

.biochar-use-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1.08 !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 22px 22px 0 0 !important;
}


/* ---------------------------------------------------------
   CARD TITLE BAR
   --------------------------------------------------------- */

.biochar-use-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0b3525 !important;
    border-radius: 0 0 22px 22px !important;
    overflow: hidden !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.10),
        0 5px 10px rgba(0, 0, 0, 0.10);
}

.biochar-use-title .et_pb_text_inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 10px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.biochar-use-title .et_pb_text_inner > * {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    transform: none !important;
}

.biochar-use-title p,
.biochar-use-title span,
.biochar-use-title h1,
.biochar-use-title h2,
.biochar-use-title h3,
.biochar-use-title h4,
.biochar-use-title h5,
.biochar-use-title h6 {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    transform: none !important;
}


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

@media only screen and (max-width: 980px) {

    /* Benefit cards */

    .biochar-benefit-title {
        min-height: 42px !important;
    }

    .biochar-benefit-title .et_pb_text_inner {
        min-height: 42px !important;
        padding: 5px 8px !important;
        font-size: 14px !important;
    }

    .biochar-benefit-title .et_pb_text_inner > * {
        transform: translateY(-5px) !important;
    }

    .biochar-benefit-description {
        margin-top: 14px !important;
    }


    /* Use cards */

    .biochar-use-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .biochar-use-row > .et_pb_column,
    .biochar-use-card {
        flex: 0 0 calc((100% - 30px) / 4) !important;
        max-width: calc((100% - 30px) / 4) !important;
    }

    .biochar-use-title,
    .biochar-use-title .et_pb_text_inner {
        height: 100px !important;
        min-height: 100px !important;
    }

    .biochar-use-title .et_pb_text_inner {
        padding: 8px 8px !important;
        font-size: 14px !important;
    }
}


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

@media only screen and (max-width: 767px) {

    /* Benefit cards */

    .biochar-benefit-image .et_pb_image_wrap,
    .biochar-benefit-image img {
        border-radius: 22px 22px 0 0 !important;
    }

    .biochar-benefit-title {
        min-height: 42px !important;
        border-radius: 0 0 22px 22px !important;
    }

    .biochar-benefit-title .et_pb_text_inner {
        min-height: 42px !important;
        padding: 5px 10px !important;
        font-size: 14px !important;
    }

    .biochar-benefit-title .et_pb_text_inner > * {
        transform: translateY(-5px) !important;
    }

    .biochar-benefit-description {
        margin-top: 12px !important;
    }


    /* Use cards */

    .biochar-use-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .biochar-use-row > .et_pb_column,
    .biochar-use-card {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }

    .biochar-use-image .et_pb_image_wrap,
    .biochar-use-image img {
        border-radius: 22px 22px 0 0 !important;
    }

    .biochar-use-title {
        height: 92px !important;
        min-height: 92px !important;
        border-radius: 0 0 22px 22px !important;
    }

    .biochar-use-title .et_pb_text_inner {
        height: 92px !important;
        min-height: 92px !important;
        padding: 8px 8px !important;
        font-size: 14px !important;
    }
}


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

@media only screen and (max-width: 479px) {

    .biochar-use-row {
        gap: 10px !important;
    }

    .biochar-use-row > .et_pb_column,
    .biochar-use-card {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }

    .biochar-use-title {
        height: 88px !important;
        min-height: 88px !important;
    }

    .biochar-use-title .et_pb_text_inner {
        height: 88px !important;
        min-height: 88px !important;
        font-size: 13px !important;
    }
}