<?php
/**
 * Template Name: Request Demo Page Template
 * 
 *  
 * The template for displaying Akos Full Width Pages with no padding
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>
<?php get_header(); ?>

<style>
.request-demo.content_section {
    padding: 5rem 0;
    background: linear-gradient(to bottom, #f8f9fa 29%, #012836 29%)
}

.wrap-inner {
    max-width: 990px;
    padding: 0 15px;
    margin: auto;
    width: 100%;
}

.left_panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.left_panel h1 {
    margin-bottom: 2rem;
    font-size: 55px;
    font-weight: 600;
}

.left_panel p {
    text-align: left;
    margin-bottom: 27px;
    font-size: 22px;
}

.left_panel .page_content {
    margin-bottom: auto;
    margin-top: 5rem;
    margin-top: 9rem;
}

.left_panel .page_content p {
    color: #fff;
    font-weight: 700;
}

.left_panel .page_content ul {
    font-size: 18px;
    line-height: 1.25em;
    color: #1d1d1d;
    margin: 0 0 20px;
    padding-left: 20px;
    list-style: none;
    color: #fff;
    padding-left: 0;
}

.left_panel .page_content ul li {
    margin: 0 0 20px;
    position: relative;
    display: inline-block;
    padding-left: 0;
    text-indent: -26px;
    padding-left: 26px;
    font-size: 20px;
    line-height: 1.5rem;
}

.left_panel ul li:before {
    font-family: "fontAwesome";
    content: "\f00c";
    color: #fff;
    background-color: #3cc5ff;
    font-size: 10px;
    padding: 3px;
    border-radius: 50%;
    margin-right: 10px;
}

.diamond_container {
    height: 0;
}

.small_diamond_dotted_left {
    position: relative;
    bottom: -6rem;
    left: -6rem;
    width: 122px;
}

.small_diamond_dotted_right_top {
    position: relative;
    bottom: 7rem;
    right: -25rem;
    width: 122px;
}

.large_diamond_dotted_right_bottom {
    position: relative;
    bottom: -32rem;
    right: -19rem;
    width: 219px;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 400ms;
    transition-delay: 0ms;
}

.form_div form {
    background-color: #fff;
    border-radius: 22px;
    padding: 3rem 3rem 2rem;
    box-shadow: 0px 20px 50px 0 rgb(24 24 24 / 30%);
    position: relative;
}

 

@media screen and (min-width: 48rem) {
    .wrap-inner {
        max-width: unset;
        padding: 0 4vw;
    }
}

@media screen and (min-width: 84.875rem) {
    .wrap-inner {
        max-width: 1356px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 991px){
    .request-demo.content_section {
        padding: 3rem 0;
        background: 0 0;
    }
    .left_panel .page_content {
        margin-top: auto;
    }
    .left_panel .page_content p {
        color: #1f1f1f;
    }
    .left_panel .page_content ul {
        color: #1f1f1f;
    }
}

@media screen and (max-width: 767px) and (min-width: 0){
    .wrap-inner {
        max-width: unset;
        padding: 0 4vw;
    }
}


</style>

<section class="request-demo content_section main-content">
    <section class="wrap-inner">
        <section class="row">
            <section class="col-lg-6 col-md-12 col-sm-12 left_panel">
                <section class="page_heading">
                    <h1>Request a demo</h1>
                    <p>See how Felicity can transform talent acquisition at your <span class="content_au"
                            style="display: initial;">organisation</span><span class="content_us" data-nosnippet=""
                            style="display: none;">organization</span>.</p>
                </section>
                <section class="page_content">
                    <p>Book a call now to:</p>
                    <ul>
                        <li>
                            Get a <span class="content_au" style="display: initial;">personalised</span><span
                                class="content_us" data-nosnippet="" style="display: none;">personalized</span>
                            demonstration of how the Felicity platform can work
                            for you
                        </li>
                        <li>Discuss how you can use technology to achieve your goals</li>
                        <li>Receive a quote based on your requirements</li>
                    </ul>
                </section>

            </section>
            <section class="col-lg-6 col-md-12 col-sm-12 right_panel">
                <section class="diamond_container">
                    <img alt="dotted_diamond" width="122" height="122" style="height: auto;"
                        data-src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_diamond.png?lossy=0&amp;strip=1&amp;webp=1"
                        class="small_diamond_dotted_left lazyloaded"
                        src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_diamond.png?lossy=0&amp;strip=1&amp;webp=1" />
                    <noscript>
                        <img alt="dotted_diamond" width="122" height="122" style="height: auto;"
                            class="small_diamond_dotted_left"
                            src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_diamond.png?lossy=0&strip=1&webp=1" />
                    </noscript>
                    <img alt="dotted_diamond" width="122" height="122" style="height: auto;"
                        data-src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_diamond.png?lossy=0&amp;strip=1&amp;webp=1"
                        class="small_diamond_dotted_right_top lazyloaded"
                        src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_diamond.png?lossy=0&amp;strip=1&amp;webp=1" />
                    <noscript>
                        <img alt="dotted_diamond" width="122" height="122" style="height: auto;"
                            class="small_diamond_dotted_right_top"
                            src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_diamond.png?lossy=0&strip=1&webp=1" />
                    </noscript>
                    <img alt="dotted_diamond" width="219" height="219" style="height: auto;"
                        data-srcset="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?lossy=0&amp;strip=1&amp;webp=1 255w,https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?size=125x125&amp;lossy=0&amp;strip=1&amp;webp=1 125w"
                        data-src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?lossy=0&amp;strip=1&amp;webp=1"
                        data-sizes="(max-width: 255px) 100vw, 255px"
                        class="large_diamond_dotted_right_bottom lazyloaded"
                        src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?lossy=0&amp;strip=1&amp;webp=1"
                        sizes="(max-width: 255px) 100vw, 255px" srcset="
                            https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?lossy=0&amp;strip=1&amp;webp=1                  255w,
                            https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?size=125x125&amp;lossy=0&amp;strip=1&amp;webp=1 125w
                        " />
                    <noscript>
                        <img alt="dotted_diamond" width="219" height="219" style="height: auto;"
                            class="large_diamond_dotted_right_bottom"
                            src="https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?lossy=0&strip=1&webp=1"
                            srcset="
                                https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?lossy=0&strip=1&webp=1              255w,
                                https://979533.smushcdn.com/2821498/wp-content/uploads/2021/08/dotted_large_diamond.png?size=125x125&lossy=0&strip=1&webp=1 125w
                            " sizes="(max-width: 255px) 100vw, 255px" />
                    </noscript>
                </section>
                <div class="form_div request-demo-main">
                    <form class="form" accept-charset="UTF-8" action="#" method="post" >
                        <div class="row g-4">
                            <div class="col-sm-6">
                                <label for="date" class="form-label fs-base">First Name</label>
                                <input type="text" class="form-control form-control-lg"  placeholder="First Name" required="" />
                                <div class="invalid-feedback">Enter First Name!</div>
                            </div>
                            <div class="col-sm-6">
                                <label for="time" class="form-label fs-base">Last Name</label>
                                <input type="text" class="form-control form-control-lg"   placeholder="Last Name" required="" />
                                <div class="invalid-feedback">Enter Last Name!</div>
                            </div>
                            <div class="col-sm-6">
                                <label for="date" class="form-label fs-base">Jon Title</label>
                                <input type="text" class="form-control form-control-lg"   placeholder="Jon Title" required="" />
                                <div class="invalid-feedback">Enter Job Title!</div>
                            </div>
                            <div class="col-sm-6">
                                <label for="time" class="form-label fs-base">Telephone</label>
                                <input type="text" class="form-control form-control-lg"  placeholder="Telephone" required="" />
                                <div class="invalid-feedback">Enter Telephone!</div>
                            </div>

                            <div class="col-12">
                                <label for="email" class="form-label fs-base">Business Email address</label>
                                <input type="email" class="form-control form-control-lg" id="email" required="" />
                                <div class="invalid-feedback">Please provid a valid email address!</div>
                            </div>

                            <div class="col-12">
                                <label for="fn" class="form-label fs-base">Organisation name</label>
                                <input type="text" class="form-control form-control-lg" id="fn" required="" />
                                <div class="invalid-feedback">Please enter your full name!</div>
                            </div>
                            <div class="col-12">
                                <label for="specialist" class="form-label fs-base">Your Country</label>
                                <select class="form-select form-select-lg" id="specialist" required="">
                                    <option value="" selected="" disabled="">Choose a Country</option>
                                    <option value="Therapist">Therapist</option>
                                    <option value="Dentist">Dentist</option>
                                    <option value="Cardiologist">Cardiologist</option>
                                    <option value="Pediatrician">Pediatrician</option>
                                    <option value="Gynecologist">Gynecologist</option>
                                    <option value="Surgeon">Surgeon</option>
                                </select>
                                <div class="invalid-feedback">Choose a specialist from the list!</div>
                            </div>
                            <div class="col-12">
                                <label for="specialist" class="form-label fs-base">Global Employees</label>
                                <select class="form-select form-select-lg" id="specialist" required="">
                                    <option value="" selected="" disabled="">Please Choose</option>
                                    <option value="Therapist">Therapist</option>
                                    <option value="Dentist">Dentist</option>
                                    <option value="Cardiologist">Cardiologist</option>
                                    <option value="Pediatrician">Pediatrician</option>
                                    <option value="Gynecologist">Gynecologist</option>
                                    <option value="Surgeon">Surgeon</option>
                                </select>
                                <div class="invalid-feedback">Choose a specialist from the list!</div>
                            </div>
                            

                            <div class="col-12">
                                <label for="fn" class="form-label fs-base">Please provide detail on how we can help you</label>
                                <input type="text" class="form-control form-control-lg" id="fn" required="" />
                                <div class="invalid-feedback">Please enter your full name!</div>
                            </div>
 

                            <div class="form-check mb-4 mt-4">
                                    <label class="field-label" for="376182_5761pi_376182_5761">I understand my information will be used in accordance with PageUp’s <a href="/privacy-policy/">Privacy Policy</a>. This includes emails, invites and updates covering HR and the future of work. You can unsubscribe at anytime. This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="nofollow noopener">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="nofollow noopener">Terms of Service</a> apply.</label>
                             </div>
                            
                             <div class="col-12 pt-2 pt-sm-3">
                                <button type="submit" class="btn btn-lg btn-primary w-100 w-sm-auto">Get your demo</button>
                            </div>
                    </form>
                </div>
            </section>
        </section>
    </section>
</section>

<?php get_footer(); ?>