.elementor-971 .elementor-element.elementor-element-83f67d9{--display:flex;--margin-top:30px;--margin-bottom:050px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-971 .elementor-element.elementor-element-83f67d9.e-con{--align-self:flex-start;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-971 .elementor-element.elementor-element-339a02f{padding:0px 0px 0px 0px;--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-971 .elementor-element.elementor-element-46bef45{--display:flex;--overlay-opacity:0.5;--border-radius:33px 33px 33px 33px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-971 .elementor-element.elementor-element-46bef45::before, .elementor-971 .elementor-element.elementor-element-46bef45 > .elementor-background-video-container::before, .elementor-971 .elementor-element.elementor-element-46bef45 > .e-con-inner > .elementor-background-video-container::before, .elementor-971 .elementor-element.elementor-element-46bef45 > .elementor-background-slideshow::before, .elementor-971 .elementor-element.elementor-element-46bef45 > .e-con-inner > .elementor-background-slideshow::before, .elementor-971 .elementor-element.elementor-element-46bef45 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #000000 0%, #000000 100%);}.elementor-971 .elementor-element.elementor-element-46bef45.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-971 .elementor-element.elementor-element-7bb5f2c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;text-align:center;}.elementor-971 .elementor-element.elementor-element-7bb5f2c .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:24px;font-weight:600;text-transform:uppercase;color:#7DD3FC;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-971 .elementor-element.elementor-element-8a69627{text-align:center;}.elementor-971 .elementor-element.elementor-element-8a69627 .elementor-heading-title{font-family:var( --e-global-typography-06445ee-font-family ), Sans-serif;font-size:var( --e-global-typography-06445ee-font-size );font-weight:var( --e-global-typography-06445ee-font-weight );text-shadow:0px 0px 20px rgba(0, 255, 240.00000000000017, 0.44);color:#FFFFFF;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-971 .elementor-element.elementor-element-9c0628d .elementor-icon-list-icon i{color:var( --e-global-color-secondary );transition:color 0.3s;}.elementor-971 .elementor-element.elementor-element-9c0628d .elementor-icon-list-icon svg{fill:var( --e-global-color-secondary );transition:fill 0.3s;}.elementor-971 .elementor-element.elementor-element-9c0628d{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-971 .elementor-element.elementor-element-9c0628d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-971 .elementor-element.elementor-element-9c0628d .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-size:1.3rem;font-weight:400;}.elementor-971 .elementor-element.elementor-element-9c0628d .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-971 .elementor-element.elementor-element-d649f66{--display:flex;}.elementor-widget-post-info .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-post-info .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-text, .elementor-widget-post-info .elementor-icon-list-text a{color:var( --e-global-color-secondary );}.elementor-widget-post-info .elementor-icon-list-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-971 .elementor-element.elementor-element-5f0d50c{width:auto;max-width:auto;}.elementor-971 .elementor-element.elementor-element-5f0d50c.elementor-element{--align-self:center;--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}.elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-bottom:calc(0px/2);}.elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-top:calc(0px/2);}.elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:calc(0px/2);margin-left:calc(0px/2);}.elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-items.elementor-inline-items{margin-right:calc(-0px/2);margin-left:calc(-0px/2);}body.rtl .elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{left:calc(-0px/2);}body:not(.rtl) .elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{right:calc(-0px/2);}.elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-icon i{color:#0F172A;font-size:14px;}.elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-icon svg{fill:#0F172A;--e-icon-list-icon-size:14px;}.elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-icon{width:14px;}body:not(.rtl) .elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-text{padding-left:0px;}body.rtl .elementor-971 .elementor-element.elementor-element-5f0d50c .elementor-icon-list-text{padding-right:0px;}.elementor-971 .elementor-element.elementor-element-415fd32{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-971 .elementor-element.elementor-element-415fd32::before, .elementor-971 .elementor-element.elementor-element-415fd32 > .elementor-background-video-container::before, .elementor-971 .elementor-element.elementor-element-415fd32 > .e-con-inner > .elementor-background-video-container::before, .elementor-971 .elementor-element.elementor-element-415fd32 > .elementor-background-slideshow::before, .elementor-971 .elementor-element.elementor-element-415fd32 > .e-con-inner > .elementor-background-slideshow::before, .elementor-971 .elementor-element.elementor-element-415fd32 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000D4;--background-overlay:'';}.elementor-971 .elementor-element.elementor-element-415fd32.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-971 .elementor-element.elementor-element-8c6cd05{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-971 .elementor-element.elementor-element-8c6cd05.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-971 .elementor-element.elementor-element-e3c6114 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:45px;font-weight:600;color:#FFFFFF;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-971 .elementor-element.elementor-element-f1a2622{padding:1px 1px 1px 1px;border-radius:33px 33px 33px 33px;color:#FFFFFF;}.elementor-971 .elementor-element.elementor-element-9b623d4{--display:flex;--min-height:0px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:30px 30px;--row-gap:30px;--column-gap:30px;--flex-wrap:nowrap;}.elementor-971 .elementor-element.elementor-element-6adfb78 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:33px;font-weight:600;color:var( --e-global-color-c77e541 );}.elementor-971 .elementor-element.elementor-global-1240.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-971 .elementor-element.elementor-element-461de58{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-971 .elementor-element.elementor-element-99b72fe{text-align:center;}.elementor-971 .elementor-element.elementor-element-99b72fe .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:45px;font-weight:600;color:#FFFFFF;}.elementor-widget-uael-image-gallery .uael-gallery-parent .uael-masonry-filters .uael-masonry-filter,.elementor-widget-uael-image-gallery .uael-img-gallery-tabs-dropdown .uael-filters-dropdown-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-uael-image-gallery .uael-img-gallery-tabs-dropdown .uael-filters-dropdown-button, .elementor-widget-uael-image-gallery .uael-gallery-parent .uael-masonry-filters .uael-masonry-filter{color:var( --e-global-color-accent );}.elementor-widget-uael-image-gallery .uael-gallery-parent .uael-masonry-filters .uael-masonry-filter:hover, .elementor-widget-uael-image-gallery .uael-gallery-parent .uael-masonry-filters .uael-current{background-color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-971 .elementor-element.elementor-element-dcb64a4 .uael-img-gallery-wrap .uael-grid-item{padding-right:calc( 20px/2 );padding-left:calc( 20px/2 );}.elementor-971 .elementor-element.elementor-element-dcb64a4 .uael-img-gallery-wrap{margin-left:calc( -20px/2 );margin-right:calc( -20px/2 );}.elementor-971 .elementor-element.elementor-element-dcb64a4 .uael-img-gallery-wrap .uael-grid-item-content{margin-bottom:20px;}.elementor-971 .elementor-element.elementor-element-dcb64a4 .uael-grid-img-thumbnail img{opacity:1;}.elementor-971 .elementor-element.elementor-element-dcb64a4 .uael-grid-gallery-img:hover .uael-grid-img-thumbnail img{opacity:1;}.elementor-971 .elementor-element.elementor-element-683689e{--display:flex;}.elementor-971 .elementor-element.elementor-element-746c56b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-post-navigation span.post-navigation__prev--label{color:var( --e-global-color-text );}.elementor-widget-post-navigation span.post-navigation__next--label{color:var( --e-global-color-text );}.elementor-widget-post-navigation span.post-navigation__prev--label, .elementor-widget-post-navigation span.post-navigation__next--label{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-post-navigation span.post-navigation__prev--title, .elementor-widget-post-navigation span.post-navigation__next--title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-971 .elementor-element.elementor-element-a256719 span.post-navigation__prev--label{color:#FFFFFF;}.elementor-971 .elementor-element.elementor-element-a256719 span.post-navigation__next--label{color:#FFFFFF;}.elementor-971 .elementor-element.elementor-element-a256719 span.post-navigation__prev--label, .elementor-971 .elementor-element.elementor-element-a256719 span.post-navigation__next--label{font-family:"Roboto Slab", Sans-serif;font-size:26px;font-weight:400;}.elementor-971 .elementor-element.elementor-element-a256719 span.post-navigation__prev--title, .elementor-971 .elementor-element.elementor-element-a256719 span.post-navigation__next--title{color:var( --e-global-color-c77e541 );font-family:"Roboto Slab", Sans-serif;font-size:18px;font-weight:400;}.elementor-971 .elementor-element.elementor-element-a256719 .post-navigation__arrow-wrapper{color:var( --e-global-color-c77e541 );fill:var( --e-global-color-c77e541 );}.elementor-971 .elementor-element.elementor-element-a256719 .elementor-post-navigation__separator{background-color:var( --e-global-color-accent );}.elementor-971 .elementor-element.elementor-element-a256719 .elementor-post-navigation{color:var( --e-global-color-accent );}body.elementor-page-971:not(.elementor-motion-effects-element-type-background), body.elementor-page-971 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://jewellcore.com/wp-content/uploads/2025/11/jewellcore-hero-background-abstract-tech.png");background-position:center center;background-size:cover;}@media(max-width:1024px){.elementor-971 .elementor-element.elementor-element-8a69627 .elementor-heading-title{font-size:var( --e-global-typography-06445ee-font-size );}}@media(max-width:767px){.elementor-971 .elementor-element.elementor-element-8a69627 .elementor-heading-title{font-size:var( --e-global-typography-06445ee-font-size );}}@media(min-width:768px){.elementor-971 .elementor-element.elementor-element-83f67d9{--content-width:926px;}.elementor-971 .elementor-element.elementor-element-46bef45{--width:84.52%;}.elementor-971 .elementor-element.elementor-element-415fd32{--width:100%;}.elementor-971 .elementor-element.elementor-element-8c6cd05{--width:56.911%;}.elementor-971 .elementor-element.elementor-element-9b623d4{--width:69%;}}@media(min-width:1025px){body.elementor-page-971:not(.elementor-motion-effects-element-type-background), body.elementor-page-971 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for post-info, class: .elementor-element-5f0d50c *//* Make the Post Info terms behave like a flex row that wraps */
.jc-pillset .elementor-post-info__terms-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;           /* native spacing between pills */
  line-height: 1;
}

/* Style BOTH linked and non-linked items */
.jc-pillset .elementor-post-info__terms-list a,
.jc-pillset .elementor-post-info__terms-list span {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: rgba(20,20,25,.3);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(0,255,200,.15);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover/active glow (works for span and a) */
.jc-pillset .elementor-post-info__terms-list a:hover,
.jc-pillset .elementor-post-info__terms-list span:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 15px var(--pill-glow, #00ffc8);
  border-color: var(--pill-glow, #00ffc8);
}

/* Keyboard focus for accessibility (when links are enabled) */
.jc-pillset .elementor-post-info__terms-list a:focus-visible {
  outline: 2px solid var(--pill-glow, #00ffc8);
  outline-offset: 2px;
  border-color: var(--pill-glow, #00ffc8);
}

/* Alternating neon hues */
.jc-pillset .elementor-post-info__terms-list > *:nth-child(1n) { --pill-glow:#00ffc8; }
.jc-pillset .elementor-post-info__terms-list > *:nth-child(2n) { --pill-glow:#00b8ff; }
.jc-pillset .elementor-post-info__terms-list > *:nth-child(3n) { --pill-glow:#b966ff; }
.jc-pillset .elementor-post-info__terms-list > *:nth-child(4n) { --pill-glow:#ff3c8e; }
.jc-pillset .elementor-post-info__terms-list > *:nth-child(5n) { --pill-glow:#ffe066; }

/* Mobile stacking: smaller pills + room to wrap */
@media (max-width: 480px) {
  .jc-pillset .elementor-post-info__terms-list {
    gap: .4rem;
  }
  .jc-pillset .elementor-post-info__terms-list a,
  .jc-pillset .elementor-post-info__terms-list span {
    font-size: .8rem;
    padding: .35rem .75rem;
  }
}/* End custom CSS */
/* Start custom CSS for global, class: .elementor-global-1240 */#techstack3 .jc-techstack-wrap{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px;
}
@media (max-width:1024px){
  #techstack3 .jc-techstack-wrap{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:560px){
  #techstack3 .jc-techstack-wrap{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:12px; }
}/* End custom CSS */
/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Post Preview (Flashy)</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
        
        html {
            scroll-behavior: smooth;
        }
        body { 
            font-family: 'Inter', sans-serif; 
            margin: 0;
            color: #D1D5DB; /* Default light text */
            background-color: #0c111f; 
            background-image: url('https://jewellcore.com/wp-content/uploads/2025/11/jewellcore-hero-background-abstract-tech-3.png');
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
        }

        /* --- Animations --- */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in-section {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0; /* Start hidden */
        }
        
        /* This is a simple way to trigger animation on scroll */
        /* In a real build, you'd use Intersection Observer, but this works for a preview */
        .animated-section {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .animated-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Project Hero --- */
        .project-hero-section {
            /* This section would use the Project's Featured Image */
            background-image: url('https://placehold.co/1920x800/1F2937/FFFFFF/webp?text=Project+Featured+Image&font=inter');
            background-size: cover;
            background-position: center;
            padding-top: 12rem;
            padding-bottom: 8rem;
            text-align: center;
            position: relative;
            z-index: 10;
        }
        .project-hero-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(12, 17, 31, 0.8); /* Dark overlay */
            z-index: -1;
        }
        .project-client-info {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            font-size: 1rem;
            color: #9CA3AF;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .project-client-info span {
            font-weight: 600;
            color: #FFFFFF;
        }
        
        /* --- Main Content --- */
        .project-content-section {
            position: relative;
            z-index: 10;
            border-top: 1px solid rgba(107, 114, 128, 0.3);
        }
        .project-link-card {
            background-color: rgba(31, 41, 55, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(75, 85, 99, 0.5);
            border-radius: 1rem;
            padding: 2rem;
            position: sticky;
            top: 2rem; 
        }

        /* --- Tech Stack Grid --- */
        .feature-card {
            background-color: rgba(31, 41, 55, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(75, 85, 99, 0.3);
            border-radius: 1rem;
            padding: 1.5rem;
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .feature-card:hover {
            background-color: rgba(55, 65, 81, 0.7);
            border-color: rgba(107, 114, 128, 0.5);
        }
        .feature-card svg {
            width: 2.5rem; height: 2.5rem;
            margin-bottom: 1rem;
        }

        /* --- Gallery Slider --- */
        .gallery-slider-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .gallery-slide {
            flex-shrink: 0;
            width: 100%;
            padding: 0 0.5rem; /* Small gap between slides */
        }
        .gallery-slide img {
            width: 100%;
            height: auto;
            border-radius: 1rem;
            border: 1px solid rgba(75, 85, 99, 0.5);
        }
        .slider-dot.active { background-color: #3B82F6; }

        /* --- WYSIWYG Content --- */
        .wysiwyg-content h2, .wysiwyg-content h3 {
            font-size: 1.5rem; font-weight: 700;
            color: #FFFFFF; margin-top: 2rem; margin-bottom: 1rem;
        }
        .wysiwyg-content p {
            font-size: 1.125rem; line-height: 1.75rem;
            color: #D1D5DB; margin-bottom: 1.5rem;
        }
        .wysiwyg-content ul {
            list-style-type: disc; padding-left: 2rem;
            margin-bottom: 1.5rem; color: #D1D5DB;
        }
        .wysiwyg-content li { margin-bottom: 0.5rem; }

    </style>
</head>
<body>

    <!-- SVG Icons for Tech Stack & Slider -->
    <svg width="0" height="0" class="absolute">
        <defs>
            <!-- Slider Icons -->
            <symbol id="icon-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></symbol>
            <symbol id="icon-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></symbol>
            <!-- Tech Icons -->
            <symbol id="icon-wordpress" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0-4.42-3.58-8-8-8S2 3.58 2 8c0 3.31 2.02 6.13 4.84 7.29L6 22l6-3.5 6 3.5-1.16-6.71C15.98 14.13 18 11.31 18 8zM12 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/><path d="M12.89 11.1c.47-.23.8-.69.8-1.21 0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5c0 .52.33.98.8 1.21L11 13.5V15h2v-1.5l-.11-.4z"/></symbol>
            <symbol id="icon-elementor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line><line x1="15" y1="3" x2="15" y2="21"></line><line x1="3" y1="9" x2="21" y2="9"></line><line x1="3" y1="15" x2="21" y2="15"></line></symbol>
            <symbol id="icon-gemini" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l-2 4-4 2 4 2 2 4 2-4 4-2-4-2-2-4z"/><path d="M12 12l-2 4-4 2 4 2 2 4 2-4 4-2-4-2-2-4z"/></symbol>
            <symbol id="icon-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></symbol>
        </defs>
    </svg>


    <!-- SECTION 1: Project Hero (Now with Featured Image BG) -->
    <section class="project-hero-section animated-section">
        <div class="project-hero-overlay"></div> <!-- Dark overlay -->
        <div class="relative z-10 mx-auto max-w-4xl px-6 lg:px-8">
            <div class="project-client-info">
                <div>Client: <span>Sample Client Inc.</span></div>
                <div>Launched: <span>November 2025</span></div>
            </div>
            <h1 class="mt-4 text-4xl font-bold tracking-tight text-white sm:text-6xl">
                AI-Powered E-commerce Platform
            </h1>
        </div>
    </section>

    <!-- SECTION 2: Main Content (2-Column) -->
    <div class="project-content-section animated-section mx-auto max-w-7xl px-6 lg:px-8 py-24 sm:py-32">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-12 gap-y-16">
            
            <!-- Left Column: Case Study & Tech Stack -->
            <div class="lg:col-span-2">
                
                <!-- Case Study Summary -->
                <h2 class="text-3xl font-bold tracking-tight text-white">Case Study</h2>
                <div class="wysiwyg-content mt-6">
                    <p>Sample Client Inc. came to us with a unique challenge: they needed to integrate a recommendation engine into their existing WordPress e-commerce site. Their goal was to increase cross-sells and provide a personalized shopping experience for their customers.</p>
                    <p>We developed a custom plugin that connects directly to the Gemini API. This new tool analyzes a user's browsing history and cart contents in real-time to provide intelligent, relevant product suggestions.</p>
                    <h3>Key Outcomes</h3>
                    <ul>
                        <li>35% increase in average order value.</li>
                        <li>Seamless integration with their existing theme and plugins.</li>
                        <li>A fully automated system that learns and improves over time.</li>
                    </ul>
                </div>

                <!-- NEW: Tech Stack Icon Grid -->
                <h3 class="mt-16 text-2xl font-bold tracking-tight text-white">Tech Stack</h3>
                <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="feature-card !p-4">
                        <svg class="text-blue-400"><use href="#icon-wordpress"></use></svg>
                        <h4 class="font-semibold text-white">WordPress</h4>
                        <p class="text-sm text-gray-400 mt-1">CMS</p>
                    </div>
                    <div class="feature-card !p-4">
                        <svg class="text-red-400"><use href="#icon-elementor"></use></svg>
                        <h4 class="font-semibold text-white">Elementor</h4>
                        <p class="text-sm text-gray-400 mt-1">Page Builder</p>
                    </div>
                    <div class="feature-card !p-4">
                        <svg class="text-purple-400"><use href="#icon-gemini"></use></svg>
                        <h4 class="font-semibold text-white">Gemini API</h4>
                        <p class="text-sm text-gray-400 mt-1">AI Engine</p>
                    </div>
                    <div class="feature-card !p-4">
                        <svg class="text-cyan-400"><use href="#icon-code"></use></svg>
                        <h4 class="font-semibold text-white">Custom PHP</h4>
                        <p class="text-sm text-gray-400 mt-1">Plugin</p>
                    </div>
                </div>
            </div>
            
            <!-- Right Column: "View Project" Card -->
            <div class="lg:col-span-1">
                <div class="project-link-card">
                    <h3 class="text-xl font-semibold text-white">View This Project</h3>
                    <p class="mt-3 text-base text-gray-300">See the live project in action and explore the results.</p>
                    <a href="#" target="_blank" rel="noopener noreferrer" 
                       class="mt-6 inline-flex w-full justify-center rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-md transition-all duration-300 hover:bg-blue-700">
                        View Live Project &rarr;
                    </a>
                </div>
            </div>
            
        </div>
    </div>

    <!-- NEW: SECTION 3: Gallery Slider -->
    <section class="project-gallery-section animated-section mx-auto max-w-7xl px-6 lg:px-8 py-24 sm:py-32">
        <h2 class="text-3xl font-bold text-center text-white mb-12">Project Gallery</h2>
        
        <div class="max-w-4xl mx-auto relative overflow-hidden">
            <div id="gallery-slider-track" class="gallery-slider-track">
                <!-- Slide 1 -->
                <div class="gallery-slide"><img src="https://placehold.co/800x500/1F2937/FFFFFF/webp?text=Gallery+Image+1&font=inter" alt="Project gallery image 1"></div>
                <!-- Slide 2 -->
                <div class="gallery-slide"><img src="https://placehold.co/800x500/3B82F6/FFFFFF/webp?text=Gallery+Image+2&font=inter" alt="Project gallery image 2"></div>
                <!-- Slide 3 -->
                <div class="gallery-slide"><img src="https://placehold.co/800x500/10B981/FFFFFF/webp?text=Gallery+Image+3&font=inter" alt="Project gallery image 3"></div>
            </div>
            
            <!-- Slider Controls -->
            <button onclick="changeGallerySlide(-1)" class="absolute top-1/2 left-0 -translate-x-1/2 transform -translate-y-1/2 bg-gray-700/70 hover:bg-blue-600 text-white p-3 rounded-full transition duration-300 z-10" aria-label="Previous Image">
                <svg class="w-6 h-6"><use href="#icon-prev"></use></svg>
            </button>
            <button onclick="changeGallerySlide(1)" class="absolute top-1/2 right-0 translate-x-1/2 transform -translate-y-1/2 bg-gray-700/70 hover:bg-blue-600 text-white p-3 rounded-full transition duration-300 z-10" aria-label="Next Image">
                <svg class="w-6 h-6"><use href="#icon-next"></use></svg>
            </button>
        </div>
        
        <!-- Slider Dots -->
        <div id="gallery-slider-dots" class="flex justify-center space-x-2 mt-6">
            <button class="slider-dot w-3 h-3 bg-gray-600 rounded-full transition duration-300" onclick="goToGallerySlide(0)" aria-label="Go to image 1"></button>
            <button class="slider-dot w-3 h-3 bg-gray-600 rounded-full transition duration-300" onclick="goToGallerySlide(1)" aria-label="Go to image 2"></button>
            <button class="slider-dot w-3 h-3 bg-gray-600 rounded-full transition duration-300" onclick="goToGallerySlide(2)" aria-label="Go to image 3"></button>
        </div>
    </section>

    <script>
        // --- Animation on Scroll ---
        document.addEventListener('DOMContentLoaded', () => {
            const sections = document.querySelectorAll('.animated-section');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });

            sections.forEach(section => {
                observer.observe(section);
            });
        });

        // --- Gallery Slider ---
        let currentGallerySlide = 0;
        let gallerySlides, galleryDots, gallerySliderTrack, totalGallerySlides;

        function showGallerySlide(index) {
            if (!gallerySlides || gallerySlides.length === 0) return;

            if (index >= totalGallerySlides) { currentGallerySlide = 0; }
            else if (index < 0) { currentGallerySlide = totalGallerySlides - 1; }
            else { currentGallerySlide = index; }

            gallerySliderTrack.style.transform = `translateX(-${currentGallerySlide * 100}%)`;
            
            galleryDots.forEach(dot => dot.classList.remove("active"));
            galleryDots[currentGallerySlide].classList.add("active");
        }

        function changeGallerySlide(direction) {
            showGallerySlide(currentGallerySlide + direction);
        }

        function goToGallerySlide(index) {
            showGallerySlide(index);
        }

        // Make functions globally available for onclick
        window.changeGallerySlide = changeGallerySlide;
        window.goToGallerySlide = goToGallerySlide;

        document.addEventListener("DOMContentLoaded", () => {
            gallerySlides = document.querySelectorAll(".gallery-slide");
            galleryDots = document.querySelectorAll("#gallery-slider-dots .slider-dot");
            gallerySliderTrack = document.getElementById("gallery-slider-track");
            
            if (gallerySlides.length > 0) {
                totalGallerySlides = gallerySlides.length;
                showGallerySlide(0);
            }
        });
    </script>
</body>
</html>/* End custom CSS */