{{ partial:partials.navbar.navbar }}
<main>
    <!-- Section 1 -->
    <section id="section-1">
        <div id="jumbotron" class="relative xl:max-h-[645px] overflow-hidden">
            <div class="">
                <div class="">
                    <div class="xl:max-h-[645px] relative">
                        {{assets:image}}
                        <img
                            id="primaryimage"
                            srcset="{{ glide:url width='360' }} 360w,
                                        {{ glide:url width='640' }} 640w,
                                        {{ glide:url width='768' }} 768w,
                                        {{ glide:url width='1024' }} 1024w,
                                        {{ glide:url width='1280' }} 1280w,
                                        {{ glide:url width='1536' }} 1536w"
                            sizes="(min-width: 1536px) 1536px,
                                    (min-width: 1280px) 1280px,
                                    (min-width: 1024px) 1024px,
                                    (min-width: 768px) 768px,
                                    (min-width: 640px) 640px,
                                    100vw"
                            data-src="{{ glide:url width='360' }}"
                            alt="{{ alt }}"
                            class="w-full h-full lg:min-h-[645px] object-cover z-10"
                        />
                        {{/assets:image}}
                        <div
                            class="w-full absolute left-0 top-1/2 transform -translate-y-1/2"
                        >
                            <div
                                class="max-w-3xl md:max-w-5xl mx-auto xl:max-w-7xl px-7"
                            >
                                <h2
                                    class="text-[34px] lg:text-[40px] leading-tight text-white font-bold font-poppins"
                                >
                                    {{title_sec_1}}
                                </h2>
                                <p
                                    class="text-[13px] lg:text-xl xl:ml-2 italic text-white"
                                >
                                    {{subtitle_sec_1}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section id="section-2">
        <article class="max-w-3xl md:max-w-5xl xl:max-w-7xl mx-auto px-10">
            <div class="my-8">{{partial:breadcrumbs}}</div>
            <div class="flex flex-col lg:flex-row gap-4 lg:gap-8">
                <div class="w-full lg:w-1/2">
                    <!-- tooltip history-->
                    <!-- prettier-ignore -->
                    {{partial:tooltip tooltip_class_title="text-[34px] lg:text-[40px] font-bold mb-2" tooltip_title="{title_history}" tooltip_text="{tooltip_history}"}}

                {{partial:line-svg}}
                    <div class="mt-4 text-[15px] text-[#4C4B4B]">
                        {{description_history | nl2br }}
                    </div>
                </div>
                <div class="flex flex-col gap-4 w-full lg:w-1/2 mt-8">
                    <div>
                        <!-- tooltip vision-->
                        <!-- prettier-ignore -->
                        {{partial:tooltip tooltip_class_title="text-[34px] lg:text-[40px] font-bold mb-2" tooltip_title="{title_vision}" tooltip_text="{tooltip_vision}"}}

                {{partial:line-svg}}
                        <div class="mt-4 text-[15px] text-[#4C4B4B]">
                            {{description_vision | nl2br }}
                        </div>
                    </div>
                    <div>
                        <!-- tooltip mission-->
                        <!-- prettier-ignore -->
                        {{partial:tooltip tooltip_class_title="text-[34px] lg:text-[40px] font-bold mb-2" tooltip_title="{title_mission}" tooltip_text="{tooltip_mission}"}}
                {{partial:line-svg}}
                        <div class="mt-4 text-[15px] text-[#4C4B4B]">
                            {{ description_mission | nl2br }}
                        </div>
                    </div>
                    <a
                        target="_blank"
                        class="bg-[#f4524d] w-full lg:w-[314.75px] h-[63px] rounded-lg my-10"
                        href="{{company_profile_pdf:file}}"
                    >
                        <div
                            class="flex h-full w-full gap-4 justify-center items-center"
                        >
                            <i
                                class="fa-solid fa-circle-down text-white fa-xl"
                            ></i
                            ><span class="text-white">{{label_download}}</span>
                        </div>
                    </a>
                </div>
            </div>
        </article>
    </section>
    <!-- Section 3 -->
    <section id="section-3">
        <article class="flex flex-col lg:flex-row">
            <div
                class="w-full lg:w-1/3 h-[265px] lg:h-[1042px] bg-[#393939] text-white flex items-center justify-end"
            >
                <div
                    class="flex flex-col px-7 md:items-center lg:items-start justify-center w-full lg:w-[325px]"
                >
                    <h3 class="text-[34px] lg:text-[40px] font-bold mb-2">
                        {{title_our_values}}
                    </h3>
                    <div>{{partial:line-svg}}</div>
                    <p class="text-[19px] italic mt-4">
                        {{description_our_values}}
                    </p>
                </div>
            </div>
            <div class="flex flex-wrap w-full lg:w-2/3">
                {{ data_core_values_about_page}}
                <div class="w-full md:w-1/2 flex justify-center items-center">
                    <div
                        class="w-full lg:w-[343px] h-[526px] lg:h-[267px] py-[56px] px-[40px] md:px-[69px] md:py-[55px] lg:px-0 lg:py-0"
                    >
                        <h3 class="text-[34px] lg:text-[40px] font-bold mb-2">
                            {{title}}
                        </h3>
                        {{partial:line-svg}}
                        <p class="text-[15px] italic mt-4">{{description}}</p>
                        <a
                            href="{{link_cta}}"
                            class="flex gap-2 items-center mt-4"
                        >
                            <span
                                class="uppercase font-bold text-[13px] tracking-widest"
                                >{{label_cta}}</span
                            >
                            <i class="fa-solid fa-angle-right"></i>
                        </a>
                    </div>
                </div>
                {{ /data_core_values_about_page}}
            </div>
        </article>
    </section>
    <!-- Section 4 -->
    <section id="section-4">
        <div class="bg-[#bb1a14]">
            <div
                class="max-w-7xl mx-auto h-[276px] md:h-[186px] flex flex-col md:flex-row justify-between lg:items-center py-[65px] px-[40px]"
            >
                <h1 class="text-3xl text-white italic">{{title_sec_4}}</h1>
                <a
                    class="w-max h-max text-[14px] border-2 border-white py-4 px-8 text-white font-bold tracking-widest uppercase hover:text-[#bb1a14] hover:bg-white transition duration-300 ease-in-out"
                    href="{{link_cta}}"
                >
                    {{label_cta}}
                </a>
            </div>
        </div>
    </section>
</main>