<div id="home-features" class="{% if section.settings.is_effect_apply%}no_animation_effect{% else %}animation_effect{% endif %} index-section home-section column_icon_main column_icon_text_{{ section.id }}" style="background-color: {{section.settings.col_icon_bg_color}};border-top:{{section.settings.top_border_color}} solid {{section.settings.top_border_width}}; border-bottom:{{section.settings.bottom_border_color}} solid {{section.settings.bottom_border_width}};">
  


  	<div class="wrapper wrapper--margins">
    <div class="home-features">
      {% if section.settings.title != blank %}
      <div class="{% if section.settings.enable_full_width == false %}grid{% else %}full_width_grid{% endif %}">
        <h{{section.settings.heading_tag}} style="font-weight:{{ section.settings.heading_tag_text_style1}}; color: {{section.settings.col_icon_title_color}};" class="home-section-title feature_content_{{ section.settings.header_position }}">{{ section.settings.title | escape }}<span style="background: {{section.settings.col_icon_title_color}};"></span></h{{section.settings.heading_tag}}>
      </div>
      {% endif %}
	  <div>
      	<ul class="flexGrid gridAlignTop centerColumns column_icon_mobile_{{section.settings.perline_mobile}} column_icon_text_grid{% if section.settings.enable_full_width == false %} grid{% else %} full_width_grid{% endif %}">

	  {% for block in section.blocks %}

        {% case block.settings.width %}
          {% when '25%' %}
            {%- assign grid_class = 'flexItem oneQuarter' -%}
          {% when '33%' %}
            {%- assign grid_class = 'flexItem oneThird' -%}
          {% when '50%' %}
            {%- assign grid_class = 'flexItem half' -%}
          {% when '66%' %}
            {%- assign grid_class = 'flexItemtwoThird' -%}
          {% when '75%' %}
            {%- assign grid_class = 'flexItem threeQuarter' -%}
          {% when '100%' %}
            {%- assign grid_class = 'flexItem full' -%}
        {% endcase %}


			<li data-animation_name="{{ block.settings.animation_name }}" data-animation_delay="{{ block.settings.animation_delay }}" class="{{ grid_class }}{% if block.settings.animation_name != 'noeffect' %} scroll_animation{% endif %}" {{ block.shopify_attributes }} style="animation-duration: {{ block.settings.animation_duration }};">
				<div class="text-{{ block.settings.sub_header_position }}">
                  {% if block.settings.icon_img == "icon" %}
                  	<i style="color: {{block.settings.col_icon_Icon_color}};" class="fa fa-{{ block.settings.home-features-icon | escape }} fa-3x "></i>
                  {% elsif block.settings.icon_img == "img" %}
                  	{% if block.settings.col_icon_img == blank %}
                      {%assign col_icon_img = 'icon-columns-icons-texts.png' | asset_url %}
                    {%else%}
                      {%assign col_icon_img = block.settings.col_icon_img | img_url:"" %}
                    {% endif %}
                  	<div class="col_icon_img"><img src="{{ col_icon_img }}" ></div> 
                  {% endif %}
                  <h{{block.settings.heading_tag}} class="h4" style="font-weight:{{ block.settings.sub_heading_tag_text_style}}; color: {{block.settings.col_icon_sub_title_color}};">{{ block.settings.home-features-title | escape }}</h{{block.settings.heading_tag}}>
                </div>
              <div class="content_general {% if block.settings.only_desktop %}hide_mobile{% endif %}" style="color: {{block.settings.col_icon_text_color}};text-align: {{block.settings.col_icon_text_position}};">{{ block.settings.home-features-content }}</div>
			</li>

      {% endfor %}

      </ul>
      </div>
    </div>
</div>

</div>

