<?php include_once('header.php'); ?>

<section class="abt-sec carr-cult-sec og-padd">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 text-center pos-rel">

                <div class="og-abt-ball-1 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="600"></div>
                <div class="og-abt-ball-2 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="700"></div>
                <div class="og-abt-ball-3 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="800"></div>
                <div class="og-abt-ball-4 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="900"></div>
                <div class="og-abt-ball-5 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1000"></div>
                <div class="og-abt-ball-6 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1100"></div>
                <div class="og-abt-ball-7 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1200"></div>
                <div class="og-abt-ball-8 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1300"></div>
                <div class="og-abt-ball-9 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1400"></div>

                <img src="assets/img/phoenix/3.png" class="abt-img-cm-1" id="img1" data-aos="fade-down" data-aos-duration="1500">
                <img src="assets/img/phoenix/4.png" class="abt-img-cm-2" id="img2" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="200">
                <img src="assets/img/phoenix/2.png" class="abt-img-cm-3" id="img3" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="400">
                <img src="assets/img/phoenix/1.png" class="abt-img-cm-4" id="img4" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="600">

            </div>

            <div class="col-lg-7">
                <div class="og-cont-wrapper">
                    <h2 class="og-main-header" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">Careers & Culture</h2>

                    <p data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam sed vitae quia ipsam sequi quidem laudantium officia eligendi illo vero facilis laborum itaque, ullam similique cumque voluptatum delectus culpa et.sit amet consectetur adipisicing elit. Nam sed vitae quia ipsam sequi quidem laudantium officia.</p>

                    <h4 class="og-red-title car-crd-title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">Careers</h4>

                    <div class="og-career-posts-div" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="500">

                        <div class="career-card">
                            <h5>Creative Writter</h5>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                            <a href="" class="apply-now-btn" data-toggle="modal" data-target="#jobApplyModel">Apply Now</a>
                        </div>

                        <div class="career-card">
                            <h5>Creative Art Director</h5>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                            <a href="" class="apply-now-btn" data-toggle="modal" data-target="#jobApplyModel">Apply Now</a>
                        </div>


                        <!-- <div class="career-card">
                            <h5>Web Developer</h5>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                            <a href="" class="apply-now-btn" data-toggle="modal" data-target="#jobApplyModel">Apply Now</a>
                        </div>


                        <div class="career-card">
                            <h5>Front-End Developer</h5>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                            <a href="" class="apply-now-btn" data-toggle="modal" data-target="#jobApplyModel">Apply Now</a>
                        </div>

                        <div class="career-card">
                            <h5>Software Engineer</h5>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                            <a href="" class="apply-now-btn" data-toggle="modal" data-target="#jobApplyModel">Apply Now</a>
                        </div> -->

                        <!-- no vacant msg -->
                        <!-- <div class="no-vacant">
                    <h4>No Vacancies Available</h4>
                </div> -->

                    </div>

                </div>



                <!-- Modal -->
                <div class="modal fade job-apply-model" id="jobApplyModel" tabindex="-1" aria-labelledby="jobApplyModelLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title og-main-header">Creative Writter</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">

                                <div class="row">
                                    <div class="col-lg-6">

                                        <div class="pd-qualif">
                                            <h5>Qualifications</h5>
                                            <ul>
                                                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                                                <li>consectetur adipisicing elit. Eveniet, impedit reprehenderit ratione corporis id atque.</li>
                                                <li>impedit reprehenderit ratione corporis id atque harum quibusdam adipisci ab nam consectetur, quisquam error repudiandae eius eum vitae.</li>
                                                <li>adipisci ab nam consectetur, quisquam error repudiandae eius eum vitae, dignissimos nobis exercitationem.</li>
                                                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>

                                            </ul>
                                        </div>

                                    </div>

                                    <div class="col-lg-6">
                                        <div class="og-contact-form">
                                            <form>

                                                <div class="og-form-control" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="600">
                                                    <label>Name</label>
                                                    <input type="text" name="">
                                                </div>

                                                <div class="og-form-control" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="700">
                                                    <label>Position</label>
                                                    <input type="text" name="" value="Creative Writter">
                                                </div>



                                                <div class="og-form-control" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="800">
                                                    <label>Email</label>
                                                    <input type="email" name="">
                                                </div>



                                                <div class="og-form-control" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="900">
                                                    <label>Phone</label>
                                                    <input type="text" name="">
                                                </div>


                                                <div class="og-form-control" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="1000">
                                                    <label>CV</label>
                                                    <input type="file" name="">
                                                </div>

                                                <div class="og-form-control" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="1100">
                                                    <button type="submit" class="og-submi-btn">Submit</button>
                                                </div>

                                            </form>
                                        </div>

                                    </div>
                                </div>

                            </div>
                            <!-- <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div> -->
                        </div>
                    </div>
                </div>





            </div>


        </div>
    </div>
</section>


<script>
    let image1 = document.getElementById("img1");
    let image2 = document.getElementById("img2");
    let image3 = document.getElementById("img3");
    let image4 = document.getElementById("img4");




    window.addEventListener('mousemove', function(e) {

        let valueX = e.clientX;
        let valueY = e.clientY;


        image1.style.top = valueY * 0.007 + 'px';
        image1.style.left = valueX * 0.007 + 'px';

        image2.style.top = valueY * 0.003 + 'px';
        image2.style.left = valueX * 0.003 + 'px';

        image3.style.top = valueY * 0.004 + 'px';
        image3.style.left = valueX * 0.004 + 'px';

        image4.style.top = valueY * 0.009 + 'px';
        image4.style.left = valueX * 0.009 + 'px';

    })
</script>

<?php include_once('footer.php'); ?>