/* ======================================
   Portfolio Modern Showcase
====================================== */
:root{
    --primary:#579dff;
    /* --primary:#ff5b4d; */
    --primary-glow:#579dff;
    --accent:#579dff;
    --accent-2:#57d7ff;
    --bg:#0d1020;
    --card:#171a2d;
    --card-hover:#1d2138;
    --text:#fff;
    --muted:#9da3b1;
    --border:#2b3045;
}
.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    max-width:1400px;
    margin:50px auto;
}
/* Card */
.portfolio-card{
    position:relative;
    background:#0b1220;
    border-radius:6px;
    overflow:hidden;
    cursor:pointer;
    animation:portfolioFade .8s ease forwards;
    opacity:0;
}
/* animation delay */
.portfolio-card:nth-child(1){
    animation-delay:.1s;
}
.portfolio-card:nth-child(2){
    animation-delay:.2s;
}
.portfolio-card:nth-child(3){
    animation-delay:.3s;
}
.portfolio-card:nth-child(4){
    animation-delay:.4s;
}
@keyframes portfolioFade{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* Image */
.portfolio-image{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/10;
}
.portfolio-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:
        transform .7s ease,
        filter .5s ease;
}
/* hover zoom */
.portfolio-card:hover 
.portfolio-image img{
    transform:scale(1.08);
    filter:
    brightness(.65);
}
/* Overlay */
.portfolio-image:after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.7),
        transparent
    );
    opacity:0;
    transition:.4s;
}
.portfolio-card:hover 
.portfolio-image:after{
    opacity:1;
}
/* Content */
.portfolio-content-list{
    padding:12px 5px 18px;
    background:#0b1220;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding : 26px;
}
.open-indicator svg{
  color: #56d6ff;
}
.portfolio-content{
    padding:12px 5px 18px;
    background:#0b1220;
    /* display: flex; */
    justify-content: space-between;
    align-items: end;
    padding : 26px;
}
/* Title */
.portfolio-title{
    margin:0;
    font-size:14px;
    font-weight:700;
}
.portfolio-title a{
    color:var(--primary);
    text-decoration:none;
}
/* Category */
.portfolio-category{
    display:inline-block;
    margin-top:8px;
    padding:3px 8px;
    background:#202838;
    color:#aaa;
    border-radius:4px;
    font-size:10px;
}
/* Description hidden like screenshot */
.portfolio-content p{
    /* display:none; */
}
/* View button */
.portfolio-read-more{
    position:absolute;
    right:8px;
    bottom:12px;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ff1e35;
    color:white;
    font-size:0;
    text-decoration:none;
}
.portfolio-read-more:after{
    content:"→";
    font-size:13px;
}
.portfolio-read-more:hover{
    transform:scale(1.2);
}
/* ======================================
   Responsive
====================================== */
@media(max-width:900px){
    .portfolio-grid{
        grid-template-columns:1fr;
    }
}























































































*{
    box-sizing:border-box;
}
.portfolio-single{
    max-width:1200px;
    margin:auto;
    padding:50px 20px;
    color:var(--text);
}
/* ===== Fade-up animation base ===== */
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(24px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes floatGlow{
    0%,100%{ transform:translate(-50%,0) scale(1); }
    50%{ transform:translate(-50%,-15px) scale(1.05); }
}
@keyframes shimmer{
    0%{ background-position:-200% 0; }
    100%{ background-position:200% 0; }
}
.portfolio-back,
.top-catagaory-tag,
.portfolio-hero,
.portfolio-heading,
.portfolio-content-wrap,
.portfolio-metrics,
.portfolio-gallery{
    animation:fadeUp .7s ease both;
}
.top-catagaory-tag{ animation-delay:.05s; }
.portfolio-hero{ animation-delay:.1s; }
.portfolio-heading{ animation-delay:.15s; }
.portfolio-content-wrap{ animation-delay:.2s; }
.portfolio-metrics{ animation-delay:.25s; }
.portfolio-gallery{ animation-delay:.3s; }
/* ===== Hero / Slider ===== */
.portfolio-hero{
    margin-bottom:50px;
    margin-top:20px;
}
.portfolio-slide{
    border-radius:20px;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.portfolio-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(13,16,32,.6));
    pointer-events:none;
}
.portfolio-slide img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:20px;
    display:block;
    transition:transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
