<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
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_InfoCircle extends Widget_Base {

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

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

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

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

	public function get_keywords() {
		return array( 'info circle', 'circle info', 'info icon', 'information', 'circular info box', 'info bubble', 'circular feature box', 'highlight circle', 'round info card', 'info dot' );
	}

	public function get_script_depends() {
		return array( 'ecafe-infocircle' );
	}
	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(
			'content_section',
			array(
				'label' => esc_html__( 'Info Circle', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'icIconImage',
			array(
				'label'   => esc_html__( 'Source', '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' ),
				),
			)
		);
		$repeater->add_control(
			'icIcon',
			array(
				'label'     => esc_html__( 'Icon Library', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::ICONS,
				'condition' => array(
					'icIconImage' => 'icon',
				),
			)
		);
		$repeater->add_control(
			'icImage',
			array(
				'label'      => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
				'condition'  => array(
					'icIconImage' => 'image',
				),
			)
		);
		$repeater->start_controls_tabs( 'tabsicImageIconStyle' );
		$repeater->start_controls_tab(
			'tabicImageIconN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'iconColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon svg' => 'fill: {{VALUE}};',
				),
				'condition' => array(
					'icIconImage' => 'icon',
				),
			)
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconImageBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon',
			)
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'tabicImageIconHA',
			array(
				'label' => esc_html__( 'Hover/Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'iconColorh',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon i,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon:hover i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon svg,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon:hover svg' => 'fill: {{VALUE}};',
				),
				'condition' => array(
					'icIconImage' => 'icon',
				),
			)
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconImageBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon:hover,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item{{CURRENT_ITEM}} .ec-ic-loop-image-icon',
			)
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();

		$repeater->add_control(
			'icContent',
			array(
				'label'     => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$repeater->add_control(
			'icCImage',
			array(
				'label'      => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$repeater->add_control(
			'icTitle',
			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' ),
			)
		);
		$repeater->add_control(
			'icDesc',
			array(
				'label'       => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Description', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'icButtonText',
			array(
				'label'       => esc_html__( 'Button', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Read more', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Button Name', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->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(
			'icContent',
			array(
				'label'       => '',
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'icIcon'  => array(
							'value'   => 'fab fa-facebook',
							'library' => 'fa-brands',
						),
						'icTitle' => 'Facebook',
					),
					array(
						'icIcon'  => array(
							'value'   => 'fab fa-twitter',
							'library' => 'fa-brands',
						),
						'icTitle' => 'Twitter',
					),
					array(
						'icIcon'  => array(
							'value'   => 'fab fa-linkedin',
							'library' => 'fa-brands',
						),
						'icTitle' => 'Linkedin',
					),
				),
				'title_field' => '{{{ icTitle }}}',
			)
		);
		$this->add_responsive_control(
			'icCircleDotsWidthHeight',
			array(
				'label'      => esc_html__( 'Circle Dots Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 300,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				),
				'separator'  => 'before',
			)
		);
		$this->add_responsive_control(
			'icCircleBoxWidthHeight',
			array(
				'label'      => esc_html__( 'Circle Size', '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,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'activeSlide',
			array(
				'label'     => esc_html__( 'Active Slide', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '1',
				'options'   => \EcafeHelper::getNumbers( 1 ),
				'separator' => 'before',
			)
		);
		$this->add_control(
			'titleTag',
			array(
				'label'     => esc_html__( 'Title Tag', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => \EcafeHelper::getHtmlTag(),
				'default'   => 'h1',
				'separator' => 'before',
			)
		);
		$this->add_control(
			'icTrigger',
			array(
				'label'     => esc_html__( 'Trigger', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'click',
				'options'   => array(
					'click' => esc_html__( 'Click', 'essential-classy-addons-for-elementor' ),
					'hover' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
				),
				'separator' => 'before',
			)
		);
		$this->add_control(
			'icAutoplay',
			array(
				'label'     => esc_html__( 'Autoplay', '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',
				'separator' => 'before',
			)
		);
		$this->add_control(
			'icAutoplayDuration',
			array(
				'label'     => esc_html__( 'Duration', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 10000,
				'step'      => 100,
				'default'   => 4000,
				'condition' => array(
					'icAutoplay' => 'yes',
				),
			)
		);
		$this->add_control(
			'icAnimation',
			array(
				'label'     => esc_html__( 'Circular animation', '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',
				'separator' => 'before',
			)
		);
		$this->add_control(
			'icAnimationPause',
			array(
				'label'     => esc_html__( 'Pause on Hover', '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',
				'condition' => array(
					'icAnimation' => 'yes',
				),
			)
		);
		$this->add_control(
			'icHoverActiveAnimation',
			array(
				'label'     => esc_html__( 'Hover / Active scale Animation', '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',
				'separator' => 'before',
			)
		);
		$this->end_controls_section();

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

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

		$this->start_controls_section(
			'icIconStyling',
			array(
				'label' => esc_html__( 'Circle Icon', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'iconSize',
			array(
				'label'      => esc_html__( 'Icon Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 200,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}}  .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon i:before' => 'font-size :{{SIZE}}px;',
					'{{WRAPPER}}  .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon svg' => 'width:{{SIZE}}px;height:{{SIZE}}px;',
				),
			)
		);
		$this->start_controls_tabs( 'tabsIcontyle' );
		$this->start_controls_tab(
			'tabIconN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIconH',
			array(
				'label' => esc_html__( 'Hover/Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorh',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon i,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon svg,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icImageStyling',
			array(
				'label' => esc_html__( 'Circle Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$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}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min'  => 1,
						'max'  => 700,
						'step' => 1,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 150,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'width:{{SIZE}}{{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,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'max-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageHeight',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaxHeight',
			array(
				'label'      => esc_html__( 'Max Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'max-height:{{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_Background::get_type(),
			array(
				'name'     => 'imageBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'imageBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_responsive_control(
			'imageBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'imageShadowN',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'imageCssFilter',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_control(
			'imageTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'imageTransformN',
			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}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon img' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabImageHover',
			array(
				'label' => esc_html__( 'Hover/Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'imageBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover img,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'imageBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover img,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_responsive_control(
			'imageBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover img,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'imageShadowH',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover img,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'imageCssFilterH',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover img,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon img',
			)
		);
		$this->add_control(
			'imageTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover img,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon img' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'imageTransformH',
			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}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover img,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon img' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icIconImageStyling',
			array(
				'label' => esc_html__( 'Circle Icon/Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'IconImagePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsIconImagetyle' );
		$this->start_controls_tab(
			'tabIconImageN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconImageBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconImageBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon',
			)
		);
		$this->add_responsive_control(
			'iconImageBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconImageShadow',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon',
			)
		);
		$this->add_control(
			'iconImageTransition',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'iconImageTransform',
			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}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIconImageHover',
			array(
				'label' => esc_html__( 'Hover/Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconImageBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconImageBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon',
			)
		);
		$this->add_responsive_control(
			'iconImageBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconImageShadowH',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon',
			)
		);
		$this->add_control(
			'iconImageTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'iconImageTransformH',
			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}} .ec-info-circle-wrapper .ec-ic-loop-item .ec-ic-loop-image-icon:hover,{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-item.ec-ic-active-item .ec-ic-loop-image-icon' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icCImageStyling',
			array(
				'label' => esc_html__( 'Image - Content', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'icimagePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'icimageMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'icimageWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 1,
						'max'  => 500,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-image' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'icImageHeight',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-image' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsicImageStyle' );
		$this->start_controls_tab(
			'tabicImageNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'icimageBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-image',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'icimageBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-image',
			)
		);
		$this->add_responsive_control(
			'icimageBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'icimageShadow',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-image',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'icimageCssFilter',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-image',
			)
		);
		$this->add_control(
			'icimageTransition',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-ic-loop-content-image' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'icimageTransform',
			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}} .ec-ic-loop-content-image' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabicImageHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'icimageBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-image',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'icimageBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-image',
			)
		);
		$this->add_responsive_control(
			'icimageBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'icimageShadowH',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-image',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'icimageCssFilterH',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-image',
			)
		);
		$this->add_control(
			'icimageTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-image' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'icimageTransformH',
			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}} .ec-ic-loop-content:hover .ec-ic-loop-content-image' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icCTitleStyling',
			array(
				'label' => esc_html__( 'Title - Content', '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}} .ec-ic-loop-content-heading' => '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}} .ec-ic-loop-content-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'titleTypo',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-heading',
			)
		);
		$this->start_controls_tabs( 'tabsTitletyle' );
		$this->start_controls_tab(
			'tabTitleNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-ic-loop-content-heading' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-heading',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-heading',
			)
		);
		$this->add_responsive_control(
			'titleBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-heading' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadow',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-heading',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadow',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-heading',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'titleTextStroke',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-heading',
			)
		);
		$this->add_control(
			'titleTransition',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-ic-loop-content-heading' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'titleTransform',
			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}} .ec-ic-loop-content-heading' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabTitleHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-heading' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-heading',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-heading',
			)
		);
		$this->add_responsive_control(
			'titleBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-heading' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowH',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-heading',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowH',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-heading',
			)
		);
		$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}} .ec-ic-loop-content:hover .ec-ic-loop-content-heading',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icCDescStyling',
			array(
				'label' => esc_html__( 'Description - Content', '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}} .ec-ic-loop-content-description' => '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}} .ec-ic-loop-content-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'descTypo',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-description',
			)
		);
		$this->start_controls_tabs( 'tabsDescStyle' );
		$this->start_controls_tab(
			'tabDescNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'descColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-ic-loop-content-description' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'descBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-description',
			)
		);
		$this->add_responsive_control(
			'descBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-description' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'descShadow',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'descTextShadow',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'descTextStroke',
                'label'    => esc_html__( 'Text Stroke', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-description',
			)
		);
		$this->add_control(
			'descTransition',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-ic-loop-content-description' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'descTransform',
			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}} .ec-ic-loop-content-description' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabDescHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'descColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-description' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'descBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-description',
			)
		);
		$this->add_responsive_control(
			'descBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-description' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'descShadowH',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'descTextShadowH',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-description',
			)
		);
		$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}} .ec-ic-loop-content:hover .ec-ic-loop-content-description',
			)
		);
		$this->add_control(
			'descTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-ic-loop-content:hover .ec-ic-loop-content-description' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'descTransformH',
			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}} .ec-ic-loop-content:hover .ec-ic-loop-content-description' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icCButtonStyling',
			array(
				'label' => esc_html__( 'Button - Content', '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}} .ec-ic-loop-content-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}} .ec-ic-loop-content-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'buttonTypo',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-button',
			)
		);
		$this->start_controls_tabs( 'tabsButtontyle' );
		$this->start_controls_tab(
			'tabButtonN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-ic-loop-content-button' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'buttonBg',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .ec-ic-loop-content-button',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'buttonBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-button',
			)
		);
		$this->add_responsive_control(
			'buttonBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadow',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-button',
			)
		);
		$this->add_control(
			'buttonTransition',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-ic-loop-content-button' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'buttonTransform',
			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}} .ec-ic-loop-content-button' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabButtonH',
			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(
			'buttonColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-ic-loop-content-button:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'buttonBgH',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .ec-ic-loop-content-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'     => 'buttonBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-button:hover',
			)
		);
		$this->add_responsive_control(
			'buttonBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-ic-loop-content-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowH',
				'selector' => '{{WRAPPER}} .ec-ic-loop-content-button:hover',
			)
		);
		$this->add_control(
			'buttonTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-ic-loop-content-button:hover' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'buttonTransformH',
			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}} .ec-ic-loop-content-button:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icCBoxStyling',
			array(
				'label' => esc_html__( 'Content Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'icCBoxAnimation',
			array(
				'label'     => esc_html__( 'Scale Animation', '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_responsive_control(
			'icCBoxPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'separator'  => 'before',
			)
		);
		$this->add_responsive_control(
			'icCBoxWidth',
			array(
				'label'      => esc_html__( '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}} .ec-info-circle-wrapper .ec-ic-loop-content' => 'width: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'icCBoxHeight',
			array(
				'label'      => esc_html__( 'Height', '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}} .ec-info-circle-wrapper .ec-ic-loop-content' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsicCBoxtyle' );
		$this->start_controls_tab(
			'tabicCBoxN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'icCBoxBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'icCBoxBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content',
			)
		);
		$this->add_responsive_control(
			'icCBoxBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'icCBoxShadow',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content',
			)
		);
		$this->add_control(
			'icCBoxTransition',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'icCBoxTransform',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabicCBoxHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'icCBoxBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'icCBoxBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content:hover',
			)
		);
		$this->add_responsive_control(
			'icCBoxBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'icCBoxShadowH',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content:hover',
			)
		);
		$this->add_control(
			'icCBoxTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content:hover' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'icCBoxTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-info-circle-wrapper .ec-ic-loop-content:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'icCircleBoxStyling',
			array(
				'label' => esc_html__( 'Circle Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->start_controls_tabs( 'tabsicCircleBoxStyle' );
		$this->start_controls_tab(
			'tabnicCircleBoxN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'icCircleBoxBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper:before',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'icCircleBoxBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper:before',
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'icCircleBoxShadow',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper:before',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabcontentBoxH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'icCircleBoxBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper:hover:before',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'icCircleBoxBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper:hover:before',
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'icCircleBoxShadowH',
				'selector' => '{{WRAPPER}} .ec-info-circle-wrapper:hover:before',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}

	protected function render() {

		$settings               = $this->get_settings_for_display();
		$uid                    = uniqid( 'infocircle' );
		$data_attr              = array();
		$data_attr['id']        = esc_attr( $uid );
		$data_attr['icTrigger'] = ! empty( $settings['icTrigger'] ) ? $settings['icTrigger'] : 'click';
		$icAutoplay             = isset( $settings['icAutoplay'] ) ? $settings['icAutoplay'] : '';
		if ( isset( $icAutoplay ) && $icAutoplay == 'yes' ) {
			$icAutoplayDuration              = ! empty( $settings['icAutoplayDuration'] ) ? $settings['icAutoplayDuration'] : 2000;
			$data_attr['icAutoplay']         = 'yes';
			$data_attr['icAutoplayDuration'] = $icAutoplayDuration;
		}
		$data_attr = json_encode( $data_attr );

		$titleTag    = ! empty( $settings['titleTag'] ) ? $settings['titleTag'] : 'h1';
		$activeSlide = ! empty( $settings['activeSlide'] ) ? $settings['activeSlide'] : 1;
		$icAnimation = ( isset( $settings['icAnimation'] ) && $settings['icAnimation'] == 'yes' ) ? ' ec-ic-animation' : '';

		$icAnimationPause = '';
		if ( ( isset( $settings['icAnimation'] ) && $settings['icAnimation'] == 'yes' ) ) {
			$icAnimationPause = ( isset( $settings['icAnimationPause'] ) && $settings['icAnimationPause'] == 'yes' ) ? ' ec-ic-animation-ph' : '';
		}

		$icHoverActiveAnimation = ( isset( $settings['icHoverActiveAnimation'] ) && $settings['icHoverActiveAnimation'] == 'yes' ) ? ' ec-ic-scale-animation' : '';
		$icCBoxAnimation        = ( isset( $settings['icCBoxAnimation'] ) && $settings['icCBoxAnimation'] == 'yes' ) ? ' ec-ic-con-scale-animation' : '';

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

		$output               = '<div class="ec-info-circle-wrapper ' . esc_attr( $icAnimation ) . ' ' . esc_attr( $icAnimationPause ) . ' ' . esc_attr( $icHoverActiveAnimation ) . ' ' . esc_attr( $icCBoxAnimation ) . ' ' . esc_attr( $tippyclass ) . '" data-settings=\'' . $data_attr . '\'" ' . $tippyrender . '>';
			$index            = 0;
			$buttonLinkTarget = $buttonLinkNoFollow = '';
		foreach ( $settings['icContent'] as $index => $item ) {
			$active = '';
			if ( $index == $activeSlide - 1 ) {
					$active = ' ec-ic-active-item';
			}

				$output         .= '<div class="ec-ic-loop-item elementor-repeater-item-' . esc_attr( $item['_id'] ) . ' ' . esc_attr( $active ) . '">';
				$output         .= '<div class="ec-ic-loop-image-icon">';
					$icIconImage = ! empty( $item['icIconImage'] ) ? $item['icIconImage'] : 'icon';
			if ( $icIconImage == 'icon' && ! empty( $item['icIcon'] ) ) {
				ob_start();
				\Elementor\Icons_Manager::render_icon( $item['icIcon'], array( 'aria-hidden' => 'true' ) );
				$icons_loop = ob_get_contents();
				ob_end_clean();

				if ( ! empty( $icons_loop ) ) {
							$output .= $icons_loop;
				}
			} elseif ( $icIconImage == 'image' && ! empty( $item['icImage']['url'] ) ) {
				$icImage  = $item['icImage']['id'];
				$img      = wp_get_attachment_image_src( $icImage, 'full' );
				$imgSrc   = $img[0];
				$imageAlt = get_post_meta( $icImage, '_wp_attachment_image_alt', true );
				if ( empty( $imageAlt ) ) {
							$imageAlt = get_the_title( $icImage );
				}
				if ( ! empty( $imgSrc ) ) {
					$output .= '<img class="ec-ic-loop-image" src=' . esc_url( $imgSrc ) . ' alt="' . esc_attr( $imageAlt ) . '" />';
				}
			}
					$output .= '</div>';

					$output .= '<div class="ec-ic-loop-content">';

			if ( ! empty( $item['icCImage']['url'] ) ) {
				$icCImage  = $item['icCImage']['id'];
				$imgc      = wp_get_attachment_image_src( $icCImage, 'full' );
				$imgSrcc   = $imgc[0];
				$imageAltc = get_post_meta( $icCImage, '_wp_attachment_image_alt', true );
				if ( empty( $imageAltc ) ) {
					$imageAltc = get_the_title( $icImage );
				}
				if ( ! empty( $imgSrcc ) ) {
					$output .= '<img class="ec-ic-loop-content-image" src=' . esc_url( $imgSrcc ) . ' alt="' . esc_attr( $imageAltc ) . '" />';
				}
			}

					$icTitle = ! empty( $item['icTitle'] ) ? $item['icTitle'] : '';
			if ( ! empty( $icTitle ) ) {
				$output .= '<' . \EcafeHelper::check_and_validate_html_tag( $titleTag ) . ' class="ec-ic-loop-content-heading">' . esc_html( $icTitle ) . '</' . \EcafeHelper::check_and_validate_html_tag( $titleTag ) . '>';
			}
					$icDesc = ! empty( $item['icDesc'] ) ? $item['icDesc'] : '';
			if ( ! empty( $icDesc ) ) {
				$output .= '<div class="ec-ic-loop-content-description">' . esc_html( $icDesc ) . '</div>';
			}

					$buttonLink = ! empty( $item['buttonLink']['url'] ) ? esc_url( $item['buttonLink']['url'] ) : '';
			if ( ! empty( $buttonLink ) ) {
				$buttonLinkTarget   = $item['buttonLink']['is_external'] ? ' target="_blank"' : '';
				$buttonLinkNoFollow = $item['buttonLink']['nofollow'] ? ' rel="nofollow"' : '';
			}
					$icButtonText = ! empty( $item['icButtonText'] ) ? $item['icButtonText'] : '';
			if ( ! empty( $icButtonText ) ) {
				$buttonHoverEffectH = ( isset( $settings['buttonHoverEffectH'] ) && $settings['buttonHoverEffectH'] == 'yes' ) ? 'eca-button-hover-effect ' . esc_attr( $settings['buttonEffectPosH'] ) : '';
				$output            .= '<a class="ec-ic-loop-content-button ' . esc_attr( $buttonHoverEffectH ) . '" href="' . $buttonLink . '"' . $buttonLinkTarget . $buttonLinkNoFollow . '>' . esc_html( $icButtonText ) . '</a>';
			}
					$output .= '</div>';

					$output .= '</div>';
					++$index;
		}
		$output .= '</div>';

		echo wp_kses_normalize_entities( $output );
	}
}
