<?php
/**
 * Title: Banner
 * Slug: bpo-services/banner
 * Categories: bpo-services, banner
 */
?>
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|20"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"10%"} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"70%","className":"banner-col-2","style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column banner-col-2" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);flex-basis:70%"><!-- wp:heading {"className":"banner-heading-text","style":{"elements":{"link":{"color":{"text":"var:preset|color|tertiary"}}},"typography":{"fontSize":"45px","fontStyle":"normal","fontWeight":"700"},"css":"width: 80%;"},"textColor":"tertiary"} -->
<h2 class="wp-block-heading banner-heading-text has-custom-css has-tertiary-color has-text-color has-link-color" style="font-size:45px;font-style:normal;font-weight:700"><?php echo esc_html__('Empowering ','bpo-services'); ?><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-secondary-color"><?php echo esc_html__('Your Business','bpo-services'); ?></mark><?php echo esc_html__(' with Smart BPO Solutions','bpo-services'); ?></h2>
<!-- /wp:heading -->

<!-- wp:group {"className":"banner-bottom-row","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group banner-bottom-row"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"banner-text-para","style":{"color":{"text":"#0f0f0fcc"},"elements":{"link":{"color":{"text":"#0f0f0fcc"}}},"typography":{"fontSize":"18px","fontStyle":"normal","fontWeight":"400"}},"fontFamily":"roboto"} -->
<p class="banner-text-para has-text-color has-link-color has-roboto-font-family" style="color:#0f0f0fcc;font-size:18px;font-style:normal;font-weight:400"><?php echo esc_html__('We deliver cost-effective outsourcing services that streamline operations, enhance customer experience, and drive growth.We deliver cost-effective outsourcing services that streamline operations.','bpo-services'); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"banner-button","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-buttons banner-button"><!-- wp:button {"backgroundColor":"secondary","textColor":"base","className":"banner-button01","style":{"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"},"width":"1px"},"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"typography":{"fontSize":"18px","fontStyle":"normal","fontWeight":"400"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<div class="wp-block-button banner-button01"><a class="wp-block-button__link has-base-color has-secondary-background-color has-text-color has-background has-link-color has-custom-font-size wp-element-button"   style="border-width:1px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);font-size:18px;font-style:normal;font-weight:400"><?php echo esc_html__('Get Started','bpo-services'); ?></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"base","textColor":"secondary","className":"banner-button02","style":{"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"},"width":"1px"},"elements":{"link":{"color":{"text":"var:preset|color|secondary"}}},"typography":{"fontSize":"18px","fontStyle":"normal","fontWeight":"400"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"borderColor":"secondary"} -->
<div class="wp-block-button banner-button02"><a class="wp-block-button__link has-secondary-color has-base-background-color has-text-color has-background has-link-color has-border-color has-secondary-border-color has-custom-font-size wp-element-button"   style="border-width:1px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);font-size:18px;font-style:normal;font-weight:400"><?php echo esc_html__('Learn More','bpo-services'); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:group {"className":"call-us-sec","layout":{"type":"constrained","justifyContent":"right","contentSize":"100%"}} -->
<div class="wp-block-group call-us-sec"><!-- wp:group {"className":"call-us-group wow fadeInRight","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|60","right":"var:preset|spacing|60"},"blockGap":"var:preset|spacing|30"},"css":"box-shadow: 0px 0px 4px 0px #00000040;\nwidth: fit-content;","border":{"radius":{"topLeft":"15px","topRight":"15px","bottomLeft":"15px","bottomRight":"15px"}}},"backgroundColor":"base","layout":{"type":"constrained","contentSize":"100%","justifyContent":"right"}} -->
<div class="wp-block-group call-us-group wow fadeInRight has-custom-css has-base-background-color has-background" style="border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|tertiary"}}},"typography":{"fontSize":"20px","fontStyle":"normal","fontWeight":"600"}},"textColor":"tertiary","fontFamily":"poppins"} -->
<p class="has-tertiary-color has-text-color has-link-color has-poppins-font-family" style="font-size:20px;font-style:normal;font-weight:600"><?php echo esc_html__('Call Us','bpo-services'); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|tertiary"}}},"typography":{"fontSize":"33px","fontStyle":"normal","fontWeight":"600"}},"textColor":"tertiary","fontFamily":"poppins"} -->
<p class="has-tertiary-color has-text-color has-link-color has-poppins-font-family" style="font-size:33px;font-style:normal;font-weight:600"><a href="<?php echo esc_url( 'tel:1234567890' ); ?>"><?php echo esc_html__('+1234567890','bpo-services'); ?></a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"banner-bottom-image","layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-group banner-bottom-image"><!-- wp:image {"id":76,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/images/banner-image.png'); ?>" alt="" class="wp-image-76"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"banner-text-grp wow fadeInLeft","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"border":{"radius":{"topLeft":"15px","topRight":"15px","bottomLeft":"15px","bottomRight":"15px"}},"css":"box-shadow: 0px 0px 4px 0px #00000040;"},"backgroundColor":"base","layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-group banner-text-grp wow fadeInLeft has-custom-css has-base-background-color has-background" style="border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|tertiary"}}},"typography":{"fontSize":"18px","fontStyle":"normal","fontWeight":"400","lineHeight":1.6}},"textColor":"tertiary"} -->
<p class="has-tertiary-color has-text-color has-link-color" style="font-size:18px;font-style:normal;font-weight:400;line-height:1.6"><?php echo esc_html__('Boost Your Business Efficiency with 24/7 BPO Support – Get Started Today!','bpo-services'); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%","className":"banner-col-3"} -->
<div class="wp-block-column banner-col-3" style="flex-basis:25%"><!-- wp:group {"style":{"css":"    height: 100%;\n    display: flex\n;\n    justify-content: space-between;"},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group has-custom-css"><!-- wp:group {"className":"banner-right-svg","layout":{"type":"constrained","justifyContent":"right","contentSize":"100%"}} -->
<div class="wp-block-group banner-right-svg"><!-- wp:html -->
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.0571" cy="15.0571" r="15.0571" transform="rotate(90 15.0571 15.0571)" fill="var(--wp--preset--color--tertiary)"/>
<circle cx="46.9429" cy="15.0571" r="15.0571" transform="rotate(90 46.9429 15.0571)" fill="var(--wp--preset--color--tertiary)"/>
<circle cx="46.9429" cy="46.9429" r="15.0571" transform="rotate(90 46.9429 46.9429)" fill="var(--wp--preset--color--tertiary)"/>
</svg>
<!-- /wp:html --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"banner-right-svg","layout":{"type":"constrained"}} -->
<div class="wp-block-group banner-right-svg"><!-- wp:image {"id":60,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/images/banner-svg-img.png'); ?>" alt="" class="wp-image-60"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"5%"} -->
<div class="wp-block-column" style="flex-basis:5%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->