<?php /* Template name: Trust Credentials */
get_header();
?>

<!-- banner section  -->
<?php
$banner_sub_title   = get_field('banner_sub_title');
$banner_main_title  = get_field('banner_main_title');
$banner_description = get_field('banner_description');
$banner_image       = get_field('banner_image');
?>
<section class="img-banner">
    <?php if($banner_image) { ?>
    <img src="<?php echo $banner_image['url']; ?>" alt="<?php echo $banner_image['alt']; ?>" 
    fetchpriority="high" loading="eager" decoding="sync" width="1920" height="600" />
    <?php } ?>
    <div class="img-banner-content h-100">
        <div class="container h-100">
            <div class="d-flex align-items-center h-100 justify-content-center flex-column h-100 hero-text-col">
                <?php if($banner_sub_title) { ?>
                <div class="font-20 text-white sub-title"><?php echo $banner_sub_title; ?></div>
                <?php }
                if($banner_main_title) { ?>
                <div class="font-52 text-white text-center text-medium my-4">
                    <?php echo $banner_main_title; ?>
                </div>
                <?php }
                if($banner_description) { ?>
                <div class="font-20 text-white text-center">
                    <?php echo $banner_description; ?>
                </div>
                <?php } ?>
            </div>
        </div>
    </div>
</section>

<!-- transparency section  -->
 <?php
 $title              = get_field('title');
 $sub_title          = get_field('sub_title');
 $information_detail = get_field('information_detail');
 ?>
<section class="globally-recognized py-120 ">
    <div data-aos="fade-up" data-aos-duration="300">
        <div class="container">
            <?php if($title) { ?>
            <div class="font-16 font-blue font-semi text-uppercase text-center"><?php echo $title; ?></div>
            <?php }
            if($sub_title) { ?>
            <h2 class="font-42 font-black font-medium mt-3 text-center"><?php echo $sub_title; ?></h2>
            <?php } ?>
            <div class="row mt-60">
                <?php
                foreach($information_detail as $information_details) {
                    $icon_im = $information_details['icon_image'];
                    $description = $information_details['description'];
                    ?>
                <div class="col-6 col-lg-3">
                    <div class="global-card mx-2">
                        <img src="<?php echo $icon_im['url']; ?>" alt="<?php echo $icon_im['alt']; ?>" />
                        <p class="font-20 text-medium text-black mt-3">
                            <?php echo $description; ?>
                        </p>
                    </div>
                </div>
                <?php }
                wp_reset_postdata(); ?>
            </div>
        </div>
    </div>
</section>

<!-- preferences section  -->
<?php
$preferences_title = get_field('preferences_title');
$pre_card_details  = get_field('preferences_card_details');
?>
<section class="preferences py-120">
    <div data-aos="fade-up" data-aos-duration="300">
        <div class="container">
            <?php if($preferences_title) { ?>
            <div class="font-42 text-medium font-black">
                <?php echo $preferences_title; ?>
            </div>
            <?php } ?>
            <!-- <div class="row mt-60"> -->
            <div class="owl-carousel owl-theme preferences-slider mt-60">
                <?php
                foreach($pre_card_details as $pre_card_detail) {
                    $preferences_im = $pre_card_detail['preferences_image'];
                    $preferences_desc = $pre_card_detail['preferences_description'];
                    ?>
                <!-- <div class="col-12 col-md-6 col-lg-4 col-xl-3 preferences-card-wrap"> -->
                <div class="item preferences-card-wrap">
                    <div class="preferences-card position-relative overflow-hidden">
                        <img src="<?php echo $preferences_im['url']; ?>" alt="<?php echo $preferences_im['alt']; ?>" width="100%" height="100%" />
                        <div class="preference-detail position-absolute h-50 bottom-0 start-0 font-20 ps-4 pe-5 py-4 text-semi d-flex align-items-end">
                            <?php echo $preferences_desc; ?>
                        </div>
                    </div>
                </div>
                <?php }
                wp_reset_postdata(); ?>
            </div>
        </div>
    </div>
