{{ partial:partials.navbar.navbarTextBlack }}

<main>
    <!-- Section 1 -->
    <section id="section-1">
        <div id="jumbotron" class="relative max-h-[445px] overflow-hidden">
            <div class="max-h-[445px] 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-[445px] object-cover z-10"
                />
                {{/assets:image}}
                <div
                    class="w-full absolute top-1/2 left-0 transform -translate-y-1/2 lg:left-[10px] lg:px-12"
                >
                    <div
                        class="max-w-3xl mx-auto px-7 lg:px-0 lg:max-w-5xl xl:max-w-7xl"
                    >
                        <h2
                            class="text-[35px] sm:text-[58px] lg:text-[100px] xl:text-[128px] leading-tight text-black font-bold font-poppins"
                        >
                            {{title_sec_1}}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section id="section-2">
        <article class="pt-8">
            <div class="mb-4 pt-4 pb-10 px-[79px]">{{partial:breadcrumbs}}</div>
            <div
                class="flex flex-wrap items-center justify-between pb-10 px-10"
            >
                <div class="w-2/4 sm:w-1/4 nav p-2">
                    <h2
                        class="text-[16px] sm:text-lg lg:text-[33px] font-bold text-center mb-2 cursor-pointer"
                    >
                        All
                    </h2>
                    <div class="flex justify-center">
                        <div class="line">{{partial:line-svg}}</div>
                    </div>
                </div>
                <div class="w-2/4 sm:w-1/4 nav p-2">
                    <h2
                        class="text-[16px] sm:text-lg lg:text-[33px] font-bold text-center mb-2 cursor-pointer"
                    >
                        News
                    </h2>
                    <div class="flex justify-center">
                        <div class="line">{{partial:line-svg}}</div>
                    </div>
                </div>
                <div class="w-2/4 sm:w-1/4 nav p-2">
                    <h2
                        class="text-[16px] sm:text-lg lg:text-[33px] font-bold text-center mb-2 cursor-pointer"
                    >
                        Event
                    </h2>
                    <div class="flex justify-center">
                        <div class="line">{{partial:line-svg}}</div>
                    </div>
                </div>
                <div class="w-2/4 sm:w-1/4 nav p-2">
                    <h2
                        class="text-[16px] sm:text-lg lg:text-[33px] font-bold text-center mb-2 cursor-pointer"
                    >
                        Our business
                    </h2>
                    <div class="flex justify-center">
                        <div class="line">{{partial:line-svg}}</div>
                    </div>
                </div>
            </div>
            <div class="swiperGallery overflow-hidden">
                <div class="swiper-wrapper pb-20">
                    <div class="swiper-slide">
                        <div
                            class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:px-[55px] py-10"
                        >
                            {{ taxonomy:gallery_categories}} {{entries}}
                            <div class="w-full px-14 sm:px-6 pb-12">
                                <div
                                    class="w-full aspect-square overflow-hidden mb-3"
                                >
                                    <a href="{{url}}">
                                        {{assets:images limit="1"}}
                                        <img
                                            data-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="auto"
                                            data-src="{{ glide:url width='360' }}"
                                            alt="{{ alt }}"
                                            class="w-full h-full object-cover lazyload"
                                        />
                                        {{/assets:images}}
                                    </a>
                                </div>
                                <a
                                    href="{{url}}"
                                    class="text-xl font-bold mt-3 mb-3"
                                >
                                    {{title}}
                                </a>
                                <div>
                                    <a
                                        href="{{gallery_categories:url}}"
                                        class="text-base text-gray-500"
                                    >
                                        {{gallery_categories:title}}
                                    </a>
                                </div>
                            </div>
                            {{/entries}} {{/taxonomy:gallery_categories}}
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div
                            class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:px-[55px] py-10"
                        >
                            {{ taxonomy:gallery_categories title:contains="News"
                            }} {{entries}}
                            <div class="w-full px-14 sm:px-6 pb-12">
                                <div
                                    class="w-full aspect-square overflow-hidden mb-3"
                                >
                                    <a href="{{url}}">
                                        {{assets:images limit="1"}}
                                        <img
                                            data-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="auto"
                                            data-src="{{ glide:url width='360' }}"
                                            alt="{{ alt }}"
                                            class="w-full h-full object-cover lazyload"
                                        />
                                        {{/assets:images}}
                                    </a>
                                </div>
                                <a
                                    href="{{url}}"
                                    class="text-xl font-bold mt-3 mb-3"
                                >
                                    {{title}}
                                </a>
                                <div>
                                    <a
                                        href="{{gallery_categories:url}}"
                                        class="text-base text-gray-500"
                                    >
                                        {{gallery_categories:title}}
                                    </a>
                                </div>
                            </div>
                            {{/entries}} {{/taxonomy:gallery_categories}}
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div
                            class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:px-[55px] py-10"
                        >
                            {{ taxonomy:gallery_categories
                            title:contains="Event" }} {{entries}}
                            <div class="w-full px-14 sm:px-6 pb-12">
                                <div
                                    class="w-full aspect-square overflow-hidden mb-3"
                                >
                                    <a href="{{url}}"
                                        >{{assets:images limit="1"}}
                                        <img
                                            data-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="auto"
                                            data-src="{{ glide:url width='360' }}"
                                            alt="{{ alt }}"
                                            class="w-full h-full object-cover lazyload"
                                        />
                                        {{/assets:images}}</a
                                    >
                                </div>
                                <a
                                    href="{{url}}"
                                    class="text-xl font-bold mt-3 mb-3"
                                >
                                    {{title}}
                                </a>
                                <div>
                                    <a
                                        href="{{gallery_categories:url}}"
                                        class="text-base text-gray-500"
                                    >
                                        {{gallery_categories:title}}
                                    </a>
                                </div>
                            </div>
                            {{/entries}} {{/taxonomy:gallery_categories}}
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div
                            class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:px-[55px] py-10"
                        >
                            <!-- prettier-ignore -->
                            {{ taxonomy:gallery_categories title:contains="Our business" }}
                            <!-- entries -->
                            {{entries}}
                            <div class="w-full px-14 sm:px-6 pb-12">
                                <div
                                    class="w-full aspect-square overflow-hidden mb-3"
                                >
                                    <a href="{{url}}"
                                        >{{assets:images limit="1"}}
                                        <img
                                            data-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="auto"
                                            data-src="{{ glide:url width='360' }}"
                                            alt="{{ alt }}"
                                            class="w-full h-full object-cover lazyload"
                                        />
                                        {{/assets:images}}</a
                                    >
                                </div>
                                <a
                                    href="{{url}}"
                                    class="text-xl font-bold mt-3 mb-3"
                                >
                                    {{title}}
                                </a>
                                <div>
                                    <a
                                        href="{{gallery_categories:url}}"
                                        class="text-base text-gray-500"
                                    >
                                        {{gallery_categories:title}}
                                    </a>
                                </div>
                            </div>
                            {{/entries}} {{/taxonomy:gallery_categories}}
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </section>
</main>