trAvis - MANAGER

Edit File: tp_row_background.php

<?php 
/*
Widget Name: Row Background 
Description: Most Advance Row Maker
Author: Theplus
Author URI: https://posimyth.com
*/
namespace TheplusAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Core\Schemes\Typography;

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

class ThePlus_Row_Background extends Widget_Base {
	
	public function get_name() {
		return 'tp-row-background';
	}

public function get_title() {
        return esc_html__('Row Background', 'theplus');
    }

public function get_icon() {
        return 'fa fa-paint-brush theplus_backend_icon';
    }

public function get_categories() {
        return array('plus-creatives');
    }
	public function get_keywords() {
		return ['row background', 'section background', 'canvas', 'particles js', 'segmentation', 'gallery background', 'slideshow background', 'video background', 'youtube background', 'vimeo background', 'mobile video background', 'parallax background, segment', 'animated gradient background', 'on scroll background color change', 'on scroll morphing shape background', 'background fixed SVG morphing', 'on Scroll background Image change', 'kenburn gallery', 'kenburn background'];
	}

protected function _register_controls() {
		
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Deep Layer', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
				]
		);
		$this->add_control(
            'select_anim', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Select Option', 'theplus'),
                'default' => '',
                'options' => [
                    '' => esc_html__('Select option', 'theplus'),
                    'bg_normal_color' => esc_html__('Solid Color', 'theplus'),
                    'bg_gradientcolor' => esc_html__('Gradient Color', 'theplus'),
                    'bg_color' => esc_html__('Animated Background Color', 'theplus'),
                    'bg_image' => esc_html__('Creative Background Image', 'theplus'),
                    'bg_video' => esc_html__('Creative Background Video', 'theplus'),
                    'bg_gallery' => esc_html__('Creative Background Gallery', 'theplus'),
                    'bg_Image_pieces' => esc_html__('Image Segmentation', 'theplus'),
                    'bg_animate_gradient' => esc_html__('Gradient Animate Color', 'theplus'),
                    'scroll_animate_color' => esc_html__('On Scroll Background Animation', 'theplus'),
                    'carousel_bgcolor' => esc_html__('Carousel Background', 'theplus'),
                ],
            ]
        );
		/* solid color option*/
		
		$this->add_control(
            'normal_bg_color',
            [
                'label' => esc_html__('Background Color', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
				'condition'    => [
					'select_anim' => 'bg_normal_color',
				],
            ]
        );
		/* solid color option*/
		/* gradient color option*/		
		$this->add_control(
            'gradient_color1',
            [
                'label' => esc_html__('Color 1', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => 'orange',
				'condition'    => [
					'select_anim' => 'bg_gradientcolor',
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'gradient_color1_control',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Color 1 Location', 'theplus'),
				'size_units' => [ '%' ],
				'default' => [
					'unit' => '%',
					'size' => 0,
				],
				'condition'    => [
					'select_anim' => 'bg_gradientcolor',
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'gradient_color2',
            [
			'label' => esc_html__('Color 2', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => 'cyan',
				'condition'    => [
					'select_anim' => 'bg_gradientcolor',
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'gradient_color2_control',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Color 2 Location', 'theplus'),
				'size_units' => [ '%' ],
				'default' => [
					'unit' => '%',
					'size' => 100,
				],
				'condition'    => [
					'select_anim' => 'bg_gradientcolor',
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'gradient_style', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Gradient Style', 'theplus'),
                'default' => 'linear',
                'options' => theplus_get_gradient_styles(),
				'condition'    => [
					'select_anim' => 'bg_gradientcolor',
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'gradient_angle', [
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Gradient Angle', 'theplus'),
				'size_units' => [ 'deg' ],
				'default' => [
					'unit' => 'deg',
					'size' => 180,
				],
				'range' => [
					'deg' => [
						'step' => 10,
					],
				],
				'condition'    => [
					'select_anim' => ['bg_gradientcolor'],
					'gradient_style' => ['linear']
				],
				'of_type' => 'gradient',
			]
        );
		$this->add_control(
            'gradient_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Position', 'theplus'),
				'options' => theplus_get_position_options(),
				'default' => 'center center',
				'condition' => [
					'select_anim' => [ 'bg_gradientcolor' ],
					'gradient_style' => 'radial',
			],
			'of_type' => 'gradient',
			]
        );
		/* gradient color option*/
		/*--------background image-------*/
		$this->add_control(
            'column_bg_image_new', [
				'type' => Controls_Manager::MEDIA,
				'label' => esc_html__('Background Image', 'theplus'),
				'dynamic' => ['active'   => true,],				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
				],
			]
        );
		$this->add_control(
            'column_bg_image_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Image Position', 'theplus'),
				'default' => 'center center',
				'options' => theplus_get_image_position_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'column_bg_image_new[url]!' => '',
				],			
			]
        );
		$this->add_control(
            'column_bg_img_attach', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Attachment', 'theplus'),
				'default' => 'scroll',
				'options' => theplus_get_image_attachment_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'column_bg_image_new[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'column_bg_img_repeat', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Repeat', 'theplus'),
				'default' => 'repeat',
				'options' => theplus_get_image_reapeat_options(),
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'column_bg_image_new[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'column_bg_image_size', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Background Size', 'theplus'),
				'default' => 'cover',
				'options' => theplus_get_image_size_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'column_bg_image_new[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'columns_parallax_style', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Background Effect', 'theplus'),
				'default' => 'columns_simple_image',
				'options' => [
                    'columns_simple_image' => esc_html__('Normal Background Image', 'theplus'),
                    'columns_animated_bg' => esc_html__('Auto Moving Background Image', 'theplus'),
                ],
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'column_bg_image_new[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'image_parallax_style', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Special Image Hover Effects', 'theplus'),
				'default' => '',
				'options' => [
                    '' => esc_html__('Select Style', 'theplus'),
                    'style_1' => esc_html__('Parallax Tilt Effect', 'theplus'),
                    'style_2' => esc_html__('Parallax Move Effect', 'theplus'),
                ],
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_simple_image',
					'column_bg_image_new[url]!' => '',
				],		
			]
        );
		$this->add_control(
			 'image_parallax_amount', [
				'label' => esc_html__( 'Intensity Parallax', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => '',
				'range' => [
					'' => [
						'min' => 20,
						'max' => 100,
						'step' => 5,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 30,
				],
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_simple_image',
					'image_parallax_style' => ['style_1','style_2'],
					'column_bg_image_new[url]!' => '',
				],
			]
		);
		$this->add_control(
			 'image_parallax_perspective', [
				'label' => esc_html__( 'Perspective', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => '',
				'range' => [
					'' => [
						'min' => 100,
						'max' => 5000,
						'step' => 200,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 1000,
				],
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_simple_image',
					'image_parallax_style' => 'style_1',
					'column_bg_image_new[url]!' => '',
				],
			]
		);
		$this->add_control(
			 'image_parallax_scale', [
				'label' => esc_html__( 'Scale', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => '',
				'range' => [
					'' => [
						'min' => 0.7,
						'max' => 1.8,
						'step' => 0.05,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 1,
				],
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_simple_image',
					'image_parallax_style' => ['style_1','style_2'],
					'column_bg_image_new[url]!' => '',
				],
			]
		);
		$this->add_control(
			'image_parallax_inverted',
			[
				'label'   => esc_html__( 'Inverted', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'True', 'theplus' ),
				'label_off' => esc_html__( 'False', 'theplus' ),
				'default' => 'no',
				'separator' => 'after',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_simple_image',
					'image_parallax_style' => ['style_1','style_2'],
					'column_bg_image_new[url]!' => '',
				],
			]
		);
		$this->add_control(
            'columns_animation_direction', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Move Direction', 'theplus'),
				'default' => '',
				'options' => [
                    '' => esc_html__('None', 'theplus'),
                    'right' => esc_html__('Left to Right', 'theplus'),
                    'left' => esc_html__('Right to Left', 'theplus'),
                    'top' => esc_html__('Top to Bottom', 'theplus'),
                    'bottom' => esc_html__('Bottom to Top', 'theplus'),
                ],
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_animated_bg',
					'column_bg_image_new[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'columns_parallax_sense',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Transition Speed', 'theplus'),
				'size_units' => [ '%' ],
				'default' => [
					'unit' => '%',
					'size' => 30,
				],
				'render_type' => 'ui',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_animated_bg',
					'column_bg_image_new[url]!' => '',
				],
            ]
        );
		$this->add_control(
			'bg_img_parallax',
			[
				'label'   => esc_html__( 'Scroll Parallax', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => '',
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'columns_parallax_style' => 'columns_simple_image',
					'column_bg_image_new[url]!' => '',
				],
			]
		);
		$this->add_control(
			'magic_scroll',
			[
				'label'        => esc_html__( 'Magic Scroll', 'theplus' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'theplus' ),
				'label_off'    => esc_html__( 'No', 'theplus' ),
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'column_bg_image_new[url]!' => '',
				],
			]
		);
		$this->add_group_control(
			\Theplus_Magic_Scroll_Option_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Scroll Options', 'theplus' ),
				'name'           => 'scroll_option',
				'condition'    => [
					'select_anim' => [ 'bg_image' ],
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		$this->start_controls_tabs( 'tabs_magic_scroll' );
		$this->start_controls_tab(
			'tab_scroll_from',
			[
				'label' => esc_html__( 'Initial', 'theplus' ),
				'condition'    => [
					'select_anim' => [ 'bg_image' ],
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$this->add_group_control(
			\Theplus_Magic_Scroll_From_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Initial Position', 'theplus' ),
				'name'           => 'scroll_from',
				'condition'    => [
					'select_anim' => [ 'bg_image' ],
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_scroll_to',
			[
				'label' => esc_html__( 'Final', 'theplus' ),
				'condition'    => [
					'select_anim' => [ 'bg_image' ],
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$this->add_group_control(
			\Theplus_Magic_Scroll_To_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Final Position', 'theplus' ),
				'name'           => 'scroll_to',
				'condition'    => [
					'select_anim' => [ 'bg_image' ],
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'bg_kenburns_effect',
			[
				'label' => esc_html__( 'Ken-Burns Effect', 'theplus' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
				'default' => 'no',
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
				],
			]
		);
		$this->add_control(
            'kenburn_effect_direction', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Effect Direction', 'theplus'),
				'default' => 'normal',
				'options' => [
                    'normal' => esc_html__('Normal', 'theplus'),
                    'alternate' => esc_html__('Alternate', 'theplus'),
                ],
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'bg_kenburns_effect' => 'yes',
				],		
			]
        );
		$this->add_control(
			'kenburn_effect_duration',
			[
				'label' => esc_html__( 'Effect Duration(Speed)', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => '',
				'range' => [
					'' => [
						'min' => 0,
						'max' => 100,
						'step' => 5,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 15,
				],
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'bg_kenburns_effect' => 'yes',
				],
			]
		);
		$this->add_control(
			'responsive_image',
			[
				'label'        => esc_html__( 'Responsive Image', 'theplus' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'theplus' ),
				'label_off'    => esc_html__( 'No', 'theplus' ),
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_image' ],
				],
			]
		);
		$this->start_controls_tabs( 'tabs_responsive_image' );
		$this->start_controls_tab(
			'tab_responsive_tablet',
			[
				'label' => esc_html__( 'Tablet', 'theplus' ),
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
				],
			]
		);
		$this->add_control(
            'tablet_bg_image', [
				'type' => Controls_Manager::MEDIA,
				'label' => esc_html__('Tablet Image', 'theplus'),
				'dynamic' => ['active'   => true,],				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
				],
			]
        );
		$this->add_control(
            'tablet_bg_image_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Image Position', 'theplus'),
				'default' => 'center center',
				'options' => theplus_get_image_position_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'tablet_bg_image[url]!' => '',
				],			
			]
        );
		$this->add_control(
            'tablet_bg_img_attach', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Attachment', 'theplus'),
				'default' => 'scroll',
				'options' => theplus_get_image_attachment_options(),				
				'condition' => [
				'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'tablet_bg_image[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'tablet_bg_img_repeat', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Repeat', 'theplus'),
				'default' => 'repeat',
				'options' => theplus_get_image_reapeat_options(),
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'tablet_bg_image[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'tablet_bg_image_size', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Background Size', 'theplus'),
				'default' => 'cover',
				'options' => theplus_get_image_size_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'tablet_bg_image[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'tablet_overlay_color',
            [
                'label' => esc_html__('Overlay Color', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
				'condition'    => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'tablet_bg_image[url]!' => '',
				],
            ]
        );
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_responsive_mobile',
			[
				'label' => esc_html__( 'Mobile', 'theplus' ),
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
				],
			]
		);
		$this->add_control(
            'mobile_bg_image', [
				'type' => Controls_Manager::MEDIA,
				'label' => esc_html__('Mobile Image', 'theplus'),
				'dynamic' => ['active'   => true,],
				'condition' => [
					'responsive_image' => [ 'yes' ],
					'select_anim' => [ 'bg_image' ],
				],
			]
        );
		$this->add_control(
            'mobile_bg_image_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Image Position', 'theplus'),
				'default' => 'center center',
				'options' => theplus_get_image_position_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'mobile_bg_image[url]!' => '',
				],			
			]
        );
		$this->add_control(
            'mobile_bg_img_attach', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Attachment', 'theplus'),
				'default' => 'scroll',
				'options' => theplus_get_image_attachment_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'mobile_bg_image[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'mobile_bg_img_repeat', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Repeat', 'theplus'),
				'default' => 'repeat',
				'options' => theplus_get_image_reapeat_options(),
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'mobile_bg_image[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'mobile_bg_image_size', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Background Size', 'theplus'),
				'default' => 'cover',
				'options' => theplus_get_image_size_options(),				
				'condition' => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'mobile_bg_image[url]!' => '',
				],		
			]
        );
		$this->add_control(
            'mobile_overlay_color',
            [
                'label' => esc_html__('Overlay Color', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
				'condition'    => [
					'select_anim' => [ 'bg_image' ],
					'responsive_image' => [ 'yes' ],
					'mobile_bg_image[url]!' => '',
				],
            ]
        );
		$this->end_controls_tab();
		$this->end_controls_tabs();
		/*--------background image-------*/
		/*--------Animated color-------*/
		$repeater_column_bg = new \Elementor\Repeater();
		$repeater_column_bg->add_control(
			'column_bg_single_color', [
				'label' => esc_html__('Color', 'theplus'),
				'type' => Controls_Manager::COLOR,
				'default' => '',
			]
		);
		$repeater_column_bg->add_control(
			'column_bg_single_image', [
				'label' => 'Select Image <b>(Works only in On Scroll Background Animation)</b>',
				'type' => Controls_Manager::MEDIA,
				'dynamic' => ['active'   => true,],
				'default' => [ 'url' => '',	],
				'separator' => 'before',
			]
		);
		$repeater_column_bg->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'column_bg_overlay_image',
				'label' => esc_html__( 'Overlay Color On Image', 'theplus' ),
				'types' => [ 'classic', 'gradient' ],
				'selector' => '.scroll{{ID}} {{CURRENT_ITEM}}.plus-section-bg-scrolling:after',
				'description' => 'Overlay Color On Image <b>(Works only in On Scroll Background Animation)</b>',
			]
		);
		$this->add_control(
            'columns_bg_colors',
            [
				'label' => esc_html__( 'Select Multiple Colors', 'theplus' ),
                'type' => Controls_Manager::REPEATER,
				'fields' => $repeater_column_bg->get_controls(),
                'default' => [
                    [
                        'column_bg_single_color' => '#212121',
                    ],
					[
                        'column_bg_single_color' => '#ff5b5b',
                    ],
					[
                        'column_bg_single_color' => '#4054b2',
                    ],
                ],
                'title_field' => '{{{ column_bg_single_color }}}',
				'condition' => [
					'select_anim' => [ 'bg_color','bg_animate_gradient','scroll_animate_color' ],
				],
            ]
        );
		$this->add_control(
            'column_anim_bg_duration',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Animation Duration', 'theplus'),
                'label_block' => true,
                'default' => esc_html__('3000', 'theplus'),
				'condition' => [
					'select_anim' => [ 'bg_color'],
				],
            ]
        );
		$this->add_control(
			'bg_animate_gradient_duration',
			[
				'label' => esc_html__( 'Animation Duration', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 's' ],
				'range' => [
					's' => [
						'min' => 1,
						'max' => 30,
						'step' => 0.5,
					],
				],
				'default' => [
					'unit' => 's',
					'size' => 15,
				],
				'condition' => [
					'select_anim' => [ 'bg_animate_gradient' ],
				],
			]
		);
		
		$this->add_control(
			'bg_animate_gradient_rotate',
			[
				'label' => esc_html__( 'Animate Rotate Color', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['deg'],
				'range' => [
					'deg' => [
						'min' => 0,
						'max' => 360,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'deg',
					'size' => 120,
				],
				'condition' => [
					'select_anim' => [ 'bg_animate_gradient' ],
				],
			]
		);
		$this->add_control(
			'full_page_gradient',
			[
				'label' => esc_html__( 'Full Page Background', 'theplus' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Enable', 'theplus' ),
				'label_off' => esc_html__( 'Disable', 'theplus' ),
				'default' => 'no',
				'description' => esc_html__('Note : We recommend to use "Elementor Canvas" template from the Page options for complete look.','theplus'),
				'condition' => [
					'select_anim' => [ 'bg_animate_gradient' ],
				],
			]
		);
		
		$this->add_control(
			'scrolling_change_color',
			[
				'label' => esc_html__( 'On Scroll Change', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'no',
				'options' => [
					'no'  => esc_html__( 'Direct Color Change Effect', 'theplus' ),
					'yes' => esc_html__( 'Gradient Like Effect', 'theplus' ),
				],
				'condition' => [
					'select_anim' => [ 'scroll_animate_color' ],
				],
			]
		);
		$this->add_control(
			'scrolling_page_full',
			[
				'label' => esc_html__( 'Position', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'inherit',
				'options' => [
					'inherit'  => esc_html__( 'Inherit', 'theplus' ),
					'relative' => esc_html__( 'Relative', 'theplus' ),
				],
				'description' => esc_html__( 'Note : Use this field, If your background isn\'t work the way it should be.', 'theplus' ),
				'condition' => [
					'select_anim' => [ 'scroll_animate_color','bg_animate_gradient' ],
				],
			]
		);
		$this->add_control(
			'scroll_color_duration',
			[
				'label' => esc_html__( 'Transition Duration', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 's' ],
				'range' => [
					's' => [
						'min' => 0,
						'max' => 2,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 's',
					'size' => 0.7,
				],
				'condition' => [
					'select_anim' => [ 'scroll_animate_color' ],
					'scrolling_change_color!' => 'yes',
				],
			]
		);
		
		/*--------Animated color-------*/
		/*--------Carousel Background ------------*/
		$repeater_slider_bg = new \Elementor\Repeater();
		$repeater_slider_bg->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'slide_bg',
				'label' => esc_html__( 'Slide Background Color', 'theplus' ),
				'types' => [ 'classic', 'gradient' ],
				'selector' => '.slide-{{ID}} {{CURRENT_ITEM}}.bg-carousel-slide',
			]
		);
		$this->add_control(
            'slide_bg_conn_id',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Carousel Connection ID', 'theplus'),
                'default' => '',
                'condition' => [
					'select_anim' => 'carousel_bgcolor',
				],
            ]
        );
		$this->add_control(
            'slide_bg_effect', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Change Bg Effect', 'theplus'),
                'default' => 'bgfadein',
                'options' => [
                    'bgfadein' => esc_html__('FadeIn Effect', 'theplus'),
                    'bgscale' => esc_html__('Scale Effect', 'theplus'),
                ],
				'condition' => [
					'select_anim' => 'carousel_bgcolor',
				],
            ]
        );
		$this->add_control(
            'slide_bg_transition',
            [
                'type' => Controls_Manager::NUMBER,
                'label' => esc_html__('Change Transition Duration', 'theplus'),
                'min' => 0.1,
				'max' => 2,
				'step' => 0.01,
				'default' => 0.5,
				'selectors' => [
					'.slide-{{ID}} .bg-carousel-slide' => 'transition: all {{VALUE}}s ease-in-out',
				],
                'condition' => [
					'select_anim' => 'carousel_bgcolor',
				],
            ]
        );
		$this->add_control(
            'slider_bgcolors',
            [
				'label' => esc_html__( 'Carousel Background Slides', 'theplus' ),
                'type' => Controls_Manager::REPEATER,
				'fields' => $repeater_slider_bg->get_controls(),
                'default' => [
                    [
                        'slide_bg_color' => '#212121',
                    ],					
                ],
                'title_field' => '{{{ slide_bg_color }}}',
				'condition' => [
					'select_anim' => 'carousel_bgcolor',
				],
            ]
        );
		/*--------Carousel Background ------------*/
		
		/*--------background video-------*/
		$this->add_control(
            'columns_video_variant', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Video Source', 'theplus'),
                'default' => 'youtube',
                'options' => [
                    'self-hosted' => esc_html__('Self Hosted', 'theplus'),
                    'youtube' => esc_html__('YouTube', 'theplus'),
                    'vimeo' => esc_html__('Vimeo', 'theplus'),
                ],
				'condition' => [
					'select_anim' => [ 'bg_video' ],
				],
            ]
        );
		$this->add_control(
            'columns_video_url_mp4',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('URL of Video (MP4)', 'theplus'),
                'label_block' => true,
                'separator' => 'before',
                'default' => '',
				'dynamic' => ['active'   => true,],
                'condition'    => [
					'select_anim' => [ 'bg_video' ],
					'columns_video_variant' => 'self-hosted',
				],
            ]
        );
		$this->add_control(
            'columns_video_url_webm',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('URL of Video (WebM/Ogg)', 'theplus'),
                'label_block' => true,
                'separator' => 'before',
                'default' => '',
				'dynamic' => ['active'   => true,],
                'condition'    => [
					'select_anim' => [ 'bg_video' ],
					'columns_video_variant' => 'self-hosted',
				],
            ]
        );
		$this->add_control(
            'columns_youtube_video_id',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Enter YouTube Video ID', 'theplus'),
                'label_block' => true,
                'separator' => 'before',
                'default' => 'QrI0jo5JZSs',
                'condition'    => [
					'select_anim' => [ 'bg_video' ],
					'columns_video_variant' => 'youtube',
				],
            ]
        );
		$this->add_control(
            'columns_vimeo_video_id',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Enter Vimeo Video ID', 'theplus'),
                'label_block' => true,
                'separator' => 'before',
                'default' => '241417119',
                'condition'    => [
					'select_anim' => [ 'bg_video' ],
					'columns_video_variant' => 'vimeo',
				],
            ]
        );
		$this->add_control(
			'columns_video_loop',
			[
				'label'   => esc_html__( 'Loop', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',				
				'condition' => [
					'select_anim' => [ 'bg_video' ],
				],
			]
		);
		$this->add_control(
			'columns_video_muted',
			[
				'label'   => esc_html__( 'Mute', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',				
				'condition' => [
					'select_anim' => [ 'bg_video' ],
				],
			]
		);
		$this->add_control(
            'columns_video_poster', [
				'type' => Controls_Manager::MEDIA,
				'label' => esc_html__('Fallback Image', 'theplus'),
				'dynamic' => ['active'   => true,],
				'condition' => [
					'select_anim' => [ 'bg_video' ],
				],
			]
        );
		$this->add_control(
			'fixed_bg_video',
			[
				'label'   => esc_html__( 'Parallax Background Video', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
				'default' => 'no',
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_video' ],
				],
			]
		);
		$this->add_control(
			'responsive_bg_video',
			[
				'label'        => esc_html__( 'Responsive Fallback Image', 'theplus' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'theplus' ),
				'label_off'    => esc_html__( 'No', 'theplus' ),
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_video' ],
				],
			]
		);
		$this->start_controls_tabs( 'tabs_responsive_video' );
		$this->start_controls_tab(
			'tab_responsive_video_tablet',
			[
				'label' => esc_html__( 'Tablet', 'theplus' ),
				'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_bg_video' => [ 'yes' ],
				],
			]
		);
		$this->add_control(
            'tablet_video_poster', [
				'type' => Controls_Manager::MEDIA,
				'label' => esc_html__('Fallback Image', 'theplus'),
				'dynamic' => ['active'   => true,],
				'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_bg_video' => [ 'yes' ],
				],
			]
        );
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_responsive_video_mobile',
			[
				'label' => esc_html__( 'Mobile', 'theplus' ),
				'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_bg_video' => [ 'yes' ],
				],
			]
		);
		$this->add_control(
            'mobile_video_poster', [
				'type' => Controls_Manager::MEDIA,
				'label' => esc_html__('Fallback Image', 'theplus'),
				'dynamic' => ['active'   => true,],
				'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_bg_video' => [ 'yes' ],
				],
			]
        );
		$this->end_controls_tab();
		$this->end_controls_tabs();
		
		$this->add_control(
			'responsive_video_mp4',
			[
				'label'        => esc_html__( 'Responsive Bg Video', 'theplus' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'theplus' ),
				'label_off'    => esc_html__( 'No', 'theplus' ),
				'separator' => 'before',
				'condition' => [
					'select_anim' => [ 'bg_video' ],
				],
			]
		);
		$this->start_controls_tabs( 'tabs_responsive_video_mp4' );
		$this->start_controls_tab(
			'tab_responsive_video_mp4_tablet',
			[
				'label' => esc_html__( 'Tablet', 'theplus' ),
				'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_video_mp4' => [ 'yes' ],
				],
			]
		);
		$this->add_control(
            'responsive_video_mp4_tablet',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('URL of Video (MP4)', 'theplus'),
                'label_block' => true,
                'default' => '',
				'dynamic' => ['active'   => true,],
                'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_video_mp4' => [ 'yes' ],
				],
            ]
        );
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_responsive_video_mp4_mobile',
			[
				'label' => esc_html__( 'Mobile', 'theplus' ),
				'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_video_mp4' => [ 'yes' ],
				],
			]
		);
		$this->add_control(
            'responsive_video_mp4_mobile',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('URL of Video (MP4)', 'theplus'),
                'label_block' => true,
                'default' => '',
				'dynamic' => ['active'   => true,],
                'condition' => [
					'select_anim' => [ 'bg_video' ],
					'responsive_video_mp4' => [ 'yes' ],
				],
            ]
        );
		$this->end_controls_tab();
		$this->end_controls_tabs();
		/*--------background video-------*/
		/*--------background gallery-------*/
		$this->add_control(
			'images_gallery',
			[
				'label' => esc_html__( 'Add Multiple Images', 'theplus' ),
				'type' => Controls_Manager::GALLERY,
				'default' => [],
				'condition' => [
					'select_anim' => [ 'bg_gallery' ],
				],
			]
		);
		$this->add_control(
            'gallery_slide_style', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Transition Effects', 'theplus'),
                'default' => 'fade2',
                'options' => [
                    'fade2' => esc_html__('Fade', 'theplus'),
                    'blur2' => esc_html__('Blur', 'theplus'),
                    'flash2' => esc_html__('Flash', 'theplus'),
                    'negative2' => esc_html__('Negative', 'theplus'),
                    'burn2' => esc_html__('Burn', 'theplus'),
                    'slideLeft2' => esc_html__('SlideLeft', 'theplus'),
                    'slideRight2' => esc_html__('SlideRight', 'theplus'),
                    'slideUp2' => esc_html__('SlideUp', 'theplus'),
                    'slideDown2' => esc_html__('SlideDown', 'theplus'),
                    'zoomIn2' => esc_html__('ZoomIn', 'theplus'),
                    'zoomOut2' => esc_html__('ZoomOut', 'theplus'),
                    'SwirlLeft2' => esc_html__('SwirlLeft', 'theplus'),
                    'swirlRight2' => esc_html__('SwirlRight', 'theplus'),
                ],
				'condition' => [
					'select_anim' => [ 'bg_gallery' ],
				],
            ]
        );
		
		$this->add_control(
            'gallery_animation_duration',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Transition Duration', 'theplus'),
                'label_block' => true,
                'separator' => 'before',
                'default' => '5000',
                'condition'    => [
					'select_anim' => [ 'bg_gallery' ],
				],
            ]
        );
		$this->add_control(
            'slide_delay_time',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Slide Delay Time', 'theplus'),
                'label_block' => true,
                'default' => '7000',
                'condition'    => [
					'select_anim' => [ 'bg_gallery' ],
				],
            ]
        );
		$this->add_control(
            'gallery_overlays', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Texture Overlay', 'theplus'),
                'default' => 'false',
                'options' => [
                    'false' => esc_html__('Off', 'theplus'),
                    '1' => esc_html__('Style 1', 'theplus'),
                    '2' => esc_html__('Style 2', 'theplus'),
                    '3' => esc_html__('Style 3', 'theplus'),
                    '4' => esc_html__('Style 4', 'theplus'),
                    '5' => esc_html__('Style 5', 'theplus'),
                    '6' => esc_html__('Style 6', 'theplus'),
                    '7' => esc_html__('Style 7', 'theplus'),
                    '8' => esc_html__('Style 8', 'theplus'),
                    '9' => esc_html__('Style 9', 'theplus'),
                ],
				'condition' => [
					'select_anim' => [ 'bg_gallery' ],
				],
            ]
        );
		/*--------background gallery-------*/
		/*--------Image segmentation-------*/
		$this->add_control(
            'bg_options', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Background', 'theplus'),
                'default' => 'bg_image',
                'options' => [
                    'bg_image' => esc_html__('Image', 'theplus'),
                    'bg_color' => esc_html__('Solid Color', 'theplus'),
                    'bg_gradient' => esc_html__('Gradient Color', 'theplus'),
                ],
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
				],
            ]
        );
		$this->add_control(
            'bg_image', [
				'type' => Controls_Manager::MEDIA,
				'label' => esc_html__('Upload Image', 'theplus'),
				'dynamic' => ['active'   => true,],
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_image' ],
				],
			]
        );
		$this->add_control(
            'bg_pieces_color',
            [
                'label' => esc_html__('Select Color', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ff214f',
                'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_color' ],
				],
            ]
        );
		$this->add_control(
            'bg_gradient1',
            [
                'label' => esc_html__('Color 1', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => 'orange',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_gradient' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'bg_gradient1_control',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Color 1 Location', 'theplus'),
				'size_units' => [ '%' ],
				'default' => [
					'unit' => '%',
					'size' => 0,
				],
				'render_type' => 'ui',
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_gradient' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'bg_gradient2',
            [
                'label' => esc_html__('Color 2', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => 'cyan',
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_gradient' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'bg_gradient2_control',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Color 2 Location', 'theplus'),
				'size_units' => [ '%' ],
				'default' => [
					'unit' => '%',
					'size' => 100,
				],
				'render_type' => 'ui',
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_gradient' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'bg_gradient_style', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Gradient Style', 'theplus'),
                'default' => 'linear',
                'options' => theplus_get_gradient_styles(),
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_gradient' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'bg_gradient_angle', [
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Gradient Angle', 'theplus'),
				'size_units' => [ 'deg' ],
				'default' => [
					'unit' => 'deg',
					'size' => 180,
				],
				'range' => [
					'deg' => [
						'step' => 10,
					],
				],
				'selectors' => [
					'{{SELECTOR}} .pt-plus-row-set .pt-plus-row-imageclip' => 'background-color: transparent; background-image: linear-gradient({{SIZE}}{{UNIT}}, {{bg_gradient1.VALUE}} {{bg_gradient1_control.SIZE}}{{bg_gradient1_control.UNIT}}, {{bg_gradient2.VALUE}} {{bg_gradient2_control.SIZE}}{{bg_gradient2_control.UNIT}})',
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_gradient' ],
					'bg_gradient_style' => ['linear']
				],
				'of_type' => 'gradient',
			]
        );
		$this->add_control(
            'bg_gradient_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Position', 'theplus'),
				'options' => theplus_get_position_options(),
				'default' => 'center center',
				'selectors' => [
					'{{WRAPPER}} .pt-plus-row-set .pt-plus-row-imageclip' => 'background-color: transparent; background-image: radial-gradient(at {{VALUE}}, {{bg_gradient1.VALUE}} {{bg_gradient1_control.SIZE}}{{bg_gradient1_control.UNIT}}, {{bg_gradient2.VALUE}} {{bg_gradient2_control.SIZE}}{{bg_gradient2_control.UNIT}})',
				],
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'bg_options' => [ 'bg_gradient' ],
					'bg_gradient_style' => 'radial',
			],
			'of_type' => 'gradient',
			]
        );
		$this->add_control(
            'style_of_pieces', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Layout Style', 'theplus'),
				'options' => [
					'style-1' => esc_html__('Style 1', 'theplus'),
					'style-2' => esc_html__('Style 2', 'theplus'),
					'style-3' => esc_html__('Style 3', 'theplus'),
					'style-4' => esc_html__('Style 4', 'theplus'),
					'style-5' => esc_html__('Style 5', 'theplus'),
					'style-6' => esc_html__('Style 6', 'theplus'),
					'custom' => esc_html__('Custom', 'theplus'),				
				],
				'default' => 'style-1',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
				],
			]
        );
		$this->add_control(
            'image_clip_opt',
            [
				'label' => esc_html__( 'No of Segmentation On Position', 'theplus' ),
                'type' => Controls_Manager::REPEATER,
                'default' => [
                    [
                        'pos_xposition' => '45',                       
                        'pos_yposition' => '20',                       
                        'pos_width' => '50',                       
                        'pos_height' => '70',                       
                        'animate_pieces' => 'scale',                       
                        'animate_speed' => '2s',                       
                    ],
                ],
                'fields' => [
                    [
                        'name' => 'pos_xposition',
                        'type' => Controls_Manager::TEXT,
                        'label_block' => true,
                        'label' => esc_html__('Left', 'theplus'),
                        'default' => '45',
                    ],
					[
                        'name' => 'pos_yposition',
                        'type' => Controls_Manager::TEXT,
                        'label_block' => true,
                        'label' => esc_html__('Top', 'theplus'),
                        'default' => '20',
                    ],
					[
                        'name' => 'pos_width',
                        'type' => Controls_Manager::TEXT,
                        'label_block' => true,
                        'label' => esc_html__('Width', 'theplus'),
                        'default' => '50',
                    ],
					[
                        'name' => 'pos_height',
                        'type' => Controls_Manager::TEXT,
                        'label_block' => true,
                        'label' => esc_html__('Height', 'theplus'),
                        'default' => '50',
                    ],
					[
                        'name' => 'animate_pieces',
                        'type' => Controls_Manager::SELECT,
                        'label_block' => true,
						'options' => [
							'' => esc_html__('Select Animate', 'theplus'),
							'scale' => esc_html__('Scale', 'theplus'),
							'float' => esc_html__('Float', 'theplus'),
							'rotate' => esc_html__('Rotate', 'theplus'),
							'flash' => esc_html__('Flash', 'theplus'),
						],
                        'label' => esc_html__('Segment Animation', 'theplus'),
                        'default' => '',
                    ],
					[
                        'name' => 'animate_speed',
                        'type' => Controls_Manager::SELECT,
                        'label_block' => true,
						'options' => [
							'' => esc_html__('Select Animate speed', 'theplus'),
							'1s' => esc_html__('1s', 'theplus'),
							'2s' => esc_html__('2s', 'theplus'),
							'3s' => esc_html__('3s', 'theplus'),
							'4s' => esc_html__('4s', 'theplus'),
							'5s' => esc_html__('5s', 'theplus'),
							'6s' => esc_html__('6s', 'theplus'),
							'7s' => esc_html__('7s', 'theplus'),
							'8s' => esc_html__('8s', 'theplus'),
							'9s' => esc_html__('9s', 'theplus'),
							'10s' => esc_html__('10s', 'theplus'),
						],
                        'label' => esc_html__('Segment Animation', 'theplus'),
                        'default' => '',
                    ],
                ],
                'title_field' => '{{{ pos_xposition }}}',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
            ]
        );
		$this->add_control(
            'no_of_pieces', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Number of Segmentations', 'theplus'),
				'separator'=> 'before',
				'options' => [
					'1' => esc_html__('1', 'theplus'),
					'2' => esc_html__('2', 'theplus'),
					'3' => esc_html__('3', 'theplus'),
					'4' => esc_html__('4', 'theplus'),
					'5' => esc_html__('5', 'theplus'),
					'6' => esc_html__('6', 'theplus'),
					'7' => esc_html__('7', 'theplus'),			
					'8' => esc_html__('8', 'theplus'),			
					'9' => esc_html__('9', 'theplus'),			
				],
				'default' => '1',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
        );
		$this->add_control(
			'parallax_effect',
			[
				'label'   => esc_html__( 'Mouse Hover Parallax Effect', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'false',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
		);
		$this->add_control(
            'min_parallax', [
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Minimum Parallax Value', 'theplus'),
				'size_units' => '',
				'default' => [
					'size' => 10,
				],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 100,
						'step' => 2,
					],
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
        );
		$this->add_control(
            'max_parallax', [
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Maximum Parallax Value', 'theplus'),
				'size_units' => '',
				'default' => [
					'size' => 40,
				],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 100,
						'step' => 2,
					],
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
        );
		$this->add_control(
            'opacity_pieces', [
				'type' => Controls_Manager::SLIDER,
				'separator'=> 'before',
				'label' => esc_html__('Segments Opacity', 'theplus'),
				'size_units' => '',
				'default' => [
					'size' => 0,
				],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 1,
						'step' => 0.1,
					],
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
        );
		$this->add_control(
            'top_shadow', [
				'type' => Controls_Manager::SLIDER,
				'separator'=> 'before',
				'label' => esc_html__('Top Shadow', 'theplus'),
				'size_units' => '',
				'default' => [
					'size' => 10,
				],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
        );
		$this->add_control(
            'left_shadow', [
				'type' => Controls_Manager::SLIDER,
				'separator'=> 'before',
				'label' => esc_html__('Left Shadow', 'theplus'),
				'size_units' => '',
				'default' => [
					'size' => 10,
				],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 100,
						'step' => 2,
					],
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
        );
		$this->add_control(
            'anim_duration',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Animation Time Duration', 'theplus'),
                'label_block' => true,
                'separator' => 'before',
                'default' => '1500',
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
            ]
        );
		$this->add_control(
            'easing_transition', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Transition Effect', 'theplus'),
				'separator'=> 'before',
				'options' => [
					'linear' => esc_html__('linear', 'theplus'),
					'swing' => esc_html__('swing', 'theplus'),
					'easeInQuad' => esc_html__('easeInQuad', 'theplus'),
					'easeOutQuad' => esc_html__('easeOutQuad', 'theplus'),
					'easeInOutQuad' => esc_html__('easeInOutQuad', 'theplus'),
					'easeInCubic' => esc_html__('easeInCubic', 'theplus'),			
					'easeOutCubic' => esc_html__('easeOutCubic', 'theplus'),			
					'easeInOutCubic' => esc_html__('easeInOutCubic', 'theplus'),			
					'easeInQuart' => esc_html__('easeInQuart', 'theplus'),			
					'easeOutQuart' => esc_html__('easeOutQuart', 'theplus'),			
					'easeInOutQuart' => esc_html__('easeInOutQuart', 'theplus'),			
					'easeInQuint' => esc_html__('easeInQuint', 'theplus'),			
					'easeOutQuint' => esc_html__('easeOutQuint', 'theplus'),			
					'easeInOutQuint' => esc_html__('easeInOutQuint', 'theplus'),			
					'easeInExpo' => esc_html__('easeInExpo', 'theplus'),			
					'easeOutExpo' => esc_html__('easeOutExpo', 'theplus'),			
					'easeInOutExpo' => esc_html__('easeInOutExpo', 'theplus'),			
					'easeInSine' => esc_html__('easeInSine', 'theplus'),			
					'easeOutSine' => esc_html__('easeOutSine', 'theplus'),			
					'easeInOutSine' => esc_html__('easeInOutSine', 'theplus'),			
					'easeInCirc' => esc_html__('easeInCirc', 'theplus'),			
					'easeOutCirc' => esc_html__('easeOutCirc', 'theplus'),			
					'easeInOutCirc' => esc_html__('easeInOutCirc', 'theplus'),			
					'easeOutElastic' => esc_html__('easeOutElastic', 'theplus'),			
					'easeOutBack' => esc_html__('easeOutBack', 'theplus'),			
					'easeOutBounce' => esc_html__('easeOutBounce', 'theplus'),			
				],
				'default' => 'linear',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
			]
        );
		$this->add_control(
            'delay_transition',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Transition Delay', 'theplus'),
                'label_block' => true,
                'default' => '100',
                'description' => esc_html__("E.g. 50,100 etc..", "theplus"),
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
            ]
        );
		$this->add_control(
            'translatez_min',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Minimum TranslateZ', 'theplus'),
                'label_block' => true,
                'separator' => 'before',
                'default' => '10',
                'description' => esc_html__("E.g. 10,20 etc..", "theplus"),
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
            ]
        );
		$this->add_control(
            'translatez_max',
            [
                'type' => Controls_Manager::TEXT,
                'label' => esc_html__('Maximum TranslateZ', 'theplus'),
                'label_block' => true,
                'default' => '100',
                'description' => esc_html__("E.g. 100,200 etc..", "theplus"),
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'style_of_pieces' => 'custom',
				],
            ]
        );		
		$this->add_control(
			'box_shadow_pieces',
			[
				'label' => esc_html__( 'Box Shadow', 'theplus' ),
				'type' => Controls_Manager::POPOVER_TOGGLE,
				'label_off' => __( 'Default', 'theplus' ),
				'label_on' => __( 'Custom', 'theplus' ),
				'return_value' => 'yes',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
				],
			]
		);			
		$this->start_popover();
		$this->add_control(
			'box_shadow_color',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => 'rgba(0,0,0,0.5)',
				'condition' => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'box_shadow_pieces' => 'yes',
				],
			]
		);
		$this->add_control(
			'box_shadow_horizontal',
			[
				'label' => esc_html__( 'Horizontal', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'max' => -100,
						'min' => 100,
						'step' => 2,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'box_shadow_pieces' => 'yes',
				],
			]
		);
		$this->add_control(
			'box_shadow_vertical',
			[
				'label' => esc_html__( 'Vertical', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'max' => -100,
						'min' => 100,
						'step' => 2,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'box_shadow_pieces' => 'yes',
				],
			]
		);
		$this->add_control(
			'box_shadow_blur',
			[
				'label' => esc_html__( 'Blur', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'max' => 0,
						'min' => 100,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 10,
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'box_shadow_pieces' => 'yes',
				],
			]
		);
		$this->add_control(
			'box_shadow_spread',
			[
				'label' => esc_html__( 'Spread', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'max' => -100,
						'min' => 100,
						'step' => 2,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'condition'    => [
					'select_anim' => [ 'bg_Image_pieces' ],
					'box_shadow_pieces' => 'yes',
				],
			]
		);
		$this->end_popover();	
		/*--------Image segmentation-------*/		
		$this->end_controls_section();
		/*---------Middle Layer-------------*/
		$this->start_controls_section(
			'middle_layer_section',
			[
				'label' => esc_html__( 'Middle Layer', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
            'middle_style', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Select Option', 'theplus'),
                'default' => '',
                'options' => [
                    '' => esc_html__('Select option', 'theplus'),
                    'canvas' => esc_html__('Canvas Effect', 'theplus'),
                    'mordern_parallax' => esc_html__('Modern Mouse Hover Parallax', 'theplus'),
                    'moving_image' => esc_html__('Auto Moving Layer', 'theplus'),
                    'mordern_image_effect' => esc_html__('Modern Image Effect', 'theplus'),
                    'multi_layered_parallax' => esc_html__('Multi Layer Parallax', 'theplus'),
                    'animated_svg' => esc_html__('Animated SVG (Coming Soon)', 'theplus'),
                ],
            ]
        );
		/* canvas */
		$this->add_control(
            'canvas_style', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Canvas Style', 'theplus'),
                'default' => 'style_1',
                'options' => [
                    'style_1' => esc_html__('Style 1', 'theplus'),
                    'style_2' => esc_html__('Style 2', 'theplus'),
                    'style_5' => esc_html__('Style 3', 'theplus'),
                    'style_6' => esc_html__('Style 4', 'theplus'),
                    'style_3' => esc_html__('Style 5', 'theplus'),
                    'style_4' => esc_html__('Style 6', 'theplus'),
                    'style_7' => esc_html__('Style 7', 'theplus'),
                    'style_8' => esc_html__('Style 8', 'theplus'),
                    'custom' => esc_html__('Custom', 'theplus'),
                ],
				'condition'    => [
					'middle_style' => [ 'canvas' ],
				],
            ]
        );
		$this->add_control(
			'custom_particles_js',
			[
				'label' => esc_html__( 'Particles JSON', 'theplus' ),
				'type' => Controls_Manager::TEXTAREA,
				'condition' => [
					'middle_style' => [ 'canvas' ],
					'canvas_style' => [ 'custom' ],
				],
				'description' => sprintf( __('Paste your particles JSON code here - Generate it from <a href="http://vincentgarreau.com/particles.js/#default" target="_blank">Here</a>.</br>Note : This canvas won\'t reflect in the backend editor. Please update and check on the frontend.', 'theplus' )),
				'default' => '',
			]
		);
		$this->add_control(
			'custom_particles_js_z_index',
			[
				'label' => esc_html__( 'Particles JSON Z-index', 'theplus' ),
				'type' => Controls_Manager::NUMBER,
				'min' => 0,
				'max' => 500000,
				'step' => 1,
				'default' => '',
				'selectors' => [
					'.canvas-style-custom' => 'z-index: {{SIZE}};',
				],	
				'condition' => [
					'middle_style' => [ 'canvas' ],
					'canvas_style' => [ 'custom' ],
				],
				
				'separator' => 'before',
			]
		);
		$this->add_control(
            'canvas_multi_color',
            [
				'label' => esc_html__( 'Select Multiple Colors', 'theplus' ),
                'type' => Controls_Manager::REPEATER,
                'default' => [
                    [
                        'canvas_single_color' => '#212121',                       
                    ],
					[
                        'canvas_single_color' => '#ff5b5b',                       
                    ],
					[
                        'canvas_single_color' => '#4054b2',                       
                    ],
                ],
                'fields' => [
                    [
                        'name' => 'canvas_single_color',
                        'type' => Controls_Manager::COLOR,
                        'label_block' => true,
                        'label' => esc_html__('Color', 'theplus'),
                        'default' => '#d3d3d3',
                    ],
                ],
                'title_field' => '{{{ canvas_single_color }}}',
				'condition'    => [
					'middle_style' => [ 'canvas' ],
					'canvas_style' => [ 'style_1' ],
				],
            ]
        );
		$this->add_control(
		'canvas_style6_color',
            [
                'label' => esc_html__('Color', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => '#313131',
				'condition'    => [
					'middle_style' => [ 'canvas' ],
					'canvas_style' => [ 'style_2','style_3','style_4','style_5','style_6','style_7' ],
				],
            ]
        );
		$this->add_control(
            'canvas_type', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Canvas Shape', 'theplus'),
                'default' => 'circle',
                'options' => [
                    'circle' => esc_html__('Circle', 'theplus'),
                    'edge' => esc_html__('Edge', 'theplus'),
                    'triangle' => esc_html__('Triangle', 'theplus'),
                    'polygon' => esc_html__('Polygon', 'theplus'),
                    'star' => esc_html__('Star', 'theplus'),
                ],
				'condition'    => [
					'middle_style' => [ 'canvas' ],
					'canvas_style' => [ 'style_3','style_4','style_7' ],
				],
            ]
        );
		/* canvas */
		/*Multi layered Parallax*/		
		$repeater_multi_layered = new \Elementor\Repeater();
		$repeater_multi_layered->add_control(
			'layer_image',[
				'label' => esc_html__( 'Upload Image', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => ['active'   => true,],
			]
		);
		$repeater_multi_layered->add_control(
            'layer_image_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Image Position', 'theplus'),
				'default' => 'bottom center',
				'options' => theplus_get_image_position_options(),				
				'condition' => [					
					'layer_image[url]!' => '',
				],			
			]
        );
		$repeater_multi_layered->add_control(
            'layer_image_attach', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Attachment', 'theplus'),
				'default' => 'scroll',
				'options' => theplus_get_image_attachment_options(),				
				'condition' => [					
					'layer_image[url]!' => '',
				],	
			]
        );
		$repeater_multi_layered->add_control(
            'layer_image_repeat', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Repeat', 'theplus'),
				'default' => 'repeat',
				'options' => theplus_get_image_reapeat_options(),
				'condition' => [					
					'layer_image[url]!' => '',
				],
			]
        );
		$repeater_multi_layered->add_control(
            'layer_image_size', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Background Size', 'theplus'),
				'default' => 'cover',
				'options' => theplus_get_image_size_options(),				
				'condition' => [					
					'layer_image[url]!' => '',
				],
			]
        );
		$repeater_multi_layered->add_control(
			'magic_scroll',[
				'label'   => esc_html__( 'Magic Scroll', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
			]
		);
		$repeater_multi_layered->add_group_control(
			\Theplus_Magic_Scroll_Option_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Scroll Options', 'theplus' ),
				'name'           => 'scroll_option',
				'render_type'  => 'template',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		
		$repeater_multi_layered->start_controls_tabs( 'tabs_magic_scroll' );
		$repeater_multi_layered->start_controls_tab(
			'tab_scroll_from',
			[
				'label' => esc_html__( 'Initial', 'theplus' ),
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater_multi_layered->add_group_control(
			\Theplus_Magic_Scroll_From_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Initial Position', 'theplus' ),
				'name'           => 'scroll_from',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		$repeater_multi_layered->end_controls_tab();
		$repeater_multi_layered->start_controls_tab(
			'tab_scroll_to',
			[
				'label' => esc_html__( 'Final', 'theplus' ),
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater_multi_layered->add_group_control(
			\Theplus_Magic_Scroll_To_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Final Position', 'theplus' ),
				'name'           => 'scroll_to',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		
		$repeater_multi_layered->end_controls_tab();
		$repeater_multi_layered->end_controls_tabs();
		
		$repeater_multi_layered->add_control(
			'responsive_visible_opt',[
				'label'   => esc_html__( 'Responsive Visibility', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Enable', 'theplus' ),
				'label_off' => esc_html__( 'Disable', 'theplus' ),
				'separator' => 'before',
			]
		);
		$repeater_multi_layered->add_control(
			'desktop_opt',[
				'label'   => esc_html__( 'Desktop', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater_multi_layered->add_control(
			'tablet_opt',[
				'label'   => esc_html__( 'Tablet', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater_multi_layered->add_control(
			'mobile_opt',[
				'label'   => esc_html__( 'Mobile', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater_multi_layered->add_control(
			'mordern_z_index',
			[
				'label' => esc_html__( 'Z-index', 'theplus' ),
				'type' => Controls_Manager::NUMBER,
				'min' => 0,
				'max' => 5000,
				'step' => 1,
				'default' => '',
				'separator' => 'before',
			]
		);
		$this->add_control(
            'multi_layered_images',
            [
				'label' => '',
                'type' => Controls_Manager::REPEATER,
                'default' => [
                    [
                        'layer_image' => '',
                    ],
				],
                'fields' => $repeater_multi_layered->get_controls(),
                'title_field' => '{{{ layer_image }}}',
				'condition'    => [
					'middle_style' => [ 'multi_layered_parallax' ],
				],
            ]
        );
		$this->add_control(
			'magic_scroll_transtion_heading',
			[
				'label' => esc_html__( 'Tablet/Mobile Parallax Smoothness Options :', 'theplus' ),
				'type' => Controls_Manager::HEADING,
				'description' => esc_html__( 'You can use this in alternate to "Smooth Scroll" Widget. If you have turn Smooth Scroll on desktop on and in Tablet/Mobile Off. This option will only work in Tablet/Mobile. Proper selection of positive/negative value make effect smooth. We suggest to try it maximum to get most out of it.', 'theplus' ),
				'separator' => 'before',
				'condition'    => [
					'middle_style' => [ 'multi_layered_parallax' ],
				],
			]
		);
		$this->add_control(
			'magic_scroll_transtion_duration',
			[
				'label' => esc_html__( 'Magic Scroll Transition Duration(s)', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 's' ],
				'range' => [
					's' => [
						'min' => 0,
						'max' => 5,
						'step' => 0.01,
					],
				],
				'default' => [
					'unit' => 's',
					'size' => 1.3,
				],
				'selectors' => [
					'.theplus_multi_layered_parallax.magic-scroll .parallax-scroll,.theplus_multi_layered_parallax.magic-scroll .scale-scroll,.theplus_multi_layered_parallax.magic-scroll .both-scroll' => '-webkit-transition: -webkit-transform {{SIZE}}{{UNIT}} {{magic_scroll_transtion_timing.VALUE}} {{magic_scroll_transtion_delay.SIZE}}{{magic_scroll_transtion_delay.UNIT}};-ms-transition: -ms-transform {{SIZE}}{{UNIT}} {{magic_scroll_transtion_timing.VALUE}} {{magic_scroll_transtion_delay.SIZE}}{{magic_scroll_transtion_delay.UNIT}};-moz-transition: -moz-transform {{SIZE}}{{UNIT}} {{magic_scroll_transtion_timing.VALUE}} {{magic_scroll_transtion_delay.SIZE}}{{magic_scroll_transtion_delay.UNIT}};-o-transition: -o-transform {{SIZE}}{{UNIT}} {{magic_scroll_transtion_timing.VALUE}} {{magic_scroll_transtion_delay.SIZE}}{{magic_scroll_transtion_delay.UNIT}};transition: transform {{SIZE}}{{UNIT}} {{magic_scroll_transtion_timing.VALUE}} {{magic_scroll_transtion_delay.SIZE}}{{magic_scroll_transtion_delay.UNIT}};',
				],
				'condition'    => [
					'middle_style' => [ 'multi_layered_parallax' ],
				],
				'of_type' => 'magic_scroll',
			]
		);
		$this->add_control(
			'magic_scroll_transtion_delay',
			[
				'label' => esc_html__( 'Magic Scroll Transition Delay(s)', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 's' ],
				'range' => [
					's' => [
						'min' => -2,
						'max' => 2,
						'step' => 0.01,
					],
				],
				'default' => [
					'unit' => 's',
					'size' => 0,
				],
				'condition'    => [
					'middle_style' => [ 'multi_layered_parallax' ],
				],
				'of_type' => 'magic_scroll',
			]
		);
		$this->add_control(
			'magic_scroll_transtion_timing',
			[
				'label' => esc_html__( 'Magic Scroll Ease Effect', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'ease',
				'options' => [
					'ease'  => esc_html__( 'Ease', 'theplus' ),
					'linear'  => esc_html__( 'Linear', 'theplus' ),
					'ease-in-out'  => esc_html__( 'Ease In-Out', 'theplus' ),
				],
				'condition'    => [
					'middle_style' => [ 'multi_layered_parallax' ],
				],
				'of_type' => 'magic_scroll',
			]
		);

/*Multi layered Parallax*/
		/*Modern Mouse Hover Parallax*/
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'single_layer_image',[
				'label' => esc_html__( 'Upload Image', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => ['active'   => true,],
			]
		);
		$repeater->start_controls_tabs( 'responsive_device' );
		$repeater->start_controls_tab( 'normal',
			[
				'label' => esc_html__( 'Desktop', 'theplus' ),
			]
		);
		/*desktop  start*/
		$repeater->add_control(
			'd_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),				
			]
		);

$repeater->add_control(
			'd_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 40,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_left_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
			]
		);
		$repeater->add_control(
			'd_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 40,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_right_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),				
			]
		);
		$repeater->add_control(
			'd_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 20,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
			]
		);
		$repeater->add_control(
			'd_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 20,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => 150,
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'after',
			]
		);
		$repeater->end_controls_tab();
		/*desktop end*/
		/*tablet start*/
		$repeater->start_controls_tab( 'tablet',
			[
				'label' => esc_html__( 'Tablet', 'theplus' ),
			]
		);
		$repeater->add_control(
			't_responsive', [
				'label'   => esc_html__( 'Responsive Values', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
				'description' => esc_html__( 'Make sure you do change this as much as possible. In tablet in mobile in other options with similar options.', 'theplus' ),
			]
		);
		$repeater->add_control(
			't_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_left_auto' => [ 'yes' ],
				],
			]
		);
		
		$repeater->add_control(
			't_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_right_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->end_controls_tab();
		/*tablet end*/
		/*mobile start*/
		$repeater->start_controls_tab( 'mobile',
			[
				'label' => esc_html__( 'Mobile', 'theplus' ),
			]
		);
		$repeater->add_control(
			'm_responsive', [
				'label'   => esc_html__( 'Responsive Values', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
				'description' => esc_html__( 'Make sure you do change this as much as possible. In tablet in mobile in other options with similar options.', 'theplus' ),
			]
		);
		$repeater->add_control(
			'm_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_left_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_right_auto' => [ 'yes' ],
				],
			]
		);
		
		$repeater->add_control(
			'm_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		$repeater->add_control(
			'layer_image_opacity',[
				'label' => esc_html__( 'Opacity Image', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '' ],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 1,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 1,
				],
			]
		);
		$repeater->add_control(
			'parallax_value',[
				'label' => esc_html__( 'Effect Intensity', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '' ],
				'range' => [
					'' => [
						'min' => -100,
						'max' => 100,
						'step' => 2,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 30,
				],
			]
		);
		$repeater->add_control(
			'magic_scroll',[
				'label'   => esc_html__( 'Magic Scroll', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
			]
		);
		$repeater->add_group_control(
			\Theplus_Magic_Scroll_Option_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Scroll Options', 'theplus' ),
				'name'           => 'scroll_option',
				'render_type'  => 'template',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		$repeater->start_controls_tabs( 'tabs_magic_scroll' );
		$repeater->start_controls_tab(
			'tab_scroll_from',
			[
				'label' => esc_html__( 'Initial', 'theplus' ),
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater->add_group_control(
			\Theplus_Magic_Scroll_From_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Initial Position', 'theplus' ),
				'name'           => 'scroll_from',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'tab_scroll_to',
			[
				'label' => esc_html__( 'Final', 'theplus' ),
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater->add_group_control(
			\Theplus_Magic_Scroll_To_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Final Position', 'theplus' ),
				'name'           => 'scroll_to',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		
		$repeater->add_control(
			'responsive_visible_opt',[
				'label'   => esc_html__( 'Responsive Visibility', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Enable', 'theplus' ),
				'label_off' => esc_html__( 'Disable', 'theplus' ),
				'separator' => 'before',
			]
		);
		$repeater->add_control(
			'desktop_opt',[
				'label'   => esc_html__( 'Desktop', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'tablet_opt',[
				'label'   => esc_html__( 'Tablet', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'mobile_opt',[
				'label'   => esc_html__( 'Mobile', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'mordern_z_index',
			[
				'label' => esc_html__( 'z-index', 'theplus' ),
				'type' => \Elementor\Controls_Manager::NUMBER,
				'min' => 0,
				'max' => 5000,
				'step' => 1,
				'default' => '',
				'separator' => 'before',
			]
		);
		$this->add_control(
            'mordern_images',
            [
				'label' => '',
                'type' => Controls_Manager::REPEATER,
                'default' => [
                    [
                        'single_layer_image' => '',
                    ],
				],
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{ single_layer_image }}}',
				'condition'    => [
					'middle_style' => [ 'mordern_parallax' ],
				],
            ]
        );
		/*Modern Mouse Hover Parallax*/
		/*Auto Moving Image*/
		$this->add_control(
            'moving_images',
            [
				'label' => '',
                'type' => Controls_Manager::REPEATER,
                'default' => [
                    [
                        'move_image_direction' => 'left',                       
                    ],
				],
                'fields' => [
                    [
                        'name' => 'single_image_move',
                        'type' => Controls_Manager::MEDIA,
                        'label_block' => true,
						'dynamic' => ['active'   => true,],
                        'label' => esc_html__('Upload Image', 'theplus'),
                        'default' => '',
                    ],
					[
						'name' => 'move_image_size',
						'type' => Controls_Manager::SELECT,
						'label' => esc_html__('Background Size', 'theplus'),
						'default' => 'cover',
						'options' => theplus_get_image_size_options(),
					],
					[
						'name' => 'move_image_direction',
						'type' => Controls_Manager::SELECT,
						'label' => esc_html__('Direction', 'theplus'),
						'default' => '',
						'options' => [
							'' => esc_html__('None', 'theplus'),
							'right' => esc_html__('Right', 'theplus'),
							'left' => esc_html__('Left', 'theplus'),
							'top' => esc_html__('Top', 'theplus'),
							'bottom' => esc_html__('Bottom', 'theplus'),
						],
					],
					[
						'name' => 'layer_image_opacity',
						'label' => esc_html__( 'Opacity Image', 'theplus' ),
						'type' => Controls_Manager::SLIDER,
						'size_units' => [ '' ],
						'range' => [
							'' => [
								'min' => 0,
								'max' => 1,
								'step' => 0.1,
							],
						],
						'default' => [
							'unit' => '',
							'size' => 1,
						],
					],
					[
						'name' => 'move_image_speed',
						'label' => esc_html__( 'Transition Speed', 'theplus' ),
						'type' => Controls_Manager::SLIDER,
						'size_units' => [ '' ],
						'range' => [
							'' => [
								'min' => -100,
								'max' => 100,
								'step' => 2,
							],
						],
						'default' => [
							'unit' => '',
							'size' => 30,
						],
					],
					[
						'name' => 'responsive_visible_opt',
						'label'   => esc_html__( 'Responsive Visibility', 'theplus' ),
						'type'    =>  \Elementor\Controls_Manager::SWITCHER,
						'default' => 'no',
						'label_on' => esc_html__( 'Show', 'theplus' ),
						'label_off' => esc_html__( 'Hide', 'theplus' ),				
					],
					[
						'name' => 'desktop_opt',
						'label'   => esc_html__( 'Desktop', 'theplus' ),
						'type'    =>  \Elementor\Controls_Manager::SWITCHER,
						'default' => 'yes',
						'label_on' => esc_html__( 'Show', 'theplus' ),
						'label_off' => esc_html__( 'Hide', 'theplus' ),
						'condition'    => [
							'responsive_visible_opt' => 'yes',
						],
					],
					[
						'name' => 'tablet_opt',
						'label'   => esc_html__( 'Tablet', 'theplus' ),
						'type'    =>  \Elementor\Controls_Manager::SWITCHER,
						'default' => 'yes',
						'label_on' => esc_html__( 'Show', 'theplus' ),
						'label_off' => esc_html__( 'Hide', 'theplus' ),
						'condition'    => [
							'responsive_visible_opt' => 'yes',
						],
					],
					[
						'name' => 'mobile_opt',
						'label'   => esc_html__( 'Mobile', 'theplus' ),
						'type'    =>  \Elementor\Controls_Manager::SWITCHER,
						'default' => 'yes',
						'label_on' => esc_html__( 'Show', 'theplus' ),
						'label_off' => esc_html__( 'Hide', 'theplus' ),
						'condition'    => [
							'responsive_visible_opt' => 'yes',
						],
					],
					
                ],
                'title_field' => '{{{ move_image_direction }}}',
				'condition'    => [
					'middle_style' => [ 'moving_image' ],
				],
            ]
        );
		/*Auto Moving Image*/
		/*Modern Image Effect*/
		$repeater_effects = new \Elementor\Repeater();
		$repeater_effects->add_control(
			'single_image_effects',[
				'label' => esc_html__( 'Upload Image', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => ['active'   => true,],
			]
		);
		$repeater_effects->start_controls_tabs( 'responsive_device' );
		$repeater_effects->start_controls_tab( 'normal',
			[
				'label' => esc_html__( 'Desktop', 'theplus' ),
			]
		);
		/*desktop  start*/
		$repeater_effects->add_control(
			'd_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),				
			]
		);

$repeater_effects->add_control(
			'd_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 40,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'd_left_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'd_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
			]
		);
		$repeater_effects->add_control(
			'd_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 40,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'd_right_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'd_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),				
			]
		);
		$repeater_effects->add_control(
			'd_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 20,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'd_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'd_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
			]
		);
		$repeater_effects->add_control(
			'd_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 20,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'd_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'd_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => 150,
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'before',
			]
		);
		$repeater_effects->end_controls_tab();
		/*desktop end*/
		/*tablet start*/
		$repeater_effects->start_controls_tab( 'tablet',
			[
				'label' => esc_html__( 'Tablet', 'theplus' ),
			]
		);
		$repeater_effects->add_control(
			't_responsive', [
				'label'   => esc_html__( 'Responsive Values', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
				'description' => esc_html__( 'Make sure you do change this as much as possible. In tablet in mobile in other options with similar options.', 'theplus' ),
			]
		);
		$repeater_effects->add_control(
			't_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			't_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],				
				'separator' => 'before',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_left_auto' => [ 'yes' ],
				],
			]
		);
		
		$repeater_effects->add_control(
			't_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			't_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_right_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			't_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			't_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			't_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			't_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			't_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'before',
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->end_controls_tab();
		/*tablet end*/
		/*mobile start*/
		$repeater_effects->start_controls_tab( 'mobile',
			[
				'label' => esc_html__( 'Mobile', 'theplus' ),
			]
		);
		$repeater_effects->add_control(
			'm_responsive', [
				'label'   => esc_html__( 'Responsive Values', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
				'description' => esc_html__( 'Make sure you do change this as much as possible. In tablet in mobile in other options with similar options.', 'theplus' ),
			]
		);
		$repeater_effects->add_control(
			'm_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'm_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_left_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'm_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'm_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_right_auto' => [ 'yes' ],
				],
			]
		);
		
		$repeater_effects->add_control(
			'm_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'm_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'm_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'm_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_control(
			'm_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'before',
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->end_controls_tab();
		$repeater_effects->end_controls_tabs();		
		$repeater_effects->add_control(
			'layer_image_opacity',[
				'label' => esc_html__( 'Opacity Image', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '' ],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 1,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 1,
				],
			]
		);
		$repeater_effects->add_control(
			'mordern_img_radius',
			[
				'label' => esc_html__( 'Border Radius', 'theplus' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors' => [
					'.pt_plus_mordern_image_effects{{CURRENT_ITEM}} .mordern-image-effect' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);
		$repeater_effects->add_control(
			'mordern_effect',[
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Image Effects', 'theplus'),
				'default' => 'pulse',
				'options' => [
					'none' => esc_html__('None', 'theplus'),
					'pulse' => esc_html__('Pulse', 'theplus'),
					'floating' => esc_html__('Floating', 'theplus'),
					'tossing' => esc_html__('Tossing', 'theplus'),
					'rotating'  => esc_html__( 'Rotating', 'theplus' ),
				],
				'separator' => 'before',
			]
		);
		$repeater_effects->add_control(
			'effect_animation_duration',
			[	
				'label' => esc_html__( 'Duration Time', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => 's',
				'range' => [
					's' => [
						'min' => 0.5,
						'max' => 50,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 's',
					'size' => 2.5,
				],
				'condition' => [
					'mordern_effect!' => 'none',
				],
			]
		);
		$repeater_effects->add_control(
			'effect_transform_origin',
			[
				'label' => esc_html__( 'Transform Origin', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'center center',
				'options' => [
					'top left'  => esc_html__( 'Top Left', 'theplus' ),
					'top center"'  => esc_html__( 'Top Center', 'theplus' ),
					'top right'  => esc_html__( 'Top Right', 'theplus' ),
					'center left'  => esc_html__( 'Center Left', 'theplus' ),
					'center center'  => esc_html__( 'Center Center', 'theplus' ),
					'center right'  => esc_html__( 'Center Right', 'theplus' ),
					'bottom left'  => esc_html__( 'Bottom Left', 'theplus' ),
					'bottom center'  => esc_html__( 'Bottom Center', 'theplus' ),
					'bottom right'  => esc_html__( 'Bottom Right', 'theplus' ),
				],
				'condition' => [
					'mordern_effect' => 'rotating',
				],
			]
		);
		$repeater_effects->add_control(
			'magic_scroll',[
				'label'   => esc_html__( 'Magic Scroll', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
			]
		);
		$repeater_effects->add_group_control(
			\Theplus_Magic_Scroll_Option_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Scroll Options', 'theplus' ),
				'name'           => 'scroll_option',
				'render_type'  => 'template',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		$repeater_effects->start_controls_tabs( 'tabs_magic_scroll' );
		$repeater_effects->start_controls_tab(
			'tab_scroll_from',
			[
				'label' => esc_html__( 'Initial', 'theplus' ),
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_group_control(
			\Theplus_Magic_Scroll_From_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Initial Position', 'theplus' ),
				'name'           => 'scroll_from',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		$repeater_effects->end_controls_tab();
		$repeater_effects->start_controls_tab(
			'tab_scroll_to',
			[
				'label' => esc_html__( 'Final', 'theplus' ),
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater_effects->add_group_control(
			\Theplus_Magic_Scroll_To_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Final Position', 'theplus' ),
				'name'           => 'scroll_to',
				'condition'    => [
					'magic_scroll' => [ 'yes' ],
				],
			)
		);
		
		$repeater_effects->end_controls_tab();
		$repeater_effects->end_controls_tabs();
		$repeater_effects->add_control(
			'responsive_visible_opt',[
				'label'   => esc_html__( 'Responsive Visibility', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Enable', 'theplus' ),
				'label_off' => esc_html__( 'Disable', 'theplus' ),
				'separator' => 'before',
			]
		);
		$repeater_effects->add_control(
			'desktop_opt',[
				'label'   => esc_html__( 'Desktop', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater_effects->add_control(
			'tablet_opt',[
				'label'   => esc_html__( 'Tablet', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater_effects->add_control(
			'mobile_opt',[
				'label'   => esc_html__( 'Mobile', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater_effects->add_control(
			'mordern_effect_z_index',
			[
				'label' => esc_html__( 'z-index', 'theplus' ),
				'type' => Controls_Manager::NUMBER,
				'min' => 0,
				'max' => 5000,
				'step' => 1,
				'default' => '',
				'separator' => 'before',
			]
		);
		$this->add_control(
            'mordern_effects',
            [
				'label' => '',
                'type' => Controls_Manager::REPEATER,
                'default' => [
                    [
                        'mordern_effect' => '',                       
                    ],
				],
                'fields' => $repeater_effects->get_controls(),
                'title_field' => '{{{ mordern_effect }}}',
				'condition'    => [
					'middle_style' => [ 'mordern_image_effect' ],
				],
            ]
        );
		/*Modern Image Effect*/
		$this->end_controls_section();
		/*---------Middle Layer-------------*/
		/*---------Top Layer-------------*/
		$this->start_controls_section(
			'top_layer_section',
			[
				'label' => esc_html__( 'Top Layer', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
            'overlay_style', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Select Option', 'theplus'),
                'default' => '',
                'options' => [
                    '' => esc_html__('Select option', 'theplus'),
                    'normal_color' => esc_html__('Solid Color', 'theplus'),
                    'gradient_color' => esc_html__('Gradient Color', 'theplus'),
                    'texture_image' => esc_html__('Texture Image', 'theplus'),
                ],
            ]
        );
		$this->add_control(
            'normal_overlay_color',
            [
                'label' => esc_html__('Overlay Color', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
				'condition'    => [
					'overlay_style' => [ 'normal_color' ],
				],
            ]
        );
		$this->add_control(
            'overlay_gradient_color1',
            [
                'label' => esc_html__('Color 1', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => 'orange',				
				'of_type' => 'gradient',
				'condition'    => [
					'overlay_style' => [ 'gradient_color' ],
				],
            ]
        );
		$this->add_control(
            'overlay_gradient_color1_control',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Color 1 Location', 'theplus'),
				'size_units' => [ '%' ],
				'default' => [
					'unit' => '%',
					'size' => 0,
				],
				'condition'    => [
					'overlay_style' => [ 'gradient_color' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'overlay_gradient_color2',
            [
                'label' => esc_html__('Color 2', 'theplus'),
                'type' => Controls_Manager::COLOR,
                'default' => 'cyan',
				'condition'    => [
					'overlay_style' => [ 'gradient_color' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'overlay_gradient_color2_control',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Color 2 Location', 'theplus'),
				'size_units' => [ '%' ],
				'default' => [
					'unit' => '%',
					'size' => 100,
				],
				'condition'    => [
					'overlay_style' => [ 'gradient_color' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'overlay_bg_gradient_style', [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__('Gradient Style', 'theplus'),
                'default' => 'linear',
                'options' => theplus_get_gradient_styles(),
				'condition'    => [
					'overlay_style' => [ 'gradient_color' ],
				],
				'of_type' => 'gradient',
            ]
        );
		$this->add_control(
            'overlay_bg_gradient_angle', [
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Gradient Angle', 'theplus'),
				'size_units' => [ 'deg' ],
				'default' => [
					'unit' => 'deg',
					'size' => 180,
				],
				'range' => [
					'deg' => [
						'step' => 10,
					],
				],
				'condition'    => [
					'overlay_style' => [ 'gradient_color' ],
					'overlay_bg_gradient_style' => ['linear']
				],
				'of_type' => 'gradient',
			]
        );
		$this->add_control(
            'overlay_bg_gradient_position', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Position', 'theplus'),
				'options' => theplus_get_position_options(),
				'default' => 'center center',
				'condition'    => [
					'overlay_style' => [ 'gradient_color' ],
					'overlay_bg_gradient_style' => ['radial']
				],
				'of_type' => 'gradient',
			]
        );
		$this->add_control(
			'texture_image',
			[
				'label' => esc_html__( 'Texture Image', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => '',
				],
				'dynamic' => ['active'   => true,],
				'condition'    => [
					'overlay_style' => [ 'texture_image' ],
				],
			]
		);
		$this->add_control(
            'opacity_texture_image',
            [
                'type' => Controls_Manager::SLIDER,
				'size_units' => [ '' ],
				'range' => [
					'' => [
						'min' => 0,
						'max' => 1,
						'step' =>0.1,
					],
				],
				'default' => [
					'unit' => '',
					'size' => 0.8,
				],
				'condition'    => [
					'overlay_style' => [ 'texture_image' ],
				],
            ]
        );
		$this->end_controls_section();
		/*---------Top Layer-------------*/
		/*Extra options*/
		$this->start_controls_section(
			'content_extra_options_section',
			[
				'label' => esc_html__( 'Extra', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'section_overflow_hidden',
			[
				'label' => esc_html__( 'Overflow Hidden Section', 'theplus' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Hidden', 'theplus' ),
				'label_off' => esc_html__( 'Visible', 'theplus' ),				
				'default' => 'no',
				'description' => esc_html__( 'All effects due to "overflow: hidden" will be visible on frontend only. Backend will show normal view.', 'theplus' ),
			]
		);
		$this->end_controls_section();
		/*Extra options*/
	}
	 protected function render() {
        $settings = $this->get_settings_for_display();		
		$select_anim = $settings['select_anim'];
		$image_parallax_style = $settings['image_parallax_style'];
		$image_parallax_amount = (!empty($settings['image_parallax_amount']["size"])) ? $settings['image_parallax_amount']["size"] : 30;
		$image_parallax_perspective = (!empty($settings['image_parallax_perspective']["size"])) ? $settings['image_parallax_perspective']["size"] : 1000;
		$image_parallax_scale = (!empty($settings['image_parallax_scale']["size"])) ? $settings['image_parallax_scale']["size"] : 1;
		$image_parallax_inverted = ($settings['image_parallax_inverted']=='yes') ? 'true' : 'false';
		$columns_parallax_style = $settings['columns_parallax_style'];
		$columns_animation_direction = $settings['columns_animation_direction'];
		$columns_parallax_sense = (!empty($settings['columns_parallax_sense']['size'])) ? $settings['columns_parallax_sense']['size'] : '30';
		$section_overflow_hidden = ($settings['section_overflow_hidden']=='yes') ? ' data-section-hidden="hidden"' : ' data-section-hidden="inherit"';;
		
		$parellax_class=$class1=$data_atts=$css_rules=$parellax_inner_class=$img_parallax_scroll_class=$img_parallax_scroll='';
		
		if(!empty($image_parallax_style) && $columns_parallax_style=='columns_simple_image'){
			$parellax_class = 'pt_plus_image_mouse_hover';
		}
		$responsive_bg_class='';
		if(!empty($settings["responsive_image"]) && $settings["responsive_image"]=='yes'){
			if(!empty($settings["tablet_bg_image"]["url"])){
				$responsive_bg_class .=' bg_tablet';
			}
			if(!empty($settings["mobile_bg_image"]["url"])){
				$responsive_bg_class .=' bg_mobile';
			}
		}
		if(isset($select_anim) && !empty($select_anim) && $select_anim=='bg_image') {
			if(!empty($settings['bg_img_parallax']) && $settings['bg_img_parallax']=='yes'){
				$img_parallax_scroll_class=' row-parallax-bg-img';
			}
		}
		$magic_class = $magic_attr = $parallax_scroll = '';
		if (!empty($settings['magic_scroll']) && $settings['magic_scroll'] == 'yes') {
			
			if($settings["scroll_option_popover_toggle"]==''){
				$scroll_offset=0;
				$scroll_duration=300;
			}else{
				$scroll_offset=$settings['scroll_option_scroll_offset'];
				$scroll_duration=$settings['scroll_option_scroll_duration'];
			}
			
			if($settings["scroll_from_popover_toggle"]==''){
				$scroll_x_from=0;
				$scroll_y_from=0;
				$scroll_opacity_from=1;
				$scroll_scale_from=1;
				$scroll_rotate_from=0;
			}else{
				$scroll_x_from=$settings['scroll_from_scroll_x_from'];
				$scroll_y_from=$settings['scroll_from_scroll_y_from'];
				$scroll_opacity_from=$settings['scroll_from_scroll_opacity_from'];
				$scroll_scale_from=$settings['scroll_from_scroll_scale_from'];
				$scroll_rotate_from=$settings['scroll_from_scroll_rotate_from'];
			}
			
			if($settings["scroll_to_popover_toggle"]==''){
				$scroll_x_to=0;
				$scroll_y_to=-50;
				$scroll_opacity_to=1;
				$scroll_scale_to=1;
				$scroll_rotate_to=0;
			}else{
				$scroll_x_to=$settings['scroll_to_scroll_x_to'];
				$scroll_y_to=$settings['scroll_to_scroll_y_to'];
				$scroll_opacity_to=$settings['scroll_to_scroll_opacity_to'];
				$scroll_scale_to=$settings['scroll_to_scroll_scale_to'];
				$scroll_rotate_to=$settings['scroll_to_scroll_rotate_to'];
			}
			
			$magic_attr .= ' data-scroll_type="position" ';
			$magic_attr .= ' data-scroll_offset="' . esc_attr($scroll_offset) . '" ';
			$magic_attr .= ' data-scroll_duration="' . esc_attr($scroll_duration) . '" ';
			
			$magic_attr .= ' data-scroll_x_from="' . esc_attr($scroll_x_from) . '" ';
			$magic_attr .= ' data-scroll_x_to="' . esc_attr($scroll_x_to) . '" ';
			$magic_attr .= ' data-scroll_y_from="' . esc_attr($scroll_y_from) . '" ';
			$magic_attr .= ' data-scroll_y_to="' . esc_attr($scroll_y_to) . '" ';
			$magic_attr .= ' data-scroll_opacity_from="' . esc_attr($scroll_opacity_from) . '" ';
			$magic_attr .= ' data-scroll_opacity_to="' . esc_attr($scroll_opacity_to) . '" ';
			$magic_attr .= ' data-scroll_scale_from="' . esc_attr($scroll_scale_from) . '" ';
			$magic_attr .= ' data-scroll_scale_to="' . esc_attr($scroll_scale_to) . '" ';
			$magic_attr .= ' data-scroll_rotate_from="' . esc_attr($scroll_rotate_from) . '" ';
			$magic_attr .= ' data-scroll_rotate_to="' . esc_attr($scroll_rotate_to) . '" ';
			
			$parallax_scroll .= ' parallax-scroll ';
			
			$magic_class .= ' magic-scroll ';
		}
		
		$rand_no =uniqid('theplus_row');
		$uniqid1 = uniqid('theplus_bgimage');
		
		$fixed_bg_attach='';
		if(isset($settings['column_bg_img_attach']) && !empty($settings['column_bg_img_attach']) && $settings['column_bg_img_attach']=='fixed'){
			$fixed_bg_attach =' fixed-attach-bg-image';
		}
		if(isset($settings['tablet_bg_img_attach']) && !empty($settings['tablet_bg_img_attach']) && $settings['tablet_bg_img_attach']=='fixed'){
			$fixed_bg_attach .=' tablet-fixed-attach-bg-image';
		}
		if(isset($settings['mobile_bg_img_attach']) && !empty($settings['mobile_bg_img_attach']) && $settings['mobile_bg_img_attach']=='fixed'){
			$fixed_bg_attach .=' mobile-fixed-attach-bg-image';
		}
		if(isset($settings['fixed_bg_video']) && !empty($settings['fixed_bg_video']) && $settings['fixed_bg_video']=='yes'){
			$fixed_bg_attach .=' fixed-video-bg';
		}
		
		$output ='<div id="pt-plus-row-settings" class="pt-plus-row-set '.esc_attr($rand_no).' '.esc_attr($img_parallax_scroll_class).' '.esc_attr($parellax_class).' '.esc_attr($magic_class).' '.esc_attr($responsive_bg_class).' '.esc_attr($fixed_bg_attach).'" data-no="'.esc_attr($rand_no).'" '.$section_overflow_hidden.'>';
		/* bg solid color*/
		if(isset($select_anim) && !empty($select_anim) && $select_anim=='bg_normal_color') {
			$output .='<div class="pt-plus-columns-bg-wrap columns-solid-color" style="background:'.esc_attr($settings["normal_bg_color"]).'"></div>';
		}
		/* bg solid color*/
		/*gradient color*/
		if(isset($select_anim) && !empty($select_anim) && $select_anim=='bg_gradientcolor'){
			if(!empty($settings['gradient_color1']) && !empty($settings['gradient_color2'])){
				$color1=$settings['gradient_color1'];
				$color1_control=$settings['gradient_color1_control']["size"].$settings['gradient_color1_control']["unit"];
				$color2=$settings['gradient_color2'];
				$color2_control=$settings['gradient_color2_control']["size"].$settings['gradient_color2_control']["unit"];
				$css_rules='';
				if(!empty($settings["gradient_style"]) && $settings["gradient_style"]=='linear'){
					$gradient_angle=($settings["gradient_angle"]["size"]).($settings["gradient_angle"]["unit"]);
					$css_rules .= 'background-color: transparent; background-image: linear-gradient('.esc_attr($gradient_angle).', '.esc_attr($color1).' '.esc_attr($color1_control).', '.esc_attr($color2).' '.esc_attr($color2_control).')';
				}else if(!empty($settings["gradient_style"]) && $settings["gradient_style"]=='radial'){
					$gradient_position=$settings["gradient_position"];
					$css_rules .= 'background-color: transparent; background-image: radial-gradient(at '.esc_attr($gradient_position).', '.esc_attr($color1).' '.esc_attr($color1_control).', '.esc_attr($color2).' '.esc_attr($color2_control).')';
				}
			$output .='<div class="pt-plus-columns-bg-wrap columns-bg-anim-colors columns-gradient-color" style="'.$css_rules.'"></div>';

} 
		}
		/*gradient color*/
		/*bg image*/
		if(isset($select_anim) && !empty($select_anim) && $select_anim=='bg_image') {
			$class1 .= esc_attr($columns_parallax_style);
			if($columns_parallax_style== 'columns_animated_bg') {
				$columns_animation_direction = (!empty($columns_animation_direction)) ? $columns_animation_direction : 'left';
				$class1 .= ' columns-'.esc_attr($columns_animation_direction).'-animation';
				$data_atts .= ' data-direction="'.esc_attr($columns_animation_direction).'"';
			}

if(isset($columns_parallax_sense) && !empty($columns_parallax_sense))
				$data_atts .= ' data-parallax_sense="'.esc_attr($columns_parallax_sense).'"';
			else 
				$data_atts .= ' data-parallax_sense="30"';

$bg_image1=$css_rules1='';
			
			if(isset($settings['column_bg_image_new']['url']) && !empty($settings['column_bg_image_new']['url'])) {					
				$bg_image1='background:url('.esc_url($settings["column_bg_image_new"]["url"]).');';
			}
			$tablet_bg_image=$tablet_css_bg='';
			if(isset($settings['tablet_bg_image']['url']) && !empty($settings['tablet_bg_image']['url'])) {					
				$tablet_bg_image='background:url('.esc_url($settings["tablet_bg_image"]["url"]).');';
				if(isset($settings['tablet_bg_image_position']) && !empty($settings['tablet_bg_image_position'])){
					$tablet_bg_image .= 'background-position: '.esc_attr($settings['tablet_bg_image_position']).';';
				}
				if(isset($settings['tablet_bg_image_size']) && !empty($settings['tablet_bg_image_size'])){
					$tablet_bg_image .= '-webkit-background-size: '.esc_attr($settings["tablet_bg_image_size"]).';-moz-background-size: '.esc_attr($settings["tablet_bg_image_size"]).';-o-background-size: '.esc_attr($settings["tablet_bg_image_size"]).';background-size: '.esc_attr($settings["tablet_bg_image_size"]).';';
				}
				if(isset($settings['tablet_bg_img_attach']) && !empty($settings['tablet_bg_img_attach']) && $settings['tablet_bg_img_attach']!='fixed'){
					$tablet_bg_image .= 'background-attachment: '.esc_attr($settings["tablet_bg_img_attach"]).';';
				}
				if(isset($settings['tablet_bg_img_repeat']) && !empty($settings['tablet_bg_img_repeat'])){
					$tablet_bg_image .= 'background-repeat: '.esc_attr($settings["tablet_bg_img_repeat"]).';';
				}
			}
			$mobile_bg_image=$mobile_css_bg='';
			if(isset($settings['mobile_bg_image']['url']) && !empty($settings['mobile_bg_image']['url'])) {					
				$mobile_bg_image='background:url('.esc_url($settings["mobile_bg_image"]["url"]).');';
				if(isset($settings['mobile_bg_image_position']) && !empty($settings['mobile_bg_image_position'])){
					$mobile_css_bg .= 'background-position: '.esc_attr($settings['mobile_bg_image_position']).';';
				}
				if(isset($settings['mobile_bg_image_size']) && !empty($settings['mobile_bg_image_size'])){
					$mobile_css_bg .= '-webkit-background-size: '.esc_attr($settings["mobile_bg_image_size"]).';-moz-background-size: '.esc_attr($settings["mobile_bg_image_size"]).';-o-background-size: '.esc_attr($settings["mobile_bg_image_size"]).';background-size: '.esc_attr($settings["mobile_bg_image_size"]).';';
				}
				if(isset($settings['mobile_bg_img_attach']) && !empty($settings['mobile_bg_img_attach']) && $settings['tablet_bg_img_attach']!='fixed'){
					$mobile_css_bg .= 'background-attachment: '.esc_attr($settings["mobile_bg_img_attach"]).';';
				}
				if(isset($settings['mobile_bg_img_repeat']) && !empty($settings['mobile_bg_img_repeat'])){
					$mobile_css_bg .= 'background-repeat: '.esc_attr($settings["mobile_bg_img_repeat"]).';';
				}
			}
			if(isset($settings['column_bg_image_position']) && !empty($settings['column_bg_image_position']))
				$css_rules1 .= 'background-position: '.esc_attr($settings['column_bg_image_position']).';';
			
			if(isset($settings['column_bg_img_repeat']) && !empty($settings['column_bg_img_repeat']))
				$css_rules1 .= 'background-repeat: '.esc_attr($settings['column_bg_img_repeat']).';';
			
			if(isset($settings['column_bg_image_size']) && !empty($settings['column_bg_image_size']))
				$css_rules1 .= '-webkit-background-size: '.esc_attr($settings["column_bg_image_size"]).';-moz-background-size: '.esc_attr($settings["column_bg_image_size"]).';-o-background-size: '.esc_attr($settings["column_bg_image_size"]).';background-size: '.esc_attr($settings["column_bg_image_size"]).';';

if(isset($settings['column_bg_img_attach']) && !empty($settings['column_bg_img_attach']) && $settings['column_bg_img_attach']!='fixed')
				$css_rules1 .= 'background-attachment: '.esc_attr($settings["column_bg_img_attach"]).';';
				
			$parallax_atts='';	
			if(!empty($image_parallax_style) && $columns_parallax_style=='columns_simple_image' && $image_parallax_style=='style_1'){
				$parellax_inner_class = 'pt_plus_image_parallax_inner_hover';
				$parallax_atts='data-type="tilt" data-amount="'.esc_attr($image_parallax_amount).'" data-scale="'.esc_attr($image_parallax_scale).'" data-perspective="'.esc_attr($image_parallax_perspective).'" data-inverted="'.esc_attr($image_parallax_inverted).'" data-opacity="1"';
				if(isset($settings["column_bg_img_attach"]) && !empty($settings["column_bg_img_attach"]))
					$css_rules1 .= 'background-attachment: scroll;';
				
				if(isset($settings["tablet_bg_img_attach"]) && !empty($settings["tablet_bg_img_attach"]))
					$tablet_bg_image .= 'background-attachment: scroll;';
				
				if(isset($settings["mobile_bg_img_attach"]) && !empty($settings["mobile_bg_img_attach"]))
					$mobile_css_bg .= 'background-attachment: scroll;';
			}
			if(!empty($image_parallax_style) && $columns_parallax_style=='columns_simple_image' && $image_parallax_style=='style_2'){
				$parellax_inner_class = 'pt_plus_image_parallax_inner_hover';
				$parallax_atts='data-type="move" data-amount="'.esc_attr($image_parallax_amount).'" data-scale="'.esc_attr($image_parallax_scale).'" data-inverted="'.esc_attr($image_parallax_inverted).'" data-opacity="1"';
				if(isset($settings["column_bg_img_attach"]) && !empty($settings["column_bg_img_attach"]))
					$css_rules1 .= 'background-attachment: scroll;';
				
				if(isset($settings["tablet_bg_img_attach"]) && !empty($settings["tablet_bg_img_attach"]))
					$tablet_bg_image .= 'background-attachment: scroll;';
				
				if(isset($settings["mobile_bg_img_attach"]) && !empty($settings["mobile_bg_img_attach"]))
					$mobile_css_bg .= 'background-attachment: scroll;';
			}
			if(!empty($settings['bg_img_parallax']) && $settings['bg_img_parallax']=='yes'){
				$img_parallax_scroll=' parallax-bg-img';
			}
			
			if(!empty($settings["bg_kenburns_effect"]) && $settings["bg_kenburns_effect"]=='yes'){
				$direction_effect=$kenburn_effect_duration='';
				if(!empty($settings["kenburn_effect_direction"])){
					$direction_effect = $settings["kenburn_effect_direction"];
				}
				if(!empty($settings["kenburn_effect_duration"]["size"])){
					$kenburn_effect_duration = $settings["kenburn_effect_duration"]["size"];
				}
				$css_rules1 .='-webkit-animation: bg-kenburns-effect '.esc_attr($kenburn_effect_duration).'s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite '.esc_attr($direction_effect).' both;animation: bg-kenburns-effect '.esc_attr($kenburn_effect_duration).'s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite '.esc_attr($direction_effect).' both;';
			}
			$output .= '<div class="pt-plus-columns-bg-wrap tp_bg_desktop columns-bg-anim-colors columns-bg-image  '.esc_attr($parellax_inner_class).' '.esc_attr($class1).' '.esc_attr($img_parallax_scroll).' '.esc_attr($parallax_scroll).' "  id="'.esc_attr($uniqid1).'" '.$magic_attr.' '.$parallax_atts.' '.$data_atts.'  style="'.$bg_image1.$css_rules1.'"></div>';
			
			//tablet
			if(isset($settings['tablet_bg_image']['url']) && !empty($settings['tablet_bg_image']['url'])) {	
				$output .= '<div class="pt-plus-columns-bg-wrap tp_bg_tablet columns-bg-image  '.esc_attr($parellax_inner_class).' '.esc_attr($class1).' '.esc_attr($img_parallax_scroll).' '.esc_attr($parallax_scroll).' "  id="'.esc_attr($uniqid1).'" '.$magic_attr.' '.$parallax_atts.' '.$data_atts.'  style="'.$tablet_bg_image.$css_rules1.'"></div>';
				$output.='<style>#pt-plus-row-settings.bg_tablet #'.esc_attr($uniqid1).'.tp_bg_tablet:after {background:'.esc_attr($settings['tablet_overlay_color']).'}</style>';
			}
			
			//mobile
			if(isset($settings['mobile_bg_image']['url']) && !empty($settings['mobile_bg_image']['url'])) {	
				$output .= '<div class="pt-plus-columns-bg-wrap tp_bg_mobile columns-bg-image  '.esc_attr($parellax_inner_class).' '.esc_attr($class1).' '.esc_attr($img_parallax_scroll).' '.esc_attr($parallax_scroll).' "  id="'.esc_attr($uniqid1).'" '.$magic_attr.' '.$parallax_atts.' '.$data_atts.'  style="'.$mobile_bg_image.$mobile_css_bg.'"></div>';
				$output.='<style>#pt-plus-row-settings.bg_mobile #'.esc_attr($uniqid1).'.tp_bg_mobile:after {background:'.esc_attr($settings['mobile_overlay_color']).'}</style>';
			}
		}
		/*----------bg image---*/
		/*-Animated color-*/
		if(isset($select_anim) && !empty($select_anim) && $select_anim=='bg_color') {
			if ( $settings['columns_bg_colors'] ) {
			$animate_id = uniqid('pt_plus_animate_color');	
				$colors =array();
				foreach($settings['columns_bg_colors'] as $item) {
					if(!empty($item['column_bg_single_color'])) {
						$colors[]=$item['column_bg_single_color'];
					}
				}		
				$column_anim_bg_duration = (!empty($settings['column_anim_bg_duration']) && $settings['column_anim_bg_duration'] != '') ? $settings['column_anim_bg_duration'] : 3000;
					
				$output .='<div class="pt-plus-columns-bg-wrap columns-bg-anim-colors row-animated-bg '.esc_attr($animate_id).'" data-id="'.esc_attr($animate_id).'" data-bg-time="'.esc_attr($column_anim_bg_duration).'" data-bg="'.htmlspecialchars(json_encode($colors)).'"></div>';
				
			}
		}
		/*-Animation color-*/
		/*-Gradient Animated Background Color*/
		if(isset($select_anim) && !empty($select_anim) && $select_anim=='bg_animate_gradient') {
			if ( $settings['columns_bg_colors'] ) {
			$widget_id = 'gradient'.$this->get_id();
				$colors =array();
				foreach($settings['columns_bg_colors'] as $item) {
					if(!empty($item['column_bg_single_color'])) {
						$colors[]=$item['column_bg_single_color'];
					}
				}
				if($colors!=''){
					$first = reset($colors);
					$last = end($colors);
					$grad_colors=implode (",", $colors);
				}else{
					$first = '#ff2d60';	$last = '#1deab9';
					$grad_colors= '#ff2d60,#ff9132,#ff61fa,#6caafd,#29ccff,#1deab9';
				}
				$animation_duration = (!empty($settings['bg_animate_gradient_duration']["size"])) ? $settings['bg_animate_gradient_duration']["size"].$settings['bg_animate_gradient_duration']["unit"] : '15s';
				$bg_animate_gradient_rotate = (!empty($settings['bg_animate_gradient_rotate']["size"])) ? $settings['bg_animate_gradient_rotate']["size"].$settings['bg_animate_gradient_rotate']["unit"] : '120deg';
				$bg_style ='filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='.esc_attr($first).', endColorstr='.esc_attr($last).');background-image: linear-gradient('.esc_attr($bg_animate_gradient_rotate).','.$grad_colors.');animation-duration: '.esc_attr($animation_duration).';';
				$full_page_gradient = (!empty($settings["full_page_gradient"]) && $settings["full_page_gradient"]=='yes') ? 'data-full-page="yes"' : 'data-full-page="no"';
				if(!empty($settings["scrolling_page_full"]) && $settings["scrolling_page_full"]=='relative'){
					$full_page_gradient .=' data-position="relative"';
				}else{
					$full_page_gradient .=' data-position="inherit"';
				}
				$output .='<div class="plus-row-bg-gradient '.esc_attr($widget_id).'" data-id="'.esc_attr($widget_id).'" '.$full_page_gradient.' style="'.$bg_style.'"></div>';
			}
		}
		/*-Gradient Animated Background Color*/
		/*-scroll Sections Background Color*/
		if(isset($select_anim) && !empty($select_anim) && $select_anim=='scroll_animate_color') {
			
			$widget_id = 'scroll'.$this->get_id();
				$bgs =array();
				$sec_colors='';
				$i=0;
				$loop='';
				$scroll_color_duration = (!empty($settings["scroll_color_duration"]["size"])) ? 'transition-duration:'.$settings["scroll_color_duration"]["size"].$settings["scroll_color_duration"]["unit"].';' : '';
				if(!empty($settings['columns_bg_colors'])){
					foreach($settings['columns_bg_colors'] as $item) {
							$active_sec='';
							if(!empty($item['column_bg_single_color']) && empty($item['column_bg_single_image']['url'])) {
								$bgs[]=$item['column_bg_single_color'];
								if($i==0){
									$default_bg_sec='background:'.esc_attr($item['column_bg_single_color']).';';
									$active_sec='active_sec';
								}
								if(!empty($settings["scrolling_change_color"]) && $settings["scrolling_change_color"]=='no'){
									$loop .= '<div class="elementor-repeater-item-' .esc_attr($item['_id']). ' plus-section-bg-scrolling '.esc_attr($active_sec).'" style="background:'.esc_attr($item['column_bg_single_color']).';'.$scroll_color_duration.'"></div>';
								}
							}							
							if(!empty($settings["scrolling_change_color"]) && $settings["scrolling_change_color"]=='no' && !empty($item['column_bg_single_image']['url'])) {
								$bgs[]=$item['column_bg_single_image']['url'];
								if($i==0){
									$default_bg_sec='background:url('.esc_url($item['column_bg_single_image']['url']).');';
									$active_sec='active_sec';
								}
								if(!empty($settings["scrolling_change_color"]) && $settings["scrolling_change_color"]=='no'){
									$loop .= '<div class="elementor-repeater-item-'.esc_attr($item['_id']). ' plus-section-bg-scrolling  '.esc_attr($active_sec).'" style="background:url('.esc_url($item['column_bg_single_image']['url']).');'.$scroll_color_duration.'"></div>';
								}
							}
						$i++;
					}
				
					$sec_colors=htmlspecialchars(json_encode($bgs), ENT_QUOTES, 'UTF-8');
					$sec_colors ='data-bg-colors="'.$sec_colors.'"';
				}
				
				if(!empty($settings["scrolling_change_color"]) && $settings["scrolling_change_color"]=='yes'){
					$sec_colors .=' data-scrolling-effect="yes"';
					$scroll_color_duration = 'transition-duration:0s';
				}else{					
					$default_bg_sec='';
				}
				
				if(!empty($settings["scrolling_page_full"]) && $settings["scrolling_page_full"]=='relative'){
					$sec_colors .=' data-position="relative"';
				}else{
					$sec_colors .=' data-position="inherit"';
				}
			$output .='<div class="plus-scroll-sections-bg '.esc_attr($widget_id).'" data-id="'.esc_attr($widget_id).'" '.$sec_colors.' style="'.$default_bg_sec.''.$scroll_color_duration.'">'.$loop.'</div>';
		}
		/*-scroll Sections Background Color*/
		/*Carousel Slide Bg*/
		if(isset($select_anim) && !empty($select_anim) && $select_anim == 'carousel_bgcolor' ) {
			$slide_loop = '';			
			if(!empty($settings["slider_bgcolors"])){
				$slide = 0;
				foreach($settings['slider_bgcolors'] as $item) {
					$active_slide='';
					if($slide==0){
						$active_slide = 'bg-active-slide';
					}
					$slide_loop .='<div class="bg-carousel-slide elementor-repeater-item-' . esc_attr($item['_id']) . ' '.esc_attr($active_slide).'"></div>';
					$slide ++;
				}
			}
			$carousel_id = 'bgcarousel'.esc_attr($settings['slide_bg_conn_id']);
			$slide_effect = ($settings["slide_bg_effect"]) ? $settings["slide_bg_effect"] : '';
			$output .='<div id="'.esc_attr($carousel_id).'" class="plus-carousel-slider-bg slide-'.esc_attr($this->get_id()).' '.esc_attr($slide_effect).'" data-carousel-id="'.esc_attr($carousel_id).'">'.$slide_loop.'</div>';
		}
		/*Carousel Slide Bg*/
		/*----------bg video---*/
			$data_atts2 = $video_atts2 = $controller_css2 = '';
			 
			$uniqid2 = uniqid('row_video_bg_');
			if(!empty($settings['columns_video_variant']) && $select_anim=='bg_video') {
				$responsive_video_image=$video_responsive_poster='';
			
				if(isset($settings['columns_video_poster']['url']) && !empty($settings['columns_video_poster']['url'])) {					
					$poster_url=$settings["columns_video_poster"]["url"];
					$responsive_video_image .=' data-desktop-poster="'.esc_url($settings["columns_video_poster"]["url"]).'"';
				} else {
					$poster_url = THEPLUS_URL.'/assets/images/placeholder-grid.jpg';
					$responsive_video_image .=' data-desktop-poster="'.esc_url($poster_url).'"';
				}
				
				if(!empty($settings['responsive_bg_video']) && $settings['responsive_bg_video']=='yes'){
					if(!empty($settings["tablet_video_poster"]["url"])){
						$responsive_video_image .=' data-tablet-poster="'.esc_url($settings["tablet_video_poster"]["url"]).'"';
						$video_responsive_poster='plus-video-poster';
					}
					if(!empty($settings["mobile_video_poster"]["url"])){
						$responsive_video_image .=' data-mobile-poster="'.esc_url($settings["mobile_video_poster"]["url"]).'"';
						$video_responsive_poster='plus-video-poster';
					}
				}
				//desktop video
				$mp4_video=$webm_video=$data_attr_video='';
				if ($settings['columns_video_variant']== 'self-hosted' && !empty($settings['columns_video_url_mp4'])){
					$mp4_video = $settings["columns_video_url_mp4"];
					$data_attr_video .= ' data-dk-mp4="'.esc_attr($mp4_video).'"';
				}
				if ($settings['columns_video_variant']== 'self-hosted' && !empty($settings['columns_video_url_webm'])){
					$webm_video = $settings["columns_video_url_webm"];
					$data_attr_video .= ' data-dk-webm="'.esc_attr($webm_video).'"';
				}
				
				//tablet video
				if(!empty($settings['responsive_video_mp4']) && $settings['responsive_video_mp4']=='yes' && !empty($settings['responsive_video_mp4_tablet'])){
					$mp4_video_tablet =!empty($settings['responsive_video_mp4_tablet']) ? $settings['responsive_video_mp4_tablet'] : '';
					$data_attr_video .= ' data-tb-mp4="'.esc_attr($mp4_video_tablet).'"';
				}
				//mobile video
				if(!empty($settings['responsive_video_mp4']) && $settings['responsive_video_mp4']=='yes' && !empty($settings['responsive_video_mp4_mobile'])){
					$mp4_video_mobile =!empty($settings['responsive_video_mp4_mobile']) ? $settings['responsive_video_mp4_mobile'] : '';
					$data_attr_video .= ' data-mb-mp4="'.esc_attr($mp4_video_mobile).'"';
				}
				
				$detect = new Mobile_Detect;
				if($detect->isTablet()){
					$poster_url = (!empty($settings["tablet_video_poster"]["url"])) ? $settings["tablet_video_poster"]["url"] : $poster_url;
					
				}else if($detect->isMobile()){
					$poster_url = (!empty($settings["mobile_video_poster"]["url"])) ? $settings["mobile_video_poster"]["url"] : $poster_url;					
				}
				
				if($settings['columns_video_variant']== 'self-hosted' && (!empty($settings['columns_video_url_mp4']) || !empty($settings['columns_video_url_webm']))){
					
					$video_atts2 .= 'poster="'. esc_url($poster_url) .'"';

if($settings['columns_video_loop']=='yes') {
						$video_atts2 .= ' loop="true" ';
					}
					if($settings['columns_video_muted']=='yes') {
						$video_atts2 .= ' muted="true" ';	
					}
					
					$output .= '<div class="pt-plus-bg-video pt-plus-columns-bg-wrap columns-video-bg self-hosted-video-bg '.esc_attr($video_responsive_poster).'" id="wrapper-'.esc_attr($uniqid2).'" '.$data_atts2.' style="background-image: url('.esc_js($poster_url).');" '.$responsive_video_image.'>';
						$output .= '<video id="'.esc_attr($uniqid2).'" class="self-hosted-videos video-js vjs-default-skin columns_vc_hidden-md columns_vc_hidden-sm columns_vc_hidden-xs"  data-autoplay autoplay preload="auto" width="100%" height="100%"  autoplay="true" playsinline '.$video_atts2.' data-setup="{}" '.$data_attr_video.'></video>';
					$output .= '</div>';
					
				} elseif($settings['columns_video_variant'] == 'youtube' || $settings['columns_video_variant'] == 'vimeo') {

$loop = false;
					if($settings['columns_video_loop']=='yes') {
						$loop = true;
					}
					if($settings['columns_video_muted']=='yes') {
							$data_atts2 .= ' data-muted="1"';
					} else {
						$data_atts2 .= ' data-muted="0"';
					}
					if($settings['columns_video_variant'] == 'youtube' && !empty($settings['columns_youtube_video_id'])) {
						$extra_url_prop = '';
						if($loop) 
							$extra_url_prop .= '&amp;loop=1&amp;playlist='.$settings['columns_youtube_video_id'];
						
						if(!empty($settings['responsive_video_mp4']) && $settings['responsive_video_mp4']=='yes' && $detect->isTablet()){
							$video_atts2 .= 'poster="'. esc_url($poster_url) .'" loop="true" muted="true"';
							$output .= '<div class="pt-plus-bg-video pt-plus-columns-bg-wrap columns-video-bg self-hosted-video-bg '.esc_attr($video_responsive_poster).'" id="wrapper-'.esc_attr($uniqid2).'" style="background-image: url('.esc_js($poster_url).');" '.esc_attr($responsive_video_image).'>';
								$output .= '<video id="'.esc_attr($uniqid2).'" class="self-hosted-videos video-js vjs-default-skin columns_vc_hidden-md columns_vc_hidden-sm columns_vc_hidden-xs"  data-autoplay autoplay preload="auto" width="100%" height="100%"  autoplay="true" playsinline '.$video_atts2.' data-setup="{}" '.$data_attr_video.'></video>';
							$output .= '</div>';
						}else if(!empty($settings['responsive_video_mp4']) && $settings['responsive_video_mp4']=='yes' && $detect->isMobile()){
							$video_atts2 .= 'poster="'. esc_url($poster_url) .'" loop="true" muted="true"';
							$output .= '<div class="pt-plus-bg-video pt-plus-columns-bg-wrap columns-video-bg self-hosted-video-bg '.esc_attr($video_responsive_poster).'" id="wrapper-'.esc_attr($uniqid2).'" style="background-image: url('.esc_js($poster_url).');" '.esc_attr($responsive_video_image).'>';
								$output .= '<video id="'.esc_attr($uniqid2).'" class="self-hosted-videos video-js vjs-default-skin columns_vc_hidden-md columns_vc_hidden-sm columns_vc_hidden-xs"  data-autoplay autoplay preload="auto" width="100%" height="100%"  autoplay="true" playsinline '.$video_atts2.' data-setup="{}" '.$data_attr_video.'></video>';
							$output .= '</div>';
						}else{
							$output .= '<div id="wrapper-'.esc_attr($uniqid2).'" class="pt-plus-columns-bg-wrap columns-video-bg columns-youtube-bg tp-loading '.esc_attr($video_responsive_poster).'" style="background-image: url('.esc_js($poster_url).');" '.esc_attr($responsive_video_image).'>
								<div class="video-js columns_vc_hidden-md columns_vc_hidden-sm columns_vc_hidden-xs">';
								if(!$detect->isMobile()){
									$output .= '<iframe id="'.esc_attr($uniqid2).'"  '.$data_atts2.' width="100%" height="100%" src="//www.youtube.com/embed/'.esc_attr($settings["columns_youtube_video_id"]).'?wmode=opaque&amp;autoplay=1'.esc_attr($extra_url_prop).'&amp;enablejsapi=1&amp;showinfo=0&amp;controls=0&amp;rel=0" frameborder="0" class="pt-plus-bg-video columns-bg-frame" allowfullscreen></iframe>';
								}
								$output .= '</div>
							</div>';
						}
					}

if($settings['columns_video_variant'] == 'vimeo' && !empty($settings['columns_vimeo_video_id'])) {
						$extra_url_prop = '';
						if($loop) 
							$extra_url_prop .= '&amp;loop=1';
						if(!empty($settings['responsive_video_mp4']) && $settings['responsive_video_mp4']=='yes' && $detect->isTablet()){
							$video_atts2 .= 'poster="'. esc_url($poster_url) .'" loop="true" muted="true"';
							$output .= '<div class="pt-plus-bg-video pt-plus-columns-bg-wrap columns-video-bg self-hosted-video-bg '.esc_attr($video_responsive_poster).'" id="wrapper-'.esc_attr($uniqid2).'" style="background-image: url('.esc_js($poster_url).');" '.esc_attr($responsive_video_image).'>';
								$output .= '<video id="'.esc_attr($uniqid2).'" class="self-hosted-videos video-js vjs-default-skin columns_vc_hidden-md columns_vc_hidden-sm columns_vc_hidden-xs"  data-autoplay autoplay preload="auto" width="100%" height="100%"  autoplay="true" playsinline '.$video_atts2.' data-setup="{}" '.$data_attr_video.'></video>';
							$output .= '</div>';
						}else if(!empty($settings['responsive_video_mp4']) && $settings['responsive_video_mp4']=='yes' && $detect->isMobile()){
							$video_atts2 .= 'poster="'. esc_url($poster_url) .'" loop="true" muted="true"';
							$output .= '<div class="pt-plus-bg-video pt-plus-columns-bg-wrap columns-video-bg self-hosted-video-bg '.esc_attr($video_responsive_poster).'" id="wrapper-'.esc_attr($uniqid2).'" style="background-image: url('.esc_js($poster_url).');" '.esc_attr($responsive_video_image).'>';
								$output .= '<video id="'.esc_attr($uniqid2).'" class="self-hosted-videos video-js vjs-default-skin columns_vc_hidden-md columns_vc_hidden-sm columns_vc_hidden-xs"  data-autoplay autoplay preload="auto" width="100%" height="100%"  autoplay="true" playsinline '.$video_atts2.' data-setup="{}" '.$data_attr_video.'></video>';
							$output .= '</div>';
						}else{
							$output .= '<div id="wrapper-'.esc_attr($uniqid2).'" class="pt-plus-columns-bg-wrap columns-video-bg columns-vimeo-bg tp-loading '.esc_attr($video_responsive_poster).'" style="background-image: url('.esc_js($poster_url).');" '.esc_attr($responsive_video_image).'>
								<div class="video-js columns_vc_hidden-md columns_vc_hidden-sm columns_vc_hidden-xs">';
								if(!$detect->isMobile()){
									$output .= '<iframe id="'.esc_attr($uniqid2).'"  '.$data_atts2.' src="//player.vimeo.com/video/'.esc_attr($settings["columns_vimeo_video_id"]).'?api=1&amp;autoplay=1;portrait=0&amp;rel=0'.esc_attr($extra_url_prop).'" width="100%" height="100%" frameborder="0" class="pt-plus-bg-video columns-bg-frame"></iframe>';
								}
								$output .= '</div>
							</div>';
						}
					}
				}
					
			}
		/*----------bg video---*/
		/*----------bg gallery---*/
			$gallery_css='';
			$gallery1 ='';
			$uniq_id_gallery = uniqid('bgGallaryslide');
			if(!empty($settings['images_gallery']) && $select_anim=='bg_gallery') {				
				$output .='<div  id="'.esc_attr($uniq_id_gallery).'" class="pt-plus-row-slideshow ">';
				foreach($settings['images_gallery'] as $gallery){				
					$gallery1 .='{src: "'.esc_url($gallery["url"]).'",transition: "'.esc_attr($settings["gallery_slide_style"]).'",transitionDuration: '.esc_attr($settings["gallery_animation_duration"]).'},';
				}  
				$output .='</div>';
				if(!empty($settings["gallery_overlays"]) && $settings["gallery_overlays"]!='false'){
					$overlayurl=THEPLUS_URL.'assets/css/extra/overlays/0'.esc_attr($settings["gallery_overlays"]).'.png';
				}else{
					$overlayurl=false;
				}
				$inline_gallery_js ='(function($) {
						"use strict";
						$(document).ready(function(){
						$("#'.esc_js($uniq_id_gallery).'").vegas({
								overlay: "'.$overlayurl.'",
								transitionDuration: 4e3,
								delay: '.esc_js($settings["slide_delay_time"]).',
								slides: ['.$gallery1.']
							});		
						});
						})(jQuery);';
				$output .= wp_print_inline_script_tag($inline_gallery_js);
			}
		/*----------bg gallery---*/
		/*----------bg imageclip--*/
		if($select_anim=='bg_Image_pieces') {			
			$imgSrc=$opacity_animate='';
		$rand_no12=rand(1000, 1500000);
		$style_of_pieces=$settings["style_of_pieces"];
		$border_width=$border_style=$border_color='';
		if($style_of_pieces=="custom"){
			$position='';
			$effects='';
			$animate_speed='';
			$no_of_pieces=$settings["no_of_pieces"];
			$anim_duration=$settings["anim_duration"];
			$easing_transition=$settings["easing_transition"];
			$delay_transition=$settings["delay_transition"];
			$translatez_min=$settings["translatez_min"];
			$translatez_max=$settings["translatez_max"];
			$opacity_pieces=$settings["opacity_pieces"]['size'];
			$left_shadow=$settings["left_shadow"]['size'];
			$top_shadow=$settings["top_shadow"]['size'];
			$parallax_effect=((!empty($settings["parallax_effect"]) && $settings["parallax_effect"]=='false') ? 'false' : 'true');
			$min_parallax=$settings["min_parallax"]['size'];
			$max_parallax=$settings["max_parallax"]['size'];
			$border_width="7px";
			$border_style="solid";
			$border_color="rgba(255,255,255,0.7)";
			if(!empty($settings["image_clip_opt"])){
			$count=sizeof($settings["image_clip_opt"]);
			$i=1;
				foreach($settings["image_clip_opt"] as $item) {
					$xpos=$item['pos_xposition'];					
					$ypos=$item['pos_yposition'];
					$width=$item['pos_width'];
					$height=$item['pos_height'];
					$animate_pieces=$item['animate_pieces'];
					$animatespeed=$item['animate_speed'];
					if($count!=$i){
						$position .='{top:'.esc_attr($ypos).', left: '.esc_attr($xpos).', width: '.esc_attr($width).', height: '.esc_attr($height).'},';
						$effects .='{"effect" : "'.esc_attr($animate_pieces).'"},';
						$animate_speed .='{"duration" : "'.esc_attr($animatespeed).'"},';
					}else{
						$position .='{top:'.esc_attr($ypos).', left: '.esc_attr($xpos).', width: '.esc_attr($width).', height: '.esc_attr($height).'}';
						$effects .='{"effect" : "'.esc_attr($animate_pieces).'"}';
						$animate_speed .='{"duration" : "'.esc_attr($animatespeed).'"}';
					}
				}
			}
		}elseif($style_of_pieces=="style-2"){
			$no_of_pieces='4';
			$anim_duration= '1100';
			$easing_transition= "easeInOutExpo";
			$delay_transition= '100';
			$translatez_min="100";
			$translatez_max="100";
			$opacity_pieces='1';
			$left_shadow='0';
			$top_shadow='0';
			$parallax_effect='true';
			$min_parallax='10';
			$max_parallax='40';
			$position='{top: 0, left: 0, width: 45, height: 45},{top: 55, left: 0, width: 45, height: 45},{top: 0, left: 55, width: 45, height: 45},{top: 55, left: 55, width: 45, height: 45}';
			$effects='{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""}';
			$animate_speed='{"duration" : ""},{"duration" : ""},{"duration" : ""},{"duration" : ""}';

}elseif($style_of_pieces=="style-3"){
			$no_of_pieces='3';
			$anim_duration= '1300';
			$easing_transition= "easeInOutExpo";
			$delay_transition= '100';
			$translatez_min="10";
			$translatez_max="10";
			$opacity_pieces='1';
			$left_shadow='0';
			$top_shadow='0';
			$parallax_effect='false';
			$min_parallax='10';
			$max_parallax='10';
			$position='{top: 10, left: 25, width: 50, height: 25},{top: 40, left: 25, width: 50, height: 25},{top: 70, left: 25, width: 50, height: 25}';
			$effects='{"effect" : "rotate"},{"effect" : "rotate"},{"effect" : "rotate"}';
			$animate_speed='{"duration" : "3s"},{"duration" : "7s"},{"duration" : "5s"}';
		}elseif($style_of_pieces=="style-4"){
			$no_of_pieces='10';
			$anim_duration= '1300';
			$easing_transition= "easeOutQuad";
			$delay_transition= '50';
			$translatez_min="10";
			$translatez_max="65";
			$opacity_pieces='1';
			$left_shadow='20';
			$top_shadow='20';
			$parallax_effect='true';
			$min_parallax='10';
			$max_parallax='40';
			$position='{top: 0, left: 0, width: 30, height: 30},{top: 10, left: 10, width: 30, height: 30},{top: 20, left: 20, width: 30, height: 30},{top: 30, left: 30, width: 30, height: 30},{top: 40, left: 40, width: 30, height: 30},{top: 50, left: 50, width: 30, height: 30},{top: 60, left: 60, width: 30, height: 30},{top: 70, left: 70, width: 30, height: 30},{top: 80, left: 80, width: 30, height: 30},{top: 90, left: 90, width: 30, height: 30}';

$effects='{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""}';
			$animate_speed='{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"}';

$border_width="7px";
			$border_style="solid";
			$border_color="rgba(255,255,255,0.7)";
		}elseif($style_of_pieces=="style-5"){
			$no_of_pieces='7';
			$anim_duration= '1000';
			$easing_transition= "easeOutQuad";
			$delay_transition= '10';
			$translatez_min="10";
			$translatez_max="65";
			$opacity_pieces='1';
			$left_shadow='0';
			$top_shadow='0';
			$parallax_effect='true';
			$min_parallax='5';
			$max_parallax='10';
			$position='{top: 10, left: 20, width: 20, height: 30},{top: 8, left: 35, width: 30, height: 20},{top: 25, left: 18, width: 14, height: 25},{top: 23, left: 50, width: 20, height: 10},{top: 30, left: 65, width: 10, height: 30},{top: 48, left: 20, width: 10, height: 13},{top: 50, left: 67, width: 10, height: 20}';

$effects='{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""}';
			$animate_speed='{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"}';
		}elseif($style_of_pieces=="style-6"){
			$no_of_pieces='8';
			$anim_duration= '1000';
			$easing_transition= "easeOutExpo";
			$delay_transition= '0';
			$translatez_min="10";
			$translatez_max="25";
			$opacity_pieces='0';
			$left_shadow='0';
			$top_shadow='0';
			$parallax_effect='true';
			$min_parallax='10';
			$max_parallax='30';
			$position='{top: 0, left: 0, width: 100, height: 100},{top: 0, left: 0, width: 100, height: 100},{top: 0, left: 0, width: 100, height: 100},{top: 0, left: 0, width: 100, height: 100},{top: 0, left: 0, width: 100, height: 100},{top: 0, left: 0, width: 100, height: 100},{top: 0, left: 0, width: 100, height: 100},{top: 0, left: 0, width: 100, height: 100}';

$effects='{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""},{"effect" : ""}';
			$animate_speed='{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"},{"duration" : "0s"}';

$opacity_animate="opacity: '0.1',";
		}else{
			$no_of_pieces='9';
			$anim_duration= '1000';
			$easing_transition= "easeInOutCubic";
			$delay_transition= '0';
			$translatez_min="-20";
			$translatez_max="20";
			$opacity_pieces='1';
			$left_shadow='0';
			$top_shadow='0';
			$parallax_effect='false';
			$min_parallax='1';
			$max_parallax='65';
			$position='{top: 30, left: 5, width: 40, height: 80},{top: 50, left: 25, width: 30, height: 30},{top: 5, left: 75, width: 40, height: 20},{top: 30, left: 45, width: 40, height: 20},{top: 45, left: 15, width: 50, height: 40},{top: 10, left: 40, width: 10, height: 20},{top: 20, left: 50, width: 30, height: 70},{top: 0, left: 10, width: 50, height: 60},{top: 70, left: 40, width: 30, height: 30}';

$effects='{"effect" : "scale"},{"effect" : "flash"},{"effect" : "scale"},{"effect" : "float"},{"effect" : "flash"},{"effect" : "scale"},{"effect" : "float"},{"effect" : ""},{"effect" : ""}';
			$animate_speed='{"duration" : "3s"},{"duration" : "10s"},{"duration" : "5s"},{"duration" : "6s"},{"duration" : "4s"},{"duration" : "4s"},{"duration" : "5s"},{"duration" : "0s"},{"duration" : "0s"}';
			$opacity_animate="opacity: '1',";
		}
		$bg_style='';
		if(!empty($settings['bg_options']) && $settings['bg_options']=='bg_image'){
			if(!empty($settings['bg_image']['url'])) {
				$bg_style .='background-image: url('.esc_url($settings["bg_image"]["url"]).');';
			}
		}else if(!empty($settings['bg_options']) && $settings['bg_options']=='bg_color'){
			if(!empty($settings['bg_pieces_color'])){
				$bg_style .='background:'.esc_attr($settings["bg_pieces_color"]).';';
			}
		}else if(!empty($settings['bg_options']) && $settings['bg_options']=='bg_gradient'){
			
		}
		$box_shadow_pieces='';		
		if(!empty($settings['box_shadow_pieces']) && $settings['box_shadow_pieces']=='yes'){			 
			$box_shadow_pieces = $settings["box_shadow_horizontal"]["size"].'px '.$settings["box_shadow_vertical"]["size"].'px '.$settings["box_shadow_blur"]["size"].'px '.$settings["box_shadow_spread"]["size"].'px '.$settings["box_shadow_color"];
		}
		$border_width="7px";
		$border_style="solid";
		$border_color="rgba(255,255,255,0.7)";		
		
		$output .= '<div class="pt-plus-row-imageclip row-'.esc_attr($rand_no12).'" data-id="row-'.esc_attr($rand_no12).'" data-box-shadow="'.esc_attr($box_shadow_pieces).'" data-border-width="'.esc_attr($border_width).'" data-border-style="'.esc_attr($border_style).'" data-border-color="'.esc_attr($border_color).'" style="'.$bg_style.'"></div>';

$inline_image_seg_js ='(function($) {	
				"use strict";
		setTimeout(function(){
						var trigger = document.querySelector(".row-'.esc_js($rand_no12).'");
		var rowparent = trigger.parentNode.parentNode;
						var segmenter = new Segmenter(document.querySelector(".row-'.esc_js($rand_no12).'"), {
						pieces: '.$no_of_pieces.',
							animation: {
								duration: '.esc_js($anim_duration).',
								easing: "'.esc_js($easing_transition).'",
								delay: '.esc_js($delay_transition).',
								'.$opacity_animate.'
								translateZ: {min: '.esc_js($translatez_min).', max: '.esc_js($translatez_max).'}
							},
							shadowsAnimation: {
								opacity:'.esc_js($opacity_pieces).',
								 translateX: '.esc_js($left_shadow).',
								 translateY: '.esc_js($top_shadow).',
							},
							parallax: '.$parallax_effect.',
							parallaxMovement: {min: '.esc_js($min_parallax).', max: '.esc_js($max_parallax).'},
							positions: ['.$position.'],
							animated_effects : {
								effects:['.$effects.'],
								animatespeed: ['.$animate_speed.']
							},
							onReady: function() {

rowparent.addEventListener("mouseover", function() {
									segmenter.animate();
								});
							},
							
						});
		}, 2000);
				})(jQuery);';
		$output .= wp_print_inline_script_tag($inline_image_seg_js);
			
		}
		/*----------bg imageclip--*/
		/*-------------------------middle layer ----------------------*/		
		$middle_style=$settings["middle_style"];
		$canvas_style=$settings["canvas_style"];
		$canvas_style6_color=$settings["canvas_style6_color"];
		$canvas_type=$settings["canvas_type"];
		/*-canvas-*/
		if(!empty($middle_style) && $middle_style=='canvas'){
			/*-canvas style 1-*/
			$background_colors=array();
			if($canvas_style=='style_1'){
				if($settings["canvas_multi_color"]!=''){
					foreach($settings["canvas_multi_color"] as $item) {
						if(isset($item['canvas_single_color']) && $item['canvas_single_color'] != '') {			
							$background_colors[]=$item['canvas_single_color'];
						}
					}
				}else{
					$background_colors =array('#dd3333', '#dd9933', '#eeee22', '#81d742', '#1e73be');
				}
				$output .='<div class="pt-plus-bubble-wrap">';
				for($ij=1;$ij<=50;$ij++) {
					$size= rand(1,30).'px';
					$output .='<div class="bubble" style="height: '.esc_attr($size).';width: '.esc_attr($size).';animation-delay: -'.($ij*0.2).'s;-webkit-transform:translate3d( '.rand(-2000,2000).'px,  '.rand(-1000,2000).'px, '.rand(-1000,2000).'px);transform: translate3d( '.rand(-2000,2000).'px,  '.rand(-1000,2000).'px, '.rand(-1000,2000).'px);background: '.$background_colors[array_rand($background_colors)].';"></div>'; 
				}
				$output .='</div>';
			/*-canvas style 1-*/
			}else if($canvas_style=='style_2'){
				/*-canvas style 2-*/				
				$output .='<div id="pt-plus-row-canvas-2" class="pt-plus-row-canvas-style-2" data-no="'.esc_attr($rand_no).'" data-color="'.esc_attr($canvas_style6_color).'"></div>';
				/*-canvas style 2-*/
			}else if($canvas_style=='style_5'){
				/*-canvas style 5-*/				
				$output .='<div id="pt-plus-row-canvas-5" class="pt-plus-row-canvas-style-5" data-no="'.esc_attr($rand_no).'" data-color="'.esc_attr($canvas_style6_color).'"></div>';
				/*-canvas style 5-*/
			}else if($canvas_style=='style_3'){
				/*-canvas style 3-*/				
				$output .='<div id="pt-plus-row-canvas-3" class="canvas-style-3" data-no="'.esc_attr($rand_no).'" data-type="'.esc_attr($canvas_type).'" data-color="'.esc_attr($canvas_style6_color).'"></div>';
				/*-canvas style 3-*/
			}else if($canvas_style=='style_4'){
				/*-canvas style 4-*/				
				$output .='<div id="pt-plus-row-canvas-4" class="canvas-style-4" data-no="'.esc_attr($rand_no).'" data-type="'.esc_attr($canvas_type).'" data-color="'.esc_attr($canvas_style6_color).'"></div>';
				/*-canvas style 4-*/
			}else if($canvas_style=='style_7'){
				/*-canvas style 7-*/				
				$output .='<div id="pt-plus-row-canvas-7" class="canvas-style-7" data-no="'.esc_attr($rand_no).'" data-type="'.esc_attr($canvas_type).'" data-color="'.esc_attr($canvas_style6_color).'"></div>';
				/*-canvas style 7-*/
			}else if($canvas_style=='style_6'){			
				/*-canvas style 6-*/
				
				$output .='<div id="demo-canvas-6" class="canvas-style-6" data-canvas-color="'.esc_attr($canvas_style6_color).'"></div>';
				
				/*-canvas style 6-*/
			}else if($canvas_style=='style_8'){			
				/*-canvas style 7-*/
				$output .='<div id="demo-canvas-8" class="canvas-style-8"><canvas class="snow-particles"></canvas></div>';
				
				/*-canvas style 7-*/
			}else if($canvas_style=='custom' && !empty($settings['custom_particles_js'])){
				/*-canvas custom-*/
			
				$uid_canvas=uniqid("canvas");
				$output .='<div id="'.esc_attr($uid_canvas).'" class="canvas-style-custom"></div>';				
				$inline_canvas_js ='document.addEventListener("DOMContentLoaded", evt => {
						setTimeout(function(){
							particlesJS("'.esc_attr($uid_canvas).'", '.$settings['custom_particles_js'].' );
						}, 100);
					});';
				$output .= wp_print_inline_script_tag($inline_canvas_js);
				/*-canvas custom-*/
			}
		}
		/* canvas */
		/*-------- parellax Image row-------*/
		
			if(!empty($middle_style) && $middle_style=='mordern_parallax'){
				if(!empty($settings["mordern_images"])) {
					$css_loop='';
					$ij=0;
					foreach($settings["mordern_images"] as $item) {
						$mordern_z_index=($item["mordern_z_index"]!='') ? 'style="z-index:'.esc_attr($item["mordern_z_index"]).'"' : '';
						$visiblity_hide='';
						if(!empty($item['responsive_visible_opt']) && $item['responsive_visible_opt']=='yes'){
							$visiblity_hide .= (($item['desktop_opt']!='yes' && $item['desktop_opt']=='') ? 'desktop-hide ' : '' );							
							$visiblity_hide .= (($item['tablet_opt']!='yes' && $item['tablet_opt']=='') ? 'tablet-hide ' : '' );
							$visiblity_hide .= (($item['mobile_opt']!='yes' && $item['mobile_opt']=='') ? 'mobile-hide ' : '' );
						}
						$magic_class = $magic_attr = $parallax_scroll = '';
						if (!empty($item['magic_scroll']) && $item['magic_scroll'] == 'yes') {
							
							
							if($item["scroll_option_popover_toggle"]==''){
								$scroll_offset=0;
								$scroll_duration=300;
							}else{
								$scroll_offset=$item['scroll_option_scroll_offset'];
								$scroll_duration=$item['scroll_option_scroll_duration'];
							}
							
							if($item["scroll_from_popover_toggle"]==''){
								$scroll_x_from=0;
								$scroll_y_from=0;
								$scroll_opacity_from=1;
								$scroll_scale_from=1;
								$scroll_rotate_from=0;
							}else{
								$scroll_x_from=$item['scroll_from_scroll_x_from'];
								$scroll_y_from=$item['scroll_from_scroll_y_from'];
								$scroll_opacity_from=$item['scroll_from_scroll_opacity_from'];
								$scroll_scale_from=$item['scroll_from_scroll_scale_from'];
								$scroll_rotate_from=$item['scroll_from_scroll_rotate_from'];
							}
							
							if($item["scroll_to_popover_toggle"]==''){
								$scroll_x_to=0;
								$scroll_y_to=-50;
								$scroll_opacity_to=1;
								$scroll_scale_to=1;
								$scroll_rotate_to=0;
							}else{
								$scroll_x_to=$item['scroll_to_scroll_x_to'];
								$scroll_y_to=$item['scroll_to_scroll_y_to'];
								$scroll_opacity_to=$item['scroll_to_scroll_opacity_to'];
								$scroll_scale_to=$item['scroll_to_scroll_scale_to'];
								$scroll_rotate_to=$item['scroll_to_scroll_rotate_to'];
							}
							
							
							$magic_attr .= ' data-scroll_type="position" ';
							$magic_attr .= ' data-scroll_offset="' . esc_attr($scroll_offset) . '" ';
							$magic_attr .= ' data-scroll_duration="' . esc_attr($scroll_duration) . '" ';
							
							$magic_attr .= ' data-scroll_x_from="' . esc_attr($scroll_x_from) . '" ';
							$magic_attr .= ' data-scroll_x_to="' . esc_attr($scroll_x_to) . '" ';
							$magic_attr .= ' data-scroll_y_from="' . esc_attr($scroll_y_from) . '" ';
							$magic_attr .= ' data-scroll_y_to="' . esc_attr($scroll_y_to) . '" ';
							$magic_attr .= ' data-scroll_opacity_from="' . esc_attr($scroll_opacity_from) . '" ';
							$magic_attr .= ' data-scroll_opacity_to="' . esc_attr($scroll_opacity_to) . '" ';
							$magic_attr .= ' data-scroll_scale_from="' . esc_attr($scroll_scale_from) . '" ';
							$magic_attr .= ' data-scroll_scale_to="' . esc_attr($scroll_scale_to) . '" ';
							$magic_attr .= ' data-scroll_rotate_from="' . esc_attr($scroll_rotate_from) . '" ';
							$magic_attr .= ' data-scroll_rotate_to="' . esc_attr($scroll_rotate_to) . '" ';
							
							$parallax_scroll .= ' parallax-scroll ';
							
							$magic_class .= ' magic-scroll ';
						}
						
						
						
						$uimg_id='image'.$item["_id"].$ij;
						if(isset($item['single_layer_image']['url']) && $item['single_layer_image']['url'] != '') {
							$image_src=$item['single_layer_image']['url'];
							$image_id=$item["single_layer_image"]["id"];
							$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
							if(!$image_alt){
								$image_alt = get_the_title($image_id);
							}else if(!$image_alt){
								$image_alt = 'mordern image parallax';
							}
							
								$output .= '<div class="pt_plus_mordern_image_parallax '.esc_attr($uimg_id).' '.esc_attr($visiblity_hide).' ' . esc_attr($magic_class) . '" '.$mordern_z_index.'>';
								$output .='<div class="' . esc_attr($parallax_scroll) . '" ' . $magic_attr . '>';
									$output.='<img src="'.esc_url($image_src).'" class="parallax_image" alt="'.esc_attr($image_alt).'" data-parallax="'.esc_attr($item["parallax_value"]["size"]).'" style="opacity:'.esc_attr($item["layer_image_opacity"]["size"]).';">';
								$output.='</div>';
								$output.='</div>';
						}
								$xpos='auto';$ypos='auto';$bpos='auto';$rpos='auto';
								if($item['d_left_auto']=='yes'){
									if(!empty($item['d_pos_xposition']['size']) || $item['d_pos_xposition']['size']=='0'){
										$xpos=$item['d_pos_xposition']['size'].$item['d_pos_xposition']['unit'];
									}
								}
								if($item['d_top_auto']=='yes'){
									if(!empty($item['d_pos_yposition']['size']) || $item['d_pos_yposition']['size']=='0'){
										$ypos=$item['d_pos_yposition']['size'].$item['d_pos_yposition']['unit'];
									}
								}
								if($item['d_bottom_auto']=='yes'){
									if(!empty($item['d_pos_bottomposition']['size']) || $item['d_pos_bottomposition']['size']=='0'){
										$bpos=$item['d_pos_bottomposition']['size'].$item['d_pos_bottomposition']['unit'];
									}
								}
								if($item['d_right_auto']=='yes'){
									if(!empty($item['d_pos_rightposition']['size']) || $item['d_pos_rightposition']['size']=='0'){
										$rpos=$item['d_pos_rightposition']['size'].$item['d_pos_rightposition']['unit'];
									}
								}
								$d_max_width='';
								if($item['d_pos_width']['size']){
									$width=$item['d_pos_width']['size'].$item['d_pos_width']['unit'];
									$d_max_width='max-width:'.esc_attr( $width ).';';
								}
								$css_loop.='.pt_plus_mordern_image_parallax.'.esc_attr($uimg_id).'{top:'.esc_attr($ypos).';bottom:'.esc_attr($bpos).';left:'.esc_attr($xpos).';right:'.esc_attr($rpos).';'.$d_max_width.'margin: 0 auto;}';
							
							if(!empty($item['t_responsive']) && $item['t_responsive']=='yes'){
								$tablet_rpos='auto';$tablet_bpos='auto';$tablet_ypos='auto';$tablet_xpos='auto';
								if($item['t_left_auto']=='yes'){
									if(!empty($item['t_pos_xposition']['size']) || $item['t_pos_xposition']['size']=='0'){
										$tablet_xpos=$item['t_pos_xposition']['size'].$item['t_pos_xposition']['unit'];
									}
								}
								if($item['t_top_auto']=='yes'){
									if(!empty($item['t_pos_yposition']['size']) || $item['t_pos_yposition']['size']=='0'){
										$tablet_ypos=$item['t_pos_yposition']['size'].$item['t_pos_yposition']['unit'];
									}
								}
								if($item['t_bottom_auto']=='yes'){
									if(!empty($item['t_pos_bottomposition']['size']) || $item['t_pos_bottomposition']['size']=='0'){
										$tablet_bpos=$item['t_pos_bottomposition']['size'].$item['t_pos_bottomposition']['unit'];
									}
								}
								if($item['t_right_auto']=='yes'){
									if(!empty($item['t_pos_rightposition']['size']) || $item['t_pos_rightposition']['size']=='0'){
										$tablet_rpos=$item['t_pos_rightposition']['size'].$item['t_pos_rightposition']['unit'];
									}
								}
								$t_max_width='';
								if($item['t_pos_width']['size']){
									$width=$item['t_pos_width']['size'].$item['t_pos_width']['unit'];
									$t_max_width='max-width:'.esc_attr( $width ).';';
								}
								$css_loop.='@media (min-width:601px) and (max-width:990px){.pt_plus_mordern_image_parallax.'.esc_attr($uimg_id).'{top:'.esc_attr($tablet_ypos).';bottom:'.esc_attr($tablet_bpos).';left:'.esc_attr($tablet_xpos).';right:'.esc_attr($tablet_rpos).';'.$t_max_width.'margin: 0 auto;}}';
							}
							if(!empty($item['m_responsive']) && $item['m_responsive']=='yes'){
								$mobile_rpos='auto';$mobile_bpos='auto';$mobile_ypos='auto';$mobile_xpos='auto';
								if($item['m_left_auto']=='yes'){
									if(!empty($item['m_pos_xposition']['size']) || $item['m_pos_xposition']['size']=='0'){
										$mobile_xpos=$item['m_pos_xposition']['size'].$item['m_pos_xposition']['unit'];
									}
								}
								if($item['m_top_auto']=='yes'){
									if(!empty($item['m_pos_yposition']['size']) || $item['m_pos_yposition']['size']=='0'){
										$mobile_ypos=$item['m_pos_yposition']['size'].$item['m_pos_yposition']['unit'];
									}
								}
								if($item['m_bottom_auto']=='yes'){
									if(!empty($item['m_pos_bottomposition']['size']) || $item['m_pos_bottomposition']['size']=='0'){
										$mobile_bpos=$item['m_pos_bottomposition']['size'].$item['m_pos_bottomposition']['unit'];
									}
								}
								if($item['m_right_auto']=='yes'){
									if(!empty($item['m_pos_rightposition']['size']) || $item['m_pos_rightposition']['size']=='0'){
										$mobile_rpos=$item['m_pos_rightposition']['size'].$item['m_pos_rightposition']['unit'];
									}
								}
								$m_max_width='';
								if($item['m_pos_width']['size']){
									$width=$item['m_pos_width']['size'].$item['m_pos_width']['unit'];
									$m_max_width='max-width:'.esc_attr( $width ).';';
								}
								$css_loop.='@media (max-width:600px){.pt_plus_mordern_image_parallax.'.esc_attr($uimg_id).'{top:'.esc_attr($mobile_ypos).';bottom:'.esc_attr($mobile_bpos).';left:'.esc_attr($mobile_xpos).';right:'.esc_attr($mobile_rpos).';'.$m_max_width.'margin: 0 auto;}}';
							}
							$ij++;
					}
					$output .='<style>'.$css_loop.'</style>';
				}
			}
		/*-------- parellax Image row-------*/
		/*--------multi_layered_images------*/
			if(!empty($middle_style) && $middle_style=='multi_layered_parallax'){
				if(!empty($settings["multi_layered_images"])) {
					$ij=0;
					foreach($settings["multi_layered_images"] as $item) {
						$mordern_z_index=($item["mordern_z_index"]!='') ? 'z-index:'.esc_attr($item["mordern_z_index"]).';' : '';
						$visiblity_hide='';
						if(!empty($item['responsive_visible_opt']) && $item['responsive_visible_opt']=='yes'){
							$visiblity_hide .= (($item['desktop_opt']!='yes' && $item['desktop_opt']=='') ? 'desktop-hide ' : '' );							
							$visiblity_hide .= (($item['tablet_opt']!='yes' && $item['tablet_opt']=='') ? 'tablet-hide ' : '' );
							$visiblity_hide .= (($item['mobile_opt']!='yes' && $item['mobile_opt']=='') ? 'mobile-hide ' : '' );
						}
						
						$magic_class = $magic_attr = $parallax_scroll = '';
						if (!empty($item['magic_scroll']) && $item['magic_scroll'] == 'yes') {
							
							if($item["scroll_option_popover_toggle"]==''){
								$scroll_offset=0;
								$scroll_duration=300;
							}else{
								$scroll_offset=$item['scroll_option_scroll_offset'];
								$scroll_duration=$item['scroll_option_scroll_duration'];
							}
							
							if($item["scroll_from_popover_toggle"]==''){
								$scroll_x_from=0;
								$scroll_y_from=0;
								$scroll_opacity_from=1;
								$scroll_scale_from=1;
								$scroll_rotate_from=0;
							}else{
								$scroll_x_from=$item['scroll_from_scroll_x_from'];
								$scroll_y_from=$item['scroll_from_scroll_y_from'];
								$scroll_opacity_from=$item['scroll_from_scroll_opacity_from'];
								$scroll_scale_from=$item['scroll_from_scroll_scale_from'];
								$scroll_rotate_from=$item['scroll_from_scroll_rotate_from'];
							}
							
							if($item["scroll_to_popover_toggle"]==''){
								$scroll_x_to=0;
								$scroll_y_to=-50;
								$scroll_opacity_to=1;
								$scroll_scale_to=1;
								$scroll_rotate_to=0;
							}else{
								$scroll_x_to=$item['scroll_to_scroll_x_to'];
								$scroll_y_to=$item['scroll_to_scroll_y_to'];
								$scroll_opacity_to=$item['scroll_to_scroll_opacity_to'];
								$scroll_scale_to=$item['scroll_to_scroll_scale_to'];
								$scroll_rotate_to=$item['scroll_to_scroll_rotate_to'];
							}
							
							$magic_attr .= ' data-scroll_type="position" ';
							$magic_attr .= ' data-scroll_offset="' . esc_attr($scroll_offset) . '" ';
							$magic_attr .= ' data-scroll_duration="' . esc_attr($scroll_duration) . '" ';
							
							$magic_attr .= ' data-scroll_x_from="' . esc_attr($scroll_x_from) . '" ';
							$magic_attr .= ' data-scroll_x_to="' . esc_attr($scroll_x_to) . '" ';
							$magic_attr .= ' data-scroll_y_from="' . esc_attr($scroll_y_from) . '" ';
							$magic_attr .= ' data-scroll_y_to="' . esc_attr($scroll_y_to) . '" ';
							$magic_attr .= ' data-scroll_opacity_from="' . esc_attr($scroll_opacity_from) . '" ';
							$magic_attr .= ' data-scroll_opacity_to="' . esc_attr($scroll_opacity_to) . '" ';
							$magic_attr .= ' data-scroll_scale_from="' . esc_attr($scroll_scale_from) . '" ';
							$magic_attr .= ' data-scroll_scale_to="' . esc_attr($scroll_scale_to) . '" ';
							$magic_attr .= ' data-scroll_rotate_from="' . esc_attr($scroll_rotate_from) . '" ';
							$magic_attr .= ' data-scroll_rotate_to="' . esc_attr($scroll_rotate_to) . '" ';
							
							$parallax_scroll .= ' parallax-scroll ';
							
							$magic_class .= ' magic-scroll ';
						}
						$layer_bg_image='';
						if(isset($item['layer_image_position']) && !empty($item['layer_image_position'])){
							$layer_bg_image .= 'background-position: '.esc_attr($item['layer_image_position']).';';
						}
						if(isset($item['layer_image_size']) && !empty($item['layer_image_size'])){
							$layer_bg_image .= 'background-size: '.esc_attr($item["layer_image_size"]).';';
						}
						if(isset($item['layer_image_attach']) && !empty($item['layer_image_attach']) && $item['layer_image_attach']!='fixed'){
							$layer_bg_image .= 'background-attachment: '.esc_attr($item["layer_image_attach"]).';';
						}
						if(isset($item['layer_image_repeat']) && !empty($item['layer_image_repeat'])){
							$layer_bg_image .= 'background-repeat: '.esc_attr($item["layer_image_repeat"]).';';
						}						
						$uimg_id="layered".$item["_id"].$ij;
						if(isset($item['layer_image']['url']) && $item['layer_image']['url'] != '') {
							$image_src=$item['layer_image']['url'];
							$output .= '<div class="theplus_multi_layered_parallax '.esc_attr($uimg_id).' '.esc_attr($visiblity_hide).' ' . esc_attr($magic_class) . '" >';
								$output .='<div class="multi_layered_parallax ' . esc_attr($parallax_scroll) . '" style="background:url('.esc_url($image_src).');'.$layer_bg_image.';'.$mordern_z_index.'" ' . $magic_attr . '>';$output.='</div>';
							$output.='</div>';
						}
						$ij++;
					}
				}
			}
		/*--------multi_layered_images------*/
		/*-------- moving Image row-------*/
		if(!empty($middle_style) && $middle_style=='moving_image'){ 
			if(!empty($settings["moving_images"])) {
				$output .='<div class="pt_plus_moving_images">';				
				foreach($settings["moving_images"] as $item) {
				
					$visiblity_hide='';
					if(!empty($item['responsive_visible_opt']) && $item['responsive_visible_opt']=='yes'){
						$visiblity_hide .= (($item['desktop_opt']!='yes' && $item['desktop_opt']=='') ? 'desktop-hide ' : '' );							
						$visiblity_hide .= (($item['tablet_opt']!='yes' && $item['tablet_opt']=='') ? 'tablet-hide ' : '' );
						$visiblity_hide .= (($item['mobile_opt']!='yes' && $item['mobile_opt']=='') ? 'mobile-hide ' : '' );
					}
					if(isset($item['single_image_move']['url']) && $item['single_image_move']['url'] != '') {
						$full_image=$item['single_image_move']['url'];
						$columns_animation_direction = (isset($item['move_image_direction']) && !empty($item['move_image_direction'])) ? $item['move_image_direction'] : 'left';
						$speed=$item['move_image_speed']["size"];
						$output.='<div class="move-image-1 columns-bg-image columns_animated_bg pt-plus-loading-bg-image '.esc_attr($visiblity_hide).'" style="background-image: url('.esc_url($full_image).');opacity:'.esc_attr($item["layer_image_opacity"]["size"]).';background-size:'.$item["move_image_size"].'" data-direction="'.esc_attr($columns_animation_direction).'" data-parallax_sense="'.esc_attr($speed).'"></div>';
					
					}	
				}
				$output.='</div>';
			}
		}
		/*-------- moving Image row-------*/
		/*-------- parallax Image row-------*/
			if(!empty($middle_style) && $middle_style=='mordern_image_effect'){ 
				if(!empty($settings["mordern_effects"])) {		
					$css_loop='';
					$ij=0;
					foreach($settings["mordern_effects"] as $item) {
						
						$mordern_effect_z_index ='';
						if(!empty($item["mordern_effect_z_index"])){
							$mordern_effect_z_index = ' style="z-index:'.esc_attr($item["mordern_effect_z_index"]).'"';
						}
						
						$visiblity_hide='';
						if(!empty($item['responsive_visible_opt']) && $item['responsive_visible_opt']=='yes'){
							$visiblity_hide .= (($item['desktop_opt']!='yes' && $item['desktop_opt']=='') ? 'desktop-hide ' : '' );							
							$visiblity_hide .= (($item['tablet_opt']!='yes' && $item['tablet_opt']=='') ? 'tablet-hide ' : '' );
							$visiblity_hide .= (($item['mobile_opt']!='yes' && $item['mobile_opt']=='') ? 'mobile-hide ' : '' );
						}
						
						$magic_class = $magic_attr = $parallax_scroll = '';
						if (!empty($item['magic_scroll']) && $item['magic_scroll'] == 'yes') {
							
							if($item["scroll_option_popover_toggle"]==''){
								$scroll_offset=0;
								$scroll_duration=300;
							}else{
								$scroll_offset=$item['scroll_option_scroll_offset'];
								$scroll_duration=$item['scroll_option_scroll_duration'];
							}
							
							if($item["scroll_from_popover_toggle"]==''){
								$scroll_x_from=0;
								$scroll_y_from=0;
								$scroll_opacity_from=1;
								$scroll_scale_from=1;
								$scroll_rotate_from=0;
							}else{
								$scroll_x_from=$item['scroll_from_scroll_x_from'];
								$scroll_y_from=$item['scroll_from_scroll_y_from'];
								$scroll_opacity_from=$item['scroll_from_scroll_opacity_from'];
								$scroll_scale_from=$item['scroll_from_scroll_scale_from'];
								$scroll_rotate_from=$item['scroll_from_scroll_rotate_from'];
							}
							
							if($item["scroll_to_popover_toggle"]==''){
								$scroll_x_to=0;
								$scroll_y_to=-50;
								$scroll_opacity_to=1;
								$scroll_scale_to=1;
								$scroll_rotate_to=0;
							}else{
								$scroll_x_to=$item['scroll_to_scroll_x_to'];
								$scroll_y_to=$item['scroll_to_scroll_y_to'];
								$scroll_opacity_to=$item['scroll_to_scroll_opacity_to'];
								$scroll_scale_to=$item['scroll_to_scroll_scale_to'];
								$scroll_rotate_to=$item['scroll_to_scroll_rotate_to'];
							}
							
							$magic_attr .= ' data-scroll_type="position" ';
							$magic_attr .= ' data-scroll_offset="' . esc_attr($scroll_offset) . '" ';
							$magic_attr .= ' data-scroll_duration="' . esc_attr($scroll_duration) . '" ';
							
							$magic_attr .= ' data-scroll_x_from="' . esc_attr($scroll_x_from) . '" ';
							$magic_attr .= ' data-scroll_x_to="' . esc_attr($scroll_x_to) . '" ';
							$magic_attr .= ' data-scroll_y_from="' . esc_attr($scroll_y_from) . '" ';
							$magic_attr .= ' data-scroll_y_to="' . esc_attr($scroll_y_to) . '" ';
							$magic_attr .= ' data-scroll_opacity_from="' . esc_attr($scroll_opacity_from) . '" ';
							$magic_attr .= ' data-scroll_opacity_to="' . esc_attr($scroll_opacity_to) . '" ';
							$magic_attr .= ' data-scroll_scale_from="' . esc_attr($scroll_scale_from) . '" ';
							$magic_attr .= ' data-scroll_scale_to="' . esc_attr($scroll_scale_to) . '" ';
							$magic_attr .= ' data-scroll_rotate_from="' . esc_attr($scroll_rotate_from) . '" ';
							$magic_attr .= ' data-scroll_rotate_to="' . esc_attr($scroll_rotate_to) . '" ';
							
							$parallax_scroll .= ' parallax-scroll ';
							
							$magic_class .= ' magic-scroll ';
						}
						
						$uimg_id="img".$item["_id"].$ij;
						if($item['single_image_effects']["url"] != '') {
						$imgSrc = $item['single_image_effects']["url"];
						$image_id=$item["single_image_effects"]["id"];
						$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
						if(!$image_alt){
							$image_alt = get_the_title($image_id);
						}else if(!$image_alt){
							$image_alt = 'mordern image effect';
						}
						
							$effect=$animation_css='';
							if(!empty($item['mordern_effect'])){
								$effect='image-'.$item['mordern_effect'];
								if(!empty($item["effect_animation_duration"]["size"])){
									$animation_css .= 'animation-duration: '.$item["effect_animation_duration"]["size"].$item["effect_animation_duration"]["unit"].';-webkit-animation-duration: '.$item["effect_animation_duration"]["size"].$item["effect_animation_duration"]["unit"].';';
								}
								if($effect=='rotating'){
									$animation_css .= '-webkit-transform-origin: '.esc_attr($item["effect_transform_origin"]).';-moz-transform-origin:'.esc_attr($item["effect_transform_origin"]).';-ms-transform-origin:'.esc_attr($item["effect_transform_origin"]).';-o-transform-origin:'.esc_attr($item["effect_transform_origin"]).';transform-origin:'.esc_attr($item["effect_transform_origin"]).';';
								}
							}
							$output .='<div class="pt_plus_mordern_image_effects elementor-repeater-item-'.esc_attr($item['_id']).' '.esc_attr($uimg_id).' ' . esc_attr($magic_class) . ' '.esc_attr($visiblity_hide).'" '.$mordern_effect_z_index.'>';
							$output .='<div class="' . esc_attr($parallax_scroll) . '" ' . $magic_attr . '>';
								$output.='<img src="'.esc_url($imgSrc).'" class="mordern-image-effect morder_image_style  '.esc_attr($effect).'" alt="'.esc_attr($image_alt).'" style="opacity:'.esc_attr($item["layer_image_opacity"]["size"]).';'.$animation_css.'">';
							$output.='</div>';
							$output.='</div>';
						}
						$xpos='auto';$ypos='auto';$bpos='auto';$rpos='auto';
						if($item['d_left_auto']=='yes'){
									if(!empty($item['d_pos_xposition']['size']) || $item['d_pos_xposition']['size']=='0'){
										$xpos=$item['d_pos_xposition']['size'].$item['d_pos_xposition']['unit'];
									}
								}
								if($item['d_top_auto']=='yes'){
									if(!empty($item['d_pos_yposition']['size']) || $item['d_pos_yposition']['size']=='0'){
										$ypos=$item['d_pos_yposition']['size'].$item['d_pos_yposition']['unit'];
									}
								}
								if($item['d_bottom_auto']=='yes'){
									if(!empty($item['d_pos_bottomposition']['size']) || $item['d_pos_bottomposition']['size']=='0'){
										$bpos=$item['d_pos_bottomposition']['size'].$item['d_pos_bottomposition']['unit'];
									}
								}
								if($item['d_right_auto']=='yes'){
									if(!empty($item['d_pos_rightposition']['size']) || $item['d_pos_rightposition']['size']=='0'){
										$rpos=$item['d_pos_rightposition']['size'].$item['d_pos_rightposition']['unit'];
									}
								}
								$d_max_width='';
								if($item['d_pos_width']['size']){
									$width=$item['d_pos_width']['size'].$item['d_pos_width']['unit'];
									$d_max_width='max-width:'.esc_attr( $width ).';';
								}
								$css_loop.='.pt_plus_mordern_image_effects.'.esc_attr($uimg_id).'{top:'.esc_attr($ypos).';bottom:'.esc_attr($bpos).';left:'.esc_attr($xpos).';right:'.esc_attr($rpos).';'.$d_max_width.'margin: 0 auto;}';
							
							if(!empty($item['t_responsive']) && $item['t_responsive']=='yes'){
							$tablet_xpos='auto';$tablet_ypos='auto';$tablet_bpos='auto';$tablet_rpos='auto';
								if($item['t_left_auto']=='yes'){
									if(!empty($item['t_pos_xposition']['size']) || $item['t_pos_xposition']['size']=='0'){
										$tablet_xpos=$item['t_pos_xposition']['size'].$item['t_pos_xposition']['unit'];
									}
								}
								if($item['t_top_auto']=='yes'){
									if(!empty($item['t_pos_yposition']['size']) || $item['t_pos_yposition']['size']=='0'){
										$tablet_ypos=$item['t_pos_yposition']['size'].$item['t_pos_yposition']['unit'];
									}
								}
								if($item['t_bottom_auto']=='yes'){
									if(!empty($item['t_pos_bottomposition']['size']) || $item['t_pos_bottomposition']['size']=='0'){
										$tablet_bpos=$item['t_pos_bottomposition']['size'].$item['t_pos_bottomposition']['unit'];
									}
								}
								if($item['t_right_auto']=='yes'){
									if(!empty($item['t_pos_rightposition']['size']) || $item['t_pos_rightposition']['size']=='0'){
										$tablet_rpos=$item['t_pos_rightposition']['size'].$item['t_pos_rightposition']['unit'];
									}
								}
								$t_max_width='';
								if($item['t_pos_width']['size']){
									$width=$item['t_pos_width']['size'].$item['t_pos_width']['unit'];
									$t_max_width='max-width:'.esc_attr( $width ).';';
								}
								$css_loop.='@media (min-width:601px) and (max-width:990px){.pt_plus_mordern_image_effects.'.esc_attr($uimg_id).'{top:'.esc_attr($tablet_ypos).';bottom:'.esc_attr($tablet_bpos).';left:'.esc_attr($tablet_xpos).';right:'.esc_attr($tablet_rpos).';'.$t_max_width.'margin: 0 auto;}}';
							}
							if(!empty($item['m_responsive']) && $item['m_responsive']=='yes'){
								$mobile_xpos='auto';$mobile_ypos='auto';$mobile_bpos='auto';$mobile_rpos='auto';
								if($item['m_left_auto']=='yes'){
									if(!empty($item['m_pos_xposition']['size']) || $item['m_pos_xposition']['size']=='0'){
										$mobile_xpos=$item['m_pos_xposition']['size'].$item['m_pos_xposition']['unit'];
									}
								}
								if($item['m_top_auto']=='yes'){
									if(!empty($item['m_pos_yposition']['size']) || $item['m_pos_yposition']['size']=='0'){
										$mobile_ypos=$item['m_pos_yposition']['size'].$item['m_pos_yposition']['unit'];
									}
								}
								if($item['m_bottom_auto']=='yes'){
									if(!empty($item['m_pos_bottomposition']['size']) || $item['m_pos_bottomposition']['size']=='0'){
										$mobile_bpos=$item['m_pos_bottomposition']['size'].$item['m_pos_bottomposition']['unit'];
									}
								}
								if($item['m_right_auto']=='yes'){
									if(!empty($item['m_pos_rightposition']['size']) || $item['m_pos_rightposition']['size']=='0'){
										$mobile_rpos=$item['m_pos_rightposition']['size'].$item['m_pos_rightposition']['unit'];
									}
								}
								$m_max_width='';
								if($item['m_pos_width']['size']){
									$width=$item['m_pos_width']['size'].$item['m_pos_width']['unit'];
									$m_max_width='max-width:'.esc_attr( $width ).';';
								}
								$css_loop.='@media (max-width:600px){.pt_plus_mordern_image_effects.'.esc_attr($uimg_id).'{top:'.esc_attr($mobile_ypos).';bottom:'.esc_attr($mobile_bpos).';left:'.esc_attr($mobile_xpos).';right:'.esc_attr($mobile_rpos).';'.$m_max_width.'margin: 0 auto;}}';
							}
							$ij++;
					}
					$output .='<style>'.$css_loop.'</style>';
				}
			}
		/*-------- parellax Image row-------*/
		/*-----overlay normal color--------------*/
		
		if(!empty($settings["overlay_style"]) && $settings["overlay_style"]=='normal_color'){
		
			$output .='<div class="pt-plus-row-overlay" style="background:'.esc_attr($settings["normal_overlay_color"]).'"></div>';
		}
		/*----------------overlay normal color---*/
		/*----overlay gradient color---*/
		if(!empty($settings["overlay_style"]) && $settings["overlay_style"]=='gradient_color'){			
			$overlay_gradient_color1=$settings["overlay_gradient_color1"];
			$overlay_gradient_color1_control=$settings["overlay_gradient_color1_control"]["size"].$settings["overlay_gradient_color1_control"]["unit"];
			$overlay_gradient_color2=$settings["overlay_gradient_color2"];
			$overlay_gradient_color2_control=$settings["overlay_gradient_color2_control"]["size"].$settings["overlay_gradient_color2_control"]["unit"];
			$css_rules='';
			if(!empty($settings["overlay_bg_gradient_style"]) && $settings["overlay_bg_gradient_style"]=='linear'){
				$overlay_bg_gradient_angle=$settings["overlay_bg_gradient_angle"]["size"].$settings["overlay_bg_gradient_angle"]["unit"];	
				$css_rules .='background-color: transparent; background-image: linear-gradient('.esc_attr($overlay_bg_gradient_angle).', '.esc_attr($overlay_gradient_color1).' '.esc_attr($overlay_gradient_color1_control).', '.esc_attr($overlay_gradient_color2).' '.esc_attr($overlay_gradient_color2_control).')';
			}else if(!empty($settings["overlay_bg_gradient_style"]) && $settings["overlay_bg_gradient_style"]=='radial'){
				
				$overlay_bg_gradient_position=$settings["overlay_bg_gradient_position"];
				$css_rules .='background-color: transparent; background-image: radial-gradient(at '.esc_attr($overlay_bg_gradient_position).', '.esc_attr($overlay_gradient_color1).' '.esc_attr($overlay_gradient_color1_control).', '.esc_attr($overlay_gradient_color2).' '.esc_attr($overlay_gradient_color2_control).')';
			}
			$output .='<div class="pt-plus-row-overlay gradient-color" style="'.$css_rules.'"></div>';
		}
		/*---overlay gradient color---*/
		/*----texture image-----*/
		if(!empty($settings["overlay_style"]) && $settings["overlay_style"]=='texture_image' && !empty($settings["texture_image"]["url"])){
			$texture_css='';
			$imgSrc = $settings["texture_image"]["url"];
			$opacity_texture_image = $settings["opacity_texture_image"]["size"];
			$texture_css .= 'background: url('.esc_url($imgSrc).') repeat;opacity:'.esc_attr($opacity_texture_image).'';
			$output .='<div class="pt-plus-row-overlay texture-image" style="'.$texture_css.'"></div>';
		}
		/*---texture image-----*/		
		$output .='</div>';
		echo $output;
	 }
}