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

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

?>


<!-- Content
		============================================= -->
		<section id="content">
			<div class="content-wrap pt-0 mt-5">
				<div class="container-fluid">

					<div class="row gx-5 col-mb-80">
						<!-- Post Content
						============================================= -->
						<main class="postcontent col-lg-12 pb-0">

							<div class="single-post mb-0">

								<!-- Single Post
								============================================= -->
								<div class="entry">
								

									<!-- Entry Title
									============================================= -->
									<div class="entry-title mb-2  fadeInLeft animated " data-animate="fadeInLeft">
										<h1><?php echo esc_html( $instance['title'] ); ?></h1>
									</div><!-- .entry-title end -->

								

									

									<!-- Entry Content
									============================================= -->
									<div class="entry-content mt-0 fadeInRight animated " data-animate="fadeInRight">


										<p><?php echo wp_kses_post($instance['description']); ?></p>
								
									</div>
									
									
									<div class="row align-items-md-center mb-4 mt-4">
									
									
										<div class="col-md-6 ">
								
								
								<div class="row gutter-20 text-center ">
							<div class="col-md-6 col-6 entry mb-0 mt-3 p-mv-2">
								<div class="entry-image"  data-animate="fadeInUp" data-delay="200">
									<img src="<?php echo esc_url( $image_url1[0] ); ?>" alt="<?php echo get_bloginfo('name'); ?>">
								</div>
								
							</div>

							<div class="col-md-6 col-6 entry mb-0 mt-3 p-mv-2">
								<div class="entry-image"  data-animate="fadeInUp" data-delay="300">
									<img src="<?php echo esc_url( $image_url2[0] ); ?>" alt="<?php echo get_bloginfo('name'); ?>">
								</div>
								
							</div>

						
						</div>
						
					
							</div>
							<div class="col-md-6 ">
								<div class="heading-block mb-4 border-bottom-0" data-animate="fadeInRight" >
							<ul class="iconlist">
							<?php $i = 0;
        foreach( $instance['a_repeater'] as $item ){
            
            $i++;
            //visibility
            if ( $item['visibility'] == '' ){ 

              $text= 0;
                
             
                ?>  
										<li><i class="fa-solid fa-check-circle"></i><?php echo esc_attr( $item['point'] ); ?></li>
										<?php 
				    
				}
				}
         ?>
										
									</ul>
								</div>
								
							</div>
							
						</div>
						<?php if(  $instance['subtitle']) { ?>
							<div class="row">
						
							<div class="col-lg-6 col-md-9">
							<div class="fadeInRight animated" data-animate="fadeInRight">
							<h2><?php echo esc_html( $instance['subtitle'] ); ?></h2>
							
							
<p class="justify"><?php echo wp_kses_post($instance['content']); ?></p>
								<ul class="iconlist mb-3">
								<?php $i = 0;
        foreach( $instance['a_repeater1'] as $item ){
            
            $i++;
            //visibility
            if ( $item['visibility'] == '' ){ 

              $text= 0;
                
             
                ?>  
										<li><i class="fa-solid fa-check-circle"></i> <?php echo esc_attr( $item['subpoint'] ); ?></li>
										<?php 
				    
				}
				}
         ?>
									
									</ul>
								
								</div>
								

							</div>
							<div class="col-lg-6 col-md-9 ">
						<img src="<?php echo esc_url( $image_url3[0] ); ?>" class="service2 fadeInLeft animated br-15" data-animate="fadeInLeft">
						</div>
						</div>
						 <?php } ?>
								</div><!-- .entry end -->

								

								

								



							</div>

						</main><!-- .postcontent end -->

						
							
					</div>

				</div>
			</div>
		</section><!-- #content end -->
		
		
	