.portfolio-slide:hover img{
    transform:scale(1.04);
    filter:saturate(1.1) brightness(1.03);
}
.portfolio-thumbnails{
    display:flex;
    gap:15px;
    margin-top:20px;
}
.portfolio-thumbnails img{
    width:120px;
    height:80px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    border:2px solid transparent;
    opacity:.6;
    transition:all .3s ease;
}
.portfolio-thumbnails img:hover{
    opacity:1;
    border-color:var(--primary);
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(255,91,77,.25);
}
/* ===== Category tag ===== */
.portfolio-back{
    margin-top:80px;
}
.portfolio-back a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    transition:.3s ease;
}
.portfolio-back a:hover{
    color:var(--primary);
    gap:14px;
}
.portfolio-back .back-icon{
    font-size:18px;
    line-height:1;
    transition:transform .3s ease;
}
.portfolio-back a:hover .back-icon{
    transform:translateX(-4px);
}
.top-catagaory-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:25px 0;
}
.top-catagaory-tag strong{
    display:inline-block;
    padding:14px 28px;
    border:1.5px solid var(--border);
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,91,77,.08), rgba(118,103,255,.08));
    color:var(--primary);
    font-size:14px;
    font-weight:700;
    letter-spacing:-.3px;
    white-space:nowrap;
    transition:all .3s ease;
}
.top-catagaory-tag strong:hover{
    background:linear-gradient(90deg, rgba(255,91,77,.15), rgba(118,103,255,.15));
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,91,77,.2);
}
/* ===== Heading ===== */
.portfolio-heading h1{
    font-size:58px;
    background:linear-gradient(90deg, var(--primary), var(--primary-glow), var(--primary));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:50px 0;
    animation:shimmer 6s linear infinite;
}
/* ===== Content + Sidebar ===== */
.portfolio-content-wrap{
    display:grid;
    grid-template-columns:2fr 380px;
    gap:60px;
}
.section-title{
    color:var(--primary);
    font-size:12px;
    letter-spacing:2px;
    display:block;
    margin-bottom:20px;
    position:relative;
    padding-left:18px;
}
.section-title::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:10px;
    height:2px;
    background:var(--primary);
}
.portfolio-content p{
    color:var(--muted);
    line-height:1.9;
}
.portfolio-sidebar{
    background:linear-gradient(160deg, var(--card), #14172a);
    padding:35px;
    border-radius:18px;
    border:1px solid var(--border);
    align-self:start;
    position:sticky;
    top:30px;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.portfolio-sidebar:hover{
    border-color:rgba(255,91,77,.4);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.portfolio-sidebar h4{
    color:var(--primary);
    margin-bottom:25px;
    letter-spacing:.05em;
}
.info-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:15px 0;
    border-bottom:1px solid var(--border);
    transition:padding-left .3s ease;
}
.info-row:hover{
    padding-left:4px;
}
.info-row > span{
    color:var(--muted);
    flex:0 0 100px;
}
.project-info{
    text-align:end;
}
.tech-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    text-align:right;
}
.tech-stack span{
    background:rgba(118,103,255,.12);
    border:1px solid rgba(118,103,255,.3);
    color:#c3bcff;
    padding:3px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    transition:all .25s ease;
}
.tech-stack span:hover{
    background:rgba(118,103,255,.25);
    transform:translateY(-2px);
}
.portfolio-btn{
    display:block;
    margin-top:35px;
    text-align:center;
    background:linear-gradient(90deg, var(--primary), #579dff);
    color:#fff;
    padding:15px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    position:relative;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
}
.portfolio-btn::after{
     
    margin-left:8px;
    display:inline-block;
    transition:transform .3s ease;
}
.portfolio-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(255,91,77,.35);
}
.portfolio-btn:hover::after{
    transform:translateX(5px);
}
/* ===== Metrics ===== */
.portfolio-metrics{
    margin-top:70px;
}
.metrics-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:30px;
}
.metric{
    background:var(--card);
    padding:40px;
    border-radius:18px;
    text-align:center;
    border:1px solid var(--border);
    transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, background .35s ease;
}
.metric:hover{
    transform:translateY(-8px);
    border-color:rgba(255,91,77,.4);
    background:var(--card-hover);
}
.metric h2{
    color:var(--primary);
    font-size:42px;
    transition:transform .3s ease;
}
.metric:hover h2{
    transform:scale(1.08);
}
/* ===== Gallery ===== */
.portfolio-gallery{
    margin-top:80px;
}
.portfolio-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:30px;
}
.portfolio-gallery-grid img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:18px;
    transition:transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.portfolio-gallery-grid img:hover{
    transform:scale(1.03);
    filter:brightness(1.05);
}
/* ===== CTA ===== */
.portfolio-cta{
    margin:100px 0 40px;
}
.portfolio-cta-inner{
    position:relative;
    overflow:hidden;
    max-width:1140px;
    margin:auto;
    padding:70px 40px;
    text-align:center;
    background:#141727;
    border:1px solid rgba(255,255,255,.08);
    border-radius:36px;
}
.portfolio-cta-inner::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:50%;
    bottom:-240px;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(120,102,255,.35), transparent 70%);
    pointer-events:none;
    animation:floatGlow 8s ease-in-out infinite;
}
.cta-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--accent-2);
    font-size:14px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}
