@extends('layouts.master')

@section('title', $data['pageTitle'])

@push('custom-css')
<link rel="stylesheet" href="https://static.zohocdn.com/recruit/embed_careers_site/css/v1.1/embed_jobs.css" type="text/css">
@endpush

@section('content')
    <!--begin::Content-->

    <div class="main-container">
        <section class="banner-container ">
            <div class="banner-title ">
                <div style="line-height: 1.1;">
                    <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
                </div>
            </div>
            <div style="height: 400px;" class="banner-image">
                <img src="{{ cms_image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
            </div>
        </section>

        <section class="container-fluid" style="background-color: #F0F9DC;padding-top: 50px">
            <div class="row">
                <div class="col-md-10 m-auto ">
                    <div class="row align-items-stretch">
                        <div class="col-md-12 d-flex flex-column justify-content-center text-center">
                            <div style="color: #BA744A;font-size: 34px;text-align: center;font-weight: bold;">{!! $page->title !!}</div>

                        </div>
                        <!-- Rigt column with text + image -->
                        <div class="col-md-12 d-flex">
                            <div class="mt-3 w-100">
                                <div style="color:#FF5757;line-height: 1.3;text-align: center;" class="mb-3">
                                    <div style="font-size: 20px;color: #232323 ;text-align: center;">{!! $page->body !!}</div>
                                </div>
                            </div>
                        </div>
                        <!-- Right column with long text -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Careers Listing Start -->
       
        <div class="container-fluid">
            <div class="body-container mt-5 mb-5">
                <div class="row justify-content-center">
                    <div class="col-md-10 col-lg-10  mb-2 mt-2">
                    
                        <div class="embed_jobs_head embed_jobs_with_style_3 mt-3" style="border-radius: 25px !important;padding:30px 0px !important;background: white; ">
                            <div class="embed_jobs_head2" style="border: 0px solid !important;">
                                <div class="embed_jobs_head3">
                                    <div id="rec_job_listing_div"> </div>
                                    <script type="text/javascript" src="https://static.zohocdn.com/recruit/embed_careers_site/javascript/v1.1/embed_jobs.js"></script>
                                    <script type="text/javascript">
                                        rec_embed_js.load({
                                            widget_id: "rec_job_listing_div",
                                            page_name: "Careers",
                                            source: "CareerSite",
                                            site: "https://farmersforforests.zohorecruit.in",
                                            brand_color: "#6875E2",
                                            empty_job_msg: "No current Openings"
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- col-md-8 is main  -->
                </div>
                <!-- row is main-->
            </div>
            <!-- body-container -->
        </div>
        <!-- Careers Listing End -->

    </div>
    <!--end::Content-->
@endsection