@extends('layout.product_main')
@section('title', $data['title'])
@section('content')

    <style>
        .custom-container {
            overflow: hidden;
        }

        .contactinfo-area .contact-info p span {
            font-size: 14px;
        }

        .contactinfo-area .contact-info p a span {
            font-size: 14px;
        }

        .news-item img:hover {
            transform: scale(1.2);
            border-radius: 10px;
        }

        .inquiry-img-logo {
            justify-content: center;
        }


        .service-single__left-item ul li i {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            transition: all 0.3s ease-in-out;
            background: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
            color: #ffffff;
            font-size: 10px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .fa-check:before {
            content: "\f00c";
        }

        .card-style {
            background: #ffffff;
            /* border: 1px solid #e0e0e0; */
            border-radius: 12px;
            padding: 15px 15px;
            box-shadow: 0 4px 15px rgb(0 0 0 / 15%);
            transition: all 0.3s ease-in-out;
        }

        .card-style:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
        }

        .card-style ul li {
            display: flex;
            align-items: center;
            font-size: 14px;
            line-height: 1.6;
            color: #333;
        }

        .card-style ul li i {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
            color: #fff;
            font-size: 10px;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .card-image-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 5px;
        }

        .card-image {
            width: 100%;
            height: auto;
            display: block;
        }

        .card-title-overlay {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* semi-transparent overlay */
            padding: 10px 0;
        }

        .highlighted-title {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .read-more-btn {
            color: black;
            font-weight: 600;
            transition: color 0.3s ease;
            text-decoration: none;
        }

        .read-more-btn:hover {
            color: #3751a1;
        }

        .lb-border-bottom-gray {
            border-bottom: 1px solid #DFDFDF !important;
        }

        .section-heading {
            font-size: 1.5rem;
        }

        .text-dark {
            --bs-text-opacity: 1;
            color: #000 !important;
        }

        .section-content {
            text-align: justify;
            line-height: 1.8rem;
        }

        .lb-carousel {
            overflow: hidden;
        }

        .lb-border-top-gray {
            border-top: 1px solid #DFDFDF !important;
        }

        .lb-border-bottom-gray {
            border-bottom: 1px solid #DFDFDF !important;
        }

        .lb-border-right-gray {
            border-right: 1px solid #DFDFDF !important;
        }

        .lb-carousel-container {
            transition: transform 0.5s ease;
        }

        .lb-item {
            margin: 0 0.43rem;
        }

        .lb-text-gray {
            color: #707078;
        }

        .indicator {
            display: inline-block;
            width: 0.8rem;
            height: 0.8rem;
            margin: 0 0.3rem;
            background-color: #DFDFDF;
            border-radius: 50%;
            cursor: pointer;
        }

        .indicator.active {
            background-color: #3751a1 !important;
        }

        .our-vision .nav.prev {
            transform: rotate(180deg);
        }

        .fleet-challanges .nav.prev {
            transform: rotate(180deg);
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .lb-text-secondary {
            color: #3751a1;
        }

        .lh-text-primary {
            color: #3751a1;
        }

        .tab-content {
            max-height: 100vh;
            overflow-y: auto;
        }

        .tab-pane {
            display: none;
        }

        .lh-text-muted {
            color: #565656;
            font-size: 19px;
        }

        .why-choose-lizHR,
        .tab-pane-parent {
            box-shadow: 0px 0px 5px 0px #2c2e311a;
        }

        .active-tab-header h5 {
            font-size: 1.5rem;
            color: #3751a1 !important;
            font-weight: 600 !important;
            border-bottom: 1px solid #3751a1 !important;
        }

        .lb-carousel-wrapper {
            overflow-x: auto;
            scroll-behavior: smooth;
        }

        .lb-carousel-container {
            display: flex;
            flex-wrap: nowrap;
        }

        .lb-item {
            flex: 0 0 auto;
            width: 33.3333%;
            box-sizing: border-box;
        }
    </style>


<!-- Page banner area start here -->
<section class="banner__inner-page bg-image pt-180 pb-180 bg-image" style="display: none;"
    data-background="{{ asset('assets/images/banner/banner-inner-page.jpg') }}">
    <div class="shape2 wow slideInLeft" data-wow-delay="00ms" data-wow-duration="1500ms">
        <img src="{{ asset('assets/images/banner/inner-banner-shape2.png') }}" alt="shape">
    </div>
    <div class="shape1 wow slideInLeft" data-wow-delay="200ms" data-wow-duration="1500ms">
        <img src="{{ asset('assets/images/banner/inner-banner-shape1.png') }}" alt="shape">
    </div>
    <div class="shape3 wow slideInRight" data-wow-delay="200ms" data-wow-duration="1500ms"> <img
            class="sway__animationX" src="{{ asset('assets/images/banner/inner-banner-shape3.png') }}" alt="shape">
    </div>
    <div class="container">
        <h2 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">{{ $data['title'] }}</h2>
        <div class="breadcrumb-list wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">
            <a href="{{ route('home') }}">Home</a><span><i class="fa fa-angles-right mx-2"></i>{{ $data['title']
                }}</span>
        </div>
    </div>
</section>

{{-- <section class="py-4 py-sm-5 our-vision">
    <div class="container pt-4 pt-lg-5">
        <div class="row">
            <div class="col-12 pb-3 lb-border-bottom-gray">
                <a href="#" class="d-inline-block text-dark section-heading">
                    Features
                    <img src="https://www.logibrisk.com/assets/icons/arrow-up.svg" alt="arrow-up">
                </a>
            </div>
        </div>

        <div class="row py-4 py-sm-5">
            <div class="col-12">
                <h2 class="text-center m-0">
                    <span class="lb-text-secondary">Features of </span> Diamond Sales Management Software
                </h2>
                <p class="section-content lb-text-gray text-center pt-3">LogiBrisk's Smart Auction Management
                    System, organizations can manage auctions more effectively, enhance participant engagement, and
                    achieve better financial outcomes</p>
            </div>
        </div>

        <div id="customCarousel" class="lb-carousel position-relative w-100 pt-3 pb-4 pb-sm-5">
            <div class="fleet-challanges">
                <div class="lb-border-bottom-gray lb-border-top-gray">
                    <div class="lb-carousel-container d-flex">
                        <div class="lb-item py-3 p-sm-4 lb-border-right-gray" style="min-width: 33.3333%;">
                            <div class="pb-4">
                                <img src="https://www.logibrisk.com/assets/icons/gps-tracking.svg" alt="gps-tracking">
                            </div>
                            <h5 class="fw-semibold pb-3 lh-base">User-Friendly Interface</h5>
                            <p class="section-content lb-text-gray pe-2">Intuitive and easy-to-navigate interface
                                for both administrators and participants.
                                Customizable dashboards and settings to suit different auction types and user
                                preferences

                            </p>
                        </div>
                        <div class="lb-item py-3 p-sm-4 lb-border-right-gray" style="min-width: 33.3333%;">
                            <div class="pb-4">
                                <img src="https://www.logibrisk.com/assets/icons/schedulling.svg" alt="schedulling">
                            </div>
                            <h5 class="fw-semibold pb-3 lh-base">Automated Auction Scheduling</h5>
                            <p class="section-content lb-text-gray pe-2">Schedule auctions in advance with automated
                                start and end times.
                                Support for various auction formats including live, silent, and online auctions.
                            </p>
                        </div>
                        <div class="lb-item py-3 p-sm-4 lb-border-right-gray" style="min-width: 33.3333%;">
                            <div class="pb-4">
                                <img src="https://www.logibrisk.com/assets/icons/gps-tracking.svg" alt="print-labels">
                            </div>
                            <h5 class="fw-semibold pb-3 lh-base">Real-Time Bidding</h5>
                            <p class="section-content lb-text-gray pe-2"> Enable real-time bidding with instant
                                updates and notifications.
                                Secure and transparent bidding process to ensure fairness.
                            </p>
                        </div>
                        <div class="lb-item py-3 p-sm-4 lb-border-right-gray" style="min-width: 33.3333%;">
                            <div class="pb-4">
                                <img src="https://www.logibrisk.com/assets/icons/gps-tracking.svg" alt="gps-tracking">
                            </div>
                            <h5 class="fw-semibold pb-3 lh-base">Bid Management</h5>
                            <p class="section-content lb-text-gray pe-2">Tools for managing bids, including minimum
                                bid increments, reserve prices, and proxy bidding.
                                Automated notifications for bid confirmations, outbids, and auction results.
                            </p>
                        </div>
                        <div class="lb-item py-3 p-sm-4 lb-border-right-gray" style="min-width: 33.3333%;">
                            <div class="pb-4">
                                <img src="https://www.logibrisk.com/assets/icons/gps-tracking.svg"
                                    alt="courier-billing">
                            </div>
                            <h5 class="fw-semibold pb-3 lh-base">Inventory Management</h5>
                            <p class="section-content lb-text-gray pe-2"> Track and manage auction items, including
                                descriptions, images, and reserve prices.
                                Categorize and organize items for easy access and searchability.
                            </p>
                        </div>

                    </div>
                </div>

                <div class="d-flex gap-3 pt-5 justify-content-center align-items-center">
                    <span class="nav prev cursor-pointer">
                        <img src="https://www.logibrisk.com/assets/icons/light-theme-slider-arrow-right.svg"
                            alt="light-theme-slider-arrow-right">
                    </span>
                    <div class="indicators d-flex justify-content-center">
                        <div class="indicator" data-index="0">
                        </div>
                        <div class="indicator" data-index="1">

                        </div>
                        <div class="indicator active" data-index="2">
                        </div>
                    </div>



                    <span class="nav next cursor-pointer">
                        <img src="https://www.logibrisk.com/assets/icons/light-theme-slider-arrow-right.svg"
                            alt="light-theme-slider-arrow-right">
                    </span>
                </div>
            </div>
        </div>
    </div>
</section> --}}

<section class="py-4 py-sm-5 our-vision">
    <div class="container pt-4 pt-lg-5">
        <div class="row">
            <div class="col-12 pb-3 lb-border-bottom-gray">
                <a href="#" class="d-inline-block text-dark section-heading">
                    Features
                    <img src="https://www.logibrisk.com/assets/icons/arrow-up.svg" alt="arrow-up">
                </a>
            </div>
        </div>

        <div class="row py-4 py-sm-5">
            <div class="col-12">
                <h2 class="text-center m-0">
                    <span class="lb-text-secondary">Features of </span>
                    {{ $data['type_data']['title'] ?? 'Our Product' }}
                </h2>
                <p class="section-content lb-text-gray text-center pt-3">
                    {{ $data['type_data']['sub_title_details'] ?? 'Explore the powerful features below.' }}
                </p>
            </div>
        </div>

        <div id="customCarousel" class="lb-carousel position-relative w-100 pt-3 pb-4 pb-sm-5">
            <div class="fleet-challanges">
                <div class="lb-border-bottom-gray lb-border-top-gray">
                    <!-- Scrollable carousel container -->
                    <div class="lb-carousel-wrapper overflow-hidden">
                        <div class="lb-carousel-container d-flex flex-nowrap transition-all"
                            style="scroll-behavior: smooth;">
                            @foreach ($data['features'] as $feature)
                            <div class="lb-item py-3 p-sm-4 lb-border-right-gray" style="min-width: 33.3333%;">
                                <div class="pb-4">
                                    <img src="{{ $feature['icon'] }}" alt="{{ $feature['title'] }}"
                                        style=" width: 100px; height: 100px;">
                                </div>
                                <h5 class="fw-semibold pb-3 lh-base">{{ $feature['title'] }}</h5>
                                <p class="section-content lb-text-gray pe-2">{{ $feature['description'] }}</p>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                @if(count($data['features']) > 3)
                @php
                $featureCount = count($data['features']);
                $dotCount = $featureCount - 3; // Subtract visible items
                @endphp

                <div class="d-flex gap-3 pt-5 justify-content-center align-items-center">
                    <span class="nav prev cursor-pointer">
                        <img src="{{ asset('assets/images/stock/light-theme-slider-arrow-right.svg') }}" alt="prev">

                    </span>

                    <div class="indicators d-flex justify-content-center">
                        @for($i = 0; $i <= $dotCount; $i++) <div class="indicator {{ $i === 0 ? 'active' : '' }}"
                            data-index="{{ $i }}">
                    </div>
                    @endfor
                </div>

                <span class="nav next cursor-pointer">
                    <img src="{{ asset('assets/images/stock/light-theme-slider-arrow-right.svg') }}" alt="next">
                </span>
            </div>
            @endif


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

<section class="py-4 py-lg-5" data-aos="fade-up">
    <div class="container section-spacing">
        <div class="row pb-5">
            <div class="col-12 text-center" data-aos="fade-down">
                <h2 class="text-center title-back">The <span class="lh-text-primary">Benefits</span> of a Human Resource
                    Management System (HRMS)</h2>
            </div>
        </div>
        <div class="pt-0">
            <div class="row">
                <!-- Left Tabs (Desktop View) -->
                <div class=" col-12 col-lg-5 col-md-5 tabs aos-init aos-animate mt-3" data-aos="fade-right"
                    id="DesktopShow">
                    <ul class="p-lg-4 d-flex flex-column gap-2 gap-md-4">
                        <li class="tab-button d-flex justify-content-between align-items-center cursor-pointer active-tab-header"
                            onclick="openTab(event, 'alleviatingProcessBottlenecks')">
                            <h5 class="m-0 text-truncate fw-normal w-100 pb-4 border-bottom">Alleviating Process
                                Bottlenecks</h5>
                        </li>
                        <li class="tab-button d-flex justify-content-between align-items-center cursor-pointer"
                            onclick="openTab(event, 'minimizingManualPaperwork')">
                            <h5 class="m-0 text-truncate fw-normal w-100 pb-4 border-bottom">Minimizing Manual Paperwork
                            </h5>
                        </li>
                        <li class="tab-button d-flex justify-content-between align-items-center cursor-pointer"
                            onclick="openTab(event, 'decreasingEmployeeStress')">
                            <h5 class="m-0 text-truncate fw-normal w-100 pb-4 border-bottom">Decreasing Employee Stress
                            </h5>
                        </li>
                        <li class="tab-button d-flex justify-content-between align-items-center cursor-pointer"
                            onclick="openTab(event, 'reducingTime')">
                            <h5 class="m-0 text-truncate fw-normal w-100 pb-4 border-bottom">Reducing Time Lags in HR
                                Tasks</h5>
                        </li>
                        <li class="tab-button d-flex justify-content-between align-items-center cursor-pointer"
                            onclick="openTab(event, 'implementingProcess')">
                            <h5 class="m-0 text-truncate fw-normal w-100 pb-4 border-bottom">Easily Implementing
                                Process/Policy Changes</h5>
                        </li>
                        <li class="tab-button d-flex justify-content-between align-items-center cursor-pointer"
                            onclick="openTab(event, 'spreadsheetDependency')">
                            <h5 class="m-0 text-truncate fw-normal w-100 pb-4 border-bottom">Removing Spreadsheet
                                Dependency</h5>
                        </li>
                        <li class="tab-button d-flex justify-content-between align-items-center cursor-pointer"
                            onclick="openTab(event, 'improvingInternalCommunication')">
                            <h5 class="m-0 text-truncate fw-normal w-100 pb-4 border-bottom">Improving Internal
                                Communication</h5>
                        </li>
                    </ul>
                </div>
                <!-- Right Tabs Content (Desktop View) -->
                <div class="col-12 col-lg-7 col-md-7 tab-content d-flex align-items-start aos-init aos-animate mt-3"
                    data-aos="fade-left" id="DesktopContent">
                    <div class="p-lg-4 mt-4 mt-lg-0 tab-pane-parent w-100">
                        <div id="alleviatingProcessBottlenecks" class="tab-pane p-4 d-block">
                            <h3>Alleviating Process Bottlenecks</h3>
                            <p class="lh-lg lh-text-muted pt-4">An HRMS drastically reduces bottlenecks by automating
                                various HR tasks...</p>
                        </div>
                        <div id="minimizingManualPaperwork" class="tab-pane p-4">
                            <h3>Minimizing Manual Paperwork</h3>
                            <p class="lh-lg lh-text-muted pt-4">An HRMS significantly reduces the need for manual
                                paperwork by automating document creation...</p>
                        </div>
                        <div id="decreasingEmployeeStress" class="tab-pane p-4">
                            <h3>Decreasing Employee Stress</h3>
                            <p class="lh-lg lh-text-muted pt-4">Employees reduce stress by accessing HR info directly
                                through HRMS...</p>
                        </div>
                        <div id="reducingTime" class="tab-pane p-4">
                            <h3>Reducing Time Lags in HR Tasks</h3>
                            <p class="lh-lg lh-text-muted pt-4">An HRMS streamlines workflows, reducing time delays in
                                HR tasks...</p>
                        </div>
                        <div id="implementingProcess" class="tab-pane p-4">
                            <h3>Easily Implementing Process/Policy Changes</h3>
                            <p class="lh-lg lh-text-muted pt-4">An HRMS simplifies the implementation of policy
                                changes...</p>
                        </div>
                        <div id="spreadsheetDependency" class="tab-pane p-4">
                            <h3>Removing Spreadsheet Dependency</h3>
                            <p class="lh-lg lh-text-muted pt-4">An HRMS eliminates the need for spreadsheets, improving
                                data accuracy...</p>
                        </div>
                        <div id="improvingInternalCommunication" class="tab-pane p-4">
                            <h3>Improving Internal Communication</h3>
                            <p class="lh-lg lh-text-muted pt-4">HRMS improves internal communication by offering a
                                centralized platform...</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mobile View (Accordion for smaller screens) -->
            <div class="col-12 tabs" data-aos="fade-right" id="MobileShow">
                <div class="accordion" id="featuresAccordion">
                    <!-- Alleviating Process Bottlenecks -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingAlleviatingProcess">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseAlleviatingProcess" aria-expanded="false"
                                aria-controls="collapseAlleviatingProcess">
                                Alleviating Process Bottlenecks
                            </button>
                        </h2>
                        <div id="collapseAlleviatingProcess" class="accordion-collapse collapse"
                            aria-labelledby="headingAlleviatingProcess" data-bs-parent="#featuresAccordion">
                            <div class="accordion-body">
                                An HRMS can drastically reduce process bottlenecks by automating various HR tasks like
                                recruitment...
                            </div>
                        </div>
                    </div>

                    <!-- Minimizing Manual Paperwork -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingMinimizingPaperwork">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseMinimizingPaperwork" aria-expanded="false"
                                aria-controls="collapseMinimizingPaperwork">
                                Minimizing Manual Paperwork
                            </button>
                        </h2>
                        <div id="collapseMinimizingPaperwork" class="accordion-collapse collapse"
                            aria-labelledby="headingMinimizingPaperwork" data-bs-parent="#featuresAccordion">
                            <div class="accordion-body">
                                An HRMS reduces manual paperwork by automating document creation, storage, and
                                processing...
                            </div>
                        </div>
                    </div>

                    <!-- Decreasing Employee Stress -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingDecreasingStress">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseDecreasingStress" aria-expanded="false"
                                aria-controls="collapseDecreasingStress">
                                Decreasing Employee Stress
                            </button>
                        </h2>
                        <div id="collapseDecreasingStress" class="accordion-collapse collapse"
                            aria-labelledby="headingDecreasingStress" data-bs-parent="#featuresAccordion">
                            <div class="accordion-body">
                                Employees can access personal info like leave balances or pay stubs, reducing stress and
                                dependency on HR...
                            </div>
                        </div>
                    </div>

                    <!-- Reducing Time Lags in HR Tasks -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingReducingTime">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseReducingTime" aria-expanded="false"
                                aria-controls="collapseReducingTime">
                                Reducing Time Lags in HR Tasks
                            </button>
                        </h2>
                        <div id="collapseReducingTime" class="accordion-collapse collapse"
                            aria-labelledby="headingReducingTime" data-bs-parent="#featuresAccordion">
                            <div class="accordion-body">
                                An HRMS reduces time lags in HR tasks like recruitment and performance reviews by
                                automating processes...
                            </div>
                        </div>
                    </div>

                    <!-- Easily Implementing Process/Policy Changes -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingImplementingProcess">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseImplementingProcess" aria-expanded="false"
                                aria-controls="collapseImplementingProcess">
                                Easily Implementing Process/Policy Changes
                            </button>
                        </h2>
                        <div id="collapseImplementingProcess" class="accordion-collapse collapse"
                            aria-labelledby="headingImplementingProcess" data-bs-parent="#featuresAccordion">
                            <div class="accordion-body">
                                An HRMS simplifies implementing process/policy changes by providing a centralized
                                platform for communication...
                            </div>
                        </div>
                    </div>

                    <!-- Removing Spreadsheet Dependency -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingSpreadsheetDependency">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseSpreadsheetDependency" aria-expanded="false"
                                aria-controls="collapseSpreadsheetDependency">
                                Removing Spreadsheet Dependency
                            </button>
                        </h2>
                        <div id="collapseSpreadsheetDependency" class="accordion-collapse collapse"
                            aria-labelledby="headingSpreadsheetDependency" data-bs-parent="#featuresAccordion">
                            <div class="accordion-body">
                                An HRMS eliminates spreadsheet dependency by automating HR data entry, storage, and
                                analysis...
                            </div>
                        </div>
                    </div>

                    <!-- Improving Internal Communication -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingImprovingCommunication">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseImprovingCommunication" aria-expanded="false"
                                aria-controls="collapseImprovingCommunication">
                                Improving Internal Communication
                            </button>
                        </h2>
                        <div id="collapseImprovingCommunication" class="accordion-collapse collapse"
                            aria-labelledby="headingImprovingCommunication" data-bs-parent="#featuresAccordion">
                            <div class="accordion-body">
                                An HRMS improves internal communication by providing a centralized platform for HR staff
                                and employees...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>





<!-- Page banner area end here -->

<!-- Service area start here -->
<section class="service-single-area pt-120 pb-120">
    <div class="container">
        <div class="project-details-wrapper">
            <div class="row" style="position: relative;">
                <div class="content-side col-lg-8 col-md-12 col-sm-12">
                    <div class="project-details-items">
                        <div class="image mb-50 text-center">
                            <img src="{{ $data['type_data']['image'] }}" alt="image" style="width:400px; height:auto;">
                            {{-- <div class="service-single__video-btn">
                                <div class="video-btn video-pulse wow fadeIn" data-wow-delay="200ms"
                                    data-wow-duration="1500ms">
                                    <a class="video-popup" href="https://www.youtube.com/watch?v=iVqz_4M5mA0"><i
                                            class="fa-solid fa-play"></i></a>
                                </div>
                            </div> --}}
                            <h3 class="mb-30 mt-30">{{ $data['type_data']['sub_title_details'] }}</h3>
                        </div>
                        {{-- <h2 class="title mb-10">{{$data['type_data']['sub_title']}}</h2> --}}
                        <p class="mb-20">{{ $data['type_data']['description_1'] }}</p>
                        <div class="row mt-30">
                            <div class="col-lg-6">
                                <figure class="w-img">
                                    <img src="{{ asset('assets/images/service/service-details-2.jpg') }}" alt="">
                                </figure>
                            </div>
                            <div class="col-lg-6">
                                <figure class="w-img">
                                    <img src="{{ asset('assets/images/service/service-details-3.jpg') }}" alt="">
                                </figure>
                            </div>
                        </div>
                        <p>{{ $data['type_data']['description_2'] }}</p>
                        <!-- Feature -->

                        <section class="feature3-area feature3-style-2"
                            style=" margin-top: 0px !important; padding: 50px 0px 0px 0px !important; ">
                            <!-- <img src=".~/Content/images/bg-shape-1.svg" alt="Shape" class="bg-shape" /> -->
                            <div class="custom-container" style="padding: 0px !important;">
                                <div class="feature3-body" style="padding: 40px !important;">
                                    <div class="section-header">
                                        <h6 class="section-title" data-aos="zoom-in-right" style="font-size: 24px">
                                            {{ $data['type_data']['service_title'] }}
                                        </h6>
                                    </div>

                                    <div class="feature3-lists">
                                        @foreach ($data['type_data']['service_details'] as $item)
                                        <div class="feature-box" data-aos="zoom-in-right">
                                            <i class="icon-box las la-check"></i>
                                            <h3>{{ $item[0] }}</h3>
                                            <p>
                                                {{ $item[1] }}
                                            </p>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </section>
                        @if (!empty($data['type_data']['question_details']))
                        <h3 class="title mb-30 mt-30">Why choose Axone Infotech India for IT Consultation?</h3>
                        @endif
                        <div class="accordion" id="accordionExample">
                            @if (!empty($data['type_data']['question_details']))
                            @foreach ($data['type_data']['question_details'] as $index => $NewItem)
                            <div class="accordion-item wow fadeInDown shadow border-none" data-wow-delay="200ms"
                                data-wow-duration="1500ms">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseTwo-{{ $index + 1 }}" aria-expanded="false"
                                        aria-controls="collapseTwo-{{ $index + 1 }}">
                                        {{ $index + 1 }}. {{ $NewItem[0] }}
                                    </button>
                                </h2>
                                <div id="collapseTwo-{{ $index + 1 }}" class="accordion-collapse collapse"
                                    aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <p>{{ $NewItem[1] }}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>

                        @php
                        $inventorySections = [
                        'Inventory & Pricing Management' => [
                        'Multi-Parameter Inventory Control (Order, Reserve, Estimate, Pricelist)',
                        'Reserve & De-reserve Mechanism',
                        'Pricelist Management',
                        'Customer-Specific Pricelist Mapping',
                        'Customer Group-Based Pricing',
                        'IP restriction',
                        'Pricing Configuration',
                        ],
                        'Order & Logistics' => [
                        'Order Processing',
                        'Loading Management',
                        'Truck Assignment and Processing',
                        'Warehouse-wise Supervisor Allocation',
                        ],
                        'User & Access Control' => ['Role-Based Permission System', 'Visitor Management'],
                        'Master Data & Accounts' => [
                        'Item and Retail Item Masters',
                        'Customer Management',
                        'Vendor Management',
                        'Parameter Management',
                        ],
                        'Incentives & Performance' => ['Incentive Management System'],
                        'Reports' => ['All Transfers Report', 'Running Stock Report', 'Login History'],
                        ];
                        @endphp
                        @if (isset($data['title']) && $data['title'] === 'Tile Inventory Management System')
                        @if (!empty($inventorySections))
                        <h3 class="title mb-30 mt-30">Tile Inventory Management System</h3>
                        <div class="accordion" id="inventoryAccordion">
                            @foreach ($inventorySections as $sectionTitle => $points)
                            <div class="accordion-item wow fadeInDown shadow border-none" data-wow-delay="200ms"
                                data-wow-duration="1500ms">
                                <h2 class="accordion-header" id="heading-{{ Str::slug($sectionTitle, '-') }}">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapse-{{ Str::slug($sectionTitle, '-') }}"
                                        aria-expanded="false"
                                        aria-controls="collapse-{{ Str::slug($sectionTitle, '-') }}">
                                        {{ $sectionTitle }}
                                    </button>
                                </h2>
                                <div id="collapse-{{ Str::slug($sectionTitle, '-') }}"
                                    class="accordion-collapse collapse"
                                    aria-labelledby="heading-{{ Str::slug($sectionTitle, '-') }}"
                                    data-bs-parent="#inventoryAccordion">
                                    <div class="accordion-body">
                                        <ul class="ps-3">
                                            @foreach ($points as $point)
                                            <li class="mb-1 d-flex align-items-start">
                                                <span
                                                    class="me-2 d-inline-flex justify-content-center align-items-center mt-1"
                                                    style="width: 15px; height: 15px; background-color: #3751a1; color: white; border-radius: 50%;">
                                                    <i class="fa-solid fa-check" style="font-size: 8px;"></i>
                                                </span>
                                                {{ $point }}
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif
                        @endif


                    </div>
                </div>
                <div class="col-lg-4 order-1 order-lg-2">
                    <div class="service-single__right-item">
                        <div class="item sub-bg mb-30">
                            <h4 class="mb-20">All Product</h4>
                            @php
                            $services = [
                            'Jewellery Sales Management Software',
                            'Diamond Sales Management Software',
                            'Trade Show Stock Management',
                            'Jeweliffy',
                            'Rap Calculator',
                            'Restarunt POS',
                            'Whatsappp Tool',
                            'Tile Inventory Management System',
                            ];
                            @endphp

                            <ul class="category service-category">
                                @foreach ($services as $service)
                                <li class="mb-15 {{ $data['title'] == $service ? 'active' : '' }}"
                                    onclick="window.location='{{ route('product.details', ['type' => $service]) }}'"
                                    style="cursor: pointer;">
                                    <a href="{{ route('product.details', ['type' => $service]) }}">{{ $service }}</a>
                                    <i class="fa fa-arrow-right-long primary-color"></i>
                                </li>
                                @endforeach
                            </ul>


                        </div>
                        <div class="item sub-bg mb-30">
                            <h4 class="mb-20">Opening Hours</h4>
                            <ul class="category">
                                <li class="secondary-color justify-content-start gap-3">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M10.8505 9.41291L8.61967 7.73979V4.3316C8.61967 3.98891 8.34266 3.71191 7.99998 3.71191C7.65729 3.71191 7.38029 3.98891 7.38029 4.3316V8.04966C7.38029 8.24485 7.47201 8.42892 7.62817 8.54541L10.1069 10.4044C10.2138 10.485 10.3441 10.5285 10.478 10.5284C10.667 10.5284 10.8529 10.4435 10.9744 10.2799C11.1802 10.0066 11.1244 9.61804 10.8505 9.41291Z"
                                            fill="#3C72FC" />
                                        <path
                                            d="M8 0C3.58853 0 0 3.58853 0 8C0 12.4115 3.58853 16 8 16C12.4115 16 16 12.4115 16 8C16 3.58853 12.4115 0 8 0ZM8 14.7607C4.27266 14.7607 1.23934 11.7273 1.23934 8C1.23934 4.27266 4.27266 1.23934 8 1.23934C11.728 1.23934 14.7607 4.27266 14.7607 8C14.7607 11.7273 11.7273 14.7607 8 14.7607Z"
                                            fill="#3C72FC" />
                                    </svg>
                                    Mon - Sat: 09.30 AM - 6.30 PM
                                </li>
                                <li class="secondary-color justify-content-start gap-3">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M10.8505 9.41291L8.61967 7.73979V4.3316C8.61967 3.98891 8.34266 3.71191 7.99998 3.71191C7.65729 3.71191 7.38029 3.98891 7.38029 4.3316V8.04966C7.38029 8.24485 7.47201 8.42892 7.62817 8.54541L10.1069 10.4044C10.2138 10.485 10.3441 10.5285 10.478 10.5284C10.667 10.5284 10.8529 10.4435 10.9744 10.2799C11.1802 10.0066 11.1244 9.61804 10.8505 9.41291Z"
                                            fill="#3C72FC" />
                                        <path
                                            d="M8 0C3.58853 0 0 3.58853 0 8C0 12.4115 3.58853 16 8 16C12.4115 16 16 12.4115 16 8C16 3.58853 12.4115 0 8 0ZM8 14.7607C4.27266 14.7607 1.23934 11.7273 1.23934 8C1.23934 4.27266 4.27266 1.23934 8 1.23934C11.728 1.23934 14.7607 4.27266 14.7607 8C14.7607 11.7273 11.7273 14.7607 8 14.7607Z"
                                            fill="#3C72FC" />
                                    </svg>
                                    Sun: Closed
                                </li>
                                <li class="secondary-color justify-content-start gap-3">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M10.8505 9.41291L8.61967 7.73979V4.3316C8.61967 3.98891 8.34266 3.71191 7.99998 3.71191C7.65729 3.71191 7.38029 3.98891 7.38029 4.3316V8.04966C7.38029 8.24485 7.47201 8.42892 7.62817 8.54541L10.1069 10.4044C10.2138 10.485 10.3441 10.5285 10.478 10.5284C10.667 10.5284 10.8529 10.4435 10.9744 10.2799C11.1802 10.0066 11.1244 9.61804 10.8505 9.41291Z"
                                            fill="#3C72FC" />
                                        <path
                                            d="M8 0C3.58853 0 0 3.58853 0 8C0 12.4115 3.58853 16 8 16C12.4115 16 16 12.4115 16 8C16 3.58853 12.4115 0 8 0ZM8 14.7607C4.27266 14.7607 1.23934 11.7273 1.23934 8C1.23934 4.27266 4.27266 1.23934 8 1.23934C11.728 1.23934 14.7607 4.27266 14.7607 8C14.7607 11.7273 11.7273 14.7607 8 14.7607Z"
                                            fill="#3C72FC" />
                                    </svg>
                                    Emergency: 24 hours
                                </li>
                            </ul>
                        </div>
                        <div class="item sub-bg mb-30">
                            <h4 class="mb-20">Our Company Brochure</h4>
                            <ul class="category">
                                <li class="secondary-color justify-content-start gap-3">
                                    <p>Impress clients new and existing with elite construction brochures.
                                        Impress clients new and existing construction.</p>
                                </li>
                                <a href="javascript:void(0);" class="theme-btn btn-style-four"><span
                                        class="text-white">Download
                                        PDF</span></a>
                            </ul>
                        </div>
                        <div class="p-4 bg-light rounded">
                            <h4 class="mb-4 fw-bold">Contact Us</h4>

                            <div class="bg-white p-3 rounded mb-3 d-flex align-items-start">
                                <i class="fa fa-map-marker me-3 mt-2 text-primary font-size-20"></i>
                                <div class="text-dark">
                                    623-624, Laxmi Enclave-2, Opp. Gajera School, Katargam, Surat-395004, Gujarat,
                                    India.
                                </div>
                            </div>

                            <div class="bg-white p-3 rounded mb-3 d-flex align-items-start">
                                <i class="fa fa-phone me-3 mt-3 text-primary font-size-20"></i>
                                <div class="text-dark">
                                    <a href="javascript:void(0);" class="d-block text-dark text-decoration-none">+91
                                        9409444270</a>
                                    <a href="javascript:void(0);" class="d-block text-dark text-decoration-none"> +91
                                        9265487501</a>
                                </div>
                            </div>

                            <div class="bg-white p-3 rounded d-flex align-items-start">
                                <i class="fa fa-envelope me-3 mt-3 text-primary font-size-20"></i>
                                <div class="text-dark">
                                    <a href="javascript:void(0);" class="d-block text-dark text-decoration-none">
                                        hr@AxoneIT.com</a>
                                    <a href="javascript:void(0);" class="d-block text-dark text-decoration-none">
                                        info@AxoneIT.com</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if (isset($data['title']) && $data['title'] === 'Diamond Sales Management Software')
            <div class="row g-5">
                <!-- Column 1 - Laboratory Processes -->
                <div class="col-lg-4 col-md-6 d-flex">
                    <div class="service-box card-style service-two__item flex-fill">
                        <div class="card-image-container">
                            <img src="{{ asset('assets/images/Diamond_Sales/Sales_Analysis_Chart-1.png') }}"
                                alt="image">
                        </div>
                        <div class="service-two__content">
                            <div class="shape"><img src="{{ asset('assets/images/shape/service-two-item-shape.png') }}"
                                    alt="shape"></div>
                            <h4><a href="{{ route('services.details') }}?type=IT Consultancy"
                                    class="primary-hover p-3">Laboratory Processes</a></h4>
                            <ul class="list-unstyled ps-3 service-list">
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> GIA API
                                    Integration</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> GIA
                                    Control
                                    Number Mapping</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>
                                    Laboratory
                                    Issue
                                    and Return Management</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>
                                    Laboratory
                                    Results File Upload</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>
                                    Prediction
                                    Entry
                                    for Analysis</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Lab
                                    Charge
                                    Management and Upload</li>
                            </ul>
                            <a href="javascript:void(0);" class="read-more-btn text-black mt-2 d-inline-block">
                                Read More <i class="fa fa-arrow-right-long"></i>
                            </a>
                        </div>
                    </div>

                </div>

                <!-- Column 2 - Stock Management -->

                <div class="col-lg-4 col-md-6 d-flex">
                    <div class="service-box card-style service-two__item flex-fill">
                        <div class="card-image-container">
                            <img src="{{ asset('assets/images/Diamond_Sales/Stock_Heat_Map.png') }}" alt="image">
                        </div>
                        <div class="service-two__content">
                            <div class="shape"><img src="{{ asset('assets/images/shape/service-two-item-shape.png') }}"
                                    alt="shape"></div>
                            <h4><a href="{{ route('services.details') }}?type=IT Consultancy"
                                    class="primary-hover p-3">Stock Management</a></h4>
                            <ul class="list-unstyled ps-3 service-list">
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>
                                    File-Based
                                    Stock
                                    Upload</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Marketing
                                    Stock
                                    Transfers</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> API Data
                                    Synchronization</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>
                                    Issue/Return
                                    of
                                    Live Stock</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Mumbai
                                    Live
                                    Stock
                                    Overview</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Order
                                    Confirmation and Returns</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Sale and
                                    Delivery
                                    Management</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Memo
                                    Issuance
                                    and
                                    Returns</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Memo Hold
                                    and
                                    Release Management</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>
                                    Assortment
                                    Issue
                                    and Returns</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Parameter
                                    Updates
                                    for Stones</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Barcode
                                    Generation and Printing</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Live
                                    Stock
                                    Sale
                                    Deliveries</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Bulk
                                    Property
                                    Updates</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Stone
                                    History
                                    Tracking</li>
                            </ul>
                            <a href="javascript:void(0);" class="read-more-btn text-black mt-2 d-inline-block">
                                Read More <i class="fa fa-arrow-right-long"></i>
                            </a>
                        </div>
                    </div>

                </div>

                <!-- Column 3 - Reports & Analytics -->

                <div class="col-lg-4 col-md-6 d-flex">
                    <div class="service-box card-style service-two__item flex-fill">
                        <div class="card-image-container">
                            <img src="{{ asset('assets/images/Diamond_Sales/Repeat_Customer_Report.png') }}"
                                alt="image">
                        </div>
                        <div class="service-two__content">
                            <div class="shape"><img src="{{ asset('assets/images/shape/service-two-item-shape.png') }}"
                                    alt="shape"></div>
                            <h4><a href="{{ route('services.details') }}?type=IT Consultancy"
                                    class="primary-hover p-3">Reports & Analytics</a></h4>
                            <ul class="list-unstyled ps-3 service-list">
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Daily,
                                    Weekly,
                                    and Monthly Sales
                                    Reports</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>
                                    Comprehensive Sales Performance Dashboard</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Customer
                                    Loyalty and Retention Analysis</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i> Real-Time
                                    Pricing Trends and Analysis</li>
                                <li class="mb-15 service-feature-item"><i class="fa-solid fa-check"></i>Rapaport
                                    Market Price Analysis</li>
                            </ul>
                            <a href="javascript:void(0);" class="read-more-btn text-black mt-2 d-inline-block">
                                Read More <i class="fa fa-arrow-right-long"></i>
                            </a>
                        </div>
                    </div>

                </div>

            </div>
            @endif



        </div>
</section>

<!-- Service area end here -->
@endsection('content')

@section('custom-scripts')
    <script>
    const sidebar = document.querySelector('.service-single__right-item');
        const content = document.querySelector('.content-side');

        function stopSidebarAtBottom() {
            const scrollTop = window.scrollY || document.documentElement.scrollTop;
            const contentBottom = content.offsetTop + content.offsetHeight;
            const sidebarHeight = sidebar.offsetHeight;

            if (scrollTop >= contentBottom) {
                sidebar.style.position = 'absolute';
                sidebar.style.top = (contentBottom - sidebarHeight) + 'px';
            } else if (scrollTop >= '500') {
                sidebar.style.position = 'sticky';
                sidebar.style.top = ((scrollTop + 1150) - sidebarHeight) + 'px';
            } else {
                sidebar.style.position = 'sticky';
                sidebar.style.top = '0px';
            }
        }

        window.addEventListener('scroll', stopSidebarAtBottom);
        window.addEventListener('load', stopSidebarAtBottom);


        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll('.service-box').forEach(function(box) {
                const items = box.querySelectorAll('.service-feature-item');
                const btn = box.querySelector('.read-more-btn');

                if (items.length > 4) {
                    for (let i = 4; i < items.length; i++) {
                        items[i].style.display = 'none';
                    }

                    btn.style.display = 'inline-block';

                    btn.addEventListener('click', function() {
                        let expanded = btn.getAttribute('data-expanded') === 'true';
                        for (let i = 4; i < items.length; i++) {
                            items[i].style.display = expanded ? 'none' : 'list-item';
                        }
                        btn.setAttribute('data-expanded', !expanded);
                        btn.innerHTML = !expanded ?
                            'Show Less <i class="fa fa-arrow-up-long"></i>' :
                            'Read More <i class="fa fa-arrow-right-long"></i>';
                    });
                } else {
                    btn.style.display = 'none';
                }
            });
        });

     
        {{--  document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.querySelector('.lb-carousel-container');
            const items = document.querySelectorAll('.lb-item');
            const prev = document.querySelector('.nav.prev');
            const next = document.querySelector('.nav.next');
            const indicators = document.querySelectorAll('.indicator');

            let itemWidth = 0;
            let visibleCount = 3;
            let totalItems = items.length;
            let maxIndex = 0;
            let currentIndex = 0;

            function calculateValues() {
                visibleCount = window.innerWidth < 768 ? 1 : 3;

                items.forEach(item => {
                    item.style.minWidth = `${100 / visibleCount}%`; // Optional: for smoother resizing
                });

                itemWidth =
                    items[0].offsetWidth +
                    parseFloat(getComputedStyle(items[0]).marginLeft) +
                    parseFloat(getComputedStyle(items[0]).marginRight);

                maxIndex = Math.max(0, totalItems - visibleCount);
                currentIndex = Math.min(currentIndex, maxIndex);
            }

                function updateCarousel() {
                    const translateX = -(itemWidth * currentIndex);
                    carousel.style.transform = `translateX(${translateX}px)`;

                    indicators.forEach(ind => ind.classList.remove('active'));
                    if (indicators[currentIndex]) {
                        indicators[currentIndex].classList.add('active');
                    }
                }

                next.addEventListener('click', () => {
                    if (currentIndex < maxIndex) {
                        currentIndex++;
                    } else {
                        currentIndex = 0;
                    }
                    updateCarousel();
                });

                prev.addEventListener('click', () => {
                    if (currentIndex > 0) {
                        currentIndex--;
                    } else {
                        currentIndex = maxIndex;
                    }
                    updateCarousel();
                });

                indicators.forEach(ind => {
                    ind.addEventListener('click', () => {
                        currentIndex = parseInt(ind.getAttribute('data-index'));
                        updateCarousel();
                    });
                });

                // Handle resize
                window.addEventListener('resize', () => {
                    calculateValues();
                    updateCarousel();
                });

                // Initial setup
                calculateValues();
                updateCarousel();
            });  --}}

        function openTab(event, tabId) {
            // Get all tab buttons and content panes
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabPanes = document.querySelectorAll('.tab-pane');

            // Remove active class from all buttons and panes
            tabButtons.forEach(button => button.classList.remove('active-tab-header'));
            tabPanes.forEach(pane => pane.classList.remove('d-block'));

            // Add active class to the clicked button and the corresponding content pane
            event.currentTarget.classList.add('active-tab-header');
            document.getElementById(tabId).classList.add('d-block');
        }

        window.addEventListener('resize', function() {
            if (window.innerWidth <= 768) {
                document.getElementById('MobileShow').style.setProperty('display', 'block', 'important');
                document.getElementById('DesktopShow').style.setProperty('display', 'none', 'important');
                document.getElementById('DesktopContent').style.setProperty('display', 'none', 'important');
            } else {
                document.getElementById('MobileShow').style.setProperty('display', 'none', 'important');
                document.getElementById('DesktopShow').style.setProperty('display', 'block', 'important');
                document.getElementById('DesktopContent').style.setProperty('display', 'flex', 'important');
            }
        });

        // Initial check for screen size when the page loads
        if (window.innerWidth <= 768) {
            document.getElementById('MobileShow').style.setProperty('display', 'block', 'important');
            document.getElementById('DesktopShow').style.setProperty('display', 'none', 'important');
            document.getElementById('DesktopContent').style.setProperty('display', 'none', 'important');
        } else {
            document.getElementById('MobileShow').style.setProperty('display', 'none', 'important');
            document.getElementById('DesktopShow').style.setProperty('display', 'block', 'important');
            document.getElementById('DesktopContent').style.setProperty('display', 'flex', 'important');
        }

          {{--  $(document).ready(function() {
            function fixFooterVisibility() {
                var footer = $('#footer');
                
                // Ensure the footer is visible after page reload
                if (footer.length) {
                    footer.css('visibility', 'visible');
                }
            }

            // Call this function when the page is loaded
            $(window).on('load', function() {
                fixFooterVisibility();
            });

            // Call the function again on window resize to handle any screen changes
            $(window).resize(function() {
                fixFooterVisibility();
            });

            // Optional: Scroll-up button functionality
            $('.scroll-up').click(function() {
                $('html, body').animate({scrollTop: 0}, 'fast');
            });
        });  --}}

        
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            AOS.init({
                once: false, 
            });
        });

        window.addEventListener("load", function() {
            AOS.refresh(); 
        });

        window.addEventListener("scroll", function() {
            AOS.refresh(); 
        });
    </script>

@endsection('custom-scripts')