<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Text_Stroke;

use EcafeAddons\EcafeElementLoad;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

class Ecafe_Infobox extends Widget_Base {

	public function get_name() {
		return 'ecafe-infobox';
	}

	public function get_title() {
		return esc_html__( 'Infobox', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-infobox-icon';
	}

	public function get_categories() {
		return array( 'essential' );
	}

	public function get_keywords() {
		return array( 'infobox', 'icon', 'box layout', 'iconic layout', 'list', 'info box', 'info', 'details box', 'information', 'card', 'hover card', 'card effect', 'hover effect' );
	}

	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}

	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}
	protected function register_controls() {

		$this->start_controls_section(
			'contentSection',
			array(
				'label' => esc_html__( 'Infobox', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'layout',
			array(
				'label'   => esc_html__( 'Layout', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'layout1',
				'options' => array(
					'layout1' => esc_html__( 'Layout 1', 'essential-classy-addons-for-elementor' ),
					'layout2' => esc_html__( 'Layout 2', 'essential-classy-addons-for-elementor' ),
					'layout3' => esc_html__( 'Layout 3', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'layout3Direction',
			array(
				'label'     => esc_html__( 'Effect', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'left',
				'options'   => array(
					'left'   => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
					'right'  => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
					'top'    => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
					'bottom' => esc_html__( 'Bottom', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'layout' => 'layout3',
				),
			)
		);
		$this->add_control(
			'iconImageText',
			array(
				'label'   => esc_html__( 'Type', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'icon',
				'options' => array(
					'icon'  => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
					'image' => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
					'text'  => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'iconLibrary',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'fas fa-star',
					'library' => 'solid',
				),
				'condition' => array(
					'iconImageText' => 'icon',
				),
			)
		);
		$this->add_control(
			'imageSelect',
			array(
				'label'      => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'default'    => array(
					'url' => '',
				),
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
				'condition'  => array(
					'iconImageText' => 'image',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'      => 'imageSelectThumbnail',
				'default'   => 'full',
				'exclude'   => array( 'custom' ),
				'condition' => array(
					'iconImageText' => 'image',
				),
			)
		);
		$this->add_control(
			'textSelect',
			array(
				'label'     => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'eca', 'essential-classy-addons-for-elementor' ),
				'dynamic'   => array( 'active' => true ),
				'condition' => array(
					'iconImageText' => 'text',
				),
			)
		);
		$this->add_control(
			'infoTitle',
			array(
				'label'       => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Title', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'infoTitleTag',
			array(
				'label'   => esc_html__( 'Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h1',
				'options' => \EcafeHelper::getHtmlTag(),
			)
		);
		$this->add_control(
			'infoTitleUnderlineEffect',
			array(
				'label'     => esc_html__( 'Underline Text Effect', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_control(
			'gutEffectType',
			array(
				'label'     => esc_html__( 'Effect', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'effect1',
				'options'   => array(
					'effect1'  => esc_html__( 'Effect 1', 'essential-classy-addons-for-elementor' ),
					'effect2'  => esc_html__( 'Effect 2', 'essential-classy-addons-for-elementor' ),
					'effect3'  => esc_html__( 'Effect 3', 'essential-classy-addons-for-elementor' ),
					'effect4'  => esc_html__( 'Effect 4', 'essential-classy-addons-for-elementor' ),
					'effect5'  => esc_html__( 'Effect 5', 'essential-classy-addons-for-elementor' ),
					'effect6'  => esc_html__( 'Effect 6', 'essential-classy-addons-for-elementor' ),
					'effect7'  => esc_html__( 'Effect 7', 'essential-classy-addons-for-elementor' ),
					'effect8'  => esc_html__( 'Effect 8', 'essential-classy-addons-for-elementor' ),
					'effect9'  => esc_html__( 'Effect 9', 'essential-classy-addons-for-elementor' ),
					'effect10' => esc_html__( 'Effect 10', 'essential-classy-addons-for-elementor' ),
					'effect11' => esc_html__( 'Effect 11', 'essential-classy-addons-for-elementor' ),
					'effect12' => esc_html__( 'Effect 12', 'essential-classy-addons-for-elementor' ),
					'effect13' => esc_html__( 'Effect 13', 'essential-classy-addons-for-elementor' ),
					'effect14' => esc_html__( 'Effect 14', 'essential-classy-addons-for-elementor' ),
					'effect15' => esc_html__( 'Effect 15', 'essential-classy-addons-for-elementor' ),
					'effect16' => esc_html__( 'Effect 16', 'essential-classy-addons-for-elementor' ),
					'effect17' => esc_html__( 'Effect 17', 'essential-classy-addons-for-elementor' ),
					'effect18' => esc_html__( 'Effect 18', 'essential-classy-addons-for-elementor' ),
					'effect19' => esc_html__( 'Effect 19', 'essential-classy-addons-for-elementor' ),
					'effect20' => esc_html__( 'Effect 20', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'infoTitleUnderlineEffect' => 'yes',
				),
			)
		);
		$this->add_control(
			'infoDesc',
			array(
				'label'       => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::WYSIWYG,
				'default'     => esc_html__( 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter your Description', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'buttonText',
			array(
				'label'       => esc_html__( 'Button Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Click Here', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Text', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'buttonLink',
			array(
				'label'       => esc_html__( 'Link', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => array( 'active' => true ),
				'placeholder' => esc_html__( '#', 'essential-classy-addons-for-elementor' ),
				'default'     => array(
					'url' => '#',
				),
			)
		);
		$this->add_control(
			'buttonLinkBox',
			array(
				'label'     => esc_html__( 'Box Link', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_control(
			'pinText',
			array(
				'label'       => esc_html__( 'Pin Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'New', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Pin Text', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_responsive_control(
			'boxMinHeight',
			array(
				'label'      => esc_html__( 'Min-Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 700,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'separator'  => 'before',
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper' => 'min-height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'boxAlign',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'separator' => 'before',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-inner' => 'align-items:{{VALUE}};',
					'{{WRAPPER}} .eca-info-wrapper.layout2 .eca-info-inner-one,{{WRAPPER}} .eca-info-wrapper.layout2 .eca-info-inner-two' => 'align-items:{{VALUE}};justify-content:{{VALUE}};',
				),
				'condition' => array(
					'layout' => array( 'layout1', 'layout2' ),
				),
			)
		);
		$this->add_responsive_control(
			'boxAlignJust',
			array(
				'label'     => esc_html__( 'Justify Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-inner' => 'justify-content:{{VALUE}};',
				),
				'condition' => array(
					'layout' => array( 'layout1' ),
				),
			)
		);
		$this->add_responsive_control(
			'boxTextAlignJust',
			array(
				'label'     => esc_html__( 'Text Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'   => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center' => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-inner' => 'text-align:{{VALUE}};',
				),
				'condition' => array(
					'layout' => array( 'layout1' ),
				),
			)
		);
		$this->end_controls_section();

		/*Tilt Effect Options*/
		include ECAFE_PATH . 'element/widgets/ecafe-tilt-options.php';

		/*Tippy Tooltip Options*/
		include ECAFE_PATH . 'element/widgets/ecafe-tippy-options.php';

		/*Notice panel*/
		$ecwidgetdemolink = esc_url( 'https://ecaddons.com/elements/info-box/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/info-box-widget-tutorial/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		/*
		style start*/
		/*icon*/
		$this->start_controls_section(
			'iconStyling',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'iconImageText' => 'icon',
				),
			)
		);
		$this->add_responsive_control(
			'iconPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconSize',
			array(
				'label'      => esc_html__( 'Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon i:before' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsIcontyle' );
		$this->start_controls_tab(
			'tabIconNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon i:before' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-icon',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIconHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-icon i:before' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-icon',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_control(
			'maskShapeIcon',
			array(
				'label'     => esc_html__( 'Mask Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'separator' => 'before',
				'dynamic'    => array(
					'active' => true,
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-icon-image-text.eca-icon' => 'mask-image: url({{URL}});-webkit-mask-image: url({{URL}});-webkit-mask-size: 100% 100%;-webkit-mask-repeat: no-repeat;',
				),
			)
		);
		$this->end_controls_section();
		/*icon*/

		/*image*/
		$this->start_controls_section(
			'imageStyling',
			array(
				'label'     => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'iconImageText' => 'image',
				),
			)
		);
		$this->add_responsive_control(
			'imagePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaxWidth',
			array(
				'label'      => esc_html__( 'Max Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-image' => 'max-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsImagetyle' );
		$this->start_controls_tab(
			'tabImageNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'imageBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-image',
			)
		);
		$this->add_responsive_control(
			'imageBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'imageShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-image',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'imageCssFilter',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-image',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabImageHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'imageBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-image',
			)
		);
		$this->add_responsive_control(
			'imageBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'imageShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-image',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'imageCssFilterH',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-image',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_control(
			'mask_shape_image',
			array(
				'label'     => esc_html__( 'Mask Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'separator' => 'before',
				'dynamic'    => array(
					'active' => true,
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-image' => 'mask-image: url({{URL}});-webkit-mask-image: url({{URL}});-webkit-mask-size: 100% 100%;-webkit-mask-repeat: no-repeat;',
				),
			)
		);
		$this->end_controls_section();
		/*image*/

		/*text*/
		$this->start_controls_section(
			'textStyling',
			array(
				'label'     => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'iconImageText' => 'text',
				),
			)
		);
		$this->add_responsive_control(
			'textPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'textMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'textTypo',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text',
			)
		);
		$this->start_controls_tabs( 'tabsTexttyle' );
		$this->start_controls_tab(
			'tabTextNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'textColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'textBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'textBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text',
			)
		);
		$this->add_responsive_control(
			'textBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'textShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'textTextShadowNorm',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'textTextStrokeN',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-icon-image-text.eca-text',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabTextHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'textColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-text' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'textBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-text',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'textBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-text',
			)
		);
		$this->add_responsive_control(
			'textBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'textShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-text',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'textTextShadowHover',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-text',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'textTextStrokeH',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-icon-image-text.eca-text',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*text*/

		/*title*/
		$this->start_controls_section(
			'titleStyling',
			array(
				'label' => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'titlePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'titleMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'titleTypo',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-title',
			)
		);
		$this->start_controls_tabs( 'tabsTitletyle' );
		$this->start_controls_tab(
			'tabTitleNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-title',
			)
		);
		$this->add_responsive_control(
			'titleBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowNorm',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'titleTextStrokeN',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-title',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabTitleHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title',
			)
		);
		$this->add_responsive_control(
			'titleBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowHover',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'titleTextStrokeH',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*title*/

		/*title underline*/
		$this->start_controls_section(
			'titleUnderlineStyling',
			array(
				'label'     => esc_html__( 'Title Underline Effect', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'infoTitleUnderlineEffect' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'gut128Start',
			array(
				'label'      => esc_html__( 'Starting Visibility', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-title' => 'background-size: {{SIZE}}% 100%;',
				),
				'condition'  => array(
					'gutEffectType' => array( 'effect1', 'effect2', 'effect8' ),
				),
			)
		);
		$this->add_responsive_control(
			'gut34679_14Start',
			array(
				'label'      => esc_html__( 'Starting Visibility', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-title' => 'background-size: 100% {{SIZE}}%;',
				),
				'condition'  => array(
					'gutEffectType' => array( 'effect3', 'effect4', 'effect6', 'effect7', 'effect9', 'effect10', 'effect11', 'effect12', 'effect13', 'effect14' ),
				),
			)
		);
		$this->add_responsive_control(
			'gut5CenterStart',
			array(
				'label'      => esc_html__( 'Center Starting Visibility', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-title' => 'background-size: {{SIZE}}% {{SIZE}}%;',
				),
				'condition'  => array(
					'gutEffectType' => 'effect5',
				),
			)
		);
		$this->add_responsive_control(
			'gut15_20Start',
			array(
				'label'      => esc_html__( 'Starting Visibility', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 10,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-title' => 'background-size:{{SIZE}}% {{gut15_20Height.SIZE}}px;',
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title' => 'background-size:100% {{gut15_20Height.SIZE}}px !important;',
				),
				'condition'  => array(
					'gutEffectType' => array( 'effect15', 'effect16', 'effect17', 'effect18', 'effect19', 'effect20' ),
				),
			)
		);
		$this->add_responsive_control(
			'gut15_20Height',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 5,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-title' => 'background-size:{{gut15_20Start.SIZE}}% {{SIZE}}px;',
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-title' => 'background-size:100% {{SIZE}}px !important;',
				),
				'condition'  => array(
					'gutEffectType' => array( 'effect15', 'effect16', 'effect17', 'effect18', 'effect19', 'effect20' ),
				),
			)
		);
		$this->add_control(
			'gut1267Deg',
			array(
				'label'     => esc_html__( 'Deg (0 - 360)', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 360,
				'step'      => 1,
				'default'   => 120,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image: linear-gradient({{VALUE}}deg,{{gut1267Color1.VALUE}},{{gut1267Color2.VALUE}});',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect1', 'effect2', 'effect6', 'effect7' ),
				),
			)
		);
		$this->add_control(
			'gut1267Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient({{gut1267Deg.VALUE}}deg,{{VALUE}},{{gut1267Color2.VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect1', 'effect2', 'effect6', 'effect7' ),
				),
			)
		);
		$this->add_control(
			'gut1267Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient({{gut1267Deg.VALUE}}deg,{{gut1267Color1.VALUE}},{{VALUE}});',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect1', 'effect2', 'effect6', 'effect7' ),
				),
			)
		);
		$this->add_control(
			'gut3Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to top,{{VALUE}},{{gut3Color2.VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => 'effect3',
				),
			)
		);
		$this->add_control(
			'gut3Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to top,{{gut3Color1.VALUE}},{{VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => 'effect3',
				),
			)
		);
		$this->add_control(
			'gut4Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to bottom,{{VALUE}},{{gut4Color2.VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => 'effect4',
				),
			)
		);
		$this->add_control(
			'gut4Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to bottom,{{gut4Color1.VALUE}},{{VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => 'effect4',
				),
			)
		);
		$this->add_control(
			'gut5Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:radial-gradient(circle,{{VALUE}} 0%,{{gut5Color2.VALUE}} 100%)',
				),
				'condition' => array(
					'gutEffectType' => 'effect5',
				),
			)
		);
		$this->add_control(
			'gut5Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:radial-gradient(circle,{{gut5Color1.VALUE}} 0%,{{VALUE}} 100%)',
				),
				'condition' => array(
					'gutEffectType' => 'effect5',
				),
			)
		);
		$this->add_control(
			'gut8Deg',
			array(
				'label'     => esc_html__( 'Deg (0 - 360)', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 360,
				'step'      => 1,
				'default'   => 135,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image: linear-gradient({{VALUE}}deg,{{gut8Color1.VALUE}},{{gut8Color2.VALUE}},{{gut8Color1.VALUE}},{{gut8Color2.VALUE}});',
				),
				'condition' => array(
					'gutEffectType' => 'effect8',
				),
			)
		);
		$this->add_control(
			'gut8Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient({{gut8Deg.VALUE}}deg,{{VALUE}},{{gut8Color2.VALUE}},{{VALUE}},{{gut8Color2.VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => 'effect8',
				),
			)
		);
		$this->add_control(
			'gut8Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient({{gut8Deg.VALUE}}deg,{{gut8Color1.VALUE}},{{VALUE}},{{gut8Color1.VALUE}},{{VALUE}});',
				),
				'condition' => array(
					'gutEffectType' => 'effect8',
				),
			)
		);
		$this->add_control(
			'gut9Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to top,{{VALUE}} 5px,{{gut9Color2.VALUE}} 5px)',
				),
				'condition' => array(
					'gutEffectType' => 'effect9',
				),
			)
		);
		$this->add_control(
			'gut9Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to top,{{gut9Color1.VALUE}} 5px,{{VALUE}} 5px)',
				),
				'condition' => array(
					'gutEffectType' => 'effect9',
				),
			)
		);
		$this->add_control(
			'gut10Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to bottom,{{VALUE}} 5px,{{gut10Color2.VALUE}} 5px)',
				),
				'condition' => array(
					'gutEffectType' => 'effect10',
				),
			)
		);
		$this->add_control(
			'gut10Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to bottom,{{gut10Color1.VALUE}} 5px,{{VALUE}} 5px)',
				),
				'condition' => array(
					'gutEffectType' => 'effect10',
				),
			)
		);
		$this->add_control(
			'gut11Color1',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to right,{{VALUE}} 100%,transparent 0)',
				),
				'condition' => array(
					'gutEffectType' => 'effect11',
				),
			)
		);
		$this->add_control(
			'gut12Color1',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to left,{{VALUE}} 100%,transparent 0)',
				),
				'condition' => array(
					'gutEffectType' => 'effect12',
				),
			)
		);
		$this->add_control(
			'gut1314Color1',
			array(
				'label'     => esc_html__( 'Color 1', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to top,{{VALUE}},{{gut1314Color2.VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect13', 'effect14' ),
				),
			)
		);
		$this->add_control(
			'gut1314Color2',
			array(
				'label'     => esc_html__( 'Color 2', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#e130e480',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to top,{{gut1314Color1.VALUE}},{{VALUE}})',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect13', 'effect14' ),
				),
			)
		);
		$this->add_control(
			'gut15161819Color1',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to right,{{VALUE}} 100%,transparent 0)',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect15', 'effect16', 'effect18', 'effect19' ),
				),
			)
		);
		$this->add_control(
			'gut1720Color1',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#deff1380',
				'selectors' => array(
					'{{WRAPPER}} .eca-info-title' => 'background-image:linear-gradient(to left,{{VALUE}} 100%,transparent 0)',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect17', 'effect20' ),
				),
			)
		);
		$this->end_controls_section();
		/*title underline*/

		/*description*/
		$this->start_controls_section(
			'descStyling',
			array(
				'label' => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'descPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-desc' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'descMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-desc' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'descTypo',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p',
			)
		);
		$this->add_responsive_control(
			'descAlign',
			array(
				'label'     => esc_html__( 'Text Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'    => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'  => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'justify' => array(
						'title' => esc_html__( 'Justify', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-desc,
					{{WRAPPER}} .eca-info-wrapper .eca-info-desc p' => 'text-align:{{VALUE}};',
				),
			)
		);
		$this->add_responsive_control(
			'descConAlign',
			array(
				'label'     => esc_html__( 'Content Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-desc' => 'justify-content:{{VALUE}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsDesctyle' );
		$this->start_controls_tab(
			'tabDescNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'descColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'descBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p',
			)
		);
		$this->add_responsive_control(
			'descBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'descShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'descTextShadowNorm',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'descTextStrokeN',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-desc,{{WRAPPER}} .eca-info-wrapper .eca-info-desc p',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabDescHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'descColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc,{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc,{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc p',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'descBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc,{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc p',
			)
		);
		$this->add_responsive_control(
			'descBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc,{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc p' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'descShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc,{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc p',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'descTextShadowHover',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc,{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc p',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'descTextStrokeH',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc,{{WRAPPER}} .eca-info-wrapper:hover .eca-info-desc p',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*description*/

		/*button*/
		$this->start_controls_section(
			'buttonStyling',
			array(
				'label' => esc_html__( 'Button', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'buttonPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'buttonMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'buttonTypo',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-button',
			)
		);
		$this->start_controls_tabs( 'tabsButtontyle' );
		$this->start_controls_tab(
			'tabButtonNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-button' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'buttonBgNorm',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-info-wrapper .eca-info-button',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'buttonBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-button',
			)
		);
		$this->add_responsive_control(
			'buttonBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-button',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabButtonHover',
			array(
				'label' => esc_html__( 'Box Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-button' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'buttonBgHover',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-button',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'buttonBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-button',
			)
		);
		$this->add_responsive_control(
			'buttonBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-button',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabButtonHoverA',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonHoverEffectH',
			array(
				'label'     => esc_html__( 'Hover Effect', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_control(
			'buttonEffectPosH',
			array(
				'label'     => esc_html__( 'Position', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => array(
					''                              => esc_html__( 'Bottom', 'essential-classy-addons-for-elementor' ),
					'eca-button-hover-effect-top'   => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
					'eca-button-hover-effect-left'  => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
					'eca-button-hover-effect-right' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'buttonHoverEffectH' => 'yes',
				),
			)
		);
		$this->add_control(
			'buttonColorHoverA',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-button:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'buttonBgHoverA',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-info-wrapper .eca-info-button:hover',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'bBgEffectHover',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-button-hover-effect:hover:after',
				'condition' => array(
					'buttonHoverEffectH' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'buttonBorderHoverA',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-button:hover',
			)
		);
		$this->add_responsive_control(
			'buttonBrHoverA',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowHoverA',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-button:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*button*/

		/*pin*/
		$this->start_controls_section(
			'pinStyling',
			array(
				'label' => esc_html__( 'Pin', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'pinPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-pin' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'pinTypo',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-pin',
			)
		);
		$this->add_responsive_control(
			'pinTopOffset',
			array(
				'label'      => esc_html__( 'Top Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => -300,
						'max' => 300,
					),
					'%'  => array(
						'min'  => -100,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-pin' => 'top:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'pinRightOffset',
			array(
				'label'      => esc_html__( 'Right Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => -300,
						'max' => 300,
					),
					'%'  => array(
						'min'  => -100,
						'max'  => 100,
						'step' => 1,
					),
				),
				'separator'  => 'after',
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-pin' => 'right:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsPintyle' );
		$this->start_controls_tab(
			'tabPinNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'pinColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-pin' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'pinBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-pin',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'pinBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-pin',
			)
		);
		$this->add_responsive_control(
			'pinBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-pin' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'pinShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper .eca-info-pin',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabPinHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'pinColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-pin' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'pinBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-pin',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'pinBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-pin',
			)
		);
		$this->add_responsive_control(
			'pinBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover .eca-info-pin' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'pinShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover .eca-info-pin',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*pin*/

		/*inner box*/
		$this->start_controls_section(
			'innerboxStyling',
			array(
				'label' => esc_html__( 'Inner Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'innerboxPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper .eca-info-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();
		/*inner box*/

		/*box content*/
		$this->start_controls_section(
			'boxContentStyling',
			array(
				'label' => esc_html__( 'Box Content', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'boxContentPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'boxContentMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsboxContentStyle' );
		$this->start_controls_tab(
			'tabboxContentNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'boxContentBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'boxContentBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper',
			)
		);
		$this->add_responsive_control(
			'boxContentBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'boxContentShadowNorm',
				'selector' => '{{WRAPPER}} .eca-info-wrapper',
			)
		);
		$this->add_control(
			'boxContentTransformNorm',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-info-wrapper' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabboxContentHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'boxEffect',
			array(
				'label'     => esc_html__( 'Effect', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'none',
				'options'   => array(
					'none'            => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
					'boxeffectleft'   => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
					'boxeffectright'  => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
					'boxeffecttop'    => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
					'boxeffectbottom' => esc_html__( 'Bottom', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'layout!' => 'layout3',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'boxContentBgHover',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-info-wrapper:hover',
				'condition' => array(
					'boxEffect' => 'none',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'boxContentBgHoverEffect',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-info-wrapper .ec-effects',
				'condition' => array(
					'boxEffect!' => 'none',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'boxContentBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover',
			)
		);
		$this->add_responsive_control(
			'boxContentBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-info-wrapper:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'boxContentShadowHover',
				'selector' => '{{WRAPPER}} .eca-info-wrapper:hover',
			)
		);
		$this->add_control(
			'boxContentTransformHover',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-info-wrapper:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'boxContentOverflow',
			array(
				'label'     => esc_html__( 'Overflow', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Hidden', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Visible', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->end_controls_section();
		/*box content*/
	}

	protected function render() {

		$settings         = $this->get_settings_for_display();
		$layout           = ! empty( $settings['layout'] ) ? $settings['layout'] : 'layout1';
		$layout3Direction = ! empty( $settings['layout3Direction'] ) ? $settings['layout3Direction'] : 'left';

		$iconImageText = ! empty( $settings['iconImageText'] ) ? $settings['iconImageText'] : 'icon';
		$iconLibrary   = ! empty( $settings['iconLibrary'] ) ? $settings['iconLibrary'] : '';
		$imageSelect   = ! empty( $settings['imageSelect'] ) ? $settings['imageSelect'] : '';
		$textSelect    = ! empty( $settings['textSelect'] ) ? $settings['textSelect'] : '';

		$infoTitle          = ! empty( $settings['infoTitle'] ) ? $settings['infoTitle'] : '';
		$infoDesc           = ! empty( $settings['infoDesc'] ) ? $settings['infoDesc'] : '';
		$buttonText         = ! empty( $settings['buttonText'] ) ? $settings['buttonText'] : '';
		$buttonLink         = ! empty( $settings['buttonLink']['url'] ) ? esc_url( $settings['buttonLink']['url'] ) : '';
		$buttonLinkBox      = isset( $settings['buttonLinkBox'] ) ? $settings['buttonLinkBox'] : '';
		$pinText            = ! empty( $settings['pinText'] ) ? $settings['pinText'] : '';
		$infoTitleTag       = ! empty( $settings['infoTitleTag'] ) ? $settings['infoTitleTag'] : 'h1';
		$boxContentOverflow = $settings['boxContentOverflow'];

		$iconImageTextOP = $buttonLinkTarget = $buttonLinkNoFollow = $button = $title = $desc = $pinTitle = $output = $layout3DirectionDir = $overflowClass = '';
		if ( ! empty( $iconImageText ) ) {
			if ( $iconImageText == 'icon' ) {
				if ( ! empty( $iconLibrary ) ) {
					ob_start();
					\Elementor\Icons_Manager::render_icon( $iconLibrary, array( 'aria-hidden' => 'true' ) );
					$iconImageTextOP = '<span class="eca-icon-image-text eca-icon">' . ob_get_contents() . '</span>';
					ob_end_clean();
				}
			} elseif ( $iconImageText == 'image' ) {
				if ( ! empty( $settings['imageSelect']['url'] ) ) {
					$imageSelect = $settings['imageSelect']['id'];
					$img         = wp_get_attachment_image_src( $imageSelect, $settings['imageSelectThumbnail_size'] );
					$imgSrc      = $img[0];
					$imageId     = $settings['imageSelect']['id'];
					$imageAlt    = get_post_meta( $imageId, '_wp_attachment_image_alt', true );
					if ( empty( $imageAlt ) ) {
						$imageAlt = get_the_title( $imageId );
					}
					$iconImageTextOP = '<img class="eca-icon-image-text eca-image" src=' . esc_url( $imgSrc ) . ' alt="' . esc_attr( $imageAlt ) . '" />';
				}
			} elseif ( $iconImageText == 'text' ) {
				if ( ! empty( $textSelect ) ) {
					$iconImageTextOP = '<span class="eca-icon-image-text eca-text">' . esc_attr( $textSelect ) . '</span>';
				}
			}
		}

		if ( ! empty( $infoTitle ) ) {
			$infoTitleUnderlineEffect = isset( $settings['infoTitleUnderlineEffect'] ) ? $settings['infoTitleUnderlineEffect'] : '';
			$gutEffectType            = ! empty( $settings['gutEffectType'] ) ? $settings['gutEffectType'] : '';
			$utc                      = '';
			if ( $infoTitleUnderlineEffect == 'yes' && ! empty( $gutEffectType ) ) {
				$utc = ' ec-gut-underline ec-gut-' . esc_attr( $settings['gutEffectType'] );
			}
			$title = '<' . \EcafeHelper::check_and_validate_html_tag( $infoTitleTag ) . ' class="eca-info-title ' . esc_attr( $utc ) . '">' . esc_html( $infoTitle ) . '</' . \EcafeHelper::check_and_validate_html_tag( $infoTitleTag ) . '>';
		}

		if ( ! empty( $infoDesc ) ) {
			$desc = '<div class="eca-info-desc">' . wp_kses_post( $infoDesc ) . '</div>';
		}

		if ( ! empty( $pinText ) ) {
			$pinTitle = '<span class="eca-info-pin">' . esc_html( $pinText ) . '</span>';
		}

		if ( ! empty( $buttonLink ) ) {
			$buttonLinkTarget   = $settings['buttonLink']['is_external'] ? ' target="_blank"' : '';
			$buttonLinkNoFollow = $settings['buttonLink']['nofollow'] ? ' rel="nofollow"' : '';
		}

		if ( ! empty( $buttonText ) ) {
			$buttonHoverEffectH = ( isset( $settings['buttonHoverEffectH'] ) && $settings['buttonHoverEffectH'] == 'yes' ) ? 'eca-button-hover-effect ' . esc_attr( $settings['buttonEffectPosH'] ) : '';
			if ( isset( $buttonLinkBox ) && $buttonLinkBox == 'yes' ) {
				$button = '<div class="eca-info-button ' . esc_attr( $buttonHoverEffectH ) . '">' . esc_html( $buttonText ) . '</div>';
			} else {
				$button = '<a class="eca-info-button ' . esc_attr( $buttonHoverEffectH ) . '" href="' . $buttonLink . '"' . $buttonLinkTarget . $buttonLinkNoFollow . '>' . esc_html( $buttonText ) . '</a>';
			}
		}

		if ( ! empty( $boxContentOverflow ) && $boxContentOverflow == 'yes' ) {
			$overflowClass = 'eca-visible';
		}

		$boxEffect = ! empty( $settings['boxEffect'] ) ? $settings['boxEffect'] : '';

		$boxEffectClass = '';
		if ( ! empty( $boxEffect ) && $boxEffect != 'none' ) {
			$boxEffectClass = ' ecboxeffectenable ' . $boxEffect;
		}

		$tiltclass  = '';
		$tiltrender = '';
		if ( isset( $settings['tiltEffect'] ) && $settings['tiltEffect'] === 'yes' ) {
			/*Tilt Effect Render*/
			include ECAFE_PATH . 'element/widgets/ecafe-tilt-render.php';
		}

		$tippyclass  = '';
		$tippyrender = '';
		if ( isset( $settings['tippyTooltip'] ) && $settings['tippyTooltip'] === 'yes' ) {
			/*Tippy Tooltip Render*/
			include ECAFE_PATH . 'element/widgets/ecafe-tippy-render.php';
		}

		if ( isset( $buttonLinkBox ) && $buttonLinkBox == 'yes' ) {
			$output .= '<a class="eca-info-wrapper ' . esc_attr( $layout ) . ' ' . esc_attr( $overflowClass ) . ' ' . esc_attr( $boxEffectClass ) . ' ' . esc_attr( $tiltclass ) . ' ' . esc_attr( $tippyclass ) . '" href="' . $buttonLink . '"' . $buttonLinkTarget . $buttonLinkNoFollow . ' ' . $tiltrender . ' ' . $tippyrender . '>';
		} else {
			$output .= '<div class="eca-info-wrapper ' . esc_attr( $layout ) . ' ' . esc_attr( $overflowClass ) . ' ' . esc_attr( $boxEffectClass ) . ' ' . esc_attr( $tiltclass ) . ' ' . esc_attr( $tippyclass ) . '" ' . $tiltrender . ' ' . $tippyrender . '>';
		}

		if ( ! empty( $layout ) ) {
			if ( $layout == 'layout1' ) {
				$output     .= '<div class="eca-info-inner">';
					$output .= $iconImageTextOP;
					$output .= $title;
					$output .= $desc;
					$output .= $button;
					$output .= $pinTitle;
				if ( ! empty( $settings['boxEffect'] ) && $settings['boxEffect'] != 'none' ) {
					$output .= '<div class="ec-effects"></div>';
				}
				$output .= '</div>';
			} elseif ( $layout == 'layout2' || $layout == 'layout3' ) {
				$output     .= '<div class="eca-info-inner-one">';
					$output .= $iconImageTextOP;
					$output .= $title;
				$output     .= '</div>';

				if ( $layout == 'layout3' ) {
					if ( $layout3Direction == 'right' ) {
						$layout3DirectionDir = ' eca-right-dir';
					} elseif ( $layout3Direction == 'top' ) {
						$layout3DirectionDir = ' eca-top-dir';
					} elseif ( $layout3Direction == 'bottom' ) {
						$layout3DirectionDir = ' eca-bottom-dir';
					}
				}

				$output     .= '<div class="eca-info-inner-two ' . esc_attr( $layout3DirectionDir ) . '">';
					$output .= $desc;
					$output .= $button;
				$output     .= '</div>';
				$output     .= $pinTitle;
				if ( $layout == 'layout2' && ! empty( $settings['boxEffect'] ) && $settings['boxEffect'] != 'none' ) {
					$output .= '<div class="ec-effects"></div>';
				}
			}
		}
		if ( isset( $buttonLinkBox ) && $buttonLinkBox == 'yes' ) {
			$output .= '</a>';
		} else {
			$output .= '</div>';
		}

		echo wp_kses_normalize_entities( $output );
	}
}
