<?php 
/* Start Section */
add_action( 'elementor/element/section/section_structure/after_section_end', 'solarva_add_custom_section_controls' ); 

add_action( 'elementor/element/section/section_structure/after_section_end', 'solarva_add_custom_section_bg_overlay' ); 
add_action( 'elementor/element/section/section_structure/after_section_end', 'solarva_add_custom_section_divider' ); 
add_action( 'elementor/element/section/section_structure/after_section_end', 'solarva_add_custom_section_particles' );
add_action( 'elementor/element/section/section_structure/after_section_end', 'solarva_add_custom_section_images' );

function solarva_add_custom_section_controls( \Elementor\Element_Base $element) {
     
    $element->start_controls_section(
        'section_pxl',
        [
            'label' => esc_html__( 'Solarva General Settings', 'solarva' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );

    if ( get_post_type( get_the_ID()) === 'pxl-template' && get_post_meta( get_the_ID(), 'template_type', true ) === 'header-mobile') {
          
        $element->add_control(
            'pxl_header_type',
            [
                'label' => esc_html__( 'Header Type', 'solarva' ),
                'type'  => \Elementor\Controls_Manager::SELECT,
                'hide_in_inner' => true,
                'options'      => array(
                    ''          => esc_html__( 'Select Type', 'solarva' ),
                    'sticky'      => esc_html__( 'Header Sticky', 'solarva' ),
                ),
                'default'      => '',
            ]
        );
    };

    $element->add_control(
        'row_scroll_fixed',
        [
            'label'   => esc_html__( 'Column Fixed', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                'none'        => esc_html__( 'No', 'solarva' ),
                'fixed'   => esc_html__( 'Yes', 'solarva' ),
            ),
            'prefix_class' => 'pxl-row-scroll-',
            'default'      => 'none',      
        ]
    );


    $element->add_control(
        'row_zoom_point',
        [
            'label'   => esc_html__( 'Zoom Point', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'description' => 'Background color displayed on scroll.',
            'options' => array(
                'false'        => esc_html__( 'No', 'solarva' ),
                'true'   => esc_html__( 'Yes', 'solarva' ),
            ),
            'default'      => 'false',
            'prefix_class' => 'pxl-zoom-point-',      
        ]
    );

    $element->add_control(
        'pxl_section_overflow',
        [
            'label'   => esc_html__( 'Overflow', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                'visible'        => esc_html__( 'Visible', 'solarva' ),
                'hidden'   => esc_html__( 'Hidden', 'solarva' ),
            ),
            'default'      => 'visible', 
            'separator' => 'after',
            'prefix_class' => 'pxl-section-overflow-'     
        ]
    );

    $element->add_control(
        'pxl_section_fixed_scroll',
        [
            'label'   => esc_html__( 'Section Fixed Scroll', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                'none'        => esc_html__( 'None', 'solarva' ),
                'top'        => esc_html__( 'Top', 'solarva' ),
                'bottom'   => esc_html__( 'Bottom', 'solarva' ),
            ),
            'default'      => 'none', 
            'separator' => 'after',
            'prefix_class' => 'pxl-section-fix-'     
        ]
    );

    $element->add_control(
        'pxl_parallax_bg_img',
        [
            'label' => esc_html__( 'Parallax Background Image', 'solarva' ),
            'type' => \Elementor\Controls_Manager::MEDIA,
            'hide_in_inner' => false,
            'selectors' => [
                '{{WRAPPER}} .pxl-section-bg-parallax' => 'background-image: url( {{URL}} );',
            ],
        ]
    );
    $element->add_responsive_control(
        'pxl_parallax_bg_position',
        [
            'label' => esc_html__( 'Background Position', 'solarva' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            'hide_in_inner' => true,
            'options'      => array(
                ''              => esc_html__( 'Default', 'solarva' ),
                'center center' => esc_html__( 'Center Center', 'solarva' ),
                'center left'   => esc_html__( 'Center Left', 'solarva' ),
                'center right'  => esc_html__( 'Center Right', 'solarva' ),
                'top center'    => esc_html__( 'Top Center', 'solarva' ),
                'top left'      => esc_html__( 'Top Left', 'solarva' ),
                'top right'     => esc_html__( 'Top Right', 'solarva' ),
                'bottom center' => esc_html__( 'Bottom Center', 'solarva' ),
                'bottom left'   => esc_html__( 'Bottom Left', 'solarva' ),
                'bottom right'  => esc_html__( 'Bottom Right', 'solarva' ),
                'initial'       =>  esc_html__( 'Custom', 'solarva' ),
            ),
            'default'      => '',
            'selectors' => [
                '{{WRAPPER}} .pxl-section-bg-parallax' => 'background-position: {{VALUE}};',
            ],
            'condition' => [
                'pxl_parallax_bg_img[url]!' => ''
            ]        
        ]
    );
     
    $element->add_responsive_control(
        'pxl_parallax_bg_pos_custom_x',
        [
            'label' => esc_html__( 'X Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,  
            'hide_in_inner' => true,
            'size_units' => [ 'px', 'em', '%', 'vw' ],
            'default' => [
                'unit' => 'px',
                'size' => 0,
            ],
            'range' => [
                'px' => [
                    'min' => -800,
                    'max' => 800,
                ],
                'em' => [
                    'min' => -100,
                    'max' => 100,
                ],
                '%' => [
                    'min' => -100,
                    'max' => 100,
                ],
                'vw' => [
                    'min' => -100,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-section-bg-parallax' => 'background-position: {{SIZE}}{{UNIT}} {{pxl_parallax_bg_pos_custom_y.SIZE}}{{pxl_parallax_bg_pos_custom_y.UNIT}}',
            ],
            'condition' => [
                'pxl_parallax_bg_position' => [ 'initial' ],
                'pxl_parallax_bg_img[url]!' => '',
            ],
        ]
    );
    $element->add_responsive_control(
        'pxl_parallax_bg_pos_custom_y',
        [
            'label' => esc_html__( 'Y Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,  
            'hide_in_inner' => true,
            'size_units' => [ 'px', 'em', '%', 'vw' ],
            'default' => [
                'unit' => 'px',
                'size' => 0,
            ],
            'range' => [
                'px' => [
                    'min' => -800,
                    'max' => 800,
                ],
                'em' => [
                    'min' => -100,
                    'max' => 100,
                ],
                '%' => [
                    'min' => -100,
                    'max' => 100,
                ],
                'vw' => [
                    'min' => -100,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-section-bg-parallax' => 'background-position: {{pxl_parallax_bg_pos_custom_x.SIZE}}{{pxl_parallax_bg_pos_custom_x.UNIT}} {{SIZE}}{{UNIT}}',
            ],

            'condition' => [
                'pxl_parallax_bg_position' => [ 'initial' ],
                'pxl_parallax_bg_img[url]!' => '',
            ],
        ]
    );
    $element->add_responsive_control(
        'pxl_parallax_bg_size',
        [
            'label' => esc_html__( 'Background Size', 'solarva' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            'hide_in_inner' => true,
            'options'      => array(
                ''              => esc_html__( 'Default', 'solarva' ),
                'auto' => esc_html__( 'Auto', 'solarva' ),
                'cover'   => esc_html__( 'Cover', 'solarva' ),
                'contain'  => esc_html__( 'Contain', 'solarva' ),
                'initial'    => esc_html__( 'Custom', 'solarva' ),
            ),
            'default'      => '',
            'selectors' => [
                '{{WRAPPER}} .pxl-section-bg-parallax' => 'background-size: {{VALUE}};',
            ],
            'condition' => [
                'pxl_parallax_bg_img[url]!' => ''
            ]        
        ]
    );
    $element->add_responsive_control(
        'pxl_parallax_bg_size_custom',
        [
            'label' => esc_html__( 'Background Width', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,  
            'hide_in_inner' => true,
            'size_units' => [ 'px', 'em', '%', 'vw' ],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 1000,
                ],
                '%' => [
                    'min' => 0,
                    'max' => 100,
                ],
                'vw' => [
                    'min' => 0,
                    'max' => 100,
                ],
            ],
            'default' => [
                'size' => 100,
                'unit' => '%',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-section-bg-parallax' => 'background-size: {{SIZE}}{{UNIT}} auto',
            ],
            'condition' => [
                'pxl_parallax_bg_size' => [ 'initial' ],
                'pxl_parallax_bg_img[url]!' => '',
            ],
        ]
    );
    $element->add_control(
        'pxl_parallax_pos_popover_toggle',
        [
            'label' => esc_html__( 'Parallax Background Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'label_off' => esc_html__( 'Default', 'solarva' ),
            'label_on' => esc_html__( 'Custom', 'solarva' ),
            'return_value' => 'yes',
            'condition'     => [
                'pxl_parallax_bg_img[url]!' => ''
            ] 
        ]
    );
    $element->start_popover();
        $element->add_responsive_control(
            'pxl_parallax_pos_left',
            [
                'label' => esc_html__( 'Left', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-section-bg-parallax' => 'left: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_responsive_control(
            'pxl_parallax_pos_top',
            [
                'label' => esc_html__( 'Top', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-section-bg-parallax' => 'top: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        ); 
        $element->add_responsive_control(
            'pxl_parallax_pos_right',
            [
                'label' => esc_html__( 'Right', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-section-bg-parallax' => 'right: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_responsive_control(
            'pxl_parallax_pos_bottom',
            [
                'label' => esc_html__( 'Bottom', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-section-bg-parallax' => 'bottom: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        ); 
    $element->end_popover();

    $element->add_control(
        'pxl_parallax_effect_popover_toggle',
        [
            'label' => esc_html__( 'Parallax Background Effect', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'label_off' => esc_html__( 'Default', 'solarva' ),
            'label_on' => esc_html__( 'Custom', 'solarva' ),
            'return_value' => 'yes',
            'condition'     => [
                'pxl_parallax_bg_img[url]!' => ''
            ] 
        ]
    );
    $element->start_popover();
        $element->add_control(
            'pxl_parallax_bg_img_effect_x',
            [
                'label' => esc_html__( 'TranslateX', 'solarva' ).' (-80)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_y',
            [
                'label' => esc_html__( 'TranslateY', 'solarva' ).' (-80)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_z',
            [
                'label' => esc_html__( 'TranslateZ', 'solarva' ).' (-80)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_rotate_x',
            [
                'label' => esc_html__( 'Rotate X', 'solarva' ).' (30)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_rotate_y',
            [
                'label' => esc_html__( 'Rotate Y', 'solarva' ).' (30)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_rotate_z',
            [
                'label' => esc_html__( 'Rotate Z', 'solarva' ).' (30)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_scale_x',
            [
                'label' => esc_html__( 'Scale X', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        ); 
        $element->add_control(
            'pxl_parallax_bg_img_effect_scale_y',
            [
                'label' => esc_html__( 'Scale Y', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_scale_z',
            [
                'label' => esc_html__( 'Scale Z', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_img_effect_scale',
            [
                'label' => esc_html__( 'Scale', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_parallax_bg_from_scroll_custom',
            [
                'label' => esc_html__( 'Scroll From (px)', 'solarva' ).' (350) from offset top',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
    $element->end_popover(); 
    $element->add_group_control(
        \Elementor\Group_Control_Css_Filter::get_type(),
        [
            'name'      => 'pxl_section_parallax_img_css_filter',
            'selector' => '{{WRAPPER}} .pxl-section-bg-parallax',
            'condition'     => [
                'pxl_parallax_bg_img[url]!' => ''
            ] 
        ]
    );
    $element->add_responsive_control(
        'pxl_section_parallax_opacity',
        [
            'label'      => esc_html__( 'Parallax Opacity (0 - 100)', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ '%' ],
            'range' => [
                '%' => [
                    'min' => 1,
                    'max' => 100,
                ]
            ],
            'default'    => [
                'unit' => '%'
            ],
            'laptop_default' => [
                'unit' => '%',
            ],
            'tablet_extra_default' => [
                'unit' => '%',
            ],
            'tablet_default' => [
                'unit' => '%',
            ],
            'mobile_extra_default' => [
                'unit' => '%',
            ],
            'mobile_default' => [
                'unit' => '%',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-section-bg-parallax' => 'opacity: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'pxl_parallax_bg_img[url]!' => ''
            ] 
        ]
    );

    $element->add_control(
        'full_content_with_space',
        [
          'label' => esc_html__( 'Full Content with space from?', 'solarva' ),
          'type'         => \Elementor\Controls_Manager::SELECT,
                'prefix_class' => 'pxl-full-content-with-space-',
                'options'      => array(
                    'none'    => esc_html__( 'None', 'solarva' ),
                    'start'   => esc_html__( 'Start', 'solarva' ),
                    'end'     => esc_html__( 'End', 'solarva' ),
                ),
                'default'      => 'none',
                'condition' => [
                    'layout' => 'full_width'
                ]
        ]
    );
       
    $element->add_control(
        'pxl_container_width',
        [
                'label' => esc_html__('Container Width', 'solarva'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 1200,
                'condition' => [
                  'layout' => 'full_width',
                    'full_content_with_space!' => 'none'
                ]           
        ]
    );

    $element->add_group_control(
        \Elementor\Group_Control_Box_Shadow::get_type(),
        [
            'name' => 'section_box_shadow',
            'selector' => '{{WRAPPER}}',
        ]
    );

    $element->add_responsive_control(
        'pxl_backdrop_filter',
        [
            'label' => esc_html__( 'Background Size', 'solarva' ),
            'type'         => \Elementor\Controls_Manager::SLIDER,
            'hide_in_inner' => true,
            'size_units' => ['px'],
            'selectors' => [
                '{{WRAPPER}}' => 'backdrop-filter: blur({{SIZE}}{{VALUE}});',
            ], 
        ]
    );

    $element->add_group_control(
        \Elementor\Group_Control_Css_Filter::get_type(),
        [
            'name' => 'pxl_css_filters',
            'selector' => '{{WRAPPER}}',
        ]
    );
      
    $element->end_controls_section();
};

function solarva_add_custom_section_bg_overlay( \Elementor\Element_Base $element) {
    $element->start_controls_section(
        '_section_background_overlay',
        [
            'label' => esc_html__( 'Solarva Backgroud Overlay', 'solarva' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );
    $overlay = new \Elementor\Repeater();

    $overlay->add_group_control(
        \Elementor\Group_Control_Background::get_type(),
        [
            'name' => 'background_overlay',
            'types' => [ 'classic', 'gradient'],
            'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}',
        ]
    );
    $overlay->add_control(
        'divider1', 
        [ 'type' => \Elementor\Controls_Manager::DIVIDER]
    );
    
    $overlay->add_control(
        'overlay_style', 
        [
            'label' => esc_html__('STYLE', 'solarva' ),
            'type' => \Elementor\Controls_Manager::HEADING,
        ]
    );
    $overlay->add_responsive_control(
        '_overlay_opacity',
        [
            'label' => esc_html__('Opacity', 'solarva'),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => ['%', 'custom'],
            'default' => [
                'unit' => '%',
            ],
            'range' => [
                '%' => [
                    'min' => 0,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} {{CURRENT_ITEM}}' => 'opacity: {{SIZE}}{{UNIT}};',
            ],
        ],
    );
    $overlay->add_group_control(
        \Elementor\Group_Control_Css_Filter::get_type(),
        [
            'name' => 'overlay_css_filters',
            'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}',
        ]
    );

    $overlay->add_control(
        '_overlay_size',
        [
            'label' => esc_html__( 'Size', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'default' => '',
        ]
    );
    $overlay->start_popover();
        $overlay->add_responsive_control(
            '_overlay_width',
            [
                'label' => esc_html__('Width', 'solarva'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ],
        );
        $overlay->add_responsive_control(
            '_overlay_height',
            [
                'label' => esc_html__('Height', 'solarva'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ],
        );
    $overlay->end_popover();
    $overlay->add_control(
        'overlay_border_radius',
        [
            'label' => esc_html__( 'Border Radius', 'solarva' ),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
            'selectors' => [
                '{{WRAPPER}} {{CURRENT_ITEM}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );
    $overlay->add_control(
        'divider56', 
        [ 'type' => \Elementor\Controls_Manager::DIVIDER]
    );
    
    $overlay->add_control(
        'overlay_position', 
        [
            'label' => esc_html__('POSITION', 'solarva' ),
            'type' => \Elementor\Controls_Manager::HEADING,
        ]
    );

    $overlay->add_control(
        '_overlay_position',
        [
            'label' => esc_html__( 'Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'default' => '',
        ]
    );
    $overlay->start_popover();
        $overlay->add_responsive_control(
            'overlay_h_orientation',
            [
                'label' => esc_html__('Horizontal Orientation', 'solarva'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'default' => 'left', 
                'options' => [
                    'left' => [
                        'label' => esc_html__('Left', 'solarva'), 
                        'icon' => 'eicon-h-align-left'
                    ],
                    'right' => [
                        'label' => esc_html__('Right', 'solarva'), 
                        'icon' => 'eicon-h-align-right'
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => '{{VALUE}}: 0;',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_left',
            [
                'label' => esc_html__('Left', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_h_orientation' => 'left',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'left: {{SIZE}}{{UNIT}};right: auto',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_right',
            [
                'label' => esc_html__('Right', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_h_orientation' => 'right',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'right: {{SIZE}}{{UNIT}};left: auto',
                    
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_v_orientation',
            [
                'label' => esc_html__('Vertical Orientation', 'solarva'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'default' => 'top', 
                'options' => [
                    'top' => [
                        'label' => esc_html__('Top', 'solarva'), 
                        'icon' => 'eicon-v-align-top'
                    ],
                    'bottom' => [
                        'label' => esc_html__('Bottom', 'solarva'), 
                        'icon' => 'eicon-v-align-bottom'
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => '{{VALUE}}: 0;',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_top',
            [
                'label' => esc_html__('Top', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_v_orientation' => 'top',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'top: {{SIZE}}{{UNIT}}; bottom: auto',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_bottom',
            [
                'label' => esc_html__('Bottom', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_v_orientation' => 'bottom',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'bottom: {{SIZE}}{{UNIT}}; top: auto',
                ],
            ]
        );
    $overlay->end_popover();
    $element->add_control(
        'overlay',
        [
            'label'   => esc_html__( 'Overlay', 'solarva' ),
            'type' => \Elementor\Controls_Manager::REPEATER,
            'fields' => $overlay->get_controls(),
            'default' => [],
        ]
    );
    $element->end_controls_section();
};

function solarva_add_custom_section_images( \Elementor\Element_Base $element) {
    $element->start_controls_section(
        'section_images',
        [
            'label' => esc_html__( 'Solarva Images', 'solarva' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );
    $image = new \Elementor\Repeater();
    // Force Elementor to refresh preview when image is uploaded
    $image->add_control(
        'image_refresh_preview',
        [
            'type' => \Elementor\Controls_Manager::HIDDEN,
            'default' => 'yes',
            'frontend_available' => true,
        ]
    );

    $image->add_control(
        'image_general', 
        [
            'label' => esc_html__('GENERAL', 'solarva' ),
            'type' => \Elementor\Controls_Manager::HEADING,
        ]
    );
    $image->add_control(
        '_image', 
        [
            'label' => esc_html__('Image', 'solarva' ),
            'type' => \Elementor\Controls_Manager::MEDIA,
            'description' => esc_html__('If you upload an svg file, the element will display as svg.', 'solarva'),
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} img' => 'src: url("{{URL}}");',
            ]
        ]
    );

    // Image Size
    $image->add_control(
        'image_size',
        [
            'label' => esc_html__( 'Size', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'default' => '',
        ]
    );

    $image->start_popover();
        $image->add_responsive_control(
            'image_width',
            [
                'label' => esc_html__('Width', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} svg, 
                    {{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} img' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $image->add_responsive_control(
            'image_max_width',
            [
                'label' => esc_html__('Max Width', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} svg, 
                    {{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} img' => 'max-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $image->add_responsive_control(
            'image_height',
            [
                'label' => esc_html__('Height', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} svg, 
                    {{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} img' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
    $image->end_popover();

    // SVG
    $image->add_control(
        '_svg_popover',
        [
            'label' => esc_html__( 'Svg', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'default' => '',
        ]
    );

    $image->start_popover();
        $image->add_control(
            'svg_fill_color',
            [
                'label' => esc_html__( 'Color', 'solarva' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} svg path, 
                    {{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} svg rect' => 'fill: {{VALUE}}',
                ],
            ]
        );
        $image->add_control(
            'svg_fill_opcity',
            [
                'label' => esc_html__( 'Opacity', 'solarva' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 0,
                'max' => 1,
                'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} svg path, 
                    {{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} svg rect' => 'fill-opacity: {{VALUE}}',
                ],
            ]
        );
    $image->end_popover();

    $image->add_control(
        '_img_border_radius',
        [
            'label' => esc_html__( 'Border Radius', 'solarva' ),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}} img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $image->add_control(
        'divider1', 
        [ 'type' => \Elementor\Controls_Manager::DIVIDER]
    );
    
    // Position
    $image->add_control(
        'image_position', 
        [
            'label' => esc_html__('POSITION', 'solarva' ),
            'type' => \Elementor\Controls_Manager::HEADING,
        ]
    );
    $image->add_responsive_control(
        'image_h_orientation',
        [
            'label' => esc_html__('Horizontal Orientation', 'solarva'),
            'type' => \Elementor\Controls_Manager::CHOOSE,
            'default' => 'left', 
            'options' => [
                'left' => [
                    'label' => esc_html__('Left', 'solarva'), 
                    'icon' => 'eicon-h-align-left'
                ],
                'right' => [
                    'label' => esc_html__('Right', 'solarva'), 
                    'icon' => 'eicon-h-align-right'
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}}' => '{{VALUE}}: 0;',
            ],
        ]
    );
    $image->add_responsive_control(
        'image_offset_left',
        [
            'label' => esc_html__('Left', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px','%','em','rem', 'custom' ],
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 1000,
                ],
            ],
            'condition' => [
                'image_h_orientation' => 'left',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}}' => 'left: {{SIZE}}{{UNIT}};right: auto',
            ],
        ]
    );
    $image->add_responsive_control(
        'image_offset_right',
        [
            'label' => esc_html__('Right', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px','%','em','rem', 'custom' ],
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 1000,
                ],
            ],
            'condition' => [
                'image_h_orientation' => 'right',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}}' => 'right: {{SIZE}}{{UNIT}};left: auto',
                
            ],
        ]
    );
    $image->add_responsive_control(
        'image_v_orientation',
        [
            'label' => esc_html__('Vertical Orientation', 'solarva'),
            'type' => \Elementor\Controls_Manager::CHOOSE,
            'default' => 'top', 
            'options' => [
                'top' => [
                    'label' => esc_html__('Top', 'solarva'), 
                    'icon' => 'eicon-v-align-top'
                ],
                'bottom' => [
                    'label' => esc_html__('Bottom', 'solarva'), 
                    'icon' => 'eicon-v-align-bottom'
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}}' => '{{VALUE}}: 0;',
            ],
        ]
    );
    $image->add_responsive_control(
        'image_offset_top',
        [
            'label' => esc_html__('Top', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px','%','em','rem', 'custom' ],
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 1000,
                ],
            ],
            'condition' => [
                'image_v_orientation' => 'top',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}}' => 'top: {{SIZE}}{{UNIT}}; bottom: auto',
            ],
        ]
    );
    $image->add_responsive_control(
        'image_offset_bottom',
        [
            'label' => esc_html__('Bottom', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px','%','em','rem', 'custom' ],
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 1000,
                ],
            ],
            'condition' => [
                'image_v_orientation' => 'bottom',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}}' => 'bottom: {{SIZE}}{{UNIT}}; top: auto',
            ],
        ]
    );

    $image->add_control(
        'divider', 
        [ 'type' => \Elementor\Controls_Manager::DIVIDER]
    );
    $image->add_control(
        'effect_options', 
        [
            'label' => esc_html__('EFFECT', 'solarva' ),
            'type' => \Elementor\Controls_Manager::HEADING,
        ]
    );

    // Effect
    $image->add_control(
        'image_effect', 
        [
            'label' => esc_html__('Effect', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SELECT,
            'options' => [
                '' => esc_html__('None', 'solarva'),
                'pxl-image-spin' => esc_html__('Spin', 'solarva'),
                'pxl-image-bounce' => esc_html__('Bounce', 'solarva'),
                'slide-up-down' => esc_html__('Slide Up Down', 'solarva'),
                'slide-top-to-bottom' => esc_html__('Slide Top To Bottom', 'solarva'),
                'pxl-image-effect2' => esc_html__('Slide Bottom To Top', 'solarva'),
                'slide-right-to-left' => esc_html__('Slide Right To Left', 'solarva'),
                'slide-left-to-right' => esc_html__('Slide Left To Right', 'solarva'),
                'pxl-parallax-scroll' => esc_html__('Parallax Scroll', 'solarva'),
                'pxl-parallax-hover' => esc_html__('Parallax Hover', 'solarva'),

            ],
            'default' => '',
        ]
    );
    $image->add_control(
        'parallax_scroll', 
        [
            'label' => esc_html__('Scroll', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SELECT,
            'options' => [
                'y' => esc_html__('Scroll Y', 'solarva'),
                'x' => esc_html__('Scroll X', 'solarva'),
                'z' => esc_html__('Scroll Z', 'solarva'),
            ],
            'default' => 'y',
            'condition' => [
                'image_effect' => 'pxl-parallax-scroll',
            ],
        ]
    );
    $image->add_control(
        'parallax_value', 
        [
            'label' => esc_html__('Value', 'solarva' ),
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => '80',
            'placeholder' => esc_html__('Ex: 80.', 'solarva' ),
            'condition' => [
                'image_effect' => ['pxl-parallax-hover', 'pxl-parallax-scroll'],
            ],
        ]
    );
    $image->add_control(
        'animation_duration',
        [
            'label' => esc_html__( 'Duration', 'solarva' ),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'placeholder' => esc_html('Ex: 5...', 'solarva'),
            'selectors' => [
                '{{WRAPPER}} .pxl-elementor-section-images {{CURRENT_ITEM}}' => '--s: {{VALUE}}s',
            ], 
        ],
    );

    $image->add_control(
        'image_responsive',
        [
            'label' => esc_html__( 'Responsive', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'label_off' => esc_html__( 'Default', 'solarva' ),
            'label_on' => esc_html__( 'Custom', 'solarva' ),
            'default' => '',
        ]
    );

    $image->start_popover();

        $image->add_control(
            'image_hidden_xs',
            [
                'label' => esc_html__('Hidden < 576px', 'solarva'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => '',
            ]
        );
        $image->add_control(
            'image_hidden_sm',
            [
                'label' => esc_html__('Hidden ≥ 576px and ≤ 767', 'solarva'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => '',
            ]
        );
        $image->add_control(
            'image_hidden_md',
            [
                'label' => esc_html__('Hidden ≥ 768px and ≤ 991', 'solarva'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => '',
            ]
        );
        $image->add_control(
            'image_hidden_lg',
            [
                'label' => esc_html__('Hidden ≥ 992px and ≤ 1199', 'solarva'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => '',
            ]
        );
        $image->add_control(
            'image_hidden_xl',
            [
                'name' => 'cube_hidden_xl', 
                'label' => esc_html__(' Hidden ≥ 1200px and ≤ 1399', 'solarva'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => '',
            ]
        );
        $image->add_control(
            'image_hidden_xxl',
            [
                'label' => esc_html__(' Hidden ≥ 1400px', 'solarva'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => '',
            ]
        );
    $image->end_popover();

    $element->add_control(
        '_images',
        [
            'label'   => esc_html__( 'Images', 'solarva' ),
            'type' => \Elementor\Controls_Manager::REPEATER,
            'fields' => $image->get_controls(),
            'default' => [],
        ]
    );
      
    $element->end_controls_section();
};

function solarva_add_custom_section_divider( \Elementor\Element_Base $element) {
     
    $element->start_controls_section(
        'section_divider',
        [
            'label' => esc_html__( 'Solarva Divider', 'solarva' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );
 
    $element->add_control(
        'row_divider',
        [
            'label'   => esc_html__( 'Divider', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                ''        => esc_html__( 'None', 'solarva' ),
                'rounded-top'   => esc_html__( 'Rounded Top', 'solarva' ),
                'angle-top'   => esc_html__( 'Angle Top Left', 'solarva' ),
                'angle-top-right'   => esc_html__( 'Angle Top Right', 'solarva' ),
                'angle-bottom-left'   => esc_html__( 'Angle Bottom Left', 'solarva' ),
                'angle-bottom'   => esc_html__( 'Angle Bottom Right', 'solarva' ),
                'angle-top-bottom'   => esc_html__( 'Angle Top & Bottom Right', 'solarva' ),
                'angle-top-bottom-left'   => esc_html__( 'Angle Top & Bottom Left', 'solarva' ),
                'wave-animation-top'   => esc_html__( 'Wave Animation Top', 'solarva' ),
                'wave-animation-bottom'   => esc_html__( 'Wave Animation Bottom 1', 'solarva' ),
                'wave-animation-bottom2'   => esc_html__( 'Wave Animation Bottom 2', 'solarva' ),
                'curved-top'   => esc_html__( 'Curved Top', 'solarva' ),
                'curved-bottom'   => esc_html__( 'Curved Bottom', 'solarva' ),
                'vertical1'   => esc_html__( 'Divider Vertical', 'solarva' ),
                'curved-arrow'   => esc_html__( 'Curved Arrow', 'solarva' ),
                'curved-arrow-inner-top'   => esc_html__( 'Curved Arrow Inner Top', 'solarva' ),
                'curved-arrow-inner-bottom'   => esc_html__( 'Curved Arrow Inner Bottom', 'solarva' ),
                'divider-border'   => esc_html__( 'Divider Broder Top/Bottom', 'solarva' ),
            ),
            'prefix_class' => 'pxl-row-divider-active pxl-row-divider-',
            'default'      => '',
        ]
    );

    $element->add_control(
        'divider_color',
        [
            'label' => esc_html__('Divider Color', 'solarva' ),
            'type' => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .pxl-row-angle, {{WRAPPER}} .pxl-wave-parallax > use, 
                {{WRAPPER}} .pxl-curved-arrow, {{WRAPPER}} .pxl-curved-arrow-inner-top, 
                {{WRAPPER}} .pxl-curved-arrow-inner-bottom, 
                {{WRAPPER}} .pxl-row-divider-top, 
                {{WRAPPER}} .pxl-row-divider-bottom' => 'fill: {{VALUE}} !important;',
                '{{WRAPPER}} .pxl-divider-vertical > div' => 'background-color: {{VALUE}} !important;',
            ],
        ]
    );

    $element->add_control(
        'divider_color_top',
        [
            'label' => esc_html__('Divider Color Top', 'solarva' ),
            'type' => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .pxl-row-divider-top' => 'fill: {{VALUE}} !important;',
                '{{WRAPPER}} .pxl-divider-border .pxl-divider-border-top' => 'background-color: {{VALUE}};'
            ],
        ]
    );

    $element->add_control(
        'divider_color_bottom',
        [
            'label' => esc_html__('Divider Color Bottom', 'solarva' ),
            'type' => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .pxl-row-divider-bottom' => 'fill: {{VALUE}} !important;',
                '{{WRAPPER}} .pxl-divider-border .pxl-divider-border-bottom' => 'background-color: {{VALUE}};'
            ],
        ]
    );

    $element->add_responsive_control(
        'divider_height',
        [
            'label' => esc_html__('Divider Height', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'control_type' => 'responsive',
            'size_units' => [ 'px' ],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 3000,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-row-angle, {{WRAPPER}} .pxl-section-waves, {{WRAPPER}} .pxl-row-svg' => 'height: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'row_divider!' => ['vertical1','curved-arrow','curved-arrow-inner-top','curved-arrow-inner-bottom','divider-border'],
            ],     
        ]
    );
      
    $element->end_controls_section();
};

function solarva_add_custom_section_particles( \Elementor\Element_Base $element) {
     
    $element->start_controls_section(
        'section_particles',
        [
            'label' => esc_html__( 'Solarva Particles', 'solarva' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );

    $element->add_control(
        'row_particles_display',
        [
            'label'   => esc_html__( 'Particles', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'default' => 'false',  
        ]
    );

    $element->add_control(
        'number',
        [
                'label' => esc_html__('Number', 'solarva'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 4,      
                'condition' => [
                    'row_particles_display' => ['yes'],
                ],     
        ]
    );

    $element->add_control(
        'size',
        [
                'label' => esc_html__('Size', 'solarva'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 3, 
                'condition' => [
                    'row_particles_display' => ['yes'],
                ],           
        ]
    );

    $element->add_control(
        'size_random',
        [
                'label' => esc_html__('Size Random', 'solarva'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'default' => 'false',
                'condition' => [
                    'row_particles_display' => ['yes'],
                ],   
        ]
    );

    $element->add_control(
        'move_direction',
        [
            'label'   => esc_html__( 'Move Direction', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                'none'        => esc_html__( 'None', 'solarva' ),
                'top'        => esc_html__( 'Top', 'solarva' ),
                'top-right'        => esc_html__( 'Top Right', 'solarva' ),
                'right'        => esc_html__( 'Right', 'solarva' ),
                'bottom-right'        => esc_html__( 'Bottom Right', 'solarva' ),
                'bottom'        => esc_html__( 'Bottom', 'solarva' ),
                'bottom-left'        => esc_html__( 'Bottom Left', 'solarva' ),
                'left'        => esc_html__( 'Left', 'solarva' ),
                'top-left'        => esc_html__( 'Top Left', 'solarva' ),
            ),
            'default'      => 'none',
            'condition' => [
                'row_particles_display' => ['yes'],
            ],  
        ]
    );

    $repeater = new \Elementor\Repeater();
    $repeater->add_control(
        'particle_color', 
        [
            'label' => esc_html__('Color', 'solarva' ),
            'type' => \Elementor\Controls_Manager::COLOR,
        ]
    );
    $element->add_control(
        'particle_color_item',
        [
            'label' => esc_html__('Color', 'solarva'),
            'type' => \Elementor\Controls_Manager::REPEATER,
            'fields' => $repeater->get_controls(),
            'default' => [],
            'condition' => [
                'row_particles_display' => ['yes'],
            ],    
        ]
    );
      
    $element->end_controls_section();
};

/* End Section */

/* Start Column */
add_action( 'elementor/element/column/layout/after_section_end', 'solarva_add_custom_columns_controls' ); 
function solarva_add_custom_columns_controls( \Elementor\Element_Base $element) {
    $element->start_controls_section(
        'columns_pxl',
        [
            'label' => esc_html__( 'Solarva General Settings', 'solarva' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );

    $element->add_control(
        'col_content_align',
        [
            'label'   => esc_html__( 'Column Content Align', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                ''           => esc_html__( 'Default', 'solarva' ),
                'start'           => esc_html__( 'Start', 'solarva' ),
                'center'           => esc_html__( 'Center', 'solarva' ),
                'end'           => esc_html__( 'End', 'solarva' ),
            ),
            'default' => '',
            'prefix_class' => 'pxl-col-align-'
        ]
    );

    $element->add_control(
        'col_sticky',
        [
            'label'   => esc_html__( 'Column Sticky', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                'none'           => esc_html__( 'No', 'solarva' ),
                'sticky' => esc_html__( 'Yes', 'solarva' ),
            ),
            'default' => 'none',
            'prefix_class' => 'pxl-column-'
        ]
    );

    $element->add_control(
        'col_sticky_offset_top',
        [
            'label' => esc_html__( 'Sticky Offset Top', 'solarva' ),
            'type' => 'text',
            'description' => esc_html__('Enter number.', 'solarva' ),
            'default'  => '30',
            'selectors' => [
                '{{WRAPPER}}.pxl-column-sticky' => 'top: {{VALUE}}'.'px',
            ],
            'condition' => [
                'col_sticky' => 'sticky'
            ]
        ]
    );

    $element->add_control(
        'col_position',
        [
            'label'   => esc_html__( 'Column Positon', 'solarva' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'options' => array(
                ''   => esc_html__( 'Default', 'solarva' ),
                'static'   => esc_html__( 'Static', 'solarva' ),
                'relative' => esc_html__( 'Relative', 'solarva' ),
            ),
            'default' => '',
            'selectors' => [
                '{{WRAPPER}}' => 'position: {{VALUE}} !important',
            ],
        ]
    );

    $element->add_control(
        'pxl_column_parallax_bg_img',
        [
            'label' => esc_html__( 'Parallax Background Image', 'solarva' ),
            'type' => \Elementor\Controls_Manager::MEDIA,
            // 'hide_in_inner' => true,
            'selectors' => [
                '{{WRAPPER}} .pxl-column-bg-parallax' => 'background-image: url( {{URL}} );',
            ],
        ]
    );
    $element->add_responsive_control(
        'pxl_column_parallax_bg_position',
        [
            'label' => esc_html__( 'Background Position', 'solarva' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            // 'hide_in_inner' => true,
            'options'      => array(
                ''              => esc_html__( 'Default', 'solarva' ),
                'center center' => esc_html__( 'Center Center', 'solarva' ),
                'center left'   => esc_html__( 'Center Left', 'solarva' ),
                'center right'  => esc_html__( 'Center Right', 'solarva' ),
                'top center'    => esc_html__( 'Top Center', 'solarva' ),
                'top left'      => esc_html__( 'Top Left', 'solarva' ),
                'top right'     => esc_html__( 'Top Right', 'solarva' ),
                'bottom center' => esc_html__( 'Bottom Center', 'solarva' ),
                'bottom left'   => esc_html__( 'Bottom Left', 'solarva' ),
                'bottom right'  => esc_html__( 'Bottom Right', 'solarva' ),
                'initial'       =>  esc_html__( 'Custom', 'solarva' ),
            ),
            'default'      => '',
            'selectors' => [
                '{{WRAPPER}} .pxl-column-bg-parallax' => 'background-position: {{VALUE}};',
            ],
            'condition' => [
                'pxl_column_parallax_bg_img[url]!' => ''
            ]        
        ]
    );
     
    $element->add_responsive_control(
        'pxl_column_parallax_bg_pos_custom_x',
        [
            'label' => esc_html__( 'X Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,  
            // 'hide_in_inner' => true,
            'size_units' => [ 'px', 'em', '%', 'vw' ],
            'default' => [
                'unit' => 'px',
                'size' => 0,
            ],
            'range' => [
                'px' => [
                    'min' => -800,
                    'max' => 800,
                ],
                'em' => [
                    'min' => -100,
                    'max' => 100,
                ],
                '%' => [
                    'min' => -100,
                    'max' => 100,
                ],
                'vw' => [
                    'min' => -100,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-column-bg-parallax' => 'background-position: {{SIZE}}{{UNIT}} {{pxl_column_parallax_bg_pos_custom_y.SIZE}}{{pxl_column_parallax_bg_pos_custom_y.UNIT}}',
            ],
            'condition' => [
                'pxl_column_parallax_bg_position' => [ 'initial' ],
                'pxl_column_parallax_bg_img[url]!' => '',
            ],
        ]
    );
    $element->add_responsive_control(
        'pxl_column_parallax_bg_pos_custom_y',
        [
            'label' => esc_html__( 'Y Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,  
            // 'hide_in_inner' => true,
            'size_units' => [ 'px', 'em', '%', 'vw' ],
            'default' => [
                'unit' => 'px',
                'size' => 0,
            ],
            'range' => [
                'px' => [
                    'min' => -800,
                    'max' => 800,
                ],
                'em' => [
                    'min' => -100,
                    'max' => 100,
                ],
                '%' => [
                    'min' => -100,
                    'max' => 100,
                ],
                'vw' => [
                    'min' => -100,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-column-bg-parallax' => 'background-position: {{pxl_column_parallax_bg_pos_custom_x.SIZE}}{{pxl_column_parallax_bg_pos_custom_x.UNIT}} {{SIZE}}{{UNIT}}',
            ],

            'condition' => [
                'pxl_column_parallax_bg_position' => [ 'initial' ],
                'pxl_column_parallax_bg_img[url]!' => '',
            ],
        ]
    );
    $element->add_responsive_control(
        'pxl_column_parallax_bg_size',
        [
            'label' => esc_html__( 'Background Size', 'solarva' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            // 'hide_in_inner' => true,
            'options'      => array(
                ''              => esc_html__( 'Default', 'solarva' ),
                'auto' => esc_html__( 'Auto', 'solarva' ),
                'cover'   => esc_html__( 'Cover', 'solarva' ),
                'contain'  => esc_html__( 'Contain', 'solarva' ),
                'initial'    => esc_html__( 'Custom', 'solarva' ),
            ),
            'default'      => '',
            'selectors' => [
                '{{WRAPPER}} .pxl-column-bg-parallax' => 'background-size: {{VALUE}};',
            ],
            'condition' => [
                'pxl_column_parallax_bg_img[url]!' => ''
            ]        
        ]
    );
    $element->add_responsive_control(
        'pxl_column_parallax_bg_size_custom',
        [
            'label' => esc_html__( 'Background Width', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,  
            // 'hide_in_inner' => true,
            'size_units' => [ 'px', 'em', '%', 'vw' ],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 1000,
                ],
                '%' => [
                    'min' => 0,
                    'max' => 100,
                ],
                'vw' => [
                    'min' => 0,
                    'max' => 100,
                ],
            ],
            'default' => [
                'size' => 100,
                'unit' => '%',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-column-bg-parallax' => 'background-size: {{SIZE}}{{UNIT}} auto',
            ],
            'condition' => [
                'pxl_column_parallax_bg_size' => [ 'initial' ],
                'pxl_column_parallax_bg_img[url]!' => '',
            ],
        ]
    );
    $element->add_control(
        'pxl_column_parallax_pos_popover_toggle',
        [
            'label' => esc_html__( 'Parallax Background Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'label_off' => esc_html__( 'Default', 'solarva' ),
            'label_on' => esc_html__( 'Custom', 'solarva' ),
            'return_value' => 'yes',
            'condition'     => [
                'pxl_column_parallax_bg_img[url]!' => ''
            ] 
        ]
    );
    $element->start_popover();
        $element->add_responsive_control(
            'pxl_column_parallax_pos_left',
            [
                'label' => esc_html__( 'Left', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-column-bg-parallax' => 'left: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_responsive_control(
            'pxl_column_parallax_pos_top',
            [
                'label' => esc_html__( 'Top', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-column-bg-parallax' => 'top: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        ); 
        $element->add_responsive_control(
            'pxl_column_parallax_pos_right',
            [
                'label' => esc_html__( 'Right', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-column-bg-parallax' => 'right: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_responsive_control(
            'pxl_column_parallax_pos_bottom',
            [
                'label' => esc_html__( 'Bottom', 'solarva' ).' (50px) px,%,vw,auto',
                'type' => 'text',
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .pxl-column-bg-parallax' => 'bottom: {{VALUE}}',
                ],
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        ); 
    $element->end_popover();

    $element->add_control(
        'pxl_column_parallax_effect_popover_toggle',
        [
            'label' => esc_html__( 'Parallax Background Effect', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'label_off' => esc_html__( 'Default', 'solarva' ),
            'label_on' => esc_html__( 'Custom', 'solarva' ),
            'return_value' => 'yes',
            'condition'     => [
                'pxl_column_parallax_bg_img[url]!' => ''
            ] 
        ]
    );
    $element->start_popover();
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_x',
            [
                'label' => esc_html__( 'TranslateX', 'solarva' ).' (-80)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_y',
            [
                'label' => esc_html__( 'TranslateY', 'solarva' ).' (-80)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_z',
            [
                'label' => esc_html__( 'TranslateZ', 'solarva' ).' (-80)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_rotate_x',
            [
                'label' => esc_html__( 'Rotate X', 'solarva' ).' (30)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_rotate_y',
            [
                'label' => esc_html__( 'Rotate Y', 'solarva' ).' (30)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_rotate_z',
            [
                'label' => esc_html__( 'Rotate Z', 'solarva' ).' (30)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_scale_x',
            [
                'label' => esc_html__( 'Scale X', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        ); 
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_scale_y',
            [
                'label' => esc_html__( 'Scale Y', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_scale_z',
            [
                'label' => esc_html__( 'Scale Z', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_img_effect_scale',
            [
                'label' => esc_html__( 'Scale', 'solarva' ).' (1.2)',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
        $element->add_control(
            'pxl_column_parallax_bg_from_scroll_custom',
            [
                'label' => esc_html__( 'Scroll From (px)', 'solarva' ).' (350) from offset top',
                'type' => 'text',
                'default' => '',
                'condition'     => [
                    'pxl_column_parallax_bg_img[url]!' => ''
                ] 
            ]
        );
    $element->end_popover(); 
    $element->add_group_control(
        \Elementor\Group_Control_Css_Filter::get_type(),
        [
            'name'      => 'pxl_column_parallax_img_css_filter',
            'selector' => '{{WRAPPER}} .pxl-column-bg-parallax',
            'condition'     => [
                'pxl_column_parallax_bg_img[url]!' => ''
            ] 
        ]
    );
    $element->add_responsive_control(
        'pxl_column_parallax_opacity',
        [
            'label'      => esc_html__( 'Parallax Opacity (0 - 100)', 'solarva' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ '%' ],
            'range' => [
                '%' => [
                    'min' => 1,
                    'max' => 100,
                ]
            ],
            'default'    => [
                'unit' => '%'
            ],
            'laptop_default' => [
                'unit' => '%',
            ],
            'tablet_extra_default' => [
                'unit' => '%',
            ],
            'tablet_default' => [
                'unit' => '%',
            ],
            'mobile_extra_default' => [
                'unit' => '%',
            ],
            'mobile_default' => [
                'unit' => '%',
            ],
            'selectors' => [
                '{{WRAPPER}} .pxl-column-bg-parallax' => 'opacity: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'pxl_column_parallax_bg_img[url]!' => ''
            ] 
        ]
    );

    $element->add_control(
        'pxl_column_overflow_hidden',
        [
            'label' => esc_html__('Overflow Hidden', 'solarva'),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => esc_html__( 'Yes', 'solarva' ),
            'label_off' => esc_html__( 'No', 'solarva' ),
            'return_value' => 'yes',
            'default' => 'no',
            'separator' => 'after',
            'prefix_class' => 'pxl-column-overflow-hidden-'
        ]
    );

    $element->add_responsive_control(
        'pxl_column_wrap',
        [
            'label' => esc_html__('Wrap', 'solarva'),
            'type' => \Elementor\Controls_Manager::CHOOSE,
            'options' => [
                'wrap' => [
                    'label' => esc_html('Wrap', 'solarva'),
                    'icon' => ' eicon-wrap',
                ],
                'nowrap' => [
                    'label' => esc_html('Nowrap', 'solarva'),
                    'icon' => 'eicon-nowrap',
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .elementor-widget-wrap' => 'flex-wrap: {{VALUE}};',
            ],
        ],
    );

    $element->add_responsive_control(
        'pxl_column_min_height',
        [
            'label' => esc_html__('Min Height', 'solarva'),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => ['px', '%'],
            'selectors' => [
                '{{WRAPPER}} .elementor-widget-wrap' => 'min-height: {{SIZE}}{{UNIT}}; height:100%;',
            ],
        ],
    );

    $element->add_control(
        'pxl_column_border_radius',
        [
            'label' => esc_html__( 'Border Radius', 'solarva' ),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
            'selectors' => [
                '{{WRAPPER}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $element->end_controls_section();
}

add_action( 'elementor/element/column/layout/after_section_end', 'solarva_add_custom_column_bg_overlay' ); 

function solarva_add_custom_column_bg_overlay( \Elementor\Element_Base $element) {
    $element->start_controls_section(
        '_column_background_overlay',
        [
            'label' => esc_html__( 'Solarva Backgroud Overlay', 'solarva' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );
    $overlay = new \Elementor\Repeater();

    $overlay->add_group_control(
        \Elementor\Group_Control_Background::get_type(),
        [
            'name' => 'background_overlay',
            'types' => [ 'classic', 'gradient'],
            'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}',
        ]
    );
    $overlay->add_control(
        'divider1', 
        [ 'type' => \Elementor\Controls_Manager::DIVIDER]
    );
    
    $overlay->add_control(
        'overlay_style', 
        [
            'label' => esc_html__('STYLE', 'solarva' ),
            'type' => \Elementor\Controls_Manager::HEADING,
        ]
    );
    $overlay->add_responsive_control(
        '_overlay_opacity',
        [
            'label' => esc_html__('Opacity', 'solarva'),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => ['%', 'custom'],
            'default' => [
                'unit' => '%',
            ],
            'range' => [
                '%' => [
                    'min' => 0,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} {{CURRENT_ITEM}}' => 'opacity: {{SIZE}}{{UNIT}};',
            ],
        ],
    );
    $overlay->add_group_control(
        \Elementor\Group_Control_Css_Filter::get_type(),
        [
            'name' => 'overlay_css_filters',
            'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}',
        ]
    );

    $overlay->add_control(
        '_overlay_size',
        [
            'label' => esc_html__( 'Size', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'default' => '',
        ]
    );
    $overlay->start_popover();
        $overlay->add_responsive_control(
            '_overlay_width',
            [
                'label' => esc_html__('Width', 'solarva'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ],
        );
        $overlay->add_responsive_control(
            '_overlay_height',
            [
                'label' => esc_html__('Height', 'solarva'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ],
        );
    $overlay->end_popover();
    $overlay->add_control(
        'overlay_border_radius',
        [
            'label' => esc_html__( 'Border Radius', 'solarva' ),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
            'selectors' => [
                '{{WRAPPER}} {{CURRENT_ITEM}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );
    $overlay->add_control(
        'divider2', 
        [ 'type' => \Elementor\Controls_Manager::DIVIDER]
    );
    
    $overlay->add_control(
        'overlay_position', 
        [
            'label' => esc_html__('POSITION', 'solarva' ),
            'type' => \Elementor\Controls_Manager::HEADING,
        ]
    );

    $overlay->add_control(
        '_overlay_position',
        [
            'label' => esc_html__( 'Position', 'solarva' ),
            'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
            'default' => '',
        ]
    );
    $overlay->start_popover();
        $overlay->add_responsive_control(
            'overlay_h_orientation',
            [
                'label' => esc_html__('Horizontal Orientation', 'solarva'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'default' => 'left', 
                'options' => [
                    'left' => [
                        'label' => esc_html__('Left', 'solarva'), 
                        'icon' => 'eicon-h-align-left'
                    ],
                    'right' => [
                        'label' => esc_html__('Right', 'solarva'), 
                        'icon' => 'eicon-h-align-right'
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => '{{VALUE}}: 0;',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_left',
            [
                'label' => esc_html__('Left', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_h_orientation' => 'left',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'left: {{SIZE}}{{UNIT}};right: auto',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_right',
            [
                'label' => esc_html__('Right', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_h_orientation' => 'right',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'right: {{SIZE}}{{UNIT}};left: auto',
                    
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_v_orientation',
            [
                'label' => esc_html__('Vertical Orientation', 'solarva'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'default' => 'top', 
                'options' => [
                    'top' => [
                        'label' => esc_html__('Top', 'solarva'), 
                        'icon' => 'eicon-v-align-top'
                    ],
                    'bottom' => [
                        'label' => esc_html__('Bottom', 'solarva'), 
                        'icon' => 'eicon-v-align-bottom'
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => '{{VALUE}}: 0;',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_top',
            [
                'label' => esc_html__('Top', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_v_orientation' => 'top',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'top: {{SIZE}}{{UNIT}}; bottom: auto',
                ],
            ]
        );
        $overlay->add_responsive_control(
            'overlay_offset_bottom',
            [
                'label' => esc_html__('Bottom', 'solarva' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','%','em','rem', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1000,
                    ],
                ],
                'condition' => [
                    'overlay_v_orientation' => 'bottom',
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'bottom: {{SIZE}}{{UNIT}}; top: auto',
                ],
            ]
        );
    $overlay->end_popover();
    $element->add_control(
        'overlay',
        [
            'label'   => esc_html__( 'Overlay', 'solarva' ),
            'type' => \Elementor\Controls_Manager::REPEATER,
            'fields' => $overlay->get_controls(),
            'default' => [],
        ]
    );
    $element->end_controls_section();
};


/* End Column */

add_action( 'elementor/element/after_add_attributes', 'solarva_custom_el_attributes', 10, 1 );
function solarva_custom_el_attributes($el){
    if( 'section' !== $el->get_name() ) {
        return;
    }
    $settings = $el->get_settings();

    $pxl_container_width = !empty($settings['pxl_container_width']) ? (int)$settings['pxl_container_width'] : 1200;

    if( isset( $settings['stretch_section']) && $settings['stretch_section'] == 'section-stretched') 
        $pxl_container_width = $pxl_container_width - 30;

    $pxl_container_width = $pxl_container_width.'px';

    if ( isset( $settings['full_content_with_space'] ) && $settings['full_content_with_space'] === 'start' ) {
       
        $el->add_render_attribute( '_wrapper', 'style', 'padding-left: calc( (100% - '.$pxl_container_width.')/2);');
    }
    if ( isset( $settings['full_content_with_space'] ) && $settings['full_content_with_space'] === 'end' ) {
       
        $el->add_render_attribute( '_wrapper', 'style', 'padding-right: calc( (100% - '.$pxl_container_width.')/2);');
    }
    if( 'section' == $el->get_name() ) {
        if ( isset( $settings['pxl_header_type'] ) && !empty($settings['pxl_header_type'] ) ) {
            $el->add_render_attribute( '_wrapper', 'class', 'pxl-header-'.$settings['pxl_header_type']);
        }
    }
}
add_filter( 'pxl-custom-section/before-render', 'solarva_custom_section_before_render', 10, 3 );


function solarva_custom_section_before_render($html ,$settings, $el) {
    if(!empty($settings['pxl_parallax_bg_img']['url'])){
        $effects = [];
        if(!empty($settings['pxl_parallax_bg_img_effect_x'])){
            $effects['x'] = (int)$settings['pxl_parallax_bg_img_effect_x'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_y'])){
            $effects['y'] = (int)$settings['pxl_parallax_bg_img_effect_y'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_z'])){
            $effects['z'] = (int)$settings['pxl_parallax_bg_img_effect_z'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_rotate_x'])){
            $effects['rotateX'] = (float)$settings['pxl_parallax_bg_img_effect_rotate_x'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_rotate_y'])){
            $effects['rotateY'] = (float)$settings['pxl_parallax_bg_img_effect_rotate_y'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_rotate_z'])){
            $effects['rotateZ'] = (float)$settings['pxl_parallax_bg_img_effect_rotate_z'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_scale'])){
            $effects['scale'] = (float)$settings['pxl_parallax_bg_img_effect_scale'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_scale_x'])){
            $effects['scaleX'] = (float)$settings['pxl_parallax_bg_img_effect_scale_x'];
        }
        if(!empty($settings['pxl_parallax_bg_img_effect_scale_y'])){
            $effects['scaleY'] = (float)$settings['pxl_parallax_bg_img_effect_scale_y'];
        }
        if(!empty($settings['pxl_parallax_bg_from_scroll_custom'])){
            $effects['from-scroll-custom'] = (int)$settings['pxl_parallax_bg_from_scroll_custom'];
        }
         
        $data_parallax = json_encode($effects);
        $html .= '<div class="pxl-section-bg-parallax" data-parallax="'.esc_attr($data_parallax).'"></div>';
    }

    if(!empty($settings['row_divider'])) {
        if($settings['row_divider'] == 'angle-top' || $settings['row_divider'] == 'angle-bottom' || $settings['row_divider'] == 'angle-top-right' || $settings['row_divider'] == 'angle-bottom-left') {
            $html .=  '<svg class="pxl-row-angle" style="fill:#ffffff" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="130px"><path stroke="" stroke-width="0" d="M0 100 L100 0 L200 100"></path></svg>';
        }
        if($settings['row_divider'] == 'angle-top-bottom' || $settings['row_divider'] == 'angle-top-bottom-left') {
            $html .=  '<svg class="pxl-row-angle pxl-row-angle-top" style="fill:#ffffff" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="130px"><path stroke="" stroke-width="0" d="M0 100 L100 0 L200 100"></path></svg><svg class="pxl-row-angle pxl-row-angle-bottom" style="fill:#ffffff" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="130px"><path stroke="" stroke-width="0" d="M0 100 L100 0 L200 100"></path></svg>';
        }
        if($settings['row_divider'] == 'wave-animation-top' || $settings['row_divider'] == 'wave-animation-bottom') {
            $html .=  '<svg class="pxl-row-angle" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 150" fill="#fff"><path d="M 0 26.1978 C 275.76 83.8152 430.707 65.0509 716.279 25.6386 C 930.422 -3.86123 1210.32 -3.98357 1439 9.18045 C 2072.34 45.9691 2201.93 62.4429 2560 26.198 V 172.199 L 0 172.199 V 26.1978 Z"><animate repeatCount="indefinite" fill="freeze" attributeName="d" dur="10s" values="M0 25.9086C277 84.5821 433 65.736 720 25.9086C934.818 -3.9019 1214.06 -5.23669 1442 8.06597C2079 45.2421 2208 63.5007 2560 25.9088V171.91L0 171.91V25.9086Z; M0 86.3149C316 86.315 444 159.155 884 51.1554C1324 -56.8446 1320.29 34.1214 1538 70.4063C1814 116.407 2156 188.408 2560 86.315V232.317L0 232.316V86.3149Z; M0 53.6584C158 11.0001 213 0 363 0C513 0 855.555 115.001 1154 115.001C1440 115.001 1626 -38.0004 2560 53.6585V199.66L0 199.66V53.6584Z; M0 25.9086C277 84.5821 433 65.736 720 25.9086C934.818 -3.9019 1214.06 -5.23669 1442 8.06597C2079 45.2421 2208 63.5007 2560 25.9088V171.91L0 171.91V25.9086Z"></animate></path></svg>';
        }
        if($settings['row_divider'] == 'wave-animation-bottom2') {
            $pxl_uniqid = uniqid();
            $html .=  '<svg class="pxl-section-waves pxl-section-waves1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="pxl-gentle-wave-'.$pxl_uniqid.'" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /></defs><g class="pxl-wave-parallax"><use xlink:href="#pxl-gentle-wave-'.$pxl_uniqid.'" x="48" y="0" /><use xlink:href="#pxl-gentle-wave-'.$pxl_uniqid.'" x="48" y="3" /><use xlink:href="#pxl-gentle-wave-'.$pxl_uniqid.'" x="48" y="5" /><use xlink:href="#pxl-gentle-wave-'.$pxl_uniqid.'" x="48" y="7" /></g></svg>';
        }
        if($settings['row_divider'] == 'curved-top' || $settings['row_divider'] == 'curved-bottom') {
            $html .=  '<svg class="pxl-row-angle" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1920 128" version="1.1" preserveAspectRatio="none" style="fill:#ffffff"><path stroke-width="0" d="M-1,126a3693.886,3693.886,0,0,1,1921,2.125V-192H-7Z"></path></svg>';
        }

        if($settings['row_divider'] == 'curved-arrow') {
            $html .=  '<svg class="pxl-curved-arrow pxl-curved-arrow-top" data-name="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 954.78 402.26"><path d="M.74,402.26h0Z"/><path d="M954.78,402.26h0Z"/><path d="M477.39,0C402.6,395.71,19.71,402.18.74,402.26H954C935.08,402.18,552.18,395.71,477.39,0Z"/></svg><svg class="pxl-curved-arrow pxl-curved-arrow-bottom" data-name="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 954.78 402.26"><path d="M.74,402.26h0Z"/><path d="M954.78,402.26h0Z"/><path d="M477.39,0C402.6,395.71,19.71,402.18.74,402.26H954C935.08,402.18,552.18,395.71,477.39,0Z"/></svg>';
        }

        if($settings['row_divider'] == 'curved-arrow-inner-top') {
            $html .=  '<svg class="pxl-curved-arrow-inner-top" data-name="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 954.78 402.26"><path d="M.74,402.26h0Z"/><path d="M954.78,402.26h0Z"/><path d="M477.39,0C402.6,395.71,19.71,402.18.74,402.26H954C935.08,402.18,552.18,395.71,477.39,0Z"/></svg>';
        }

        if($settings['row_divider'] == 'curved-arrow-inner-bottom') {
            $html .=  '<svg class="pxl-curved-arrow-inner-bottom" data-name="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 954.78 402.26"><path d="M.74,402.26h0Z"/><path d="M954.78,402.26h0Z"/><path d="M477.39,0C402.6,395.71,19.71,402.18.74,402.26H954C935.08,402.18,552.18,395.71,477.39,0Z"/></svg>';
        }

        if($settings['row_divider'] == 'vertical1') {
            $html .=  '<div class="pxl-divider-vertical"><div class="pxl-section-line1"></div><div class="pxl-section-line2"></div><div class="pxl-section-line3"></div><div class="pxl-section-line4"></div><div class="pxl-section-line5"></div><div class="pxl-section-line6"></div></div>';
        }

        if($settings['row_divider'] == 'divider-border') {
            $html .=  '<div class="pxl-divider-border"><div class="pxl-divider-border-top"></div><div class="pxl-divider-border-bottom"></div></div>';
        }

    }

    if( $settings['row_zoom_point'] == 'true' ) {
        $html .=  '<div class="pxl-zoom-point-wrap"><div class="pxl-zoom-point" data-offset="250" data-scale-mount="30"><div class="pxl-item--overlay" data-scroll-zoom=""></div></div></div>';
    }

    if(!empty($settings['row_particles_display']) && $settings['row_particles_display'] == 'yes') {
        wp_enqueue_script('particles-background');
        $s_random = '';
        if($settings['size_random'] == 'yes') {
            $s_random = 'true';
        } else {
            $s_random = 'false';
        }
        $colors = [];
        foreach($settings['particle_color_item'] as $values) {
            $colors[] = $values['particle_color'];
        }
        if(empty($colors)) {
            $colors = ["#b73490","#006b41","#cd3000","#608ecb","#ffb500","#6e4e00","#6b541b","#305686","#00ffb4","#8798ff","#0044c1"];
        }
        $el->add_render_attribute( 'color', 'data-color', json_encode($colors) );
        $html .= '<div id="pxl-row-particles-'.uniqid().'" class="pxl-row-particles" data-number="'.$settings['number'].'" data-size="'.$settings['size'].'" data-size-random="'.$s_random.'" data-move-direction="'.$settings['move_direction'].'" '.$el->get_render_attribute_string( 'color' ).'></div>';
    }


    // ceatran
    $is_images = isset($settings['_images']) && !empty($settings['_images']) && count($settings['_images']);
    if ($is_images) {
        global $wp_filesystem;
        $html .= '<div class="pxl-elementor-section-images">';
        foreach ($settings['_images'] as $key => $item) {
            $effect = $item['image_effect'] ?? '';
            $image_hidden_xs = (!empty($item['image_hidden_xs'])) ? 'pxl-hidden-xs' : '';
            $image_hidden_sm = (!empty($item['image_hidden_sm'])) ? 'pxl-hidden-sm' : '';
            $image_hidden_md = (!empty($item['image_hidden_md'])) ? 'pxl-hidden-md' : '';
            $image_hidden_lg = (!empty($item['image_hidden_lg'])) ? 'pxl-hidden-lg' : '';
            $image_hidden_xl = (!empty($item['image_hidden_xl'])) ? 'pxl-hidden-xl' : '';
            $image_hidden_xxl = (!empty($item['image_hidden_xxl'])) ? 'pxl-hidden-xxl' : '';
            $classes = 'pxl-item--image elementor-repeater-item-' .$item['_id'].' '.$effect.' '.$image_hidden_xs.' '.$image_hidden_sm.' '.$image_hidden_md.' '.$image_hidden_lg.' '.$image_hidden_xl.' '.$image_hidden_xxl;
            $_image_url = solarva_get_thumbnail($item['_image']['id'], 'full', true);
            $parallax_value = $item['parallax_value'] ?? '';
            $parallax_scroll = $item['parallax_scroll'] ?? '';
            $attrs = '';
            if (!empty($parallax_scroll) && !empty($parallax_value) && $effect === 'pxl-parallax-scroll') {
                $parallax_value = (int) $parallax_value;
                $parallax_attrs = [];
                switch ($parallax_scroll) {
                    case 'x':
                        $parallax_attrs['x'] = $parallax_value;
                        break;
                    case 'y':
                        $parallax_attrs['y'] = $parallax_value;
                        break;
                    case 'z':
                        $parallax_attrs['z'] = $parallax_value;
                        break;
                }
                $attrs = json_encode($parallax_attrs);
            }
    
            if ($effect === 'pxl-parallax-hover' && !empty($parallax_value)) {
                wp_enqueue_script('pxl-parallax-move-mouse');
            }
    
            if (!empty($_image_url) ) {
                if((pathinfo($_image_url, PATHINFO_EXTENSION) === 'svg')) {
                    $icon_urls = explode('uploads', $_image_url);
                    $upload_dir = wp_upload_dir();
                    $icon_path = $upload_dir['basedir']. $icon_urls[1] ;
                    $icon_content = $wp_filesystem->get_contents( $icon_path );
                    $html .= '<span data-parallax-value="'.esc_attr($parallax_value).'" data-parallax="'.esc_attr($attrs).'" class="'.esc_attr($classes).'">'.$icon_content.'</span>';
                }else {
                    $html .= '<span data-parallax-value="'.esc_attr($parallax_value).'" data-parallax="'.esc_attr($attrs).'" class="'.esc_attr($classes).'">
                                    <img src="'.$_image_url.'" />
                                </span>';
                }
            }
        }
        $html .= '</div>';
    }
    

    $is_overlay = isset($settings['overlay']) && !empty($settings['overlay']) && count($settings['overlay']) || false;
    if($is_overlay):
        foreach ($settings['overlay'] as $key => $item) :
            $classes = 'pxl-section-background-overlay elementor-repeater-item-'.esc_attr($item['_id']);
            $html .= '<div class="'.$classes.'"></div>';
        endforeach;       
    endif;
    return $html;
}

add_filter( 'pxl-custom-column/before-render', 'solarva_custom_column_before_render', 10, 3 );
function solarva_custom_column_before_render($html, $settings, $el){
    if(!empty($settings['pxl_column_parallax_bg_img']['url'])){
        $effects = [];
        if(!empty($settings['pxl_column_parallax_bg_img_effect_x'])){
            $effects['x'] = (int)$settings['pxl_column_parallax_bg_img_effect_x'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_y'])){
            $effects['y'] = (int)$settings['pxl_column_parallax_bg_img_effect_y'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_z'])){
            $effects['z'] = (int)$settings['pxl_column_parallax_bg_img_effect_z'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_rotate_x'])){
            $effects['rotateX'] = (float)$settings['pxl_column_parallax_bg_img_effect_rotate_x'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_rotate_y'])){
            $effects['rotateY'] = (float)$settings['pxl_column_parallax_bg_img_effect_rotate_y'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_rotate_z'])){
            $effects['rotateZ'] = (float)$settings['pxl_column_parallax_bg_img_effect_rotate_z'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_scale'])){
            $effects['scale'] = (float)$settings['pxl_column_parallax_bg_img_effect_scale'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_scale_x'])){
            $effects['scaleX'] = (float)$settings['pxl_column_parallax_bg_img_effect_scale_x'];
        }
        if(!empty($settings['pxl_column_parallax_bg_img_effect_scale_y'])){
            $effects['scaleY'] = (float)$settings['pxl_column_parallax_bg_img_effect_scale_y'];
        }
        if(!empty($settings['pxl_column_parallax_bg_from_scroll_custom'])){
            $effects['from-scroll-custom'] = (int)$settings['pxl_column_parallax_bg_from_scroll_custom'];
        }
         
        $data_parallax = json_encode($effects);
        $html .= '<div class="pxl-column-bg-parallax" data-parallax="'.esc_attr($data_parallax).'"></div>';
    }

    $is_overlay = isset($settings['overlay']) && !empty($settings['overlay']) && count($settings['overlay']) || false;
    if($is_overlay):
        foreach ($settings['overlay'] as $key => $item) :
            $classes = 'pxl-column-background-overlay elementor-repeater-item-'.esc_attr($item['_id']);
            $html .= '<div class="'.$classes.'"></div>';
        endforeach;       
    endif;

    return $html;
}