</section>

<!-- securely manage and share credential section  -->
<?php
$sub_title_manag_cred = get_field('sub_title_manag_cred');
$main_title           = get_field('main_title');
$manage_cred_details  = get_field('manage_credentials_detail');
$manage_img = get_field('image');
?>
<section class="securely-manage py-120">
    <div data-aos="fade-up" data-aos-duration="300">   
        <div class="container">
            <?php if($main_title) { ?>
            <div class="font-42 text-medium font-black">
                <?php echo $main_title; ?>
            </div>
            <?php }
            if($sub_title_manag_cred) { ?>
            <div class="font-18 font-light-black mt-3">
                <?php echo $sub_title_manag_cred; ?>
            </div>
            <?php } ?>
            <div class="row mt-60 flex-column-reverse flex-lg-row">
                <div class="col-12 col-lg-5 mt-4 mt-lg-0">
                    <?php
                    foreach($manage_cred_details as $manage_cred_detail) {
                        $manage_cred_content = $manage_cred_detail['content'];
                    ?>
                    <div class="font-18 font-black mb-4">
                        <?php echo $manage_cred_content; ?>
                    </div>
                    <?php }
                    wp_reset_postdata(); ?>
                </div>
                <div class="col-12 col-lg-6 offset-lg-1">
                    <div class="cred-img">
                        <img src="<?php echo $manage_img['url']; ?>" alt="<?php echo $manage_img['alt']; ?>" height="100%" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<?php
    $blog_choose_heading     =   get_field('blog_choose_heading');
        $blog_heading     =   get_field('blog_heading');
        $select_blog      =   get_field('select_blogs');
        if ($select_blog) {
        ?>
        <section class="engineering-service bg-black">
            <div data-aos="fade-up" data-aos-duration="300">
                <div class="container">

                    <<?php echo $blog_choose_heading; ?> class="font-42 text-medium"><?php echo $blog_heading; ?></<?php echo $blog_choose_heading; ?>>
                    <div class="owl-carousel owl-theme case-study">
                    <?php foreach ($select_blog as $post) {
                        $feture_img = get_the_post_thumbnail_url($post->ID);
                        ?>
                        <div class="item">
                            <a href="<?php the_permalink($post->ID); ?>" class="engineering-card position-relative overflow-hidden d-block">
                                <div class="engineering-card-img">
                                    <img src="<?php echo $feture_img; ?>" alt="case-study" />
                                </div>
                                <div class="engineering-detail">
                                    <div class="font-20 text-black text-medium detail-text">
                                        <?php echo get_the_title(); ?>
                                    </div>
                                </div>
                            </a>
                        </div>
                    <?php }
                    wp_reset_postdata(); ?>
                    </div>
                </div>
            </div>
        </section>
    <?php } ?>

<section class="contact-section bg-white py-120">
    <div data-aos="fade-up" data-aos-duration="300">
        <div class="container">
            <div class="d-flex justify-content-between align-items-start align-items-lg-center flex-column flex-lg-row">
                <div class="content">
                    <?php
                    if (get_field('title_contact', 28)) { ?>
                        <div class="text-black font-42 text-medium">
                            <?php echo get_field('title_contact', 28); ?>
                        </div>
                    <?php }
                    if (get_field('description', 28)) { ?>
                    <div class="font-16 text-black text-medium mt-3">
                        <?php echo get_field('description', 28); ?>
                    </div>
                </div>
                <?php }
                if (get_field('button_url', 28)) { ?>
                    <a href="<?php echo get_field('button_url', 28); ?>" 
                    class="mt-4 px-4 font-16 text-bold talk-btn  black-btn d-flex align-items-center justify-content-center mx-0"><?php echo get_field('title_contact', 28); ?></a>
                <?php } ?>
            </div>
        </div>
    </div>
</section>



<?php get_footer(); ?>