@extends('layouts.main-app')

@section('title', 'About Us')

@section('content')

    <style>
        /* Custom CSS for specific styles */
        .hero-heading {
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            text-align: center;
            padding: 1rem;
        }

        .swiper-slide img {
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .swiper-slide img:hover {
            transform: scale(1.05);
        }

        /* Container styles */
        .number-container {
            position: relative;
            text-align: center;
        }

        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }

        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        .hidden {
            display: block;
            opacity: 0;
            transform: translateY(20px); /* Optional: adds a slide effect */
            transition: opacity 0.3s ease, transform 0.3s ease; /* Transition effect */ 
            }   
                    
        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }





    </style>

    <div class="bg-gray-50">
    
        <!-- Hero Section -->
        <section class="w-full h-full">
                <img src="{{ asset('assets/about/Banner.webp') }}" alt="" srcset="" class="h-64 w-full">
                <div class="absolute container max-w-screen-lg mx-auto top-10 left-1/4">
                    <h1 class="text-5xl text-white font-semibold ubuntu-font">About Us</h1>
                </div>
              
         
        </section>

        <!-- Our Story -->
        
        <section   class="container mx-auto  px-4 py-4 sticky">
            <div   class=" h-[5000px] w-full max-w-screen-lg mx-auto ">
                <div id="sticky-section"  class="w-full   left-0  z-10 scale-[90%]"
                 {{-- style="background-image: url('{{asset('assets/footer-ads.webp')}}'); background-size: cover; background-position: center; position: " --}}
                 >
                    {{-- <img src="{{ asset('assets/FooterBanner.webp') }}" alt="" srcset=""> --}}
                    <h2 class="text-3xl font-bold text-center mb-8">Our Story</h2>
                    <div class="about-section-arrow w-full h-full relative flex items-center justify-center">
                        
                        <svg  class="top-0 left-1/4 " viewBox="0 0 1346 875" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path id="animated-path"
                                d="M78.1176 827.5C78.1176 844.068 64.6862 857.5 48.1176 857.5C31.5491 857.5 18.1176 844.068 18.1176 827.5C18.1176 810.931 31.5491 797.5 48.1176 797.5C64.0141 797.5 77.0229 809.864 78.052 825.5H173.618L1179.12 827.5C1232.62 820.166 1328.12 768 1328.12 643C1328.12 537.855 1270.44 493.095 1226.86 473.92C1201.58 462.8 1156.73 459.5 1129.12 459.5H228.029C185.036 459.5 140.919 454.435 105.492 430.076C60.6044 399.212 15.3886 347.049 18.1176 272C23.1176 134.5 99.6176 101 163.118 93.0001L247 93L189.5 174.5L283 93L189.5 14L264 93"
                                stroke="url(#paint0_linear_11_8)" stroke-width="35" />
                            <defs>
                                <linearGradient id="paint0_linear_11_8" x1="354.5" y1="-83" x2="614"
                                    y2="1070" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#8AB3EB" />
                                    <stop offset="1" stop-color="#294263" />
                                </linearGradient>
                            </defs>
                        </svg>

                          {{-- aboutus choices --}}
                    <div class="flex justify-center  mt-10 absolute top-0 right-0">
                        <!-- Tab Buttons -->
                <div class="flex justify-between items-center relative">
                    <div class="bg-gray-200 rounded-3xl shadow-lg flex py-2 px-2 border-2 border-black scale-75"  >
                        <!-- Inactive Tabs -->
                        <a href="/about-us" class="px-6 py-2 m-1 bg-black text-gray-100 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">Profile</a>
                        <a href="{{route('about-mission-vision')}}" class="px-6 py-2 m-1 text-gray-700 hover:bg-gray-900 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">
                        Mission & Vission</a>

                        <a href="{{ route('about-mission-vision') }}?tab=team"
                        class="px-6 py-2 m-1 text-gray-700 hover:bg-gray-900 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">
                        Our Team
                        </a>
                    </div>
                </div>
                    </div>

                    </div>
                  
                    {{-- 2014 --}}
                    <div  id="absolute-div2014" class=" hover:scale-110 transition duration-100 absolute  top-[582px] ml-16  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2014
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4  w-40 border-orange-400 p-2 text-center text-xs text-[#294263]">
                            <p>SMN establish as <b>
                                Singapore 
                                Maritime Network</b>
                                 by 
                                amalgamation of 3 companies</p>
                        </div>
                    </div>
                    {{-- 2015 --}}
                    <div id="absolute-div2015" class="absolute  top-[582px] ml-[240px]  flex-col items-center hidden">
                        <div class="flex justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2015
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4  w-40 border-orange-400 p-2 text-center text-xs text-[#294263]">
                            <p>Fleet agreements signed with 
                                supply to over 100 vessels with 
                                clients from Singapore, Thailand 
                                and India</p>
                        </div>
                    </div>
                    {{-- 2016 --}}
                    <div id="absolute-div2016" class=" absolute  top-[582px] ml-[420px]  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2016
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4  w-40 border-orange-400 p-2 text-center text-xs text-[#294263]">
                            <p>Due to expansion of activities <br>
                                5,000 sq ft warehouse established <br>
                                in Pioneer</p>
                        </div>
                    </div>
                    {{-- 2017 --}}
                    <div id="absolute-div2017" class=" absolute  top-[582px] ml-[600px]  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2017
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4  w-48 border-orange-400 p-2 text-center text-xs text-[#294263]">
                            <p>
                                Awarded <b>Quality in Business</b>
                                certification by <b>International
                                    Trade Council</b>
                                <br>
                                Started manufacture of PPE under
                                own brand  <b>SMN Safety</b>
                                </p>
                        </div>
                    </div>
                    {{-- 2018 --}}            
                    <div id="absolute-div2018" class=" absolute  top-[582px] ml-[810px]  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2018
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4  w-40 border-orange-400 p-2 text-center text-xs text-[#294263]">
                            <p>
                                Due to customer demands,
                                expansion ins cope of supplies to
                                offer spares and stores along with
                                safety equipment    
                            </p>
                        </div>
                    </div>
                    {{-- 2019 --}}
                    <div id="absolute-div2019" class=" absolute top-[310px] ml-[810px]  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2019
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-2"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4  w-auto border-orange-400 p-2 text-center text-xs text-[#294263]">
                            <p>
                                Warehouse space expansion - new
                                showroom and two warehouses
                                inaugurated in Tampines.
                                Fleet agreements for supply to
                                over 200 vessels   
                            </p>
                        </div>
                    </div>
                       {{-- 2020 --}}
                       <div id="absolute-div2020" class=" absolute  top-[303px] ml-[580px]  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2020
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4  w-48 border-orange-400 p-2 text-center text-xs text-[#294263]">
                            <p>
                            <b> ISO 9001 </b> certification achieved
                                Awarded the status of  <b>SME 500</b>
                                company. Client base expanded to
                                supply to other industries

                                </p>
                        </div>
                    </div>
                     {{-- 2021 --}}
                     <div id="absolute-div2021" class=" absolute  top-[303px] ml-[410px]  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2021
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4 text-center w-[150px] border-orange-400 p-2 text-xs text-[#294263]">
                            <p>
                                Officially rebranded as <b>SMN Safety</b>
                                in Singapore. Fleet
                                supplies to over 500 vessels

                                </p>
                        </div>
                    </div>
                     {{-- 2022 --}}
                     <div id="absolute-div2022" class=" absolute  top-[303px] ml-[230px]  flex-col items-center hidden">
                        <div class="flex    justift-center items-center flex-col">
                            <!-- Hexagon -->
                        <div class="relative w-24 h-14 bg-transparent scale-75">
                            <!-- Top Triangle -->
                            <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                            <!-- Middle Hexagon -->
                            <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                                2022
                            </div>
                            <!-- Bottom Triangle -->
                            <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                        </div>
                    
                        <!-- Connector Line -->
                        <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                        <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                        </div>
                        <!-- Timeline Content -->
                        <div class="bg-white shadow-md border-t-4 text-center w-[150px] border-orange-400 p-2 text-xs text-[#294263]">
                            <p>
                                New strategic investor and growth
                                to UAE. <b>SMN FZCO </b> incorporated
                                in UAE,

                                </p>
                        </div>
                    </div>    
                    {{-- 2023 --}}
                    <div id="absolute-div2023" class=" absolute  top-[295px] ml-10  flex-col items-center hidden">
                       <div class="flex    justift-center items-center flex-col">
                           <!-- Hexagon -->
                       <div class="relative w-24 h-14 bg-transparent scale-75">
                           <!-- Top Triangle -->
                           <div class="absolute -top-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-b-[28px] border-l-transparent border-r-transparent border-b-[#294263]"></div>
                           <!-- Middle Hexagon -->
                           <div class="w-24 h-14 bg-white border-2 border-dashed border-[#8AB3EB] flex items-center justify-center text-xl font-bold text-[#294263]">
                               2023
                           </div>
                           <!-- Bottom Triangle -->
                           <div class="absolute -bottom-7 left-0 w-0 h-0 border-l-[48px] border-r-[48px] border-t-[28px] border-l-transparent border-r-transparent border-t-[#294263]"></div>
                       </div>
                   
                       <!-- Connector Line -->
                       <div class="w-[2px] h-12 bg-[#8AB3EB]"></div>
                       <div class="size-4 border-dashed border-2 p-2 border-white rounded-full bg-[#264a7e] mb-4"></div>

                       </div>
                       <!-- Timeline Content -->
                       <div class="bg-white shadow-md border-t-4 text-center w-[150px] border-orange-400 p-2 text-xs text-[#294263]">
                           <p>
                           <b>SMN Trading LLC </b> established in
                            <b>Dubai</b>. New warehouse set up in
                           <b> Sharjah </b> 

                               </p>
                       </div>
                   </div>

                </div>
            </div>
            <div class="w-full h-64"></div>
        </section>

        <div class="w-full h-full roboto-font text-xl flex justify-around items-center container mx-auto max-w-screen-xl py-10 px-8">
            <h1>
                Our foundation was laid back in 2007 with the establishment of mb Consulting Group
                (mbCG) in India to provide bespoke consulting services to the maritime and offshore
                industry later in 2009 the company expanded its activities to Singapore with the
                incorporation of MB Services Pte Ltd to provide safety and security services and in
                2011 Singapore Marine Network was established to provide a networking platform for
                the marine and offshore industry. In 2014, it was decided to bring the activities of each
                of the above companies under one brand and in April 2014, Singapore Maritime
                Network Pte Ltd was formally incorporated with the amalgamation of activities from
                the former three companies,
            </h1>
            <img src="{{ asset('assets/about/safety.webp') }}" alt="" srcset="">
        </div>
        <!-- Footer -->
        {{-- <footer class="bg-gray-800 text-white relative z-50">
            <div class="container mx-auto py-8 grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Contact Info -->
                <div>
                    <h3 class="font-bold text-lg mb-4">SMN Safety PTE LTD</h3>
                    <p>Singapore, Dubai</p>
                    <p>info@smnsafety.com</p>
                </div>

                <!-- Useful Links -->
                <div>
                    <h3 class="font-bold text-lg mb-4">Useful Links</h3>
                    <ul>
                        <li><a href="#" class="hover:text-blue-400">About Us</a></li>
                        <li><a href="#" class="hover:text-blue-400">SMN Safety</a></li>
                        <li><a href="#" class="hover:text-blue-400">Contact Us</a></li>
                    </ul>
                </div>

                <!-- Newsletter -->
                <div>
                    <h3 class="font-bold text-lg mb-4">Newsletter</h3>
                    <p>Subscribe for updates, latest articles, and insights.</p>
                    <form class="mt-4 flex">
                        <input type="email" placeholder="Your Email" class="flex-1 px-4 py-2 rounded-l-lg">
                        <button class="bg-blue-500 text-white px-4 py-2 rounded-r-lg">Subscribe</button>
                    </form>
                </div>
            </div>
        </footer>

         --}}

         @include('layouts.footer')
    </div>

 <script>
        document.addEventListener("DOMContentLoaded", () => {
            // Restore scroll position from localStorage
            const savedScrollY = localStorage.getItem('scrollY');
            if (savedScrollY) {
                window.scrollTo(0, parseInt(savedScrollY, 10));
            }

            // Monitor the scrollY and save it to localStorage
            window.addEventListener("scroll", () => {
                localStorage.setItem('scrollY', window.scrollY);

                // Save the scroll position of the sticky-section
                const stickySection = document.getElementById('sticky-section');
                if (stickySection) {
                    localStorage.setItem('stickySectionScrollY', stickySection.getBoundingClientRect().top);
                }
            });

            // Ensure the sticky element scrolls into view on page reload
            const stickyDiv = document.getElementById("stickyDiv");
            if (stickyDiv) {
                const savedStickyScrollY = localStorage.getItem('stickySectionScrollY');
                if (savedStickyScrollY) {
                    window.scrollTo(0, window.scrollY + parseInt(savedStickyScrollY, 10));
                } else {
                    stickyDiv.scrollIntoView({ behavior: "auto", block: "start" });
                }
            }
        });

        const sectioncontainer = document.getElementById('sticky-container');
        const stickySection = document.getElementById('sticky-section');
        const ourStorySection = document.getElementById('our-story-section');
        const animatedPath = document.getElementById('animated-path');
        const pathLength = animatedPath.getTotalLength();

        // Set up the stroke-dasharray and stroke-dashoffset
        animatedPath.style.strokeDasharray = pathLength;
        animatedPath.style.strokeDashoffset = pathLength;

        window.addEventListener('scroll', function() {
            const scrollPosition = window.scrollY;
            const maxScroll = document.body.scrollHeight - window.innerHeight * 4;
            const scrollFraction = Math.min(scrollPosition / maxScroll, 1); // Clamp between 0 and 1

            // Calculate the new stroke-dashoffset based on scroll position
            const newOffset = pathLength * (1 - scrollFraction);
            animatedPath.style.strokeDashoffset = newOffset;

            // Stickiness
            const sectionRect = stickySection.getBoundingClientRect();
            const halfwayPoint = window.innerHeight / 2;

            // Maintain sticky behavior
            if (sectionRect.top <= 0 && sectionRect.bottom > halfwayPoint) {
                stickySection.classList.add('sticky', 'top-0');
            }
        });
    </script> 


<script>

    // Configuration: Define the scroll range for each year
    const scrollRanges = {
        2014: 380,
        2015: 650,
        2016: 920,
        2017: 1270,
        2018: 1600,
        2019: 2180,
        2020: 2550,
        2021: 2920,
        2022: 3216,
        2023: 3526,
        2024: 1500,
    };
    
    // Target the divs
    const stories = {
        2014: document.getElementById('absolute-div2014'),
        2015: document.getElementById('absolute-div2015'),
        2016: document.getElementById('absolute-div2016'),
        2017: document.getElementById('absolute-div2017'),
        2018: document.getElementById('absolute-div2018'),
        2019: document.getElementById('absolute-div2019'),
        2020: document.getElementById('absolute-div2020'),
        2021: document.getElementById('absolute-div2021'),
        2022: document.getElementById('absolute-div2022'),
        2023: document.getElementById('absolute-div2023'),
        2024: document.getElementById('absolute-div2024'),
    };
    
    // Helper function to handle story visibility
    function handleStoryVisibility(scrollY) {
      // Check if the element exists before attempting to modify it
        Object.keys(scrollRanges).forEach(year => {
    const story = stories[year];
    if (story) {
        const startScroll = scrollRanges[year];

        if (scrollY >= startScroll) {
            // Show the story
            story.classList.remove('hidden', 'opacity-0', 'scale-50');
            story.classList.add('opacity-100', 'scale-100', 'transition-all', 'duration-500');
        } else {
            // Hide the story
            story.classList.remove('opacity-100', 'scale-100', 'transition-all', 'duration-500');
            story.classList.add('opacity-0', 'scale-50', 'hidden', 'transition-all', 'duration-500');
        }
    }
    });

    }
    
    // Scroll event listener
    window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;
        handleStoryVisibility(scrollY);
    });



    console.log(stories); // Logs all the story elements

</script> 

@endsection