@include('frontend.layouts.header')
    <body>
        <!-- Loader -->
        <div id="preloader">
            <div id="status">
                <div class="logo">
                    <img src="{{ asset('gallery/photos/logo.png') }}" height="20" class="d-block mx-auto" alt="">
                </div>
                <div class="spinner">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div class="bounce3"></div>
                </div>
            </div>
        </div>
        <!-- Loader -->

        <!-- Navbar Start -->
        <nav id="navbar" class="navbar navbar-expand-lg fixed-top navbar-custom navbar-light sticky">
    		<div class="container">
                <a class="navbar-brand" href="#">
                    <img src="{{ asset('gallery/photos/logo.png') }}" class="logo-light-mode" alt="">
                    <img src="{{ asset('gallery/photos/logo.png') }}" class="logo-dark-mode" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span data-feather="menu" class="fea icon-md"></span>
                </button><!--end button-->

                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul id="navbar-navlist" class="navbar-nav navbar-nav-link mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About Me</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="#skills">Skills</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="#resume">Experience</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="#projects">Projects</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="https://code-coffee-with-pri.hashnode.dev/">Blog</a>
                        </li><!--end nav item-->
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li><!--end nav item-->
                    </ul>

                    <ul class="list-unstyled mb-0 mt-2 mt-sm-0 social-icon">
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="mdi mdi-linkedin"></i></a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="mdi mdi-twitter"></i></a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="mdi mdi-instagram"></i></a></li>
                    </ul>
                </div> 
            </div><!--end container-->
		</nav>
        <!-- Navbar End -->

        <!-- Start Hero -->
        <section class="full-home personal-hero d-flex align-items-center background-effect overflow-hidden" id="home">
            <div class="container-fluid">
                <div class="bg-overlay bg-overlay-primary jarallax" data-jarallax data-speed="0.5" height=1080px width=100% style="background: url('{{ asset('storage/' . $banners->image) }}') top;"></div>
                <div class="hero-floating-skills" aria-hidden="true">
                    <div class="hero-skill-badge" style="--x: 7%; --y: 14%; --float-x: 28px; --float-y: -44px; --duration: 15s; --delay: -2s; --tilt: -7deg; --accent: #ff6b3d; --glow: rgba(255, 107, 61, 0.22);">
                        <span class="hero-skill-mark">&lt;/&gt;</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">HTML</span>
                            <span class="hero-skill-type">Markup</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 20%; --y: 30%; --float-x: 34px; --float-y: 26px; --duration: 17s; --delay: -6s; --tilt: 6deg; --accent: #2f89fc; --glow: rgba(47, 137, 252, 0.18);">
                        <span class="hero-skill-mark">{ }</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">CSS</span>
                            <span class="hero-skill-type">Styling</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 80%; --y: 15%; --float-x: 30px; --float-y: -38px; --duration: 16s; --delay: -4s; --tilt: 9deg; --accent: #f7df1e; --glow: rgba(247, 223, 30, 0.18);">
                        <span class="hero-skill-mark">JS</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">JavaScript</span>
                            <span class="hero-skill-type">Frontend</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 12%; --y: 68%; --float-x: 24px; --float-y: -28px; --duration: 18s; --delay: -7s; --tilt: -10deg; --accent: #8f6cf2; --glow: rgba(143, 108, 242, 0.2);">
                        <span class="hero-skill-mark">PHP</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">PHP</span>
                            <span class="hero-skill-type">Backend</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 31%; --y: 77%; --float-x: 26px; --float-y: 24px; --duration: 14s; --delay: -3s; --tilt: 4deg; --accent: #3fa0ff; --glow: rgba(63, 160, 255, 0.2);">
                        <span class="hero-skill-mark">PY</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">Python</span>
                            <span class="hero-skill-type">Automation</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 73%; --y: 61%; --float-x: 38px; --float-y: -22px; --duration: 19s; --delay: -5s; --tilt: -8deg; --accent: #ff4f64; --glow: rgba(255, 79, 100, 0.2);">
                        <span class="hero-skill-mark">LV</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">Laravel</span>
                            <span class="hero-skill-type">Framework</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 84%; --y: 74%; --float-x: 18px; --float-y: -30px; --duration: 13s; --delay: -1s; --tilt: 7deg; --accent: #4cc38a; --glow: rgba(76, 195, 138, 0.22);">
                        <span class="hero-skill-mark">DB</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">SQL</span>
                            <span class="hero-skill-type">Database</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 59%; --y: 25%; --float-x: 22px; --float-y: 30px; --duration: 15s; --delay: -9s; --tilt: -5deg; --accent: #7952b3; --glow: rgba(121, 82, 179, 0.18);">
                        <span class="hero-skill-mark">BS</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">Bootstrap</span>
                            <span class="hero-skill-type">UI Kit</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 48%; --y: 56%; --float-x: 30px; --float-y: -18px; --duration: 20s; --delay: -8s; --tilt: 5deg; --accent: #61dafb; --glow: rgba(97, 218, 251, 0.18);">
                        <span class="hero-skill-mark">RX</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">React</span>
                            <span class="hero-skill-type">Library</span>
                        </span>
                    </div>
                    <div class="hero-skill-badge" style="--x: 63%; --y: 82%; --float-x: 28px; --float-y: 20px; --duration: 16s; --delay: -10s; --tilt: -6deg; --accent: #7bc84c; --glow: rgba(123, 200, 76, 0.2);">
                        <span class="hero-skill-mark">ND</span>
                        <span class="hero-skill-copy">
                            <span class="hero-skill-name">Node</span>
                            <span class="hero-skill-type">Runtime</span>
                        </span>
                    </div>
                </div>

                <div class="container position-relative" style="z-index: 1;">
                    <div class="row mt-5">
                        <div class="col">
                            <div class="title-heading">
                                <div class="row">
                                    <div class="col-lg-4 col-md-6">
                                        <h4 class="display-3 title fw-bold mb-0">Priyansu<br> <span class="typewrite" data-period="2000" data-type='[ "Nayak!"]'></span> </h4>                            
                                        
                                    </div><!--end col-->
            
                                    <div class="col-lg-5 offset-lg-3 col-md-6 mt-4 mt-sm-0">
                                    
                                        <div class="rounded personal-hero-para">
                                            <h5 class="mb-3 sub-title">{{$banners->heading}}</h5>
                                
                                            <p class="para-desc para mb-0">{{$banners->description}}</p>
                                        
                                            <div class="mt-4">
                                                <a href="#contact" class="btn btn-primary">Contact me</a>
                                            </div>
                                        </div>
                                    </div><!--end col-->
                                </div><!--end row-->
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
                </div><!--end container-->
            </div><!--end container fluid-->
            <div class="personal-overlay bg-overlay bg-primary-gradient-overlay"></div>
        </section><!--end section-->
        <!-- End Hero -->
        
        <!-- About Start -->
        <section class="section pb-3 about-section-wrapper" id="about">
            <!-- Floating Animated Glass Icons -->
            <div class="about-floating-icons" aria-hidden="true">
                <i class="mdi mdi-account float-icon icon-1"></i>
                <i class="mdi mdi-star float-icon icon-2"></i>
                <i class="mdi mdi-coffee float-icon icon-3"></i>
                <i class="mdi mdi-target float-icon icon-4"></i>
                <i class="mdi mdi-folder float-icon icon-5"></i>
                <i class="mdi mdi-trophy float-icon icon-6"></i>
            </div>
            
            <div class="container" style="position: relative; z-index: 1;">
                <div class="row align-items-center">
                    <div class="col-lg-5 col-md-5">
                        <div class="about-hero">
                            <img src="{{ asset('storage/' . $about->image) }}" class="img-fluid mx-auto d-block about-tween position-relative" alt="">
                        </div>
                    </div><!--end col-->

                    <div class="col-lg-7 col-md-7 mt-4 pt-2 mt-sm-0 pt-sm-0">
                        <div class="about-content-card ms-lg-5 ms-md-3">
                            <div class="about-eyebrow">
                                <span class="about-eyebrow-dot"></span>
                                About Me
                            </div>
                            <h4 class="title text-primary mb-2">{{$about->heading}}</h4>
                            <h6 class="designation mb-3">I'm a Passionate <span class="text-primary">{{$about->subheading}}</span></h6>
                            <p class="text-muted">{{$about->paragraph1}}</p>
                            <p class="text-muted">{{$about->paragraph2}}</p>

                            <div class="about-highlights">
                                <span class="about-highlight">
                                    <i data-feather="award" class="fea icon-sm"></i>
                                    3+ Years Experience
                                </span>
                                <span class="about-highlight">
                                    <i data-feather="layout" class="fea icon-sm"></i>
                                    Pixel-Perfect UI
                                </span>
                                <span class="about-highlight">
                                    <i data-feather="cpu" class="fea icon-sm"></i>
                                    Always Learning
                                </span>
                            </div>

                            <div class="about-actions mt-4">
                                <a href="#skills" class="btn btn-primary mouse-down">View Skills</a>
                                <a href="#contact" class="btn mouse-down about-secondary-btn">Let's Talk</a>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->

            

            <div class="container-fluid mt-100 mt-60" style="position: relative; z-index: 1;">
                <div class="rounded py-md-5 py-4 jarallax" data-jarallax data-speed="0.5" style="background: url('{{ asset('gallery/photos/banner2.jpg') }}') center center;">
                    <div class="container">
                        <div class="row" id="counter">
                            <div class="col-lg-3 col-6">
                                <div class="counter-box rounded py-3 text-center">
                                    <div class="counter-icon">
                                        <i data-feather="smile" class="fea icon-md text-primary"></i>
                                    </div>
                                    <h3 class="counter-value mt-3 text-white title-dark" data-target="20">20</h3>
                                    <h6 class="counter-head font-weight-normal mb-0 text-white title-dark">Technologies</h6>
                                </div><!--end counter box-->
                            </div><!--end col-->
    
                            <div class="col-lg-3 col-6">
                                <div class="counter-box rounded py-3 text-center">
                                    <div class="counter-icon">
                                        <i data-feather="award" class="fea icon-md text-primary"></i>
                                    </div>
                                    <h3 class="counter-value mt-3 text-white title-dark" data-target="15">1</h3>
                                    <h6 class="counter-head font-weight-normal mb-0 text-white title-dark">Certifications</h6>
                                </div><!--end counter box-->
                            </div><!--end col-->
    
                            <div class="col-lg-3 col-6">
                                <div class="counter-box rounded py-3 text-center">
                                    <div class="counter-icon">
                                        <i data-feather="coffee" class="fea icon-md text-primary"></i>
                                    </div>
                                    <h3 class="counter-value mt-3 text-white title-dark" data-target="3261">30</h3>
                                    <h6 class="counter-head font-weight-normal mb-0 text-white title-dark">Cup of Coffee</h6>
                                </div><!--end counter box-->
                            </div><!--end col-->
    
                            <div class="col-lg-3 col-6">
                                <div class="counter-box rounded py-3 text-center">
                                    <div class="counter-icon">
                                        <i data-feather="thumbs-up" class="fea icon-md text-primary"></i>
                                    </div>
                                    <h3 class="counter-value mt-3 text-white title-dark" data-target="36">3</h3>
                                    <h6 class="counter-head font-weight-normal mb-0 text-white title-dark">Project Complete</h6>
                                </div><!--end counter box-->
                            </div><!--end col-->
                        </div><!--end row-->
                    </div><!--end container-->
                </div><!--end div-->
            </div><!--end container fluid-->

            <!-- Counter Hover Animations -->
            <style>
                .counter-box {
                    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                                box-shadow 0.4s ease,
                                background 0.4s ease;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }
                .counter-box::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    border-radius: inherit;
                    background: radial-gradient(circle at 50% 0%, rgba(47, 85, 212, 0.15), transparent 70%);
                    opacity: 0;
                    transition: opacity 0.4s ease;
                }
                .counter-box:hover {
                    transform: translateY(-8px) scale(1.04);
                    box-shadow: 0 12px 36px rgba(47, 85, 212, 0.25);
                    background: rgba(47, 85, 212, 0.08);
                }
                .counter-box:hover::before {
                    opacity: 1;
                }
                .counter-box .counter-icon {
                    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
                    display: inline-block;
                }
                .counter-box:hover .counter-icon {
                    animation: counterIconBounce 0.6s ease;
                }
                .counter-box .counter-value {
                    transition: transform 0.3s ease, text-shadow 0.3s ease;
                }
                .counter-box:hover .counter-value {
                    transform: scale(1.12);
                    text-shadow: 0 0 20px rgba(47, 85, 212, 0.5);
                }
                .counter-box .counter-head {
                    transition: letter-spacing 0.3s ease, opacity 0.3s ease;
                }
                .counter-box:hover .counter-head {
                    letter-spacing: 1px;
                    opacity: 0.9;
                }

                @keyframes counterIconBounce {
                    0%   { transform: translateY(0) scale(1); }
                    25%  { transform: translateY(-10px) scale(1.15); }
                    50%  { transform: translateY(-4px) scale(1.05) rotate(8deg); }
                    75%  { transform: translateY(-7px) scale(1.1) rotate(-4deg); }
                    100% { transform: translateY(0) scale(1) rotate(0deg); }
                }
            </style>
        </section>
        <!-- About end -->    

            <!-- Skills Start -->
        <section class="section bg-light" id="skills">
            <div class="skills-particles" aria-hidden="true">
                <div class="skills-particle" style="--x:15%;--y:20%;--s:4px;--d:8s;--delay:-2s"></div>
                <div class="skills-particle" style="--x:80%;--y:15%;--s:3px;--d:11s;--delay:-5s"></div>
                <div class="skills-particle" style="--x:70%;--y:70%;--s:5px;--d:9s;--delay:-1s"></div>
                <div class="skills-particle" style="--x:25%;--y:80%;--s:3px;--d:13s;--delay:-7s"></div>
                <div class="skills-particle" style="--x:90%;--y:45%;--s:4px;--d:10s;--delay:-3s"></div>
                <div class="skills-particle" style="--x:10%;--y:55%;--s:2px;--d:15s;--delay:-4s"></div>
            </div>
            <div class="container">
                <div class="skills-header">
                    <div class="skills-eyebrow">
                        <span class="skills-eyebrow-dot"></span>
                        Core Capabilities
                    </div>
                    <h2 class="skills-heading">
                        My <span class="skills-heading-accent">Skills</span>
                    </h2>
                    <p class="skills-desc">A polished toolkit for building responsive interfaces, scalable backend systems and database-driven applications.</p>
                    <div class="skills-divider"></div>
                </div>
            </div>

            <div class="container">
                <div class="skills-showcase">
                    <div class="skills-tab-wrap">
                        <ul class="skills-pill-list mb-0" role="tablist" aria-label="Skill categories">
                            <li class="skills-pill-indicator" id="skillsIndicator"></li>
                            <li><button type="button" class="skills-pill active" data-skill-filter="all" role="tab" aria-selected="true">All</button></li>
                            <li><button type="button" class="skills-pill" data-skill-filter="frontend" role="tab" aria-selected="false">Frontend</button></li>
                            <li><button type="button" class="skills-pill" data-skill-filter="backend" role="tab" aria-selected="false">Backend</button></li>
                            <li><button type="button" class="skills-pill" data-skill-filter="database" role="tab" aria-selected="false">Database</button></li>
                            <li><button type="button" class="skills-pill" data-skill-filter="tools" role="tab" aria-selected="false">Tools</button></li>
                        </ul>
                    </div>

                    <p class="skills-prompt">Click a category to explore my skills.</p>
                </div>
            </div>
        </section><!--end section-->

        {{-- ══════════════════════════════════════════════
             SKILLS MODAL
             ══════════════════════════════════════════════ --}}
        <div class="modal fade skills-modal" id="skillsModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="skills-modal-head">
                            <div class="skills-modal-icon" id="skillsModalIcon">
                                <i class="mdi mdi-view-grid"></i>
                            </div>
                            <div>
                                <h5 class="skills-modal-title" id="skillsModalTitle">All Skills</h5>
                                <p class="skills-modal-desc" id="skillsModalDesc">Complete overview of my technical toolkit.</p>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="skillsModalBody">
                        <div class="skills-grid" id="skillsModalGrid">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════
             SKILLS TEMPLATES (hidden, used as data source)
             ══════════════════════════════════════════════ --}}
        <div class="skills-templates" aria-hidden="true">
            <div class="skills-group" data-skill-group="frontend">
                <div class="skills-grid">
                    <div class="skill-card" style="--skill-color:#e44d26;--skill-color-alt:#ff8a5b">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-language-html5"></i></div>
                        <h6 class="skill-name">HTML</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#1572b6;--skill-color-alt:#44b3ff">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-language-css3"></i></div>
                        <h6 class="skill-name">CSS</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#f7df1e;--skill-color-alt:#ffb703">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-language-javascript"></i></div>
                        <h6 class="skill-name">JavaScript</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#7952b3;--skill-color-alt:#5ed3ff">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-bootstrap"></i></div>
                        <h6 class="skill-name">Bootstrap</h6>
                    </div>
                </div>
            </div>

            <div class="skills-group" data-skill-group="backend">
                <div class="skills-grid">
                    <div class="skill-card" style="--skill-color:#617cbe;--skill-color-alt:#8892ff">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-language-php"></i></div>
                        <h6 class="skill-name">PHP</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#ff2d20;--skill-color-alt:#ff7a59">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-laravel"></i></div>
                        <h6 class="skill-name">Laravel</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#3776ab;--skill-color-alt:#ffd343">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-language-python"></i></div>
                        <h6 class="skill-name">Python</h6>
                    </div>
                </div>
            </div>

            <div class="skills-group" data-skill-group="database">
                <div class="skills-grid">
                    <div class="skill-card" style="--skill-color:#00758f;--skill-color-alt:#00b4d8">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-database"></i></div>
                        <h6 class="skill-name">MySQL</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#355c7d;--skill-color-alt:#6c9bcf">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-database-outline"></i></div>
                        <h6 class="skill-name">SQL</h6>
                    </div>
                </div>
            </div>

            <div class="skills-group" data-skill-group="tools">
                <div class="skills-grid">
                    <div class="skill-card" style="--skill-color:#f1502f;--skill-color-alt:#ff8b6b">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-git"></i></div>
                        <h6 class="skill-name">Git</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#007acc;--skill-color-alt:#54b8ff">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-microsoft-visual-studio-code"></i></div>
                        <h6 class="skill-name">VS Code</h6>
                    </div>
                    <div class="skill-card" style="--skill-color:#fb7a24;--skill-color-alt:#ffd166">
                        <div class="skill-card-shine"></div>
                        <div class="skill-mark"><i class="mdi mdi-server"></i></div>
                        <h6 class="skill-name">XAMPP</h6>
                    </div>
                </div>
            </div>
        </div>
        <!-- Skills End -->

        <!-- Resume Start -->
        <section class="section" id="resume">
            <div class="resume-floating-skills" aria-hidden="true">
                <div class="resume-skill-badge" style="--x: 6%; --y: 18%; --float-x: 24px; --float-y: -26px; --duration: 16s; --delay: -2s; --tilt: -7deg; --accent: #ff6b3d; --glow: rgba(255, 107, 61, 0.16);">
                    <span class="resume-skill-mark">&lt;/&gt;</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">HTML</span>
                        <span class="resume-skill-type">Markup</span>
                    </span>
                </div>
                <div class="resume-skill-badge" style="--x: 18%; --y: 64%; --float-x: 28px; --float-y: 18px; --duration: 18s; --delay: -7s; --tilt: 6deg; --accent: #2f89fc; --glow: rgba(47, 137, 252, 0.14);">
                    <span class="resume-skill-mark">{ }</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">CSS</span>
                        <span class="resume-skill-type">Styling</span>
                    </span>
                </div>
                <div class="resume-skill-badge" style="--x: 78%; --y: 18%; --float-x: 22px; --float-y: -24px; --duration: 15s; --delay: -4s; --tilt: 8deg; --accent: #f7df1e; --glow: rgba(247, 223, 30, 0.16);">
                    <span class="resume-skill-mark">JS</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">JavaScript</span>
                        <span class="resume-skill-type">Frontend</span>
                    </span>
                </div>
                <div class="resume-skill-badge" style="--x: 82%; --y: 58%; --float-x: 26px; --float-y: -16px; --duration: 19s; --delay: -5s; --tilt: -8deg; --accent: #8f6cf2; --glow: rgba(143, 108, 242, 0.14);">
                    <span class="resume-skill-mark">PHP</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">PHP</span>
                        <span class="resume-skill-type">Backend</span>
                    </span>
                </div>
                <div class="resume-skill-badge" style="--x: 7%; --y: 82%; --float-x: 18px; --float-y: -18px; --duration: 17s; --delay: -9s; --tilt: -5deg; --accent: #ff4f64; --glow: rgba(255, 79, 100, 0.16);">
                    <span class="resume-skill-mark">LV</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">Laravel</span>
                        <span class="resume-skill-type">Framework</span>
                    </span>
                </div>
                <div class="resume-skill-badge" style="--x: 72%; --y: 84%; --float-x: 22px; --float-y: 18px; --duration: 14s; --delay: -3s; --tilt: 4deg; --accent: #4cc38a; --glow: rgba(76, 195, 138, 0.16);">
                    <span class="resume-skill-mark">DB</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">SQL</span>
                        <span class="resume-skill-type">Database</span>
                    </span>
                </div>
                <div class="resume-skill-badge" style="--x: 36%; --y: 12%; --float-x: 20px; --float-y: 20px; --duration: 20s; --delay: -6s; --tilt: -6deg; --accent: #f1502f; --glow: rgba(241, 80, 47, 0.14);">
                    <span class="resume-skill-mark">GIT</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">Git</span>
                        <span class="resume-skill-type">Workflow</span>
                    </span>
                </div>
                <div class="resume-skill-badge" style="--x: 47%; --y: 88%; --float-x: 24px; --float-y: -14px; --duration: 16s; --delay: -8s; --tilt: 5deg; --accent: #007acc; --glow: rgba(0, 122, 204, 0.14);">
                    <span class="resume-skill-mark">VS</span>
                    <span class="resume-skill-copy">
                        <span class="resume-skill-name">VS Code</span>
                        <span class="resume-skill-type">Editor</span>
                    </span>
                </div>
            </div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <div class="section-title">
                            <div class="position-relative">
                                <h4 class="title text-uppercase mb-4">MY PROFESSIONAL JOURNEY</h4>
                                <div>
                                    <div class="title-box"></div>
                                    <div class="title-line"></div>
                                </div>
                            </div>
                            <p class="text-black mx-auto para-desc mt-5 mb-0 fw-bold">Growing through challenges, learning through experience, and building with purpose.</p>
                            <div class="resume-cta-card text-start">
                                <div class="resume-cta-copy">
                                    <p class="resume-cta-title">Get My Resume</p>
                                    <p class="resume-cta-text">Preview my resume and download it.</p>
                                </div>
                                <div class="resume-cta-actions">
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#resumeModal">Get My Resume</button>
                                    <a href="documents/priyansu-nayak-resume.pdf" class="btn btn-outline-primary" download>Download PDF</a>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row">
                    <div class="col-12">
                        <div class="timeline-star-wrap" id="timeline-star-wrap">
                            <div class="main-icon rounded-pill text-center mt-4 pt-2" id="timeline-star-icon">
                                <i data-feather="star" class="fea icon-md-sm"></i>
                            </div>
                            <div class="timeline-star-popup" id="timeline-star-popup" aria-hidden="true">
                                <div class="tsp-glow"></div>
                                <div class="tsp-inner">
                                    <span class="tsp-emoji">&#x1F680;</span>
                                    <p class="tsp-line1">Miles to go&hellip;</p>
                                    <p class="tsp-line2">Lots of things to achieve</p>
                                    <span class="tsp-dots"><span></span><span></span><span></span></span>
                                </div>
                            </div>
                        </div>
                        <div class="timeline-page pt-2 position-relative">
                            @foreach($experiences as $experience)
                                <div class="timeline-item mt-4">
                                    <div class="row">
                                        
                                        @if($loop->odd)
                                            <!-- Odd Items (Description on the Right) -->
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <div id="date-{{ $experience->id }}" class="duration date-label-left border rounded p-2 ps-4 pe-4 position-relative shadow text-start">
                                                    {{ $experience->start_year }} - {{ $experience->end_year }}
                                                </div>
                                            </div><!--end col-->
                                            <div class="col-lg-6 col-md-6 col-sm-6">
                                                <div onclick="toggleGlow({{ $experience->id }})" class="event event-description-right rounded p-4 border float-left text-start" style="cursor: pointer; transition: all 0.3s ease;">
                                                    <div class="company-logo-wrap mb-3 text-start">
                                                        @if($experience->company_logo)
                                                            <img src="{{ asset('storage/' . $experience->company_logo) }}" class="company-logo glowing-logo" alt="{{ $experience->company_name }} Logo">
                                                        @endif
                                                    </div>
                                                    <h5 class="title mb-0 text-capitalize">{{ $experience->job_title }}</h5>
                                                    <small class="company">{{ $experience->company_name }} - {{ $experience->designation }}</small>
                                                    <p class="timeline-subtitle mt-3 mb-0 text-muted">{{ $experience->description }}</p>
                                                </div>
                                            </div><!--end col-->
                                        
                                        @else
                                            <!-- Even Items (Description on the Left) -->
                                            <div class="col-lg-6 col-md-6 col-sm-6 order-sm-1 order-2">
                                                <div onclick="toggleGlow({{ $experience->id }})" class="event event-description-left rounded p-4 border float-left text-end" style="cursor: pointer; transition: all 0.3s ease;">
                                                    <div class="company-logo-wrap mb-3 text-end">
                                                        @if($experience->company_logo)
                                                            <img src="{{ asset('storage/' . $experience->company_logo) }}" class="company-logo glowing-logo" alt="{{ $experience->company_name }} Logo">
                                                        @endif
                                                    </div>
                                                    <h5 class="title mb-0 text-capitalize">{{ $experience->job_title }}</h5>
                                                    <small class="company">{{ $experience->company_name }} - {{ $experience->designation }}</small>
                                                    <p class="timeline-subtitle mt-3 mb-0 text-muted">{{ $experience->description }}</p>
                                                </div>
                                            </div><!--end col-->
                                            <div class="col-lg-6 col-md-6 col-sm-6 order-sm-2 order-1">
                                                <div id="date-{{ $experience->id }}" class="duration duration-right rounded border p-2 ps-4 pe-4 position-relative shadow text-start">
                                                    {{ $experience->start_year }} - {{ $experience->end_year }}
                                                </div>
                                            </div><!--end col-->
                                        @endif
                                        
                                    </div><!--end row-->
                                </div><!--end timeline item-->
                            @endforeach
                        </div><!--end timeline page-->

                        <!-- Glow Effect Script and Style -->
                        <style>
                            .duration {
                                transition: all 0.4s ease;
                            }
                            .glow-active {
                                background-color: #2f55d4 !important;
                                color: #ffffff !important;
                                border-color: #2f55d4 !important;
                                box-shadow: 0 0 15px rgba(47, 85, 212, 0.6) !important;
                                transform: scale(1.05);
                            }
                            .event:hover {
                                transform: translateY(-5px);
                                box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
                            }
                        </style>
                        <script>
                            function toggleGlow(id) {
                                // 1. Remove glow from ALL dates first
                                document.querySelectorAll('.duration').forEach(function(el) {
                                    el.classList.remove('glow-active');
                                });
                                
                                // 2. Add glow only to the clicked date
                                let targetDate = document.getElementById('date-' + id);
                                if(targetDate) {
                                    targetDate.classList.add('glow-active');
                                }
                            }
                        </script>
                        <!-- TIMELINE END -->
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section>   
        <!-- Resume End-->

        <!-- Resume Modal Start -->
        <div class="modal fade resume-modal" id="resumeModal" tabindex="-1" aria-labelledby="resumeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="resumeModalLabel">My Resume</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0">
                        <iframe class="resume-viewer" src="documents/priyansu-nayak-resume.pdf" title="Resume PDF preview"></iframe>
                    </div>
                    <div class="modal-footer">
                        <p class="resume-modal-note">Replace <strong>documents/priyansu-nayak-resume.pdf</strong> with your own PDF resume file.</p>
                        <div class="d-flex flex-wrap gap-2">
                            <a href="documents/priyansu-nayak-resume.pdf" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Open Full PDF</a>
                            <a href="documents/priyansu-nayak-resume.pdf" class="btn btn-outline-primary" download>Download PDF</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Resume Modal End -->


        <!-- Projects Start-->
        <section class="section bg-light" id="projects">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <div class="section-title premium-section-title">
                            <div class="premium-section-eyebrow">
                                <span class="premium-section-eyebrow-dot"></span>
                                Selected Work
                            </div>
                            <div class="position-relative">
                                <h4 class="title premium-section-heading mb-4">My Projects</h4>
                                <div>
                                    <div class="title-box"></div>
                                    <div class="title-line"></div>
                                </div>
                            </div>
                            <p class="text-muted mx-auto para-desc premium-section-desc mt-5 mb-0">From backend architecture to responsive interfaces, these projects highlight my journey in creating reliable and scalable applications.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div>    
            
            <div class="container">
                <!-- Gallary -->
                <div class="project-carousel-shell">
                <div id="projects-carousel" class="project-carousel">
                    @forelse($projects as $project)
                    <div class="project-slide h-100 w-100 d-flex flex-column">
                        <div class="item-box portfolio-box rounded shadow bg-white overflow-hidden d-flex flex-column h-100">
                            <div class="portfolio-box-img position-relative overflow-hidden">
                                <img class="item-container img-fluid mx-auto" src="{{ asset('storage/' . $project->image) }}" alt="{{ $project->project_name }}">
                                <div class="overlay-work">
                                    <div class="work-content text-center">
                                        <a href="{{ asset('storage/' . $project->image) }}" class="lightbox text-light work-icon bg-dark d-inline-block rounded-pill "><i data-feather="camera" class="fea icon-sm image-icon"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="gallary-title d-flex flex-column flex-grow-1">
                                <div class="project-title-row">
                                    <h5><a href="{{ $project->live_demo_link ?? '#' }}" class="title text-dark" {{ $project->live_demo_link ? 'target="_blank" rel="noopener"' : '' }}>{{ $project->project_name }}</a></h5>
                                    @if($project->github_link)
                                    <a href="{{ $project->github_link }}" target="_blank" rel="noopener" class="project-github-link" aria-label="View {{ $project->project_name }} on GitHub"><i class="mdi mdi-github"></i></a>
                                    @endif
                                </div>
                                <div class="project-description-wrapper mb-3">
                                    <p class="text-muted project-description mb-0 read-more-text" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; transition: all 0.3s ease;">{{ $project->short_description }}</p>
                                    <a href="javascript:void(0)" class="read-more-btn text-primary d-none mt-1" style="font-size: 13px; font-weight: 500; text-decoration: none;">Read more</a>
                                </div>
                                <div class="project-tech-stack mt-auto" aria-label="Project tech stack">
                                    @foreach($project->technologies as $tech)
                                    <span class="project-tech-tag" style="--tech-color: {{ $tech->color ?? '#000' }};">
                                        @if($tech->icon)
                                        <i class="{{ $tech->icon }}"></i>
                                        @endif
                                        {{ $tech->name }}
                                    </span>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center">
                        <p class="text-muted">No projects found.</p>
                    </div>
                    @endforelse
                </div>
                    <div class="project-carousel-controls" id="projects-carousel-controls" aria-label="Project carousel controls">
                        <button type="button" class="project-carousel-arrow" aria-label="Previous project"><i class="mdi mdi-chevron-left"></i></button>
                        <button type="button" class="project-carousel-arrow" aria-label="Next project"><i class="mdi mdi-chevron-right"></i></button>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12 mt-4 pt-2">
                        <div class="text-center">
                            <a href="https://github.com/Priyansu25" class="btn btn-outline-primary">More works <i data-feather="refresh-cw" class="fea icon-sm"></i></a>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- Projects End -->

        <!-- Developer Blog Start -->
        <section class="section bg-dark dev-blog-section" id="developer-blog">
            <!-- Soft abstract background elements -->
            <div class="dev-blog-bg-glow glow-1"></div>
            <div class="dev-blog-bg-glow glow-2"></div>
            
            <!-- Floating Animated Icons -->
            <div class="dev-blog-floating-icons" aria-hidden="true">
                <i class="mdi mdi-pencil float-icon icon-1"></i>
                <i class="mdi mdi-lightbulb-on float-icon icon-2"></i>
                <i class="mdi mdi-laptop float-icon icon-3"></i>
                <i class="mdi mdi-react float-icon icon-4"></i>
                <i class="mdi mdi-language-python float-icon icon-5"></i>
                <i class="mdi mdi-docker float-icon icon-6"></i>
                <i class="mdi mdi-code-tags float-icon icon-7"></i>
                <i class="mdi mdi-database float-icon icon-8"></i>
            </div>

            <div class="container" style="position: relative; z-index: 1;">
                <div class="row justify-content-center">
                    <div class="col-lg-8 text-center dev-blog-content">
                        <div class="mb-4">
                            <span class="dev-blog-eyebrow">Insights & Learnings</span>
                        </div>
                        <h2 class="dev-blog-heading display-4 fw-bold mb-4">Developer Blog</h2>
                        <p class="dev-blog-subtitle text-muted fs-5 mb-5">
                            Sharing practical tutorials, development experiences, and lessons learned while building real-world software.
                        </p>
                        
                        <div class="dev-blog-quote-wrapper mb-5">
                            <blockquote class="dev-blog-quote">
                                "Every article reflects something I've built, solved, or learned—shared to help others and document my own journey."
                            </blockquote>
                        </div>
                        
                        <div class="dev-blog-cta">
                            <a href="https://code-coffee-with-pri.hashnode.dev/" target="_blank" rel="noopener noreferrer" class="btn btn-premium-blog">
                                Explore My Blog <i data-feather="arrow-right" class="fea icon-sm ms-2 arrow-icon"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <style>
        /* ══════════════════════════════════════════════
           DEVELOPER BLOG SECTION
           ══════════════════════════════════════════════ */
        .dev-blog-section {
            position: relative;
            overflow: hidden;
            padding: 120px 0;
            z-index: 1;
        }

        /* Background glows for a modern feel */
        .dev-blog-bg-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            z-index: -1;
            opacity: 0.5;
            pointer-events: none;
        }

        .dev-blog-bg-glow.glow-1 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
            top: -200px;
            left: -150px;
        }

        .dev-blog-bg-glow.glow-2 {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
            bottom: -200px;
            right: -150px;
        }

        /* Initial state for fade-up animation */
        .dev-blog-content {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .dev-blog-content.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Eyebrow styling */
        .dev-blog-eyebrow {
            display: inline-block;
            padding: 6px 18px;
            border-radius: 30px;
            background: rgba(99, 102, 241, 0.08);
            border: 1px solid rgba(99, 102, 241, 0.15);
            color: #e8e7f1ff;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            backdrop-filter: blur(10px);
        }

        /* Heading typography */
        .dev-blog-heading {
            letter-spacing: -0.04em;
            line-height: 1.1;
            /* Animated Gradient Text Effect */
            background: linear-gradient(
                to right,
                #0f172a 20%,
                #4f46e5 40%,
                #ec4899 60%,
                #0f172a 80%
            );
            background-size: 200% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            animation: textShine 4s linear infinite;
            display: inline-block;
            font-family: 'Outfit', 'Poppins', sans-serif;
            transition: transform 0.3s ease;
        }

        .dev-blog-heading:hover {
            transform: scale(1.03);
            text-shadow: 0 10px 30px rgba(79, 70, 229, 0.2);
        }

        @keyframes textShine {
            to {
                background-position: 200% center;
            }
        }

        /* Subtitle typography */
        .dev-blog-subtitle {
            max-width: 640px;
            margin: 0 auto;
            color: #475569;
            line-height: 1.7;
        }

        /* Quote card with premium glassmorphism touch */
        .dev-blog-quote-wrapper {
            position: relative;
            max-width: 760px;
            margin: 0 auto;
            padding: 45px 50px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 255, 0.4));
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 24px;
            box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .dev-blog-quote {
            font-size: 1.35rem;
            font-style: italic;
            color: #334155;
            line-height: 1.8;
            margin: 0;
            font-weight: 500;
            position: relative;
            z-index: 1;
        }

        .dev-blog-quote::before {
            content: '"';
            position: absolute;
            top: -50px;
            left: -25px;
            font-size: 7rem;
            color: rgba(99, 102, 241, 0.08);
            font-family: Georgia, serif;
            line-height: 1;
            z-index: -1;
        }

        /* Premium CTA Button */
        .btn-premium-blog {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 40px;
            font-size: 1.05rem;
            font-weight: 600;
            color: #ffffff;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 99px;
            text-decoration: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.05);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }

        .btn-premium-blog::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .btn-premium-blog:hover {
            color: #ffffff;
            transform: translateY(-4px);
            box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.4), 0 0 25px rgba(99, 102, 241, 0.3);
            border-color: rgba(99, 102, 241, 0.5);
        }

        .btn-premium-blog:hover::before {
            opacity: 1;
        }

        .btn-premium-blog .arrow-icon {
            display: inline-block;
            transition: transform 0.3s ease;
        }

        .btn-premium-blog:hover .arrow-icon {
            transform: translateX(6px);
        }

        /* Dark mode overrides (if applicable) */
        .dark-mode .dev-blog-heading {
            background: linear-gradient(
                to right,
                #f8fafc 20%,
                #818cf8 40%,
                #f472b6 60%,
                #f8fafc 80%
            );
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .dark-mode .dev-blog-subtitle, .dark-mode .dev-blog-quote {
            color: #cbd5e1;
        }
        .dark-mode .dev-blog-quote-wrapper {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.4));
            border-color: rgba(51, 65, 85, 0.8);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
        }
        .dark-mode .btn-premium-blog {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: #0f172a;
        }
        .dark-mode .btn-premium-blog:hover {
            color: #0f172a;
            box-shadow: 0 20px 35px -10px rgba(255, 255, 255, 0.2), 0 0 25px rgba(99, 102, 241, 0.3);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .dev-blog-section {
                padding: 80px 0;
            }
            .dev-blog-heading {
                font-size: 2.5rem;
            }
            .dev-blog-subtitle {
                font-size: 1.05rem;
                padding: 0 10px;
            }
            .dev-blog-quote-wrapper {
                padding: 35px 25px;
                margin: 0 15px;
            }
            .dev-blog-quote {
                font-size: 1.15rem;
            }
        }

        /* ══════════════════════════════════════════════
           FLOATING ICONS ANIMATION
           ══════════════════════════════════════════════ */
        .dev-blog-floating-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .dev-blog-floating-icons .float-icon {
            position: absolute;
            font-size: 2.5rem;
            color: rgba(99, 102, 241, 0.35);
            animation: floatUp 20s infinite linear;
            pointer-events: none;
            will-change: top, transform, opacity;
        }

        @keyframes floatUp {
            0% {
                top: 110%;
                transform: translateX(0) rotate(0deg) scale(0.8);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                top: -20%;
                transform: translateX(40px) rotate(360deg) scale(1.2);
                opacity: 0;
            }
        }

        /* Individual Icon Positions, Speeds & Colors */
        .dev-blog-floating-icons .icon-1 { left: 10%; animation-duration: 22s; animation-delay: 0s; font-size: 3rem; color: rgba(236, 72, 153, 0.35); }
        .dev-blog-floating-icons .icon-2 { left: 25%; animation-duration: 18s; animation-delay: -5s; font-size: 2.2rem; color: rgba(245, 158, 11, 0.35); }
        .dev-blog-floating-icons .icon-3 { left: 45%; animation-duration: 25s; animation-delay: -12s; font-size: 4rem; color: rgba(99, 102, 241, 0.25); }
        .dev-blog-floating-icons .icon-4 { left: 70%; animation-duration: 19s; animation-delay: -2s; font-size: 3.5rem; color: rgba(97, 218, 251, 0.45); }
        .dev-blog-floating-icons .icon-5 { left: 85%; animation-duration: 24s; animation-delay: -8s; font-size: 2.8rem; color: rgba(255, 212, 59, 0.4); }
        .dev-blog-floating-icons .icon-6 { left: 55%; animation-duration: 28s; animation-delay: -15s; font-size: 3.2rem; color: rgba(36, 150, 237, 0.35); }
        .dev-blog-floating-icons .icon-7 { left: 18%; animation-duration: 21s; animation-delay: -18s; font-size: 2.5rem; color: rgba(16, 185, 129, 0.35); }
        .dev-blog-floating-icons .icon-8 { left: 80%; animation-duration: 26s; animation-delay: -6s; font-size: 2.4rem; color: rgba(139, 92, 246, 0.35); }

        .dark-mode .dev-blog-floating-icons .float-icon {
            opacity: 0.9;
        }

        /* ══════════════════════════════════════════════
           ABOUT SECTION FLOATING ICONS
           ══════════════════════════════════════════════ */
        .about-section-wrapper {
            position: relative;
            overflow: hidden;
        }

        .about-floating-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .about-floating-icons .float-icon {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
            animation: aboutFloatUp 20s infinite linear;
            pointer-events: none;
            will-change: top, transform, opacity;
        }

        @keyframes aboutFloatUp {
            0% {
                top: 110%;
                transform: translateX(-20px) rotate(0deg) scale(0.8);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                top: -20%;
                transform: translateX(20px) rotate(360deg) scale(1.1);
                opacity: 0;
            }
        }

        /* Individual Icon Positions, Speeds & Colors */
        .about-floating-icons .icon-1 { left: 8%; width: 70px; height: 70px; font-size: 1.8rem; animation-duration: 24s; animation-delay: -2s; color: rgba(47, 137, 252, 0.9); background: rgba(47, 137, 252, 0.1); border-color: rgba(47, 137, 252, 0.25); }
        .about-floating-icons .icon-2 { left: 22%; width: 90px; height: 90px; font-size: 2.5rem; animation-duration: 19s; animation-delay: -10s; color: rgba(245, 158, 11, 0.9); background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.25); }
        .about-floating-icons .icon-3 { left: 45%; width: 60px; height: 60px; font-size: 1.5rem; animation-duration: 26s; animation-delay: -5s; color: rgba(236, 72, 153, 0.9); background: rgba(236, 72, 153, 0.1); border-color: rgba(236, 72, 153, 0.25); }
        .about-floating-icons .icon-4 { left: 65%; width: 85px; height: 85px; font-size: 2.2rem; animation-duration: 21s; animation-delay: -14s; color: rgba(16, 185, 129, 0.9); background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.25); }
        .about-floating-icons .icon-5 { left: 82%; width: 75px; height: 75px; font-size: 2rem; animation-duration: 27s; animation-delay: -8s; color: rgba(139, 92, 246, 0.9); background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.25); }
        .about-floating-icons .icon-6 { left: 92%; width: 65px; height: 65px; font-size: 1.7rem; animation-duration: 23s; animation-delay: -17s; color: rgba(239, 68, 68, 0.9); background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.25); }
        
        .dark-mode .about-floating-icons .float-icon {
            background: rgba(30, 41, 59, 0.4);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
        }

        /* ══════════════════════════════════════════════
           PREMIUM MOBILE MENU
           ══════════════════════════════════════════════ */
        @media (max-width: 991px) {
            #navbarCollapse {
                position: absolute;
                top: 100%;
                left: 15px;
                right: 15px;
                background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 27, 75, 0.95) 100%);
                backdrop-filter: blur(25px);
                -webkit-backdrop-filter: blur(25px);
                padding: 30px 20px;
                border-radius: 24px;
                box-shadow: 0 30px 60px rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.08);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .dark-mode #navbarCollapse {
                background: linear-gradient(145deg, rgba(9, 9, 11, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
                box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            }

            #navbarCollapse .nav-item {
                margin-bottom: 8px;
            }

            #navbarCollapse .nav-link {
                font-family: 'Outfit', 'Poppins', 'Inter', sans-serif !important;
                font-size: 1.15rem !important;
                font-weight: 500 !important;
                letter-spacing: 0.5px !important;
                text-transform: capitalize !important;
                padding: 14px 20px !important;
                border-radius: 16px;
                color: rgba(255, 255, 255, 0.75) !important;
                text-align: center;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
                z-index: 1;
            }

            .dark-mode #navbarCollapse .nav-link {
                color: rgba(255, 255, 255, 0.75) !important;
            }

            #navbarCollapse .nav-link:hover,
            #navbarCollapse .nav-link.active {
                color: #ffffff !important;
                transform: translateY(-2px);
                box-shadow: 0 10px 25px rgba(99, 102, 241, 0.25);
            }

            #navbarCollapse .nav-link::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
                opacity: 0;
                z-index: -1;
                transition: opacity 0.3s ease;
                border-radius: 16px;
            }

            #navbarCollapse .nav-link:hover::before,
            #navbarCollapse .nav-link.active::before {
                opacity: 1;
            }

            #navbarCollapse .social-icon {
                display: flex;
                justify-content: center;
                gap: 20px;
                margin-top: 30px !important;
                padding-top: 25px;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }

            .dark-mode #navbarCollapse .social-icon {
                border-top-color: rgba(255, 255, 255, 0.05);
            }
            
            #navbarCollapse .social-icon .list-inline-item {
                margin: 0;
            }

            #navbarCollapse .social-icon .list-inline-item a {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.05);
                color: rgba(255, 255, 255, 0.8) !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .dark-mode #navbarCollapse .social-icon .list-inline-item a {
                background: rgba(255, 255, 255, 0.03);
            }

            #navbarCollapse .social-icon .list-inline-item a:hover {
                background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
                color: white !important;
                transform: translateY(-4px) scale(1.05);
                border-color: transparent !important;
                box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
            }
        }
        </style>

        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        // Optional: unobserve after showing once
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.15
            });

            const devBlogContent = document.querySelector('.dev-blog-content');
            if (devBlogContent) {
                observer.observe(devBlogContent);
            }

            // Prevent body scrolling when mobile menu is open
            const navbarCollapse = document.getElementById('navbarCollapse');
            if (navbarCollapse) {
                navbarCollapse.addEventListener('show.bs.collapse', function () {
                    document.body.style.overflow = 'hidden';
                });
                navbarCollapse.addEventListener('hide.bs.collapse', function () {
                    document.body.style.overflow = '';
                });

                // Auto-close menu on link click and restore scrolling
                const navLinks = navbarCollapse.querySelectorAll('.nav-link');
                navLinks.forEach(link => {
                    link.addEventListener('click', () => {
                        if (window.innerWidth <= 991 && navbarCollapse.classList.contains('show')) {
                            const toggler = document.querySelector('.navbar-toggler');
                            if (toggler) {
                                toggler.click(); // Triggers hide.bs.collapse natively
                            }
                        }
                    });
                });
            }
        });
        </script>
        <!-- Developer Blog End -->

        <!-- Contact Start -->
        <section class="section pb-0" id="contact">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <div class="section-title premium-section-title">
                            <div class="premium-section-eyebrow">
                                <span class="premium-section-eyebrow-dot"></span>
                                Let's Connect
                            </div>
                            <div class="position-relative">
                                <h4 class="title premium-section-heading mb-4">Contact Me</h4>
                                <div>
                                    <div class="title-box"></div>
                                    <div class="title-line"></div>
                                </div>
                            </div>
                            <p class="text-muted mx-auto para-desc premium-section-desc mt-5 mb-0">Always open to discussing technology, ideas, and opportunities.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row g-4 justify-content-center">
                    <div class="col-md-4">
                        <div class="contact-premium-card">
                            <div class="contact-icon-wrap">
                                <div class="contact-icon-glow"></div>
                                <div class="contact-icon-circle contact-icon-phone">
                                    <i data-feather="phone" class="fea contact-icon-svg"></i>
                                </div>
                            </div>
                            <div class="contact-card-body">
                                <h5 class="contact-card-title">Phone</h5>
                                <p class="contact-card-desc">Available for professional discussions.</p>
                                <a href="tel:+918260810983" class="contact-card-link">+91 8260810983</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="contact-premium-card">
                            <div class="contact-icon-wrap">
                                <div class="contact-icon-glow"></div>
                                <div class="contact-icon-circle contact-icon-email">
                                    <i data-feather="mail" class="fea contact-icon-svg"></i>
                                </div>
                            </div>
                            <div class="contact-card-body">
                                <h5 class="contact-card-title">Email</h5>
                                <p class="contact-card-desc">Let's connect through email.</p>
                                <a href="mailto:priyansunayak09@gmail.com" class="contact-card-link">priyansunayak09@gmail.com</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="contact-premium-card">
                            <div class="contact-icon-wrap">
                                <div class="contact-icon-glow"></div>
                                <div class="contact-icon-circle contact-icon-location">
                                    <i data-feather="map-pin" class="fea contact-icon-svg"></i>
                                </div>
                            </div>
                            <div class="contact-card-body">
                                <h5 class="contact-card-title">Location</h5>
                                <p class="contact-card-desc">Bhubaneswar, Odisha</p>
                                <a href="https://maps.google.com/?q=Bhubaneswar,Odisha" target="_blank" rel="noopener" class="contact-card-link">View on Google Maps</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--end container-->
        </section><!--end section-->

        <section class="section pt-5 mt-3 contact-form-section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="custom-form contact-glass-form mb-sm-30">
                            <form id="contactForm" action="{{ route('visitors') }}" method="post" class="contact-glass-panel">
                                @csrf
                                <p id="error-msg"></p>
                                <div id="simple-msg"></div>
                                <div class="row align-items-stretch">
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-6">
                                                <div class="form-group">
                                                    <input name="name" id="name" type="text" class="form-control contact-glass-field" placeholder="First Name :">
                                                    <span class="field-error" data-field="name"></span>
                                                </div>
                                            </div><!--end col-->
                                            <div class="col-lg-12 col-md-6">
                                                <div class="form-group">
                                                    <input name="email" id="email" type="email" class="form-control contact-glass-field" placeholder="Your email :">
                                                    <span class="field-error" data-field="email"></span>
                                                </div> 
                                            </div><!--end col-->
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <input name="subject" id="subject" class="form-control contact-glass-field" placeholder="Your subject :">
                                                    <span class="field-error" data-field="subject"></span>
                                                </div>                                                                               
                                            </div><!--end col-->
                                        </div><!--end row-->
                                    </div><!--end col-->

                                    <div class="col-lg-6">
                                        <div class="form-group h-100">
                                            <textarea name="message" id="message" rows="4" class="form-control contact-glass-field contact-message-field" placeholder="Your Message :"></textarea>
                                            <span class="field-error" data-field="message"></span>
                                        </div>
                                    </div><!--end col-->

                                    <div class="col-sm-12 text-end">
                                        <button type="submit" id="submit" name="send" class="btn btn-primary contact-glass-submit">
                                            <span id="btnText">
                                                Send Message 
                                                <i data-feather="send" class="fea icon-sm ms-1"></i>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div><!--end custom-form-->
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- Contact End -->

        <!-------- From Success Modal --------------------->
        <div class="modal fade success-modal" id="successModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content">

                    <div class="modal-body text-center p-4 p-sm-5">

                        <div class="success-checkmark-wrap">
                            <div class="success-checkmark">
                                <svg class="success-checkmark-svg" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
                                    <circle class="success-checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
                                    <path class="success-checkmark-path" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                                </svg>
                            </div>
                        </div>

                        <h3 class="success-modal-title">Thank You!</h3>

                        <p id="successMessage" class="success-modal-message">
                            Your message has been sent successfully.
                        </p>

                        <button class="btn btn-primary success-modal-btn"
                                data-bs-dismiss="modal">
                            <span class="success-btn-label">Got it</span>
                            <span class="success-btn-icon">😊</span>
                        </button>

                    </div>

                </div>
            </div>
        </div>
        <style>
            .success-modal .modal-content {
                border: 0;
                border-radius: 28px;
                background:
                    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,255,0.92));
                box-shadow:
                    0 30px 80px rgba(15,23,42,0.18),
                    0 0 0 1px rgba(47,137,252,0.08);
                overflow: hidden;
                position: relative;
            }

            .success-modal .modal-content::before {
                content: "";
                position: absolute;
                top: -6rem;
                right: -5rem;
                width: 14rem;
                height: 14rem;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(47,137,252,0.12), transparent 70%);
                pointer-events: none;
            }

            .success-modal .modal-content::after {
                content: "";
                position: absolute;
                left: -4rem;
                bottom: -4rem;
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(255,111,79,0.1), transparent 70%);
                pointer-events: none;
            }

            .success-modal .modal-body {
                position: relative;
                z-index: 1;
            }

            /* ── Animated checkmark ── */
            .success-checkmark-wrap {
                width: 80px;
                height: 80px;
                margin: 0 auto 1.25rem;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, rgba(47,137,252,0.1), rgba(255,111,79,0.08));
                box-shadow: 0 0 0 6px rgba(47,137,252,0.06);
                position: relative;
            }

            .success-checkmark {
                width: 52px;
                height: 52px;
            }

            .success-checkmark-svg {
                width: 52px;
                height: 52px;
                display: block;
            }

            .success-checkmark-circle {
                stroke: #2f89fc;
                stroke-width: 2;
                stroke-dasharray: 166;
                stroke-dashoffset: 166;
                animation: successCircle 0.6s ease-in-out forwards;
            }

            .success-checkmark-path {
                stroke: #2f89fc;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 48;
                stroke-dashoffset: 48;
                animation: successCheck 0.4s 0.5s ease-in-out forwards;
            }

            @keyframes successCircle {
                to { stroke-dashoffset: 0; }
            }

            @keyframes successCheck {
                to { stroke-dashoffset: 0; }
            }

            /* ── Title & message ── */
            .success-modal-title {
                font-size: 1.6rem;
                font-weight: 800;
                color: #172033;
                letter-spacing: -0.03em;
                margin-bottom: 0.6rem;
            }

            .success-modal-message {
                font-size: 0.95rem;
                color: #5f6f89;
                line-height: 1.7;
                margin: 0 auto 1.5rem;
                max-width: 22rem;
            }

            /* ── Close button ── */
            .success-modal-btn {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.7rem 1.6rem;
                border: 0;
                border-radius: 999px;
                background: linear-gradient(135deg, #2f89fc, #ff6f4f);
                box-shadow: 0 12px 30px rgba(47,137,252,0.28);
                font-weight: 700;
                font-size: 0.92rem;
                color: #fff;
                transition: transform 0.25s ease, box-shadow 0.25s ease;
            }

            .success-modal-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 16px 38px rgba(47,137,252,0.34);
            }

            .success-btn-icon {
                font-size: 1.1rem;
                line-height: 1;
                transition: transform 0.25s ease;
            }

            .success-modal-btn:hover .success-btn-icon {
                transform: translateX(3px);
            }

            .field-error {
                color: #dc3545;
                font-size: 0.8rem;
                margin-top: 4px;
                display: none;
            }
            .contact-glass-field.is-invalid {
                border-color: #dc3545 !important;
                box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
            }

            /* ══════════════════════════════════════════════
               PREMIUM PROJECT CARDS
               ══════════════════════════════════════════════ */

            /* ── Slide & Card base ── */
            .project-slide {
                height: auto;
            }
            .item-box.portfolio-box {
                display: flex;
                flex-direction: column;
                min-height: 445px;
                height: 100%;
                border-radius: 14px;
                overflow: hidden;
                background: #fff;
                transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                            box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            /* ── Fixed image area ── */
            .portfolio-box .portfolio-box-img {
                flex-shrink: 0;
                height: 240px !important;
                overflow: hidden;
            }
            .portfolio-box .portfolio-box-img img {
                width: 100% !important;
                height: 240px !important;
                object-fit: cover !important;
                transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                            filter 0.55s ease;
            }

            /* ── Gradient overlay (instead of solid dark) ── */
            .portfolio-box .portfolio-box-img .overlay-work {
                background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
                opacity: 0;
                transition: opacity 0.4s ease;
            }

            /* ── Content area: flex column pushes tech-stack to bottom ── */
            .portfolio-box .gallary-title {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                padding: 1.2rem 1.25rem 1rem;
                background: #fff;
            }

            /* ── Title row: name + GitHub icon ── */
            .portfolio-box .project-title-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
                margin-bottom: 0.4rem;
            }

            /* ── Title: max 2 lines ── */
            .portfolio-box .gallary-title .title {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                font-size: 1.05rem;
                font-weight: 600;
                line-height: 1.45;
                color: #161c2d;
            }

            /* ── GitHub icon ── */
            .portfolio-box .project-github-link {
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 8px;
                color: #9ca3af;
                text-decoration: none;
                transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
            }
            .portfolio-box .project-github-link:hover {
                background: #f3f4f6;
                color: #161c2d;
                transform: scale(1.12);
            }

            /* ── Description: max 3 lines ── */
            .portfolio-box .project-description {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                font-size: 0.875rem;
                line-height: 1.6;
                color: #6b7280;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            /* ── Tech stack: pinned to bottom via margin-top:auto ── */
            .portfolio-box .project-tech-stack {
                display: flex;
                flex-wrap: wrap;
                gap: 0.35rem;
                margin-top: auto;
                padding-top: 0.85rem;
            }

            .portfolio-box .project-tech-tag {
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                padding: 0.2rem 0.65rem;
                border-radius: 999px;
                font-size: 0.72rem;
                font-weight: 500;
                letter-spacing: 0.01em;
                line-height: 1.2;
                min-height: 1.6em;
                background: #f3f4f6;
                color: #4b5563;
                transition: filter 0.25s ease, transform 0.25s ease;
            }
            .portfolio-box .project-tech-tag i {
                display: inline-block;
                font-size: 0.68rem;
                line-height: 1;
            }

            /* ── Hover effects ── */
            .portfolio-box:hover {
                transform: translateY(-8px);
                box-shadow: 0 22px 48px rgba(0, 0, 0, 0.07),
                            0 8px 16px rgba(0, 0, 0, 0.04) !important;
            }
            .portfolio-box:hover .portfolio-box-img img {
                transform: scale(1.08);
                filter: brightness(1.02);
            }
            .portfolio-box:hover .portfolio-box-img .overlay-work {
                opacity: 1;
            }
            .portfolio-box:hover .portfolio-box-img .overlay-work .work-content .work-icon {
                transform: translateY(0);
            }
            .portfolio-box:hover .project-tech-tag {
                filter: brightness(0.97);
                transform: translateY(-1px);
            }

            /* ── Remove old rotate+opacity on image hover ── */
            .portfolio-box:hover .portfolio-box-img img {
                transform: scale(1.08) !important;
                opacity: 1 !important;
            }

            /* ══════════════════════════════════════════════
               CERTIFICATIONS
               ══════════════════════════════════════════════ */

            /* ── Premium section title enhancements ── */
            .cert-section-title {
                position: relative;
                isolation: isolate;
                padding: 3rem 2rem;
                border-radius: 24px;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                overflow: hidden;
            }

            /* Decorative glow orbs behind heading */
            .cert-title-glow {
                position: absolute;
                width: 320px;
                height: 320px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%);
                top: -160px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 0;
                animation: pulseGlow 8s ease-in-out infinite;
            }
            .cert-title-glow-2 {
                position: absolute;
                width: 320px;
                height: 320px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%);
                top: auto;
                bottom: -60px;
                left: 30%;
                transform: none;
                z-index: 0;
                animation: pulseGlow 8s ease-in-out infinite reverse;
            }

            @keyframes pulseGlow {
                0%, 100% { opacity: 0.5; transform: scale(1); }
                50% { opacity: 0.8; transform: scale(1.2); }
            }

            /* ── Eyebrow: glass pill with gradient border ── */
            .cert-eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                padding: 0.35rem 1rem 0.35rem 0.75rem;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.12);
                font-size: 0.78rem;
                font-weight: 600;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: #4338ca;
                position: relative;
                z-index: 1;
            }
            .cert-eyebrow::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 999px;
                padding: 1px;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(75, 155, 229, 0.15));
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
            }
            .cert-eyebrow-icon {
                font-size: 1rem;
                color: rgba(99, 102, 241, 0.7);
            }
            .cert-eyebrow-dot {
                display: none;
            }

            /* ── Heading: gradient text ── */
            .cert-heading {
                background: linear-gradient(135deg, #312e81 0%, #6366f1 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-size: 2.8rem;
                font-weight: 700;
                text-shadow: 0 2px 4px rgba(0,0,0,0.2);
                position: relative;
                z-index: 1;
            }

            /* ── Divider: gradient lines + shimmer diamond ── */
            .cert-title-divider {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.6rem;
                position: relative;
                z-index: 1;
                margin-top: -0.5rem;
            }
            .cert-divider-line {
                display: block;
                width: 48px;
                height: 2px;
                border-radius: 2px;
                background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
            }
            .cert-divider-diamond {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background: rgba(99, 102, 241, 0.12);
                border: 1px solid rgba(99, 102, 241, 0.2);
                color: rgba(99, 102, 241, 0.5);
                font-size: 0.85rem;
                transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
            }
            .cert-section-title:hover .cert-divider-diamond {
                transform: rotate(180deg) scale(1.1);
                background: rgba(99, 102, 241, 0.2);
                box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
            }

            /* ── Description ── */
            .cert-desc {
                position: relative;
                z-index: 1;
            }

            @media (max-width: 768px) {
                .cert-heading {
                    font-size: 1.6rem;
                }
                .cert-title-glow {
                    width: 200px;
                    height: 200px;
                    top: -40px;
                }
                .cert-title-glow-2 {
                    width: 160px;
                    height: 160px;
                    bottom: -30px;
                }
                .cert-divider-line {
                    width: 32px;
                }
            }

            /* ── Carousel shell ── */
            .cert-carousel-shell {
                position: relative;
            }

            /* ── TNS slider: equal slide heights ── */
            #cert-carousel.tns-slider {
                height: 100%;
            }
            #cert-carousel.tns-slider > .tns-item {
                height: 100%;
                vertical-align: top;
            }

            /* ── Slide wrapper (TNS wraps each child) ── */
            .cert-slide {
                height: auto;
            }

            /* ── Glass card base ── */
            .cert-card {
                position: relative;
                background: rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border-radius: 18px;
                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02);
                transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                            box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                height: 100%;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                opacity: 0;
                transform: translateY(30px);
            }
            #certifications.is-visible .cert-card {
                opacity: 1;
                transform: translateY(0);
                transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .cert-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
            }

            /* ── Stagger delays for scroll animation ── */
            #certifications.is-visible .cert-slide:nth-child(1) .cert-card { transition-delay: 0s; }
            #certifications.is-visible .cert-slide:nth-child(2) .cert-card { transition-delay: 0.1s; }
            #certifications.is-visible .cert-slide:nth-child(3) .cert-card { transition-delay: 0.2s; }
            #certifications.is-visible .cert-slide:nth-child(4) .cert-card { transition-delay: 0.3s; }

            /* ── Gradient border (via pseudo mask) ── */
            .cert-card::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 18px;
                padding: 1px;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
                z-index: 1;
                transition: opacity 0.35s ease;
            }
            .cert-card:hover::before {
                opacity: 0.7;
            }

            /* ── Image / Preview area ── */
            .cert-card-image {
                position: relative;
                overflow: hidden;
                flex-shrink: 0;
            }
            .cert-img-placeholder {
                width: 100%;
                aspect-ratio: 16 / 10;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                color: #fff;
                font-weight: 600;
                font-size: 0.85rem;
                letter-spacing: 0.02em;
                position: relative;
                transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                will-change: transform;
            }
            .cert-img-placeholder i {
                font-size: 2.5rem;
                opacity: 0.9;
                filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
            }
            .cert-img-placeholder span {
                opacity: 0.8;
                text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
            }
            .cert-img-placeholder::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
                pointer-events: none;
            }
            .cert-card:hover .cert-img-placeholder {
                transform: scale(1.06);
            }

            /* ── Card body ── */
            .cert-card-body {
                padding: 1.25rem 1.25rem 1.5rem;
                display: flex;
                flex-direction: column;
                flex: 1;
                position: relative;
                z-index: 2;
            }

            /* ── Verification badge ── */
            .cert-card-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                font-size: 0.68rem;
                font-weight: 600;
                color: #10b981;
                background: rgba(16, 185, 129, 0.1);
                border: 1px solid rgba(16, 185, 129, 0.2);
                padding: 0.2rem 0.6rem;
                border-radius: 999px;
                margin-bottom: 0.6rem;
                width: fit-content;
                letter-spacing: 0.01em;
            }
            .cert-card-badge i {
                font-size: 0.7rem;
            }

            /* ── Title ── */
            .cert-card-title {
                font-size: 1rem;
                font-weight: 700;
                color: #1f2937;
                line-height: 1.35;
                margin-bottom: 0.5rem;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                min-height: calc(1rem * 1.35 * 2);
            }

            /* ── Issuer row ── */
            .cert-card-issuer {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                margin-bottom: 0.3rem;
            }
            .cert-issuer-logo {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 0.65rem;
                flex-shrink: 0;
            }
            .cert-issuer-name {
                font-size: 0.8rem;
                color: #6b7280;
                font-weight: 500;
                line-height: 1.3;
            }

            /* ── Date ── */
            .cert-card-date {
                font-size: 0.72rem;
                color: #9ca3af;
                margin-bottom: 1rem;
                display: inline-block;
            }

            /* ── View button ── */
            .cert-card-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.4rem;
                margin-top: auto;
                padding: 0.55rem 1.1rem;
                border-radius: 10px;
                border: 0;
                font-size: 0.78rem;
                font-weight: 600;
                color: #fff;
                background: linear-gradient(135deg, #4b9be5, #6366f1);
                cursor: pointer;
                transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
                box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
                text-decoration: none;
                outline: none;
            }
            .cert-card-btn:hover {
                transform: translateY(-2px) scale(1.02);
                box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
            }
            .cert-card-btn:active {
                transform: scale(0.97);
            }

            /* ── Carousel arrow controls ── */
            .cert-carousel-controls {
                display: flex;
                justify-content: center;
                gap: 0.75rem;
                margin-top: 2rem;
            }
            .cert-carousel-arrow {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid rgba(0, 0, 0, 0.08);
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                color: #4b5563;
                font-size: 1.25rem;
                cursor: pointer;
                transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                outline: none;
                -webkit-tap-highlight-color: transparent;
            }
            .cert-carousel-arrow:hover {
                transform: translateY(-2px);
                background: #fff;
                border-color: rgba(99, 102, 241, 0.3);
                box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
                color: #6366f1;
            }
            .cert-carousel-arrow:active {
                transform: scale(0.94);
            }
            .cert-carousel-arrow:focus-visible {
                outline: 2px solid #6366f1;
                outline-offset: 2px;
            }

            /* ── Premium modal for certificate detail ── */
            .cert-modal .modal-content {
                background: rgba(255, 255, 255, 0.92);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.3);
                border-radius: 20px;
                box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
                overflow: hidden;
            }
            .cert-modal .modal-header {
                border: 0;
                padding: 1.25rem 1.5rem 0;
            }
            .cert-modal .modal-header .btn-close {
                background: rgba(0, 0, 0, 0.06);
                border-radius: 50%;
                width: 36px;
                height: 36px;
                opacity: 1;
                transition: background 0.2s ease;
                position: relative;
            }
            .cert-modal .modal-header .btn-close:hover {
                background: rgba(0, 0, 0, 0.12);
            }
            .cert-modal .modal-body {
                padding: 1.5rem;
            }
            .cert-modal-preview {
                width: 100%;
                aspect-ratio: 16 / 10;
                border-radius: 14px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 600;
                font-size: 1rem;
                gap: 0.75rem;
                margin-bottom: 1.5rem;
                position: relative;
                overflow: hidden;
            }
            .cert-modal-preview i {
                font-size: 3.5rem;
                opacity: 0.9;
                filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.2));
            }
            .cert-modal-preview span {
                opacity: 0.8;
                text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
            }
            .cert-modal-preview::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
                pointer-events: none;
            }
            .cert-modal-title {
                font-size: 1.35rem;
                font-weight: 800;
                color: #1f2937;
                margin-bottom: 0.25rem;
                letter-spacing: -0.01em;
            }
            .cert-modal-meta {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                flex-wrap: wrap;
                margin-bottom: 0.15rem;
            }
            .cert-modal-meta .cert-issuer-logo {
                width: 28px;
                height: 28px;
                font-size: 0.75rem;
            }
            .cert-modal-meta .cert-issuer-name {
                font-size: 0.9rem;
                font-weight: 600;
                color: #4b5563;
            }
            .cert-modal-date {
                font-size: 0.8rem;
                color: #9ca3af;
                margin-bottom: 0.5rem;
            }
            .cert-modal-credential {
                font-size: 0.78rem;
                color: #6b7280;
                background: rgba(0, 0, 0, 0.03);
                padding: 0.35rem 0.75rem;
                border-radius: 8px;
                display: inline-block;
                margin-bottom: 1rem;
                font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
                letter-spacing: 0.01em;
            }
            .cert-modal-credential strong {
                color: #374151;
                font-weight: 600;
            }
            .cert-modal-skills-label {
                font-size: 0.8rem;
                font-weight: 600;
                color: #374151;
                margin-bottom: 0.4rem;
            }
            .cert-modal-skills {
                display: flex;
                flex-wrap: wrap;
                gap: 0.4rem;
                margin-bottom: 1.25rem;
            }
            .cert-modal-skill {
                font-size: 0.72rem;
                font-weight: 500;
                color: #6366f1;
                background: rgba(99, 102, 241, 0.08);
                border: 1px solid rgba(99, 102, 241, 0.15);
                padding: 0.25rem 0.65rem;
                border-radius: 999px;
            }
            .cert-modal-actions {
                display: flex;
                gap: 0.6rem;
                flex-wrap: wrap;
            }
            .cert-modal-btn {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                padding: 0.6rem 1.25rem;
                border-radius: 10px;
                border: 0;
                font-size: 0.82rem;
                font-weight: 600;
                cursor: pointer;
                transition: transform 0.25s ease, box-shadow 0.25s ease;
                text-decoration: none;
            }
            .cert-modal-btn:hover {
                transform: translateY(-2px);
            }
            .cert-modal-btn-primary {
                background: linear-gradient(135deg, #4b9be5, #6366f1);
                color: #fff;
                box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
            }
            .cert-modal-btn-primary:hover {
                box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
            }
            .cert-modal-btn-outline {
                background: transparent;
                color: #6366f1;
                border: 1px solid rgba(99, 102, 241, 0.3);
            }
            .cert-modal-btn-outline:hover {
                background: rgba(99, 102, 241, 0.06);
                border-color: rgba(99, 102, 241, 0.5);
            }

            /* ── Responsive ── */
            @media (max-width: 768px) {
                .cert-card-image {
                    max-height: 160px;
                }
                .cert-card-body {
                    padding: 1rem 1rem 1.25rem;
                }
                .cert-card-title {
                    font-size: 0.92rem;
                    min-height: calc(0.92rem * 1.35 * 2);
                }
                .cert-carousel-arrow {
                    width: 40px;
                    height: 40px;
                    font-size: 1.1rem;
                }
                .cert-modal-preview {
                    aspect-ratio: 16 / 9;
                }
                .cert-modal-preview i {
                    font-size: 2.5rem;
                }
                .cert-modal-title {
                    font-size: 1.15rem;
                }
                .cert-modal .modal-body {
                    padding: 1.25rem;
                }
            }

            @media (max-width: 576px) {
                .cert-img-placeholder {
                    aspect-ratio: 16 / 9;
                }
                .cert-img-placeholder i {
                    font-size: 2rem;
                }
                .cert-card-badge {
                    font-size: 0.62rem;
                }
                .cert-card-btn {
                    font-size: 0.74rem;
                    padding: 0.5rem 1rem;
                }
                .cert-carousel-controls {
                    margin-top: 1.25rem;
                    gap: 0.6rem;
                }
                .cert-carousel-arrow {
                    width: 36px;
                    height: 36px;
                    font-size: 1rem;
                }
            }

            /* ══════════════════════════════════════════════
               FREELANCE CTA
               ══════════════════════════════════════════════ */

            /* ── Background image + dark overlay ── */
            .container-fluid.mt-100.mt-60 .jarallax {
                position: relative;
                isolation: isolate;
                overflow: hidden;
            }
            .container-fluid.mt-100.mt-60 .jarallax::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 0;
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.72) 0%,
                    rgba(0, 0, 0, 0.65) 40%,
                    rgba(0, 0, 0, 0.58) 100%
                );
                border-radius: inherit;
                pointer-events: none;
            }
            .container-fluid.mt-100.mt-60 .jarallax > .container {
                position: relative;
                z-index: 1;
            }

            /* ── Glass card container ── */
            .freelance-cta-card {
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
                border: 1px solid rgba(255, 255, 255, 0.10);
                border-radius: 24px;
                padding: 3rem 2.5rem;
                box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
            }

            /* ── "Open to Work" badge ── */
            .freelance-badge {
                display: inline-block;
                padding: 0.35rem 1.1rem;
                border-radius: 999px;
                font-size: 0.7rem;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                background: linear-gradient(135deg, rgba(75, 155, 229, 0.35), rgba(99, 102, 241, 0.25));
                color: #fff;
                border: 1px solid rgba(255, 255, 255, 0.18);
                margin-bottom: 1.25rem;
                box-shadow: 0 0 20px rgba(75, 155, 229, 0.12);
            }

            /* ── Heading ── */
            .freelance-heading {
                font-size: 1.85rem;
                font-weight: 800;
                letter-spacing: -0.025em;
                line-height: 1.2;
                color: #ffffff;
                margin-bottom: 0.85rem;
                text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
            }

            /* ── Description ── */
            .freelance-desc {
                font-size: 0.95rem;
                font-weight: 400;
                line-height: 1.75;
                color: #e5e7eb;
                max-width: 580px;
                margin: 0 auto;
                text-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
            }

            /* ══════════════════════════════════════════════
               PREMIUM CONTACT CARDS (Phone / Email / Location)
               ══════════════════════════════════════════════ */

            /* ── Card base ── */
            .contact-premium-card {
                background: #fff;
                border-radius: 20px;
                padding: 2.5rem 1.5rem 2rem;
                text-align: center;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02);
                border: 1px solid rgba(0, 0, 0, 0.04);
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                            box-shadow 0.3s ease,
                            border-color 0.3s ease;
                position: relative;
                overflow: hidden;
            }
            .contact-premium-card::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 20px;
                padding: 1px;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(75, 155, 229, 0.05));
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
                transition: opacity 0.3s ease;
            }
            .contact-premium-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 20px 60px rgba(99, 102, 241, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
                border-color: rgba(99, 102, 241, 0.1);
            }
            .contact-premium-card:hover::before {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(75, 155, 229, 0.12));
            }

            /* ── Icon wrapper (centers glow + circle) ── */
            .contact-icon-wrap {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100px;
                height: 90px;
                margin-bottom: 1.25rem;
                flex-shrink: 0;
            }

            /* ── Radial glow behind icon ── */
            .contact-icon-glow {
                position: absolute;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                pointer-events: none;
                animation: contactGlowPulse 3s ease-in-out infinite;
            }
            .contact-premium-card:nth-child(1) .contact-icon-glow {
                background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
            }
            .contact-premium-card:nth-child(2) .contact-icon-glow {
                background: radial-gradient(circle, rgba(16, 185, 129, 0.15), transparent 70%);
                animation-delay: 0.5s;
            }
            .contact-premium-card:nth-child(3) .contact-icon-glow {
                background: radial-gradient(circle, rgba(245, 158, 11, 0.15), transparent 70%);
                animation-delay: 1s;
            }
            @keyframes contactGlowPulse {
                0%, 100% { opacity: 0.6; transform: scale(1); }
                50% { opacity: 1; transform: scale(1.15); }
            }

            /* ── Glassmorphism icon circle ── */
            .contact-icon-circle {
                position: relative;
                width: 72px;
                height: 72px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.08);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
                z-index: 1;
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                            box-shadow 0.3s ease;
                animation: contactFloat 2.5s ease-in-out infinite;
            }
            .contact-premium-card:nth-child(2) .contact-icon-circle {
                animation-delay: 0.5s;
            }
            .contact-premium-card:nth-child(3) .contact-icon-circle {
                animation-delay: 1s;
            }

            /* Gradient border on circle */
            .contact-icon-circle::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 50%;
                padding: 1px;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.05));
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
                transition: opacity 0.3s ease;
            }
            .contact-icon-email .contact-icon-circle::before {
                background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.05));
            }
            .contact-icon-location .contact-icon-circle::before {
                background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.05));
            }

            @keyframes contactFloat {
                0%, 100% { transform: translateY(-6px); }
                50% { transform: translateY(6px); }
            }

            /* ── Feather icon SVG styling ── */
            .contact-icon-svg {
                width: 28px;
                height: 28px;
                stroke: #6366f1;
                stroke-width: 1.8;
                fill: none;
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .contact-icon-email .contact-icon-svg {
                stroke: #10b981;
            }
            .contact-icon-location .contact-icon-svg {
                stroke: #f59e0b;
            }

            /* ── Hover: icon effects ── */
            .contact-premium-card:hover .contact-icon-circle {
                transform: scale(1.1) rotate(8deg);
                box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
            }
            .contact-premium-card:hover .contact-icon-email .contact-icon-circle {
                box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
            }
            .contact-premium-card:hover .contact-icon-location .contact-icon-circle {
                box-shadow: 0 12px 40px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
            }
            .contact-premium-card:hover .contact-icon-circle::before {
                opacity: 0.6;
            }
            .contact-premium-card:hover .contact-icon-svg {
                transform: rotate(8deg);
            }

            /* ── Card body ── */
            .contact-card-body {
                display: flex;
                flex-direction: column;
                align-items: center;
                flex: 1;
            }
            .contact-card-title {
                font-size: 0.8rem;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: #6b7280;
                margin-bottom: 0.4rem;
            }
            .contact-card-desc {
                font-size: 0.82rem;
                color: #9ca3af;
                margin-bottom: 0.75rem;
                line-height: 1.5;
            }
            .contact-card-link {
                font-size: 0.9rem;
                font-weight: 600;
                color: #6366f1;
                text-decoration: none;
                transition: color 0.25s ease;
                word-break: break-all;
            }
            .contact-card-link:hover {
                color: #4f46e5;
            }

            /* ── Responsive ── */
            @media (max-width: 768px) {
                .contact-premium-card {
                    padding: 2rem 1.25rem 1.75rem;
                }
                .contact-icon-wrap {
                    width: 80px;
                    height: 76px;
                    margin-bottom: 1rem;
                }
                .contact-icon-circle {
                    width: 60px;
                    height: 60px;
                }
                .contact-icon-glow {
                    width: 80px;
                    height: 80px;
                }
                .contact-icon-svg {
                    width: 24px;
                    height: 24px;
                }
                .contact-card-link {
                    font-size: 0.82rem;
                }
            }

            @media (max-width: 576px) {
                .contact-premium-card {
                    padding: 1.75rem 1rem 1.5rem;
                }
                .contact-icon-wrap {
                    width: 72px;
                    height: 68px;
                }
                .contact-icon-circle {
                    width: 54px;
                    height: 54px;
                }
                .contact-icon-glow {
                    width: 72px;
                    height: 72px;
                }
                .contact-icon-svg {
                    width: 22px;
                    height: 22px;
                }
            }

            /* ══════════════════════════════════════════════
               SOCIAL CONTACT MENU
               ══════════════════════════════════════════════ */

            .social-contact-wrap {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.75rem;
                margin-top: 1.5rem;
                overflow: visible;
            }

            /* ── Toggle Button ── */
            .social-toggle {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.7rem 2.2rem;
                border-radius: 999px;
                font-weight: 600;
                font-size: 0.9rem;
                border: 0;
                color: #fff;
                cursor: pointer;
                background: linear-gradient(135deg, #4b9be5, #6366f1);
                box-shadow: 0 8px 28px rgba(75, 155, 229, 0.4);
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                            box-shadow 0.3s ease;
                outline: none;
                position: relative;
                z-index: 2;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
            }
            .social-toggle:hover {
                transform: translateY(-2px) scale(1.02);
                box-shadow: 0 14px 36px rgba(75, 155, 229, 0.55);
            }
            .social-toggle:focus-visible {
                outline: 2px solid #fff;
                outline-offset: 3px;
            }
            .social-toggle:active {
                transform: scale(0.97);
            }
            .social-toggle.is-open {
                transform: scale(0.96);
                box-shadow: 0 4px 16px rgba(75, 155, 229, 0.3);
            }
            .social-toggle.is-open:hover {
                transform: scale(0.97);
            }

            .social-toggle-text {
                line-height: 1;
            }
            .social-toggle-icon {
                font-size: 1.1rem;
                line-height: 1;
                transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .social-toggle.is-open .social-toggle-icon {
                transform: rotate(180deg);
            }

            /* ── Social Menu ── */
            .social-menu {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-8px);
                transition: opacity 0.3s ease,
                            transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                            visibility 0s linear 0.35s;
                pointer-events: none;
                overflow: visible;
            }
            .social-menu.is-visible {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                transition: opacity 0.3s ease 0.05s,
                            transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s,
                            visibility 0s linear 0s;
                pointer-events: auto;
            }

            /* ── Social Link (icon button) ── */
            .social-link {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 42px;
                height: 42px;
                border-radius: 50%;
                color: #fff;
                font-size: 1.05rem;
                text-decoration: none;
                background: rgba(255, 255, 255, 0.08);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.12);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                opacity: 0;
                transform: translateY(12px) scale(0.85);
                transition: opacity 0.3s ease,
                            transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                            background 0.25s ease,
                            box-shadow 0.25s ease,
                            border-color 0.25s ease;
                position: relative;
                outline: none;
                -webkit-tap-highlight-color: transparent;
                flex-shrink: 0;
                will-change: transform, opacity;
            }
            .social-link:focus-visible {
                outline: 2px solid #fff;
                outline-offset: 3px;
            }

            .social-menu.is-visible .social-link {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            /* ── Stagger delays entrance ── */
            .social-menu.is-visible .social-link:nth-child(1) { transition-delay: 0.03s; }
            .social-menu.is-visible .social-link:nth-child(2) { transition-delay: 0.08s; }
            .social-menu.is-visible .social-link:nth-child(3) { transition-delay: 0.13s; }
            .social-menu.is-visible .social-link:nth-child(4) { transition-delay: 0.18s; }

            /* ── Reverse stagger on close ── */
            .social-link.is-closing:nth-child(1) { transition-delay: 0.18s; }
            .social-link.is-closing:nth-child(2) { transition-delay: 0.13s; }
            .social-link.is-closing:nth-child(3) { transition-delay: 0.08s; }
            .social-link.is-closing:nth-child(4) { transition-delay: 0.03s; }

            /* ── Hover: only opacity, transform, background, shadow ── */
            .social-link:hover {
                transform: translateY(-4px) scale(1.08) !important;
                z-index: 1;
            }
            .social-link[data-tooltip="Linkedin"]:hover {
                background: rgba(10, 102, 194, 0.4);
                border-color: rgba(10, 102, 194, 0.6);
                box-shadow: 0 0 28px rgba(10, 102, 194, 0.4);
            }
            .social-link[data-tooltip="GitHub"]:hover {
                background: rgba(110, 84, 148, 0.4);
                border-color: rgba(110, 84, 148, 0.6);
                box-shadow: 0 0 28px rgba(110, 84, 148, 0.4);
            }
            .social-link[data-tooltip="Instagram"]:hover {
                background: rgba(225, 48, 108, 0.35);
                border-color: rgba(225, 48, 108, 0.6);
                box-shadow: 0 0 28px rgba(225, 48, 108, 0.4);
            }
            .social-link[data-tooltip="Twitter"]:hover {
                background: rgba(29, 161, 242, 0.4);
                border-color: rgba(29, 161, 242, 0.6);
                box-shadow: 0 0 28px rgba(29, 161, 242, 0.4);
            }

            /* Tooltips removed */

            /* ── Mobile: horizontal layout ── */
            @media (max-width: 576px) {
                .social-menu {
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 0.6rem;
                }
                .social-link {
                    width: 40px;
                    height: 40px;
                    font-size: 1rem;
                }
            }

            /* ── Vertical centering ── */
            .container-fluid.mt-100.mt-60 .jarallax .row {
                min-height: 260px;
                align-items: center;
            }

            @media (max-width: 576px) {
                .freelance-heading {
                    font-size: 1.3rem;
                }
                .freelance-desc {
                    font-size: 0.85rem;
                }
                .freelance-cta-card {
                    padding: 1.75rem 1.25rem;
                }
                .container-fluid.mt-100.mt-60 .jarallax .row {
                    min-height: 220px;
                }
            }

            /* ── Override text-center that was removed ── */
            .portfolio-box .project-title-row,
            .portfolio-box .project-description {
                text-align: left;
            }
            .portfolio-box .project-tech-stack {
                justify-content: flex-start;
            }

            /* ── TNS slider height propagation for equal cards ── */
            #projects-carousel {
                display: flex;
            }
            #projects-carousel.tns-slider {
                display: flex;
                height: auto;
            }
            #projects-carousel.tns-slider > .tns-item {
                display: flex !important;
                height: auto;
                vertical-align: top;
            }

            /* ══════════════════════════════════════════════
               TIMELINE STAR — HOVER POPUP (desktop only)
               ══════════════════════════════════════════════ */
            .timeline-star-wrap {
                position: relative;
                display: inline-block;
                width: 100%;
                text-align: center;
            }

            /* The popup card */
            .timeline-star-popup {
                display: none; /* hidden on mobile by default */
                position: absolute;
                left: 50%;
                bottom: calc(100% + 12px);
                transform: translateX(-50%) translateY(6px) scale(0.94);
                width: 180px;
                background: linear-gradient(135deg,
                    rgba(15, 15, 35, 0.92) 0%,
                    rgba(30, 20, 60, 0.95) 100%);
                border: 1px solid rgba(139, 92, 246, 0.35);
                border-radius: 14px;
                padding: 0.75rem 1rem 0.65rem;
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
                box-shadow:
                    0 0 0 1px rgba(139, 92, 246, 0.12),
                    0 6px 24px rgba(99, 102, 241, 0.22),
                    0 16px 40px rgba(0, 0, 0, 0.35);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                            transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
                z-index: 999;
                text-align: center;
            }

            /* Arrow pointing down */
            .timeline-star-popup::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -8px;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 9px solid transparent;
                border-right: 9px solid transparent;
                border-top: 9px solid rgba(30, 20, 60, 0.95);
            }

            /* Ambient glow blob */
            .tsp-glow {
                position: absolute;
                inset: 0;
                border-radius: 18px;
                background: radial-gradient(ellipse at 50% 0%,
                    rgba(139, 92, 246, 0.18) 0%,
                    transparent 70%);
                pointer-events: none;
            }

            .tsp-inner {
                position: relative;
                z-index: 1;
            }

            /* Rocket emoji */
            .tsp-emoji {
                display: block;
                font-size: 1.3rem;
                margin-bottom: 0.25rem;
                animation: tsp-float 2.8s ease-in-out infinite;
            }
            @keyframes tsp-float {
                0%, 100% { transform: translateY(0); }
                50%       { transform: translateY(-5px); }
            }

            /* Text lines */
            .tsp-line1 {
                margin: 0 0 0.12rem;
                font-size: 0.72rem;
                font-weight: 700;
                letter-spacing: 0.03em;
                background: linear-gradient(90deg, #a78bfa, #818cf8);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                line-height: 1.3;
            }
            .tsp-line2 {
                margin: 0 0 0.5rem;
                font-size: 0.67rem;
                font-weight: 500;
                color: rgba(200, 195, 230, 0.85);
                line-height: 1.4;
            }

            /* Bouncing dots */
            .tsp-dots {
                display: inline-flex;
                gap: 5px;
                align-items: center;
            }
            .tsp-dots span {
                display: inline-block;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: linear-gradient(135deg, #a78bfa, #6366f1);
                animation: tsp-bounce 1.3s ease-in-out infinite;
            }
            .tsp-dots span:nth-child(2) { animation-delay: 0.18s; }
            .tsp-dots span:nth-child(3) { animation-delay: 0.36s; }
            @keyframes tsp-bounce {
                0%, 80%, 100% { transform: translateY(0); opacity: 0.55; }
                40%            { transform: translateY(-5px); opacity: 1; }
            }

            /* Show on desktop hover */
            @media (min-width: 768px) {
                .timeline-star-popup {
                    display: block;
                }
                .timeline-star-wrap:hover .timeline-star-popup,
                #timeline-star-icon:hover ~ .timeline-star-popup {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0) scale(1);
                    pointer-events: auto;
                }
            }
        </style>

        <!-- Footer Start -->
        @include('frontend.layouts.footer')
        <!-- Footer End -->
        
        <!-- Back to top -->
        <a href="#" onclick="topFunction()" class="back-to-top rounded text-center" id="back-to-top"> 
            <i class="mdi mdi-chevron-up d-block"> </i> 
        </a>
        <!-- Back to top -->

        <!-- javascript -->
        <script src="{{ asset('assests/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ asset('assests/js/gumshoe.js') }}"></script>
        <script src="{{ asset('assests/js/parallax.js') }}"></script>
        <!-- SLIDER -->
        <script src="{{ asset('assests/js/tiny-slider.js') }}"></script>
        <!-- Lightbox -->
        <script src="{{ asset('assests/js/tobii.min.js') }}"></script>
        <script src="{{ asset('assests/js/shuffle.min.js') }}"></script>
        <!-- Feather icon -->
        <script src="{{ asset('assests/js/feather.min.js') }}"></script>
        <script src="{{ asset('assests/js/typed.js') }}"></script>
        <!-- Main Js -->
        <script src="{{ asset('assests/js/plugins.init.js') }}"></script>
        <script src="{{ asset('assests/js/app.js') }}"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var navbarCollapse = document.getElementById("navbarCollapse");
                var navbarNav = document.getElementById("navbar-navlist");

                if (!navbarCollapse || !navbarNav || typeof bootstrap === "undefined") {
                    return;
                }

                navbarNav.querySelectorAll('a.nav-link[href^="#"]').forEach(function (link) {
                    link.addEventListener("click", function () {
                        if (!navbarCollapse.classList.contains("show")) {
                            return;
                        }

                        bootstrap.Collapse.getOrCreateInstance(navbarCollapse).hide();
                    });
                });
            });

            document.addEventListener("DOMContentLoaded", function () {
                var projectsCarousel = document.getElementById("projects-carousel");
                var projectsControls = document.getElementById("projects-carousel-controls");

                if (!projectsCarousel || !projectsControls || typeof tns !== "function") {
                    return;
                }

                tns({
                    container: "#projects-carousel",
                    items: 1,
                    slideBy: 1,
                    gutter: 20,
                    controls: true,
                    controlsContainer: "#projects-carousel-controls",
                    nav: false,
                    mouseDrag: true,
                    loop: true,
                    autoplay: true,
                    autoplayButtonOutput: false,
                    autoplayTimeout: 3500,
                    speed: 500,
                    responsive: {
                        768: {
                            items: 2,
                            gutter: 24
                        },
                        992: {
                            items: 3,
                            gutter: 24
                        }
                    }
                });
            });

            document.addEventListener("DOMContentLoaded", function () {
                var skillsSection = document.getElementById("skills");
                if (!skillsSection) return;

                var filterButtons = Array.prototype.slice.call(
                    skillsSection.querySelectorAll("[data-skill-filter]")
                );
                var indicator = document.getElementById("skillsIndicator");
                var pillList = document.querySelector(".skills-pill-list");
                var modalEl = document.getElementById("skillsModal");
                var modalBody = document.getElementById("skillsModalBody");
                var modalGrid = document.getElementById("skillsModalGrid");
                var modalIcon = document.getElementById("skillsModalIcon");
                var modalTitle = document.getElementById("skillsModalTitle");
                var modalDesc = document.getElementById("skillsModalDesc");
                var templateContainer = document.querySelector(".skills-templates");

                var categoryData = {
                    all:      { icon: "mdi-view-grid",    title: "All Skills",    desc: "Complete overview of my technical toolkit." },
                    frontend: { icon: "mdi-monitor",      title: "Frontend",      desc: "Crafting pixel-perfect, responsive interfaces with modern web technologies." },
                    backend:  { icon: "mdi-server",       title: "Backend",       desc: "Building robust server-side logic, APIs, and scalable architectures." },
                    database: { icon: "mdi-database",     title: "Database",      desc: "Storing, querying, and managing data efficiently across applications." },
                    tools:    { icon: "mdi-tools",        title: "Tools & Workflow", desc: "Streamlining development with modern utilities and version control." }
                };

                if (!filterButtons.length || !modalEl || !templateContainer) return;

                var modalInstance = null;

                function moveIndicator(activeBtn) {
                    if (!indicator || !pillList || !activeBtn) return;
                    var pillRect = activeBtn.getBoundingClientRect();
                    var listRect = pillList.getBoundingClientRect();
                    var offsetLeft = pillRect.left - listRect.left + pillList.scrollLeft;
                    indicator.style.left = offsetLeft + "px";
                    indicator.style.width = pillRect.width + "px";
                }

                function getGridConfig(cardCount) {
                    var w = window.innerWidth;
                    var maxCols, cardMinWidth;

                    if (w < 481) {
                        maxCols = 1;
                        cardMinWidth = 300;
                    } else if (w < 768) {
                        maxCols = 2;
                        cardMinWidth = 260;
                    } else {
                        maxCols = 4;
                        cardMinWidth = 260;
                    }

                    var cols = Math.min(cardCount, maxCols);
                    if (cols === 0) cols = 1;
                    return { cols: cols, cardMinWidth: cardMinWidth };
                }

                function getGridGap() {
                    if (window.innerWidth < 481) return 12;
                    if (window.innerWidth < 768) return 14;
                    return 20;
                }

                function setGridWidth(cardCount) {
                    if (!modalGrid) return;
                    var config = getGridConfig(cardCount);
                    var gap = getGridGap();
                    var ideal = config.cols * config.cardMinWidth + (config.cols - 1) * gap;
                    var bodyWidth = modalBody ? modalBody.clientWidth : window.innerWidth;
                    if (ideal > bodyWidth) ideal = bodyWidth - 32;
                    if (ideal < 280) ideal = 280;
                    modalGrid.style.setProperty("--grid-cols", config.cols);
                    modalGrid.style.setProperty("--grid-gap", gap + "px");
                    modalGrid.style.setProperty("--grid-max-width", ideal + "px");
                }

                function populateModal(filter, animated) {
                    var data = categoryData[filter] || categoryData.all;
                    if (modalIcon) modalIcon.innerHTML = '<i class="mdi ' + data.icon + '"></i>';
                    if (modalTitle) modalTitle.textContent = data.title;
                    if (modalDesc) modalDesc.textContent = data.desc;

                    if (!modalBody || !modalGrid || !templateContainer) return;

                    var oldCards = Array.prototype.slice.call(modalGrid.querySelectorAll(".skill-card"));
                    var allCards = [];

                    if (filter === "all") {
                        var allGroups = templateContainer.querySelectorAll(".skills-group");
                        allGroups.forEach(function (group) {
                            var cards = group.querySelectorAll(".skill-card");
                            cards.forEach(function (card) {
                                allCards.push(card.cloneNode(true));
                            });
                        });
                    } else {
                        var group = templateContainer.querySelector(
                            '.skills-group[data-skill-group="' + filter + '"]'
                        );
                        if (group) {
                            var cards = group.querySelectorAll(".skill-card");
                            cards.forEach(function (card) {
                                allCards.push(card.cloneNode(true));
                            });
                        }
                    }

                    function doReplace() {
                        modalGrid.innerHTML = "";
                        allCards.forEach(function (card) {
                            card.classList.add("is-entering");
                            modalGrid.appendChild(card);
                        });
                        setGridWidth(allCards.length);
                        requestAnimationFrame(function () {
                            var entering = modalGrid.querySelectorAll(".skill-card.is-entering");
                            entering.forEach(function (card) {
                                card.classList.remove("is-entering");
                                card.classList.add("is-entering-active", "is-visible");
                            });
                        });
                    }

                    if (animated && oldCards.length) {
                        oldCards.forEach(function (card) {
                            card.classList.remove("is-visible", "is-entering", "is-entering-active");
                            card.classList.add("is-leaving");
                        });
                        setTimeout(doReplace, 250);
                    } else {
                        doReplace();
                    }
                }

                function openSkillsModal(filter) {
                    var activeBtn = null;
                    filterButtons.forEach(function (button) {
                        var isActive = button.getAttribute("data-skill-filter") === filter;
                        button.classList.toggle("active", isActive);
                        button.setAttribute("aria-selected", isActive ? "true" : "false");
                        if (isActive) activeBtn = button;
                    });

                    if (activeBtn) {
                        moveIndicator(activeBtn);
                        try { activeBtn.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); } catch (e) {}
                    }

                    var wasOpen = modalInstance && modalEl.classList.contains("show");
                    populateModal(filter, wasOpen);

                    if (!modalInstance) {
                        modalInstance = new bootstrap.Modal(modalEl, { backdrop: true, keyboard: true });
                    }
                    if (!wasOpen) modalInstance.show();
                }

                filterButtons.forEach(function (button) {
                    button.addEventListener("click", function () {
                        openSkillsModal(button.getAttribute("data-skill-filter"));
                    });
                });

                modalEl.addEventListener("shown.bs.modal", function () {
                    if (modalGrid && modalGrid.children.length) {
                        setGridWidth(modalGrid.children.length);
                    }
                });

                modalEl.addEventListener("hidden.bs.modal", function () {
                    if (modalGrid) {
                        modalGrid.innerHTML = "";
                        modalGrid.style.removeProperty("--grid-max-width");
                    }
                });

                window.addEventListener("resize", function () {
                    var active = skillsSection.querySelector(".skills-pill.active");
                    if (active) moveIndicator(active);
                    if (modalGrid && modalGrid.children.length) {
                        setGridWidth(modalGrid.children.length);
                    }
                });

                if (pillList) {
                    pillList.addEventListener("scroll", function () {
                        var active = skillsSection.querySelector(".skills-pill.active");
                        if (active) moveIndicator(active);
                    }, { passive: true });
                }

                moveIndicator(skillsSection.querySelector(".skills-pill.active"));
            });
        </script>

        {{-- ══════════════════════════════════════════════
             PRIYANSU AI CHATBOT WIDGET
             ══════════════════════════════════════════════ --}}

        {{-- ── Floating Launch Button ── --}}
        <button id="cb-launch-btn" type="button" aria-label="Open chat with Priyansu AI">
            <span class="cb-btn-icon">💬</span>
            <span class="cb-btn-label">Talk with My AI</span>
        </button>

        {{-- ── Chat Widget Panel ── --}}
        <div id="cb-widget" role="dialog" aria-label="Priyansu AI Chat" aria-modal="true">

            {{-- Header --}}
            <div id="cb-header">
                <div class="cb-avatar" aria-hidden="true">🤖</div>
                <div class="cb-header-info">
                    <span class="cb-header-name">Priyansu AI Assistant</span>
                    <span class="cb-header-status">
                        <span class="cb-online-dot" aria-hidden="true"></span>
                        Online
                    </span>
                </div>
                <div class="cb-header-actions">
                    <button class="cb-header-btn cb-close-btn" id="cb-close" type="button" aria-label="Close chat">✕</button>
                </div>
            </div>

            {{-- Messages area --}}
            <div id="cb-messages" role="log" aria-live="polite" aria-label="Chat messages">
                {{-- Welcome message + bot bubbles rendered by JS --}}
            </div>

            {{-- Sidebar suggestion buttons --}}
            <div class="cb-suggestions-wrap">
                <div class="cb-suggestions-label">
                    Ask me anything 👇
                </div>
                <div class="cb-suggestions-list" id="cb-suggs-list">
                    {{-- Populated by chatbot.js from window.cbQuestions --}}
                    @forelse($chatbots as $cbq)
                        <button
                            type="button"
                            class="cb-sugg-btn"
                            data-id="{{ $cbq->id }}"
                            data-question="{{ e($cbq->question) }}"
                        >
                            <span class="cb-sugg-text">{{ $cbq->question }}</span>
                            <span class="cb-sugg-icon">›</span>
                        </button>
                    @empty
                        <p style="font-size:.82rem;color:#6b7280;text-align:center;padding:.5rem 0;">
                            No questions configured yet.
                        </p>
                    @endforelse
                </div>
            </div>

            {{-- Footer --}}
            <div id="cb-footer">
                <span class="cb-powered">⚡ Powered by <span>Priyansu AI</span></span>
            </div>
        </div>
        {{-- ── END CHATBOT WIDGET ── --}}

        {{-- Pass chatbot data to JS --}}
        <script>
            window.cbQuestions = @json($chatbotsJson);
            window.cbContact = {
                linkedin:  'https://linkedin.com/in/priyansu-nayak',
                instagram: 'https://instagram.com/priyansu_nayak',
                email:     'priyansunayak@example.com'
            };
        </script>
        <script src="{{ asset('assests/js/chatbot.js') }}"></script>
        <!----------------------- SOCIAL CONTACT MENU SCRIPT ------------------->
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var wrap = document.querySelector('.social-contact-wrap');
                if (!wrap) return;

                var toggle = wrap.querySelector('.social-toggle');
                var menu = wrap.querySelector('.social-menu');
                var links = [].slice.call(wrap.querySelectorAll('.social-link'));

                function openMenu() {
                    toggle.classList.add('is-open');
                    toggle.setAttribute('aria-expanded', 'true');
                    menu.classList.add('is-visible');
                    links.forEach(function (link) {
                        link.classList.remove('is-closing');
                    });
                }

                function closeMenu() {
                    toggle.classList.remove('is-open');
                    toggle.setAttribute('aria-expanded', 'false');
                    links.forEach(function (link) {
                        link.classList.add('is-closing');
                    });
                    setTimeout(function () {
                        menu.classList.remove('is-visible');
                    }, 300);
                }

                toggle.addEventListener('click', function (e) {
                    e.stopPropagation();
                    var isOpen = toggle.classList.contains('is-open');
                    if (isOpen) {
                        closeMenu();
                    } else {
                        openMenu();
                    }
                });

                links.forEach(function (link) {
                    link.addEventListener('click', function (e) {
                        e.stopPropagation();
                        closeMenu();
                    });
                });

                document.addEventListener('click', function (e) {
                    if (!wrap.contains(e.target)) {
                        if (toggle.classList.contains('is-open')) {
                            closeMenu();
                        }
                    }
                });

                document.addEventListener('keydown', function (e) {
                    if (e.key === 'Escape' && toggle.classList.contains('is-open')) {
                        closeMenu();
                        toggle.focus();
                    }
                });
            });
        </script>

        <!-----------------------MODAL SCRIPT------------------->
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const form = document.getElementById('contactForm');
                const submitBtn = document.getElementById('submit');
                const successModalEl = document.getElementById('successModal');
                const errorMsg = document.getElementById('error-msg');

                function clearErrors() {
                    document.querySelectorAll('.field-error').forEach(function (el) {
                        el.textContent = '';
                        el.style.display = 'none';
                    });
                    document.querySelectorAll('.contact-glass-field.is-invalid').forEach(function (el) {
                        el.classList.remove('is-invalid');
                    });
                    if (errorMsg) {
                        errorMsg.textContent = '';
                        errorMsg.style.display = 'none';
                    }
                }

                if (!form || !submitBtn || !successModalEl) return;

                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    clearErrors();

                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'Sending...';

                    const formData = new FormData(form);

                    fetch(form.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'Accept': 'application/json'
                        }
                    })

                    .then(response => {
                        if (!response.ok) throw response;
                        return response.json();
                    })

                    .then(data => {
                        form.reset();
                        document.getElementById('successMessage').innerText = data.message;
                        bootstrap.Modal.getOrCreateInstance(successModalEl).show();
                    })

                    .catch(async (error) => {
                        if (error.status === 422) {
                            const errors = await error.json();
                            Object.keys(errors.errors).forEach(function (field) {
                                const errorSpan = document.querySelector('.field-error[data-field="' + field + '"]');
                                const input = document.getElementById(field);
                                if (errorSpan) {
                                    errorSpan.textContent = errors.errors[field][0];
                                    errorSpan.style.display = 'block';
                                }
                                if (input) {
                                    input.classList.add('is-invalid');
                                }
                            });
                        } else {
                            if (errorMsg) {
                                errorMsg.textContent = 'Something went wrong. Please try again.';
                                errorMsg.style.display = 'block';
                            }
                        }
                    })

                    .finally(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Send Message <i data-feather="send" class="fea icon-sm ms-1"></i>';
                        try { feather.replace(); } catch (e) {}
                    });
                });
            });
        </script>

        <!----------------------- CERTIFICATION MODAL ------------------->
        <div class="modal fade cert-modal" id="certModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="cert-modal-preview" id="certModalPreview"></div>
                        <h5 class="cert-modal-title" id="certModalTitle"></h5>
                        <div class="cert-modal-meta">
                            <span class="cert-issuer-logo" id="certModalLogo"></span>
                            <span class="cert-issuer-name" id="certModalIssuer"></span>
                        </div>
                        <div class="cert-modal-date" id="certModalDate"></div>
                        <div class="cert-modal-credential">
                            <strong>Credential ID:</strong> <span id="certModalId"></span>
                        </div>
                        <div class="cert-modal-skills-label">Skills covered</div>
                        <div class="cert-modal-skills" id="certModalSkills"></div>
                        <div class="cert-modal-actions">
                            <button class="cert-modal-btn cert-modal-btn-primary">
                                <i class="mdi mdi-download"></i> Download
                            </button>
                            <a href="#" class="cert-modal-btn cert-modal-btn-outline" target="_blank" rel="noopener">
                                <i class="mdi mdi-check-decagram"></i> Verify
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!----------------------- CERTIFICATION SCRIPTS ------------------->
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var certSection = document.getElementById('certifications');
                var certCarousel = document.getElementById('cert-carousel');
                var certControls = document.getElementById('cert-carousel-controls');

                /* ── Tiny Slider: horizontal carousel ── */
                if (certCarousel && certControls && typeof tns === 'function') {
                    tns({
                        container: '#cert-carousel',
                        items: 1,
                        slideBy: 1,
                        gutter: 20,
                        controls: true,
                        controlsContainer: '#cert-carousel-controls',
                        nav: false,
                        mouseDrag: true,
                        loop: true,
                        autoplay: false,
                        autoplayButtonOutput: false,
                        speed: 500,
                        responsive: {
                            768: { items: 2, gutter: 24 },
                            992: { items: 3, gutter: 24 },
                            1200: { items: 4, gutter: 24 }
                        }
                    });
                }

                /* ── Scroll-triggered fade-up (section-level) ── */
                if (certSection && 'IntersectionObserver' in window) {
                    var observer = new IntersectionObserver(function (entries) {
                        entries.forEach(function (entry) {
                            if (entry.isIntersecting) {
                                entry.target.classList.add('is-visible');
                                observer.unobserve(entry.target);
                            }
                        });
                    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
                    observer.observe(certSection);
                } else if (certSection) {
                    certSection.classList.add('is-visible');
                }

                /* ── Certification data ── */
                var certData = [
                    {
                        title: 'Google Data Analytics',
                        org: 'Google',
                        issuer: 'Google \u00B7 Coursera',
                        date: 'Issued Mar 2025',
                        credentialId: 'GDA-2025-03-1842',
                        color: '#4285F4',
                        icon: 'mdi mdi-google',
                        short: 'Google',
                        skills: ['Data Cleaning', 'SQL', 'R Programming', 'Tableau', 'Data Visualization', 'Statistical Analysis'],
                        verifyUrl: '#'
                    },
                    {
                        title: 'Meta Front-End Developer',
                        org: 'Meta',
                        issuer: 'Meta \u00B7 Coursera',
                        date: 'Issued Jan 2025',
                        credentialId: 'META-FE-2025-01-0753',
                        color: '#1877F2',
                        icon: 'mdi mdi-react',
                        short: 'Meta',
                        skills: ['React', 'JavaScript', 'HTML/CSS', 'Version Control', 'Responsive Design', 'UI/UX Principles'],
                        verifyUrl: '#'
                    },
                    {
                        title: 'AWS Cloud Practitioner',
                        org: 'AWS',
                        issuer: 'Amazon Web Services',
                        date: 'Issued Nov 2024',
                        credentialId: 'AWS-CP-2024-11-3421',
                        color: '#FF9900',
                        icon: 'mdi mdi-aws',
                        short: 'AWS',
                        skills: ['Cloud Computing', 'AWS Services', 'Security', 'Pricing', 'Architecture', 'Deployment'],
                        verifyUrl: '#'
                    },
                    {
                        title: 'Microsoft Azure Fundamentals',
                        org: 'Azure',
                        issuer: 'Microsoft',
                        date: 'Issued Oct 2024',
                        credentialId: 'MS-AZ-900-2024-10-8912',
                        color: '#0078D4',
                        icon: 'mdi mdi-microsoft-azure',
                        short: 'Azure',
                        skills: ['Cloud Concepts', 'Azure Services', 'Security', 'Compliance', 'Pricing', 'Governance'],
                        verifyUrl: '#'
                    }
                ];

                /* ── Modal open function (called from inline onclick) ── */
                window.openCertModal = function (index) {
                    var data = certData[index];
                    if (!data) return;

                    var modalEl = document.getElementById('certModal');
                    if (!modalEl) return;

                    var preview = document.getElementById('certModalPreview');
                    var title = document.getElementById('certModalTitle');
                    var logo = document.getElementById('certModalLogo');
                    var issuer = document.getElementById('certModalIssuer');
                    var date = document.getElementById('certModalDate');
                    var credId = document.getElementById('certModalId');
                    var skills = document.getElementById('certModalSkills');
                    var verifyLink = modalEl.querySelector('.cert-modal-btn-outline');

                    if (preview) {
                        preview.style.background = 'linear-gradient(135deg, ' + data.color + ', ' + data.color + 'dd)';
                        preview.innerHTML = '<i class="' + data.icon + '"></i><span>' + data.short + '</span>';
                    }
                    if (title) title.textContent = data.title;
                    if (logo) {
                        logo.style.background = data.color;
                        logo.innerHTML = '<i class="' + data.icon + '" style="font-size:0.75rem;"></i>';
                    }
                    if (issuer) issuer.textContent = data.issuer;
                    if (date) date.textContent = data.date;
                    if (credId) credId.textContent = data.credentialId;
                    if (skills) {
                        skills.innerHTML = '';
                        data.skills.forEach(function (s) {
                            var tag = document.createElement('span');
                            tag.className = 'cert-modal-skill';
                            tag.textContent = s;
                            skills.appendChild(tag);
                        });
                    }
                    if (verifyLink) verifyLink.href = data.verifyUrl;

                    var modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                    modal.show();
                };
            });
        </script>

        <!----------------------- MODAL VISIBILITY FIX: hide chatbot when any modal is open ------------------->
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var chatBtn = document.getElementById('cb-launch-btn');
                if (!chatBtn) return;

                document.addEventListener('shown.bs.modal', function () {
                    chatBtn.style.display = 'none';
                });

                document.addEventListener('hidden.bs.modal', function () {
                    var openModals = document.querySelectorAll('.modal.show');
                    if (openModals.length === 0) {
                        chatBtn.style.display = '';
                    }
                });
            });
        </script>

        <!-- READ MORE SCRIPT FOR PROJECT CARDS -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const textElements = document.querySelectorAll('.read-more-text');
                
                textElements.forEach(textEl => {
                    // Check if content exceeds 3 lines
                    // A standard way to check is comparing scrollHeight with clientHeight
                    // Since line-clamp is applied, scrollHeight will be greater than clientHeight if truncated
                    if (textEl.scrollHeight > textEl.clientHeight) {
                        const btn = textEl.nextElementSibling;
                        if (btn && btn.classList.contains('read-more-btn')) {
                            btn.classList.remove('d-none');
                            
                            btn.addEventListener('click', function(e) {
                                e.preventDefault();
                                if (textEl.style.webkitLineClamp === '3') {
                                    textEl.style.webkitLineClamp = 'unset';
                                    btn.textContent = 'Read less';
                                } else {
                                    textEl.style.webkitLineClamp = '3';
                                    btn.textContent = 'Read more';
                                }
                                
                                // Dispatch a custom event to notify TinySlider to update its layout if needed
                                // (If the slider calculates height statically, it might need to know when height changes)
                                setTimeout(() => {
                                    window.dispatchEvent(new Event('resize'));
                                }, 350);
                            });
                        }
                    }
                });
            });

            // Fallback JS to enforce equal heights on project cards
            function equalizeProjectCards() {
                const carousel = document.getElementById('projects-carousel');
                if (!carousel) return;
                
                const cards = carousel.querySelectorAll('.item-box');
                // Reset heights to auto to get natural height
                cards.forEach(card => card.style.minHeight = 'auto');
                
                let maxHeight = 0;
                cards.forEach(card => {
                    const h = card.offsetHeight;
                    if (h > maxHeight) maxHeight = h;
                });
                
                if (maxHeight > 0) {
                    cards.forEach(card => card.style.minHeight = maxHeight + 'px');
                }
            }
            
            window.addEventListener('load', equalizeProjectCards);
            window.addEventListener('resize', equalizeProjectCards);
            // Also run when a read more button is clicked since height changes
            document.addEventListener('click', function(e) {
                if (e.target && e.target.classList.contains('read-more-btn')) {
                    setTimeout(equalizeProjectCards, 350); // wait for transition
                }
            });
        </script>

    </body>
</html>
