<?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_Text_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Text_Stroke;

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_Infocard extends Widget_Base {

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

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

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

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

	public function get_keywords() {
		return array( 'infobox', 'box layout', 'iconic layout', 'list', 'info box', 'info card 3d', '3d card', 'infocard', '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__( 'Info Card', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'imageSelect',
			array(
				'label'      => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'    => 'imageSelectThumbnail',
				'default' => 'full',
				'exclude' => array( 'custom' ),
			)
		);
		$this->add_control(
			'imageHoverSelect',
			array(
				'label'      => esc_html__( 'Hover Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'    => 'imageHoverSelectThumbnail',
				'default' => 'full',
				'exclude' => array( 'custom' ),
			)
		);
		$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__( 'Title 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(
			'infoSubTitle',
			array(
				'label'       => esc_html__( 'Sub Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Sub Title', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Sub Title', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'infoSubTitleTag',
			array(
				'label'   => esc_html__( 'Sub Title Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h2',
				'options' => \EcafeHelper::getHtmlTag(),
			)
		);
		$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 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(
			'infocardLink',
			array(
				'label'       => esc_html__( 'Link', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => array( 'active' => true ),
				'placeholder' => esc_html__( 'Enter Link', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_responsive_control(
			'infocardMaxWidth',
			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' => 800,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'separator'  => 'before',
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper' => 'max-width: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'infocardHeight',
			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' => 800,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper,
					{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-wrapper-inner,
					{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-image-hover-wrap-in,
					{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-image-wrap' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'textAlign',
			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}} .ec-infocard-wrapper .ec-infocard-content' => 'text-align:{{VALUE}};',
				),
			)
		);
		$this->add_responsive_control(
			'contentAlign',
			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',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content' => 'align-items:{{VALUE}};',
				),
			)
		);
		$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-3d-card-elementor-wp/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/info-3d-card-widget-tutorial/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		/*
		style start*/
		/*normal image start*/
		$this->start_controls_section(
			'nImagesection',
			array(
				'label' => esc_html__( 'Normal Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->start_controls_tabs( 'tabsnImageStyle' );
		$this->start_controls_tab(
			'tabnImageN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'nImageBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-image-wrap-in',
			)
		);
		$this->add_responsive_control(
			'nImageBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-image-wrap-in' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'nImageFilter',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-image-wrap-in',
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'nImageShadow',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-image-wrap-in',
			)
		);
		$this->add_control(
			'nImageTransform',
			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-infocard-wrapper .ec-infocard-image-wrap-in' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabnImageH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'nImageBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-image-wrap-in',
			)
		);
		$this->add_responsive_control(
			'nImageBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-image-wrap-in' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'nImageFilterH',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-image-wrap-in',
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'nImageShadowH',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-image-wrap-in',
			)
		);
		$this->add_control(
			'nImageTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'perspective(1500px) translateY(-5%) rotateX(25deg) translateZ(0)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-image-wrap-in' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*normal image end*/

		/*hover image start*/
		$this->start_controls_section(
			'hImagesection',
			array(
				'label' => esc_html__( 'Hover Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'hImageTransform',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'translate3d(0%,-30%,100px)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-image-hover-wrap-in' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();
		/*hover image end*/

		/*contentbox start*/
		$this->start_controls_section(
			'contentBoxsection',
			array(
				'label' => esc_html__( 'Content Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'contentBoxPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'contentBoxBottom',
			array(
				'label'      => esc_html__( 'Bottom Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 150,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content' => 'bottom: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabscontentBoxStyle' );
		$this->start_controls_tab(
			'tabcontentBoxN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'contentBoxTransform',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'translate3d(0,0,0)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabcontentBoxH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'contentBoxTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'placeholder' => esc_html__( 'translate3d(0%,-50px,100px)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*contentbox end*/

		/*title start*/
		$this->start_controls_section(
			'titlesection',
			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}} .ec-infocard-wrapper .ec-infocard-content-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}} .ec-infocard-wrapper .ec-infocard-content-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'titleTypo',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title',
			)
		);
		$this->start_controls_tabs( 'tabsTitletyle' );
		$this->start_controls_tab(
			'tabTitleNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title',
			)
		);
		$this->add_responsive_control(
			'titleBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowN',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowN',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'titleTextStrokeN',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-title',
			)
		);
		$this->add_control(
			'titleTransitionN',
			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-infocard-wrapper .ec-infocard-content-title' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'titleTransformN',
			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-infocard-wrapper .ec-infocard-content-title' => '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-infocard-wrapper:hover .ec-infocard-content-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-title',
			)
		);
		$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-infocard-wrapper:hover .ec-infocard-content-title' => '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-infocard-wrapper:hover .ec-infocard-content-title',
			)
		);
		$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-infocard-wrapper:hover .ec-infocard-content-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'titleTextStrokeH',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-title',
			)
		);
		$this->add_control(
			'titleTransitionH',
			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-infocard-wrapper:hover .ec-infocard-content-title' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'titleTransformH',
			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-infocard-wrapper:hover .ec-infocard-content-title' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*title end*/

		/*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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-title' => 'background-size:{{SIZE}}% {{gut15_20Height.SIZE}}px;',
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-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}} .ec-infocard-content-title' => 'background-size:{{gut15_20Start.SIZE}}% {{SIZE}}px;',
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-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}} .ec-infocard-content-title' => 'background-image:linear-gradient(to left,{{VALUE}} 100%,transparent 0)',
				),
				'condition' => array(
					'gutEffectType' => array( 'effect17', 'effect20' ),
				),
			)
		);
		$this->end_controls_section();
		/*title underline*/

		/*subtitle start*/
		$this->start_controls_section(
			'subtitlesection',
			array(
				'label' => esc_html__( 'Sub Title', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'subtitlePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'subtitleMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'subtitleTypo',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle',
			)
		);
		$this->start_controls_tabs( 'tabsSubTitletyle' );
		$this->start_controls_tab(
			'tabSubTitleNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'subtitleColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'subtitleBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'subtitleBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle',
			)
		);
		$this->add_responsive_control(
			'subtitleBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'subtitleShadowN',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'subtitleTextShadowN',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'subtitleTextStrokeN',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-subtitle',
			)
		);
		$this->add_control(
			'subtitleTransitionN',
			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-infocard-wrapper .ec-infocard-content-subtitle' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'subtitleTransformN',
			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-infocard-wrapper .ec-infocard-content-subtitle' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabSubTitleHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'subtitleColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-subtitle' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'subtitleBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-subtitle',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'subtitleBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-subtitle',
			)
		);
		$this->add_responsive_control(
			'subtitleBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-subtitle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'subtitleShadowH',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-subtitle',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'subtitleTextShadowH',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-subtitle',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'subtitleTextStrokeH',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-subtitle',
			)
		);
		$this->add_control(
			'subtitleTransitionH',
			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-infocard-wrapper:hover .ec-infocard-content-subtitle' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'subtitleTransformH',
			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-infocard-wrapper:hover .ec-infocard-content-subtitle' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*subtitle end*/

		/*desc start*/
		$this->start_controls_section(
			'descsection',
			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}} .ec-infocard-wrapper .ec-infocard-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-infocard-wrapper .ec-infocard-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-infocard-wrapper .ec-infocard-content-description,{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description, p',
			)
		);
		$this->start_controls_tabs( 'tabsDesctyle' );
		$this->start_controls_tab(
			'tabDescNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'descColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'descBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description',
			)
		);
		$this->add_responsive_control(
			'descBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'descShadowN',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'descTextShadowN',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'descTextStrokeN',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper .ec-infocard-content-description',
			)
		);
		$this->add_control(
			'descTransitionN',
			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-infocard-wrapper .ec-infocard-content-description' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'descTransformN',
			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-infocard-wrapper .ec-infocard-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-infocard-wrapper:hover .ec-infocard-content-description' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-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-infocard-wrapper:hover .ec-infocard-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-infocard-wrapper:hover .ec-infocard-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-infocard-wrapper:hover .ec-infocard-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-infocard-wrapper:hover .ec-infocard-content-description',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			array(
				'name'     => 'descTextStrokeH',
				'selector' => '{{WRAPPER}} .ec-infocard-wrapper:hover .ec-infocard-content-description',
			)
		);
		$this->add_control(
			'descTransitionH',
			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-infocard-wrapper:hover .ec-infocard-content-description' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'descTransformH',
			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-infocard-wrapper:hover .ec-infocard-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();
		/*
		desc end*/
		/*style end*/
	}

	protected function render() {
		$settings        = $this->get_settings_for_display();
		$infoTitle       = ! empty( $settings['infoTitle'] ) ? $settings['infoTitle'] : '';
		$infoTitleTag    = ! empty( $settings['infoTitleTag'] ) ? $settings['infoTitleTag'] : 'h1';
		$infoSubTitle    = ! empty( $settings['infoSubTitle'] ) ? $settings['infoSubTitle'] : '';
		$infoSubTitleTag = ! empty( $settings['infoSubTitleTag'] ) ? $settings['infoSubTitleTag'] : 'h2';
		$infoDesc        = ! empty( $settings['infoDesc'] ) ? $settings['infoDesc'] : '';

		$imageOP = $imageHoverOP = '';
		if ( ! empty( $settings['imageSelect']['url'] ) ) {
			$imageSelect = $settings['imageSelect']['id'];
			$img         = wp_get_attachment_image_src( $imageSelect, $settings['imageSelectThumbnail_size'] );
			$imgSrc      = ! empty( $img[0] ) ? $img[0] : '';
			$imageId     = $settings['imageSelect']['id'];
			$imageAlt    = get_post_meta( $imageId, '_wp_attachment_image_alt', true );
			if ( empty( $imageAlt ) ) {
				$imageAlt = get_the_title( $imageId );
			}
			$imageOP = '<div class="ec-infocard-image-wrap"><img class="ec-infocard-image-wrap-in" src=' . esc_url( $imgSrc ) . ' alt="' . esc_attr( $imageAlt ) . '" /></div>';
		} else {
			$imageOP = '<div class="ec-infocard-image-wrap"><img class="ec-infocard-image-wrap-in" src=' . ECAFE_ASSETS_PATH . 'images/placeholder.png" /></div>';
		}
		if ( ! empty( $settings['imageHoverSelect']['url'] ) ) {
			$imageHoverSelect = $settings['imageHoverSelect']['id'];
			$imgh             = wp_get_attachment_image_src( $imageHoverSelect, $settings['imageHoverSelectThumbnail_size'] );
			$imgSrcH          = ! empty( $imgh[0] ) ? $imgh[0] : '';
			$imageIdH         = $settings['imageHoverSelect']['id'];
			$imageAltH        = get_post_meta( $imageIdH, '_wp_attachment_image_alt', true );
			if ( empty( $imageAltH ) ) {
				$imageAltH = get_the_title( $imageIdH );
			}
			$imageHoverOP = '<img class="ec-infocard-image-hover-wrap-in" src=' . esc_url( $imgSrcH ) . ' alt="' . esc_attr( $imageAltH ) . '" />';
		} else {
			$imageHoverOP = '<img class="ec-infocard-image-hover-wrap-in" src="' . ECAFE_ASSETS_PATH . 'images/placeholder.png" />';
		}

		$infocardLink       = ! empty( $settings['infocardLink']['url'] ) ? esc_url( $settings['infocardLink']['url'] ) : '';
		$infocardLinkTarget = $infocardLinkNoFollow = '';
		if ( ! empty( $infocardLink ) ) {
			$infocardLinkTarget   = $settings['infocardLink']['is_external'] ? ' target="_blank"' : '';
			$infocardLinkNoFollow = $settings['infocardLink']['nofollow'] ? ' rel="nofollow"' : '';
		}

		$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 ( ! empty( $infocardLink ) ) {
			$output = '<a href="' . $infocardLink . '" ' . $infocardLinkTarget . $infocardLinkNoFollow . ' class="ec-infocard-wrapper ' . esc_attr( $tiltclass ) . ' ' . esc_attr( $tippyclass ) . '" ' . $tiltrender . ' ' . $tippyrender . '>';
		} else {
			$output = '<div class="ec-infocard-wrapper ' . esc_attr( $tiltclass ) . ' ' . esc_attr( $tippyclass ) . '" ' . $tiltrender . ' ' . $tippyrender . '>';
		}
			$output     .= '<div class="ec-infocard-wrapper-inner">';
				$output .= $imageOP;
				$output .= '<div class="ec-infocard-content">';
		if ( ! empty( $infoSubTitle ) ) {
			$output .= '<' . \EcafeHelper::check_and_validate_html_tag( $infoSubTitleTag ) . ' class="ec-infocard-content-subtitle">' . esc_html( $infoSubTitle ) . '</' . \EcafeHelper::check_and_validate_html_tag( $infoSubTitleTag ) . '>';
		}
		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'] );
			}
						$output .= '<' . \EcafeHelper::check_and_validate_html_tag( $infoTitleTag ) . ' class="ec-infocard-content-title ' . esc_attr( $utc ) . '">' . esc_html( $infoTitle ) . '</' . \EcafeHelper::check_and_validate_html_tag( $infoTitleTag ) . '>';
		}
		if ( ! empty( $infoDesc ) ) {
			$output .= '<div class="ec-infocard-content-description">' . wp_kses_post( $infoDesc ) . '</div>';
		}
				$output .= '</div>';
				$output .= $imageHoverOP;
			$output     .= '</div>';
		if ( ! empty( $infocardLink ) ) {
			$output .= '</a>';
		} else {
			$output .= '</div>';
		}

			echo wp_kses_normalize_entities( $output );
	}
}