.cta-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent-2);
    box-shadow:0 0 10px var(--accent-2);
    animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.5; transform:scale(1.4); }
}
.portfolio-cta h2{
    margin:35px auto 12px;
    font-family:"Fraunces", Sans-serif;
    max-width:850px;
    color:#fff;
    font-size:38px;
    line-height:1.1;
    font-weight:500;
}
.portfolio-cta p{
    max-width:760px;
    margin:0 auto 20px;
    color:var(--muted);
    font-size:16px;
    font-family:"Inter", Sans-serif;
    line-height:1.8;
}
.portfolio-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:4px 34px;
    border-radius:999px;
    text-decoration:none;
    font-family:"Inter", Sans-serif;
    color:#fff;
    font-size:14px;
    font-weight:800;
    background:linear-gradient(90deg, var(--accent), #579dff);
    transition:.3s ease;
}
.portfolio-cta-btn::after{
    content:"→";
    margin-left:8px;
    display:inline-block;
    transition:transform .3s ease;
}
.portfolio-cta-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(118,103,255,.35);
}
.portfolio-cta-btn span{
    font-size:24px;
    transition:transform .3s ease;
}
.portfolio-cta-btn:hover span{
    transform:translateX(5px);
}
/* ===== Mobile ===== */
@media(max-width:991px){
    .portfolio-slider{ grid-template-columns:1fr; }
    .portfolio-content-wrap{ grid-template-columns:1fr; }
    .metrics-grid{ grid-template-columns:1fr; }
    .portfolio-gallery-grid{ grid-template-columns:1fr; }
    .portfolio-heading h1{ font-size:42px; }
    .portfolio-cta-inner{ padding:70px 25px; }
    .portfolio-cta h2{ font-size:36px; }
    .portfolio-cta p{ font-size:16px; }
}
@media(max-width:576px){
    .portfolio-cta{ margin:70px 0 20px; }
    .portfolio-cta-inner{ border-radius:24px; padding:60px 20px; }
    .portfolio-cta h2{ font-size:36px; line-height:1.2; }
    .portfolio-cta p{ font-size:16px; line-height:1.7; }
    .portfolio-cta-btn{
        width:100%;
        justify-content:center;
        font-size:18px;
        padding:16px 24px;
    }
}
@media(prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}






























.portfolio-home{

    display:flex;
    flex-direction:column;
    gap:36px;

}

.portfolio-feature{

    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:48px;
    align-items:center;

    padding:36px;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--card);
    transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;

}

/*
 * Scroll-reveal is opt-in via JS: the .reveal-armed class is only added
 * by portfolio-home.js once it has confirmed IntersectionObserver support
 * and that reduced-motion isn't requested. Content is ALWAYS visible by
 * default — if the script fails to load or errors out, nothing disappears.
 */
.reveal-armed .portfolio-feature{

    opacity:0;
    transform:translateY(48px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1),
               border-color .3s ease, box-shadow .3s ease;
    transition-delay:calc(var(--reveal-index, 0) * 60ms);

}

.reveal-armed .portfolio-feature.is-visible{

    opacity:1;
    transform:translateY(0);

}

.portfolio-feature:nth-child(even){

    grid-template-columns:1fr 1.1fr;

}

.portfolio-feature:nth-child(even) .portfolio-feature-image{

    order:2;

}

.portfolio-feature:nth-child(even) .portfolio-feature-content{

    order:1;

}

/* ---------- accent colors (blue / purple / teal, like the reference) ---------- */

.portfolio-feature.accent-blue{

    border-color:rgba(87,157,255,.35);

}

.portfolio-feature.accent-blue:hover{

    border-color:rgba(87,157,255,.7);
    box-shadow:0 0 45px rgba(87,157,255,.18);

}

.portfolio-feature.accent-purple{

    border-color:rgba(168,85,247,.4);
    box-shadow:0 0 45px rgba(168,85,247,.12);

}

.portfolio-feature.accent-purple:hover{

    border-color:rgba(168,85,247,.75);
    box-shadow:0 0 55px rgba(168,85,247,.22);

}

.portfolio-feature.accent-teal{

    border-color:rgba(45,212,191,.4);

}