{% schema %}
{
    "name":"Columns Icons Texts",
    "settings":[
        {
            "type":"paragraph",
            "content":"Video Tutorial FR : [Columns Icons Texts by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/columns-icons-texts)"
        },
        {
            "type":"checkbox",
            "id":"enable_full_width",
            "label":"Enable Full Width",
            "default":false
        },
        {
            "type":"select",
            "id":"perline_mobile",
            "label":"Grid Per Line Mobile",
            "options":[
                {
                    "value":"1",
                    "label":"1"
                },
                {
                    "value":"2",
                    "label":"2"
                }
            ],
            "default":"1"
        },
        {
            "type":"color",
            "id":"col_icon_bg_color",
            "label":"Background Color",
            "default":"#fff"
        },
        {
            "type":"text",
            "id":"title",
            "label":"Title",
            "default":"Columns Icons Texts"
        },
        {
            "type":"select",
            "id":"heading_tag",
            "label":"Heading Tag",
            "default":"2",
            "options":[
                {
                    "value":"1",
                    "label":"H1"
                },
                {
                    "value":"2",
                    "label":"H2"
                },
                {
                    "value":"3",
                    "label":"H3"
                },
                {
                    "value":"4",
                    "label":"H4"
                },
                {
                    "value":"5",
                    "label":"H5"
                },
                {
                    "value":"6",
                    "label":"H6"
                }
            ]
        },
        {
            "type":"select",
            "id":"header_position",
            "label":"Title Position",
            "default":"left",
            "options":[
                {
                    "value":"left",
                    "label":"Left"
                },
                {
                    "value":"center",
                    "label":"Center"
                }
            ]
        },
        {
            "type":"select",
            "id":"heading_tag_text_style1",
            "label":"Title Font Style",
            "options":[
                {
                    "value":"300",
                    "label":"Lighter",
                    "group":"Font Style"
                },
                {
                    "value":"400",
                    "label":"Normal",
                    "group":"Font Style"
                },
                {
                    "value":"600",
                    "label":"Bold",
                    "group":"Font Style"
                },
                {
                    "value":"700",
                    "label":"Bolder",
                    "group":"Font Style"
                }
            ],
            "default":"300"
        },
        {
            "type":"color",
            "id":"col_icon_title_color",
            "label":"Title Color",
            "default":"#000"
        },
        {
            "type":"color",
            "id":"top_border_color",
            "label":"Top Border Color",
            "default":"#eeeeee"
        },
        {
            "type":"text",
            "id":"top_border_width",
            "label":"Top Border Width",
            "default":"0px"
        },
        {
            "type":"color",
            "id":"bottom_border_color",
            "label":"Bottom Border Color",
            "default":"#eeeeee"
        },
        {
            "type":"text",
            "id":"bottom_border_width",
            "label":"Bottom Border Width",
            "default":"0px"
        },
        {
            "type":"range",
            "id":"border_width",
            "label":"Border Mobile Width",
            "min":0,
            "max":10,
            "step":1,
            "unit":"px",
            "default":0
        },
        {
            "type":"color",
            "id":"border_color",
            "label":"Border Mobile Color",
            "default":"#fff"
        },
        {
          "type":"checkbox",
          "id":"is_effect_apply",
          "label":"Apply Section Effect",
          "default":false
        }
    ],
    "presets":[
        {
            "name":"Columns Icons Texts",
            "category":"Text",
            "blocks":[
                {
                    "type":"text"
                },
                {
                    "type":"text"
                },
                {
                    "type":"text"
                }
            ]
        }
    ],
    "blocks":[
        {
            "type":"text",
            "name":"Describe a feature",
            "settings":[
                {
                    "type":"select",
                    "id":"icon_img",
                    "label":"Icon Or Image",
                    "default":"icon",
                    "options":[
                        {
                            "value":"icon",
                            "label":"Icon"
                        },
                        {
                            "value":"img",
                            "label":"Image"
                        }
                    ]
                },
                {
                    "type":"select",
                    "id":"heading_tag",
                    "label":"Heading Tag",
                    "default":"4",
                    "options":[
                        {
                            "value":"1",
                            "label":"H1"
                        },
                        {
                            "value":"2",
                            "label":"H2"
                        },
                        {
                            "value":"3",
                            "label":"H3"
                        },
                        {
                            "value":"4",
                            "label":"H4"
                        },
                        {
                            "value":"5",
                            "label":"H5"
                        },
                        {
                            "value":"6",
                            "label":"H6"
                        }
                    ]
                },
                {
                    "type":"text",
                    "id":"home-features-icon",
                    "label":"Icon name",
                    "default":"credit-card",
                    "info":"[View the list of available icons](https://fortawesome.github.io/Font-Awesome/icons/)  Example: credit card"
                },
                {
                    "type":"color",
                    "id":"col_icon_Icon_color",
                    "label":"Icon Color",
                    "default":"#000"
                },
                {
                    "type":"image_picker",
                    "id":"col_icon_img",
                    "label":"Image"
                },
                {
                    "type":"text",
                    "id":"home-features-title",
                    "default":"100% Secure",
                    "label":"Subtitle"
                },
                {
                    "type":"select",
                    "id":"sub_header_position",
                    "label":"Subtitle Position",
                    "default":"left",
                    "options":[
                        {
                            "value":"left",
                            "label":"Left"
                        },
                        {
                            "value":"center",
                            "label":"Center"
                        }
                    ]
                },
                {
                    "type":"select",
                    "id":"sub_heading_tag_text_style",
                    "label":"Subtitle Font Style",
                    "options":[
                        {
                            "value":"300",
                            "label":"Lighter",
                            "group":"Font Style"
                        },
                        {
                            "value":"400",
                            "label":"Normal",
                            "group":"Font Style"
                        },
                        {
                            "value":"600",
                            "label":"Bold",
                            "group":"Font Style"
                        },
                        {
                            "value":"700",
                            "label":"Bolder",
                            "group":"Font Style"
                        }
                    ],
                    "default":"300"
                },
                {
                    "type":"color",
                    "id":"col_icon_sub_title_color",
                    "label":"Subtitle Color",
                    "default":"#000"
                },
                {
                    "type":"richtext",
                    "id":"home-features-content",
                    "label":"Text",
                    "default":"<p>This section doesn’t currently include any content. <b>Add content to this section using the sidebar.</b></p>",
                    "info":"Use basic HTML to format text"
                },
                {
                    "type":"checkbox",
                    "id":"only_desktop",
                    "label":"Text Only Desktop",
                    "default":false
                },
                {
                    "type":"select",
                    "id":"col_icon_text_position",
                    "label":"Text Position",
                    "default":"left",
                    "options":[
                        {
                            "value":"left",
                            "label":"Left"
                        },
                        {
                            "value":"center",
                            "label":"Center"
                        }
                    ]
                },
                {
                    "type":"color",
                    "id":"col_icon_text_color",
                    "label":"Text Color",
                    "default":"#000"
                },
                {
                    "type":"select",
                    "id":"width",
                    "label":"Container width",
                    "default":"33%",
                    "options":[
                        {
                            "value":"25%",
                            "label":"25%"
                        },
                        {
                            "value":"33%",
                            "label":"33%"
                        },
                        {
                            "value":"50%",
                            "label":"50%"
                        },
                        {
                            "value":"66%",
                            "label":"66%"
                        },
                        {
                            "value":"75%",
                            "label":"75%"
                        },
                        {
                            "value":"100%",
                            "label":"100%"
                        }
                    ]
                },
                {
                    "type": "select",
                    "id": "animation_name",
                    "label": "Animation Effect",
                    "default": "noeffect",
                    "options": [
                      {
                        "label": "No Effect",
                        "value": "noeffect"
                      },
                      {
                        "label": "bounce",
                        "value": "bounce"
                      },
                      {
                        "label": "flash",
                        "value": "flash"
                      },
                      {
                        "label": "pulse",
                        "value": "pulse"
                      },
                      {
                        "label": "rubberBand",
                        "value": "rubberBand"
                      },
                      {
                        "label": "shake",
                        "value": "shake"
                      },
                      {
                        "label": "headShake",
                        "value": "headShake"
                      },
                      {
                        "label": "swing",
                        "value": "swing"
                      },
                      {
                        "label": "tada",
                        "value": "tada"
                      },
                      {
                        "label": "wobble",
                        "value": "wobble"
                      },
                      {
                        "label": "jello",
                        "value": "jello"
                      },
                      {
                        "label": "bounceIn",
                        "value": "bounceIn"
                      },
                      {
                        "label": "bounceInDown",
                        "value": "bounceInDown"
                      },
                      {
                        "label": "bounceInLeft",
                        "value": "bounceInLeft"
                      },
                      {
                        "label": "bounceInRight",
                        "value": "bounceInRight"
                      },
                      {
                        "label": "bounceInUp",
                        "value": "bounceInUp"
                      },
                      {
                        "label": "fadeIn",
                        "value": "fadeIn"
                      },
                      {
                        "label": "fadeInDown",
                        "value": "fadeInDown"
                      },
                      {
                        "label": "fadeInDownBig",
                        "value": "fadeInDownBig"
                      },
                      {
                        "label": "fadeInLeft",
                        "value": "fadeInLeft"
                      },
                      {
                        "label": "fadeInLeftBig",
                        "value": "fadeInLeftBig"
                      },
                      {
                        "label": "fadeInRight",
                        "value": "fadeInRight"
                      },
                      {
                        "label": "fadeInRightBig",
                        "value": "fadeInRightBig"
                      },
                      {
                        "label": "fadeInUp",
                        "value": "fadeInUp"
                      },
                      {
                        "label": "fadeInUpBig",
                        "value": "fadeInUpBig"
                      },
                      {
                        "label": "flipInX",
                        "value": "flipInX"
                      },
                      {
                        "label": "flipInY",
                        "value": "flipInY"
                      },
                      {
                        "label": "lightSpeedIn",
                        "value": "lightSpeedIn"
                      },
                      {
                        "label": "rotateIn",
                        "value": "rotateIn"
                      },
                      {
                        "label": "rotateInDownLeft",
                        "value": "rotateInDownLeft"
                      },
                      {
                        "label": "rotateInDownRight",
                        "value": "rotateInDownRight"
                      },
                      {
                        "label": "rotateInUpLeft",
                        "value": "rotateInUpLeft"
                      },
                      {
                        "label": "rotateInUpRight",
                        "value": "rotateInUpRight"
                      },
                      {
                        "label": "hinge",
                        "value": "hinge"
                      },
                      {
                        "label": "jackInTheBox",
                        "value": "jackInTheBox"
                      },
                      {
                        "label": "rollIn",
                        "value": "rollIn"
                      },
                      {
                        "label": "zoomIn",
                        "value": "zoomIn"
                      },
                      {
                        "label": "zoomInDown",
                        "value": "zoomInDown"
                      },
                      {
                        "label": "zoomInLeft",
                        "value": "zoomInLeft"
                      },
                      {
                        "label": "zoomInRight",
                        "value": "zoomInRight"
                      },
                      {
                        "label": "zoomInUp",
                        "value": "zoomInUp"
                      },
                      {
                        "label": "slideInDown",
                        "value": "slideInDown"
                      },
                      {
                        "label": "slideInLeft",
                        "value": "slideInLeft"
                      },
                      {
                        "label": "slideInRight",
                        "value": "slideInRight"
                      },
                      {
                        "label": "slideInUp",
                        "value": "slideInUp"
                      },
                      {
                        "label": "heartBeat",
                        "value": "heartBeat"
                      }
                    ]
                  },
                  {
                    "type": "select",
                    "id": "animation_duration",
                    "label": "Animation Duration",
                    "options": [
                      {
                        "value": "1s",
                        "label": "1s"
                      },
                      {
                        "value": "2s",
                        "label": "2s"
                      },
                      {
                        "value": "3s",
                        "label": "3s"
                      }
                    ],
                    "default": "1s"
                  },
                  {
                    "type": "select",
                    "id": "animation_delay",
                    "label": "Animation Delay",
                    "options": [
                      {
                        "value": "0",
                        "label": "0"
                      },
                      {
                        "value": "1",
                        "label": "1s"
                      },
                      {
                        "value": "2",
                        "label": "2s"
                      },
                      {
                        "value": "3",
                        "label": "3s"
                      },
                      {
                        "value": "4",
                        "label": "4s"
                      },
                      {
                        "value": "5",
                        "label": "5s"
                      },
                      {
                        "value": "6",
                        "label": "6s"
                      },
                      {
                        "value": "7",
                        "label": "7s"
                      },
                      {
                        "value": "8",
                        "label": "8s"
                      }
                    ],
                    "default": "0"
                }
            ]
        }
    ]
}
{% endschema %}


<style>
  @media only screen and (max-width: 767px){
      .column_icon_text_{{ section.id }} .home-features .column_icon_mobile_2>.flexItem {
		
        border-right-width: {{ section.settings.border_width }}px;
        border-bottom-width: {{ section.settings.border_width }}px;
		border-top-width: 0px;
	    border-left-width: 0px;
        border-style: solid;
        border-color: {{ section.settings.border_color }};
        
    }
    .column_icon_text_{{ section.id }} .home-features .column_icon_mobile_2>.flexItem:nth-last-child(-n+2){
    	border-bottom-width: 0px;
    }
    .column_icon_text_{{ section.id }} .home-features .column_icon_mobile_2>.flexItem:nth-child(even){
    	border-right-width:0px;
    }
  }
</style>