<?php 
$backgroundcolor = $instance['backgroundcolor'];

$bigtitle = $instance['bigtitle'];
$button_text = $instance['button_text'];

 $image_url1 = "";
                if ( $instance['image1'] != '' ){
                    $image_url1 = wp_get_attachment_image_src( $instance['image1'], "swap-faq", true );
                }
				$image_url2 = "";
                if ( $instance['image2'] != '' ){
                    $image_url2 = wp_get_attachment_image_src( $instance['image2'], "swap-faq", true );
                }
				


?>	
		<div class="section bg-transparent my-0  mt-0 pt-0 mb-0">
					<div class="container-fluid">
					<div class="" data-animate="fadeInDown">
							<h5 class="mb-0"> <span><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 42 12" height="40" width="40" style="enable-background:new 0 0 42 12;" xml:space="preserve"><g>	<g>		<path d="M36.9,1.1l-2,2v1.9l3.6-3.6l-0.6-1.3L36.9,1.1z"></path>		<path d="M39.9,3.4H37l-1.3,1.3h5.1l0.5-1.3H39.9z"></path>		<path d="M40.5,7.2l-2-2h-1.9l3.6,3.6l1.3-0.6L40.5,7.2z"></path>		<path d="M38.2,10.3V7.4l-1.3-1.3v5.1l1.3,0.5V10.3z"></path>		<path d="M34.4,10.9l2-2V6.9l-3.6,3.6l0.6,1.3L34.4,10.9z"></path>		<path d="M31.3,8.6h2.9l1.3-1.3h-5.1l-0.5,1.3H31.3z"></path>		<path d="M30.8,4.8l2,2h1.9l-3.6-3.6l-1.3,0.6L30.8,4.8z"></path>		<path d="M33.1,1.7v2.9l1.3,1.3V0.8l-1.3-0.5V1.7z"></path>	</g>	<g>		<rect x="0.5" y="10.9" width="29.3" height="1"></rect>	</g></g></svg></span> <?php echo esc_attr( $instance['tagline'] ); ?>
							<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 42 12" height="40" width="40" style="enable-background:new 0 0 42 12;" xml:space="preserve"><g>	<g>		<path d="M36.9,1.1l-2,2v1.9l3.6-3.6l-0.6-1.3L36.9,1.1z"></path>		<path d="M39.9,3.4H37l-1.3,1.3h5.1l0.5-1.3H39.9z"></path>		<path d="M40.5,7.2l-2-2h-1.9l3.6,3.6l1.3-0.6L40.5,7.2z"></path>		<path d="M38.2,10.3V7.4l-1.3-1.3v5.1l1.3,0.5V10.3z"></path>		<path d="M34.4,10.9l2-2V6.9l-3.6,3.6l0.6,1.3L34.4,10.9z"></path>		<path d="M31.3,8.6h2.9l1.3-1.3h-5.1l-0.5,1.3H31.3z"></path>		<path d="M30.8,4.8l2,2h1.9l-3.6-3.6l-1.3,0.6L30.8,4.8z"></path>		<path d="M33.1,1.7v2.9l1.3,1.3V0.8l-1.3-0.5V1.7z"></path>	</g>	<g>		<rect x="0.5" y="10.9" width="29.3" height="1"></rect>	</g></g></svg>
							</h5>
							</div>
						<div class="heading-block mb-3" data-animate="fadeInDown" data-delay="200">
									<h3 ><?php echo esc_attr( $instance['title'] ); ?></h3>
								</div>
						<div class="row align-items-md-center">
						
						<!-- Content -->
							<div class="col-lg-6 ">
								
								<div class="rounded" >
								
								<?php $i = 0;
        foreach( $instance['a_repeater'] as $item ){
            
            $i++;
            //visibility
            if ( $item['visibility'] == '' ){ 

              $text= 0;
                
             
                ?>  
									<div class="toggle py-4 accord-box " >
										<div class="toggle-header align-items-center">
											<div class="toggle-title fw-semibold">
												<?php echo esc_attr( $item['question'] ); ?>
											</div>
											<div class="toggle-icon">
												<i class="toggle-closed bi-plus-circle fs-4 op-05"></i>
												<i class="toggle-open bi-dash-circle fs-4"></i>
											</div>
										</div>
										<div class="toggle-content fs-6"><?php echo esc_attr( $item['answer'] ); ?></div>
									</div>
									<?php 
				    
				}
				}
         ?>

									

									

									
								</div>
							</div>
					

						
							<!-- Image -->
							<div class="col-md-6 ">
						<div class="img-box16">
                        <div class="img1"><img src="<?php echo esc_url( $image_url1[0] ); ?>" class="br-15" alt="<?php echo get_bloginfo('name'); ?>" style="animation: float 3s ease-in-out infinite;"></div>
                        <div class="img2"><img src="<?php echo esc_url( $image_url2[0] ); ?>" class="br-15" alt="<?php echo get_bloginfo('name'); ?>" style="animation: floatReverse 3s ease-in-out infinite;"></div>
                        
        <!-- Rotating Text
						============================================= -->
						<div class="col-md-2 d-md-block rotate-text1">
							<a href="#" data-scrollto="#slider" class="circular-text position-relative bg-primary  color">
								<h6 id="rotated-text" class="m-0 rotating infinite  fw-normal text-white">
									<?php echo esc_attr( $instance['roundedtext'] ); ?>
								</h6>
								<div class="position-absolute top-50 start-50 translate-middle fw-bold fs-2 text-white bi-arrow-down"></div>
							</a>
						</div>
		  
                       
                    </div>
								</div>
							
						</div>


						
					</div>
				</div>