.portfolio-feature.accent-teal:hover{

    border-color:rgba(45,212,191,.75);
    box-shadow:0 0 45px rgba(45,212,191,.18);

}

.accent-blue .portfolio-category{ border-color:#579dff; color:#579dff; }
.accent-purple .portfolio-category{ border-color:#a855f7; color:#c084fc; }
.accent-teal .portfolio-category{ border-color:#2dd4bf; color:#2dd4bf; }

.accent-blue .portfolio-btn{ background:linear-gradient(90deg,#579dff,#3b82f6); }
.accent-purple .portfolio-btn{ background:linear-gradient(90deg,#a855f7,#7c3aed); }
.accent-teal .portfolio-btn{ background:linear-gradient(90deg,#2dd4bf,#14b8a6); }

.accent-blue .portfolio-btn:hover{ box-shadow:0 15px 40px rgba(87,157,255,.35); }
.accent-purple .portfolio-btn:hover{ box-shadow:0 15px 40px rgba(168,85,247,.35); }
.accent-teal .portfolio-btn:hover{ box-shadow:0 15px 40px rgba(45,212,191,.35); }

/* ---------- image ---------- */

.portfolio-feature-image{

    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:var(--card);
    height:420px;

}

.portfolio-feature-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;

}

.portfolio-feature:hover .portfolio-main-image{

    transform:scale(1.06);

}

/* ---------- content ---------- */

.portfolio-feature-content{

    color:var(--text);

}

.portfolio-category{

    display:inline-block;

    padding:8px 16px;

    border:1px solid var(--primary);

    color:var(--primary);

    border-radius:50px;

    margin-bottom:18px;

    font-size:12px;

    font-weight:600;

    letter-spacing:.1em;

    text-transform:uppercase;

}

.portfolio-feature-content h2{

    font-size:34px;

    line-height:1.25;
    font-weight:700;
    font-family:inherit;
    margin:0 0 22px;

    color:var(--text);

}

.portfolio-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:22px;

}

.portfolio-tags span{

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

    color:var(--muted);

    padding:9px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:500;

    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;

}

.portfolio-tags span:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

    transform:translateY(-3px);

}

.portfolio-description{

    color:var(--muted);

    font-size:15px;

    line-height:1.7;

    margin:0 0 32px;

    max-width:46ch;

}

.portfolio-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    background:linear-gradient(90deg,var(--primary),var(--accent-2));

    background-size:200% 100%;

    background-position:0% 0%;

    text-decoration:none;

    padding:14px 28px;

    border-radius:8px;

    font-weight:600;

    transition:transform .35s ease, box-shadow .35s ease, background-position .5s ease;

}

.portfolio-btn-arrow{

    transition:transform .35s cubic-bezier(.22,1,.36,1);

}

.portfolio-btn:hover{

    transform:translateY(-3px);

    background-position:100% 0%;

}

.portfolio-btn:hover .portfolio-btn-arrow,
.portfolio-btn:hover svg{

    transform:translateX(5px);

}

.portfolio-btn:active{

    transform:translateY(-1px);

}

/* ---------- bottom CTA band ---------- */

.portfolio-cta{

    display:flex;
    align-items:center;
    gap:24px;

    margin-top:20px;
    padding:32px 40px;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--card);

}

.portfolio-cta-icon{

    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    flex:none;
    border-radius:50%;
    background:rgba(124,58,237,.15);
    font-size:22px;

}

.portfolio-cta-text{

    flex:1 1 auto;

}

.portfolio-cta-text h3{

    margin:0 0 4px;
    font-size:22px;
    color:var(--text);

}

.portfolio-cta-text p{

    margin:0;
    color:var(--muted);
    font-size:15px;

}

.portfolio-cta-btn{

    flex:none;
    background:linear-gradient(90deg,#7c3aed,#3b82f6);

}

@media(max-width:991px){

    .portfolio-feature,

    .portfolio-feature:nth-child(even){

        grid-template-columns:1fr;
        padding:24px;

    }

    .portfolio-feature:nth-child(even) .portfolio-feature-image,

    .portfolio-feature:nth-child(even) .portfolio-feature-content{

        order:unset;

    }

    .portfolio-feature-image{

        height:280px;

    }

    .portfolio-feature-content h2{

        font-size:28px;

    }

    .portfolio-cta{

        flex-wrap:wrap;
        text-align:center;
        justify-content:center;

    }

}

@media(prefers-reduced-motion: reduce){

    .portfolio-feature,
    .portfolio-feature-image img,
    .portfolio-btn,
    .portfolio-btn-arrow,
    .portfolio-tags span{

        transition:none;

    }

}