<style>
.industries_section {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 0;
    margin: 0 auto;
    max-width: 1280px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.column-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

.column-wrap {
    width: 100%;
    background-color: #f0f0f0;
}

.element-populated {
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
    padding: 20px 0 0;
}

.widget-container {
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    width: 100%;
}

.industries_section .heading-title {
    padding: 0;
    margin: 0;
    line-height: 1;
}

.industries_section .heading-title {
    color: #6e6e70;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.industries_section .section-container {
    max-width: 1440px;

}

.industries_section .flex-row {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    min-height: 150px;
    align-items: center;
}

.industries_section .flex-row .item {
    background-color: #f1f1f1;
    width: 23.333%;
    margin: 3px;
}

.industries_section .item-wrapper {
    -webkit-transition: background .3s, border .3s, -webkit-border-radius .3s, -webkit-box-shadow .3s;
    transition: background .3s, border .3s, -webkit-border-radius .3s, -webkit-box-shadow .3s;
    -o-transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, -webkit-border-radius .3s, -webkit-box-shadow .3s;
}

.afoliba-group-cta,
.afoliba-group-widget-call-to-action .afoliba-group-widget-container {
    overflow: hidden;
}

.afoliba-group-cta {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border-radius: 20px;
}


.afoliba-group-cta--skin-cover .afoliba-group-cta {
    display: block;
}

.afoliba-group-cta__bg-wrapper {
    z-index: 1;
    overflow: hidden;
}

.afoliba-group-cta--skin-cover .afoliba-group-cta__bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    width: 100%;
}

.afoliba-group-cta .afoliba-group-cta__bg-overlay-dark {
    mix-blend-mode: multiply;
}

.afoliba-group-cta__bg,
.afoliba-group-cta__bg-overlay,
.afoliba-group-cta__bg-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    z-index: 2;
}

.afoliba-group-cta__bg {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50%;
    z-index: 1;
}



.afoliba-group-cta .afoliba-group-cta__bg,
.afoliba-group-cta .afoliba-group-cta__bg-overlay,
.afoliba-group-cta .afoliba-group-cta__bg-overlay-dark {
    transition-duration: 1.5s;
}


.afoliba-group-cta:not(:hover) .afoliba-group-cta__bg-overlay {
    background-color: rgba(237, 15, 0, .73);
}

.afoliba-group-cta:not(:hover) .afoliba-group-cta__bg-overlay-dark {
    background-color: rgba(84, 89, 95, .81);
}


.afoliba-group-cta:hover .afoliba-group-cta__bg-overlay {
    background-color: rgba(12, 12, 12, .52);
}

.afoliba-group-cta:hover .afoliba-group-cta__bg-overlay-dark {
    background-color: rgb(180 191 204 / 81%)
}

.afoliba-group-cta__content {
    z-index: 1;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 35px;
    width: 100%;
}

.afoliba-group-cta__content,
.afoliba-group-cta__content-item {
    position: relative;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    color: #fff;
}

.afoliba-group-cta__content-item {
    width: 100%;
    margin: 0;
}

.afoliba-group-cta__content {
    min-height: 116px;
    text-align: center;
}

.afoliba-group-cta__title {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

@media (min-width: 768px) {
    .industries_section .item {
        /* width: 25%; */
    }

}

@media (max-width: 768px) {
    .flex-container2 {
        /* flex-direction: column; */
    }

    .industries_section .flex-row .item {
        width: 85%;
    }
}
</style>


<?php 

    // Get slider
    // $showSlider 
    $post_id = get_post_id_by_slug('featured-industries');
    if ($post_id) {
        $showIndustries = true;
    }  
?>
<?php if($showIndustries): ?>
<section class="industries_section">
    <div class="column-wrap element-populated">
        <div class="widget-container">
            <h2 class="heading-title"><?php the_field('section_title', $post_id) ?></h2>
        </div>
        <div class="section-container">
            <div class="flex-row">
                <?php
                    $items_list = get_field('items', $post_id);  
                ?>
                <?php foreach( $items_list as $item):?>
                <?php if($item['enable_item'] == "yes"): ?>
                <div class="item">
                    <div class="item-wrapper">
                        <a href="<?= $item['call_to_action_link']?>" class="afoliba-group-cta">
                            <div class="afoliba-group-cta__bg-wrapper">
                                <div class="afoliba-group-cta__bg afoliba-group-bg"
                                    style="background-image: url(<?= $item['cover_image'] ?>);">
                                </div>
                                <?php if($item['overlay_type'] == 'dark'): ?>
                                <div class="afoliba-group-cta__bg-overlay-dark"></div>
                                <?php elseif($item['overlay_type'] == 'red'): ?>
                                <div class="afoliba-group-cta__bg-overlay"></div>
                                <?php endif ?>
                            </div>
                            <div class="afoliba-group-cta__content">
                                <h2
                                    class="afoliba-group-cta__title afoliba-group-cta__content-item afoliba-group-content-item">
                                    <?= $item['item_title']?>
                                </h2>
                            </div>
                        </a>
                    </div>
                </div>
                <?php endif ?>
                <?php endforeach ?>
            </div>
        </div>
    </div>
</section>
<?php endif ?>