/*==========================================================
    FELIX TECHNOLOGIES
    PORTFOLIO PAGE
==========================================================*/


/* =========================================
   PORTFOLIO HERO BACKGROUND
========================================= */

.page-hero{

    position:relative;

    background-image:
        linear-gradient(
            90deg,
            rgba(5,8,22,.08) 0%,
            rgba(5,8,22,.15) 42%,
            rgba(5,8,22,.72) 58%,
            rgba(5,8,22,.96) 72%,
            #050816 100%
        ),
        url("https://staging.felixindia.com/wp-content/uploads/2026/07/felix-portfolio-hero-background.png");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}


/*----------------------------------------------------------
Overlay
----------------------------------------------------------*/

.hero-overlay{

    position:absolute;
    inset:0;

    background:

        linear-gradient(
        90deg,
        rgba(5,8,22,.92) 0%,
        rgba(5,8,22,.82) 42%,
        rgba(5,8,22,.45) 70%,
        rgba(5,8,22,.20) 100%);

    z-index:1;

}


/*----------------------------------------------------------
Noise Texture
----------------------------------------------------------*/

.page-hero::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.03;

    pointer-events:none;

    background-image:
    radial-gradient(#ffffff 1px, transparent 1px);

    background-size:14px 14px;

    z-index:1;

}


/*----------------------------------------------------------
Ambient Glows
----------------------------------------------------------*/

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

    z-index:0;

}


.glow-1{

    width:420px;
    height:420px;

    background:#00D4FF;

    top:-120px;
    left:-120px;

    opacity:.12;

}


.glow-2{

    width:520px;
    height:520px;

    background:#8B5CF6;

    right:-180px;
    bottom:-180px;

    opacity:.22;

}



/*==========================================================
    HERO GRID
==========================================================*/

.hero-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:minmax(0,46%) minmax(0,54%);

    align-items:center;

    gap:90px;

    width:100%;

    min-height:760px;

    padding:120px 0 100px;

}



/*==========================================================
    HERO CONTENT
==========================================================*/

.hero-content{

    position:relative;

    z-index:10;

    max-width:900px;

    width:100%;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}



/*==========================================================
    HERO BADGE
==========================================================*/

/*

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    margin:0 0 28px;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#00D4FF;

    box-shadow:
        0 0 35px rgba(0,212,255,.12);

}

*/

/*==========================================================
    HERO TITLE
==========================================================*/

.hero-title{
    font-size:56px;
    line-height:1.02;
    font-weight:800;
    letter-spacing:-1px;

    margin:14px 0 0;
    padding-bottom:0px;

    background:linear-gradient(
        90deg,
        #00D4FF,
        #4FACFE,
        #8B5CF6
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}



/*==========================================================
    HERO DIVIDER
==========================================================*/

.hero-divider{
    width:120px;
    height:4px;

    margin:10px auto 10px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #00D4FF,
        #4FACFE,
        #8B5CF6
    );
}

/*==========================================================
    HERO DESCRIPTION
==========================================================*/

.hero-description{
    max-width:720px;

    margin:0 auto;

    font-size:18px;
    line-height:1.65;

    color:#b9c3d5;
}


/*==========================================================
    HERO BUTTONS
==========================================================*/

.hero-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;

    gap:18px;

    margin-top:38px;

    width:100%;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{
    width:260px;
    min-width:260px;

    display:flex;
    align-items:center;
    justify-content:center;
}


/*==========================================================
    HERO STATS
==========================================================*/

.hero-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;

    width:100%;
    max-width:680px;

    margin:70px auto 0;

    position:relative;
    z-index:5;
}

.hero-stat{

    position:relative;

    padding:18px 0;

    transition:
        transform .35s ease,
        opacity .35s ease;

}

.hero-stat:hover{

    transform:translateY(-6px);

}

.hero-stat::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:40px;

    height:2px;

    border-radius:20px;

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

    opacity:.65;

}

.hero-stat h3{

    margin:12px 0 10px;

    font-size:52px;

    line-height:1;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--primary);

    text-shadow:0 0 20px rgba(0,212,255,.18);

}

.hero-stat span{

    display:block;

    color:var(--text-light);

    font-size:15px;

    line-height:1.6;

    font-weight:500;

}


/*==========================================================
    HERO VISUAL
==========================================================*/

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:620px;

    padding-top:0;

}


/* Glass Card */

.hero-visual-card{

    position:relative;

    width:100%;

    max-width:640px;

    height:560px;

    border-radius:32px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(18,24,43,.82),
            rgba(11,16,35,.92)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 30px 80px rgba(0,0,0,.45),
        0 0 70px rgba(0,212,255,.08);

    transform:translateY(120px);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


/* Gradient Border */

.hero-visual-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(0,212,255,.65),
            rgba(79,172,254,.20),
            rgba(139,92,246,.55)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

    opacity:.9;

}


/*==========================================================
    GRID
==========================================================*/

.hero-visual-grid{

    position:absolute;

    inset:0;

    opacity:.12;

    background-image:

        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:42px 42px;

}


/*==========================================================
    CENTER GLOW
==========================================================*/

.hero-visual-glow{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:340px;

    height:340px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(0,212,255,.30),
        transparent 72%);

    filter:blur(55px);

}


/*==========================================================
    EXTRA GLOWS
==========================================================*/

.hero-visual-card::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 18% 18%,
            rgba(0,212,255,.12),
            transparent 18%
        ),

        radial-gradient(
            circle at 82% 78%,
            rgba(139,92,246,.12),
            transparent 22%
        );

}


/* Blue Glow */

.hero-visual-glow{

    position:absolute;

    width:340px;

    height:340px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(0,212,255,.35),
        transparent 72%);

    filter:blur(55px);

}




/* Portfolio Title */

.hero-visual-content h3{

    margin:0;

    font-size:52px;
    line-height:1;

    font-weight:800;

    color:#ffffff;

}

/* Project Showcase */

.hero-visual-content p{

    margin:0;

    font-size:17px;
    line-height:1.4;

    font-weight:500;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#aebbd0;

}

/*==========================================================
    FEATURED PROJECTS HEADING
==========================================================*/

.portfolio-heading{

    width:100%;

    max-width:900px;

    margin:0 auto 80px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.portfolio-subtitle{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 24px;

margin-bottom:24px;

border-radius:999px;

background:rgba(0,212,255,.10);

border:1px solid rgba(0,212,255,.45);

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#00D4FF;

backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);

box-shadow:
0 0 8px rgba(0,212,255,.50),
0 0 20px rgba(0,212,255,.35),
0 0 40px rgba(0,212,255,.20);

}

.portfolio-heading-title{

    margin:0;

    font-size:clamp(56px,5vw,74px);

    line-height:1.18;

    font-weight:800;

    letter-spacing:-2px;

    text-align:center;

    padding-bottom:12px;

    overflow:visible;

    background:linear-gradient(
        90deg,
        #00D4FF,
        #4FACFE,
        #8B5CF6
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 18px rgba(79,172,254,.12),
        0 0 36px rgba(139,92,246,.08);

}

.portfolio-heading-title span{

    background:inherit;

    -webkit-background-clip:inherit;
    background-clip:inherit;

    -webkit-text-fill-color:inherit;

    color:inherit;

}

.portfolio-heading-divider{

    width:120px;

    height:5px;

    margin:34px auto;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #00D4FF,
        #8B5CF6
    );

    box-shadow:0 0 30px rgba(0,212,255,.35);

}

.portfolio-heading-text{

    max-width:760px;

    margin:0 auto;

    text-align:center;

    font-size:19px;

    line-height:1.9;

    color:rgba(255,255,255,.72);

}

/*==========================================================
    PORTFOLIO FILTERS
==========================================================*/

.portfolio-filters{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin:0 auto 70px;

}

.filter-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:999px;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    color:rgba(255,255,255,.82);

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

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    transition:all .35s ease;

}

.filter-btn:hover{

    color:#ffffff;

    transform:translateY(-3px);

    border-color:rgba(0,212,255,.45);

    box-shadow:0 10px 30px rgba(0,212,255,.18);

}

.filter-btn.active{

    color:#ffffff;

    background:linear-gradient(
        90deg,
        #00D4FF,
        #6B5CFF
    );

    border-color:transparent;

    box-shadow:
        0 12px 35px rgba(0,212,255,.30);

}

@media(max-width:768px){

    .portfolio-filters{

        gap:12px;

        margin-bottom:50px;

    }

    .filter-btn{

        padding:12px 22px;

        font-size:14px;

    }

}

/*==========================================================
    PORTFOLIO GRID
==========================================================*/

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:56px;

    max-width:1180px;

    margin:70px auto 0;

}

@media(max-width:992px){

    .portfolio-grid{

        grid-template-columns:1fr;

        gap:32px;

    }

}

/*==========================================================
    PORTFOLIO CARD
==========================================================*/

.portfolio-card{

    position:relative;
	max-width:540px;

    width:100%;

    margin:0 auto;
    overflow:hidden;

    border-radius:28px;

    background:
        linear-gradient(
        180deg,
        rgba(18,26,44,.96),
        rgba(10,18,34,.96));

    border:1px solid rgba(255,255,255,.06);

    transition:.45s ease;

    box-shadow:
        0 25px 60px rgba(0,0,0,.30);

}

.portfolio-card > a{

    position:relative;

    display:block;

    overflow:hidden;

}

.portfolio-card > a::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(5,8,22,.35),
        rgba(5,8,22,.08),
        transparent
    );

    opacity:.45;

    transition:.35s;

}

.portfolio-card:hover{
    border-color:rgba(0,212,255,.35);
    box-shadow:
        0 0 0 1px rgba(0,212,255,.15),
        0 30px 70px rgba(0,212,255,.12);
}

/*==========================================================
    PORTFOLIO CARD IMAGE
==========================================================*/

.portfolio-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    transition:
        transform .7s ease,
        filter .45s ease;

}

.portfolio-card:hover img{

    transform:scale(1.05);

    filter:brightness(1.05);

}

/*==========================================================
    PORTFOLIO CONTENT
==========================================================*/

.portfolio-content{

    padding:34px;

    display:flex;

    flex-direction:column;

    gap:20px;

    min-height:290px;

}

@media(max-width:768px){

    .portfolio-content{

        padding:24px;

        min-height:auto;

        gap:18px;

    }

    .portfolio-content > a{

        width:100%;

        justify-content:center;

        margin-top:12px;

    }

}

/*==========================================================
    PORTFOLIO BADGE
==========================================================*/

.portfolio-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(0,212,255,.08);

    border:1px solid rgba(0,212,255,.18);

    color:#00D4FF;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:
        0 0 20px rgba(0,212,255,.10);

}

/*==========================================================
    PORTFOLIO TITLE
==========================================================*/

.portfolio-content h3{

    margin:0;

    font-size:30px;

    line-height:1.25;

    font-weight:700;

}

.portfolio-content h3 a{

    color:#ffffff;

    text-decoration:none;

    transition:.35s ease;

}

.portfolio-content h3 a:hover{

    color:#00D4FF;

}

/*==========================================================
    PORTFOLIO DESCRIPTION
==========================================================*/

.portfolio-content p{

    margin:0;

    color:#B8C4D8;

    font-size:17px;

    line-height:1.85;

    flex:1;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/*==========================================================
    PORTFOLIO CTA
==========================================================*/

.portfolio-content > a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    width:auto;

    min-width:160px;

    padding:14px 26px;

    border-radius:999px;

    background:linear-gradient(135deg,#00D4FF,#6B5CFF);

}

.portfolio-content > a:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,212,255,.28);
}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

    .portfolio-content{

        padding:26px;

        min-height:auto;

    }

    .portfolio-content h3{

        font-size:24px;

    }

    .portfolio-content p{

        font-size:16px;

        line-height:1.75;

    }

    .portfolio-content > a{

        width:100%;

        justify-content:center;

    }

}

/*========================================
PAGINATION
========================================*/

.portfolio-pagination{

    margin-top: 60px;
    margin-bottom: 40px;

    display:flex;

    justify-content:center;

}

.portfolio-pagination .nav-links{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.portfolio-pagination a,
.portfolio-pagination span{

    min-width:48px;

    height:48px;

    padding:0 18px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    transition:.35s ease;

}

.portfolio-pagination a{

    color:#DDE7F5;

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

    border:1px solid rgba(255,255,255,.08);

}

.portfolio-pagination a:hover{

    color:#fff;

    border-color:transparent;

    background:linear-gradient(135deg,#00D4FF,#6B5CFF);

    transform:translateY(-3px);

    box-shadow:0 14px 35px rgba(0,212,255,.35);

}

.portfolio-pagination .current{

    color:#fff;

    background:linear-gradient(135deg,#00D4FF,#6B5CFF);

    box-shadow:0 12px 30px rgba(0,212,255,.35);

}

.portfolio-section{

    position:relative;

    padding:100px 0 20px;

}

.process-section{

    padding-top: 60px;
	margin-top:0;

    border-top:1px solid rgba(255,255,255,.06);

}

.process-section .section-title{

    text-align:center;

    margin-bottom:60px;

}

.tech-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}

.tech-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    font-size:20px;
    font-weight:700;
    transition:.35s;
}

.tech-card:hover{
    transform:translateY(-8px);
    border-color:#00D4FF;
    box-shadow:0 20px 50px rgba(0,212,255,.18);
}

@media(max-width:992px){
    .tech-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .tech-grid{
        grid-template-columns:1fr;
    }
}

/*==========================================================
    HERO RESPONSIVE
==========================================================*/

/*==============================
    Laptop
==============================*/

@media (max-width:1200px){

    .hero-grid{

        grid-template-columns:1fr 1fr;

        gap:60px;

        min-height:auto;

        padding:110px 0 90px;

    }

    .hero-title{

        font-size:clamp(50px,5vw,64px);

    }

    .hero-visual-card{

        max-width:560px;

        height:500px;

    }

}


/*==============================
    Tablet
==============================*/

@media (max-width:992px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:70px;

        padding:90px 0 80px;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

    }

    .hero-divider{

        margin:30px auto;

    }

    .hero-description{

        margin:0 auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        max-width:520px;

        margin:25px auto 0;

    }

    .hero-stat{

        text-align:center;

    }

    .hero-stat::before{

        left:50%;

        transform:translateX(-50%);

    }

    .hero-visual{

        padding-top:0;

        min-height:auto;

    }

    .hero-visual-card{

        max-width:620px;

        height:500px;

    }

}


/*==============================
    Mobile
==============================*/

@media (max-width:768px){

    .page-hero{

        min-height:auto;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:40px;

        padding:70px 0 60px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-divider{

        margin:28px auto;

    }

    .hero-description{

        margin:0 auto;

        font-size:18px;

        line-height:1.8;

    }

    .hero-title{

        font-size:clamp(42px,10vw,52px);

        letter-spacing:-1px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:16px;

        margin-top:34px;

    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{

        width:100%;

        justify-content:center;

    }

    .hero-stats{

        grid-template-columns:repeat(2,1fr);

        gap:26px;

        margin-top:42px;

    }

    .hero-stat{

        text-align:center;

    }

    .hero-stat::before{

        left:50%;

        transform:translateX(-50%);

    }

    .hero-stat h3{

        font-size:42px;

    }

    .hero-visual{

        padding-top:10px;

    }

    .hero-visual-card{

        width:100%;

        max-width:100%;

        height:360px;

        border-radius:24px;

    }

    .hero-visual-content h3{

        font-size:40px;

    }

}


/*==============================
    Small Mobile
==============================*/

@media (max-width:480px){

    .hero-grid{

        padding:60px 0 50px;

    }

    .hero-title{

        font-size:38px;

    }

    .hero-description{

        font-size:17px;

    }

    .hero-stats{

        grid-template-columns:1fr 1fr;

        gap:18px;

    }

    .hero-stat h3{

        font-size:36px;

    }

    .hero-visual-card{

        height:330px;

    }

    .hero-visual-content h3{

        font-size:34px;

    }

    .hero-visual-content p{

        font-size:13px;

        letter-spacing:2px;

    }

}

/* =========================
   PORTFOLIO BADGES FINAL
   ONLY PORTFOLIO PAGE
========================= */

/* OUR PORTFOLIO */

.page-hero .hero-badge,

/* OUR PROCESS */

.process-section .section-badge{

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;

    margin:0 auto 18px !important;

    padding:10px 18px !important;

    background:rgba(0, 212, 255, 0.10) !important;

    border:1px solid rgba(0, 212, 255, 0.45) !important;

    border-radius:999px !important;

    color:#00D4FF !important;

    font-size:13px !important;
    font-weight:600 !important;

    letter-spacing:1px !important;
    text-transform:uppercase !important;

    box-shadow:
    0 0 12px rgba(0, 212, 255, 0.55),
    0 0 24px rgba(0, 212, 255, 0.35),
    0 0 42px rgba(0, 212, 255, 0.18) !important;
}

/* =========================
   PORTFOLIO OUR PROCESS BADGE
========================= */

.process-section .section-title > span{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    width:fit-content;
    max-width:100%;

    padding:10px 22px !important;
    margin:0 auto 22px !important;

    border:1px solid rgba(0,212,255,.28) !important;
    border-radius:999px !important;

    background:rgba(0,212,255,.08) !important;

    color:#00D4FF !important;

    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;

    line-height:1 !important;
    white-space:nowrap;

    box-shadow:
        0 0 12px rgba(0,212,255,.55),
        0 0 24px rgba(0,212,255,.35),
        0 0 42px rgba(0,212,255,.18) !important;
}

/* =========================
   PORTFOLIO VIEW PROJECT TEXT
========================= */

.portfolio-section .portfolio-content > a{
    color:#ffffff !important;
    font-weight:700 !important;
    text-shadow:0 1px 3px rgba(0,0,0,.35) !important;
}

.portfolio-section .portfolio-content > a:hover{
    color:#ffffff !important;
}

/* =========================
   PORTFOLIO HERO ALIGNMENT FIX
========================= */

.page-hero .hero-grid{
    align-items: flex-start;
    padding-top: 40px;
}

.page-hero .hero-content{
    align-self: flex-start;
}

/* Stats — buttons se proper gap */

.page-hero .hero-stats{
    transform: none;
    margin-top: 100px;
}

/* =========================
   PORTFOLIO HERO CLEAN + ALIGN
========================= */

/* Remove portfolio hero background image */

.page-hero{
    background: #050816 !important;
    background-image: none !important;
}

.page-hero::before{
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.page-hero .hero-overlay,
.page-hero .hero-glow,
.page-hero .glow-1,
.page-hero .glow-2{
    display: none !important;
}


/* =========================
   RIGHT PORTFOLIO VISUAL
========================= */

.page-hero .hero-visual{
    transform: translateY(-165px) !important;
}


/* =========================
   PORTFOLIO STATS
========================= */

.page-hero .hero-stats{
    transform: translateY(-75px) !important;
    margin-top: 100px !important;
}

/* =========================================
   PORTFOLIO HERO CTA BUTTONS - FINAL
========================================= */

.page-hero .hero-buttons{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    gap:18px !important;

    width:100%;
    margin-top:38px;
}

.page-hero .hero-buttons .btn-primary,
.page-hero .hero-buttons .btn-secondary{
    width:260px !important;
    min-width:260px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 !important;
}

/* =========================================
   PORTFOLIO HERO VISUAL CONTENT
   EXACT CENTER ALIGNMENT
========================================= */

.page-hero .hero-visual-content{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    gap:14px;

    z-index:5;

    transform:none;

}

/* SUBTLE HOVER GLOW ONLY */

.page-hero .hero-visual-card:hover{

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 32px 85px rgba(0,0,0,.48),
        0 0 80px rgba(0,212,255,.12);

}

/* =========================================
   PORTFOLIO HERO VISUAL
   PREMIUM SHOWCASE CARD — FINAL
========================================= */


/* RIGHT VISUAL — ALIGN WITH LEFT HERO */

.page-hero .hero-visual{

    position:relative;

    display:flex;

    justify-content:center;
    align-items:center;

    min-height:620px;

    padding-top:110px;

}

/* =========================================
   PORTFOLIO HERO CARD
   FINAL ALIGNMENT + BORDER GLOW
========================================= */


/* RIGHT CARD — VERTICAL CENTER WITH LEFT HERO */

.page-hero .hero-visual{

    position:relative;

    display:flex;

    justify-content:center;
    align-items:center;

    min-height:760px;

    padding-top:0 !important;

}


/* =========================================
   CARD — PREMIUM OUTER GLOW
========================================= */

.page-hero .hero-visual-card{

    border:
        1px solid
        rgba(0,212,255,.32);

    box-shadow:

        /* INNER GLASS HIGHLIGHT */
        inset 0 1px 0
        rgba(255,255,255,.10),

        /* INNER CYAN EDGE */
        inset 0 0 28px
        rgba(0,212,255,.035),

        /* CARD DEPTH */
        0 30px 80px
        rgba(0,0,0,.48),

        /* CYAN BORDER GLOW */
        0 0 18px
        rgba(0,212,255,.16),

        0 0 45px
        rgba(0,212,255,.10),

        /* PURPLE OUTER AURA */
        0 0 75px
        rgba(139,92,246,.08);

}


/* =========================================
   PREMIUM HOVER
========================================= */

.page-hero .hero-visual .hero-visual-card:hover{

    transform:
        translateY(-6px) !important;

    border-color:
        rgba(0,212,255,.52);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.12),

        inset 0 0 32px
        rgba(0,212,255,.05),

        0 36px 90px
        rgba(0,0,0,.50),

        0 0 22px
        rgba(0,212,255,.24),

        0 0 55px
        rgba(0,212,255,.15),

        0 0 95px
        rgba(139,92,246,.10);

}

/* =========================================
   MAIN GLASS CARD
========================================= */

.page-hero .hero-visual-card{

    position:relative;

    width:100%;
    max-width:640px;
    height:560px;

    border-radius:32px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 35% 45%,
            rgba(0,212,255,.14),
            transparent 42%
        ),

        radial-gradient(
            circle at 78% 70%,
            rgba(139,92,246,.12),
            transparent 40%
        ),

        linear-gradient(
            145deg,
            rgba(18,24,43,.82),
            rgba(11,16,35,.94)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 30px 80px rgba(0,0,0,.45),
        0 0 70px rgba(0,212,255,.08);

    transform:translateY(0) !important;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}


/* =========================================
   ANIMATED TECH GRID
========================================= */

.page-hero .hero-visual-grid{

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(0,212,255,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,212,255,.045) 1px,
            transparent 1px
        );

    background-size:46px 46px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 72%
        );

    animation:portfolioGridMove 16s linear infinite;

    pointer-events:none;
}


@keyframes portfolioGridMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:46px 46px;
    }

}


/* =========================================
   CENTRAL AURA
========================================= */

.page-hero .hero-visual-glow{

    position:absolute;

    width:360px;
    height:360px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,212,255,.18),
            rgba(79,172,254,.08) 38%,
            rgba(139,92,246,.05) 58%,
            transparent 72%
        );

    filter:blur(12px);

    animation:portfolioAura 4s ease-in-out infinite;

    pointer-events:none;
}


@keyframes portfolioAura{

    0%,
    100%{
        transform:
            translate(-50%,-50%)
            scale(.94);

        opacity:.65;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.08);

        opacity:1;
    }

}


/* =========================================
   ORBIT RINGS
========================================= */

.page-hero .hero-visual-card::before{

    content:"";

    position:absolute;

    width:340px;
    height:340px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:
        1px solid
        rgba(0,212,255,.18);

    box-shadow:
        0 0 40px rgba(0,212,255,.08),
        inset 0 0 40px rgba(139,92,246,.05);

    animation:
        portfolioOrbitPulse
        5s ease-in-out infinite;

    pointer-events:none;
}

@keyframes portfolioOrbitPulse{

    0%,
    100%{
        opacity:.45;
        scale:.96;
    }

    50%{
        opacity:.9;
        scale:1.04;
    }

}


@keyframes portfolioOrbitSpin{

    from{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}


/* =========================================
   CARD CONTENT — EXACT CENTER
========================================= */

.page-hero .hero-visual-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    gap:14px;

    transform:none !important;

    z-index:10;
}


.page-hero .hero-visual-content h3{

    position:relative;

    margin:0;

    font-size:52px;
    line-height:1;

    font-weight:800;

    letter-spacing:-1px;

    color:#ffffff;

    text-shadow:
        0 0 30px rgba(0,212,255,.16);

}


.page-hero .hero-visual-content p{

    margin:0;

    font-size:16px;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#b9c3d5;

}


/* =========================================
   PREMIUM SUBTLE HOVER
========================================= */

.page-hero .hero-visual .hero-visual-card:hover{

    transform:translateY(-6px) !important;

    border-color:
        rgba(0,212,255,.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 36px 90px rgba(0,0,0,.48),
        0 0 90px rgba(0,212,255,.14),
        0 0 120px rgba(139,92,246,.06);

}


/* CONTENT DOES NOT MOVE INDEPENDENTLY */

.page-hero .hero-visual-content:hover{

    transform:none !important;

}


/* =========================================
   CARD CONTENT
   EXACT VERTICAL + HORIZONTAL CENTER
========================================= */

.page-hero .hero-visual-content{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    gap:14px;

    transform:none !important;

    z-index:5;
}


/* CONTENT MUST NOT MOVE INDEPENDENTLY */

.page-hero .hero-visual-content:hover{
    transform:none !important;
}

/* =========================================
   PORTFOLIO HERO CARD
   FINAL VERTICAL ALIGNMENT + PREMIUM GLOW
========================================= */


/* RIGHT VISUAL WRAPPER
   CENTER AGAINST COMPLETE LEFT HERO CONTENT */

.page-hero .hero-visual{

    position:relative;

    display:flex;

    justify-content:center;
    align-items:center;

    min-height:760px;

    padding-top:70px !important;

}


/* =========================================
   PORTFOLIO CARD
   PREMIUM CYAN + PURPLE OUTER GLOW
========================================= */

.page-hero .hero-visual-card{

    position:relative;

    border:1px solid rgba(0,212,255,.42);

    box-shadow:

        /* TOP GLASS EDGE */
        inset 0 1px 0 rgba(255,255,255,.10),

        /* INNER CYAN LIGHT */
        inset 0 0 35px rgba(0,212,255,.045),

        /* CARD DEPTH */
        0 32px 80px rgba(0,0,0,.52),

        /* CLOSE CYAN GLOW */
        0 0 12px rgba(0,212,255,.30),

        /* MEDIUM CYAN AURA */
        0 0 35px rgba(0,212,255,.20),

        /* LARGE PURPLE AURA */
        0 0 75px rgba(139,92,246,.16);

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

/* =========================================
   PREMIUM HOVER
========================================= */

.page-hero .hero-visual .hero-visual-card:hover{

    transform:translateY(-6px) !important;

    border-color:rgba(0,229,255,.72);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.14),

        inset 0 0 40px rgba(0,212,255,.065),

        0 38px 90px rgba(0,0,0,.54),

        0 0 18px rgba(0,229,255,.42),

        0 0 48px rgba(0,212,255,.28),

        0 0 95px rgba(139,92,246,.20);

}

/* =========================================
   PORTFOLIO HERO CARD
   PREMIUM OUTER LIGHT GLOW
========================================= */

.page-hero .hero-visual-card{

    position:relative;

    border:1px solid rgba(0,212,255,.48);

    box-shadow:

        /* NATURAL CARD DEPTH */
        0 30px 70px rgba(0,0,0,.50),

        /* CYAN BORDER LIGHT */
        0 0 6px rgba(0,229,255,.42),

        /* SOFT CYAN SPILL */
        0 0 18px rgba(0,212,255,.24),

        /* BLUE LIGHT AURA */
        0 0 38px rgba(79,172,254,.15),

        /* PURPLE OUTER AMBIENCE */
        0 0 65px rgba(139,92,246,.10);

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}


/* =========================================
   PREMIUM HOVER LIGHT
========================================= */

.page-hero .hero-visual .hero-visual-card:hover{

    transform:translateY(-6px) !important;

    border-color:rgba(0,229,255,.78);

    box-shadow:

        /* NATURAL CARD DEPTH */
        0 36px 82px rgba(0,0,0,.54),

        /* BRIGHT CYAN EDGE */
        0 0 8px rgba(0,229,255,.65),

        /* CYAN LIGHT SPILL */
        0 0 24px rgba(0,212,255,.36),

        /* BLUE LIGHT AURA */
        0 0 48px rgba(79,172,254,.22),

        /* PURPLE OUTER AMBIENCE */
        0 0 78px rgba(139,92,246,.15);

}

/* =========================================
   PORTFOLIO CARD
   VISIBLE OUTER NEON AURA
========================================= */

.page-hero .hero-visual .hero-visual-card{

    border:1px solid rgba(0,229,255,.55) !important;

    box-shadow:
        0 30px 70px rgba(0,0,0,.55) !important;

    filter:
        drop-shadow(0 0 8px rgba(0,229,255,.55))
        drop-shadow(0 0 18px rgba(0,212,255,.38))
        drop-shadow(0 0 32px rgba(79,172,254,.22))
        drop-shadow(0 0 46px rgba(139,92,246,.16));

    transition:
        transform .45s ease,
        border-color .45s ease,
        filter .45s ease,
        box-shadow .45s ease;

}


/* =========================================
   PORTFOLIO CARD HOVER
========================================= */

.page-hero .hero-visual .hero-visual-card:hover{

    transform:translateY(-6px) !important;

    border-color:rgba(0,229,255,.90) !important;

    box-shadow:
        0 36px 82px rgba(0,0,0,.58) !important;

    filter:
        drop-shadow(0 0 10px rgba(0,229,255,.80))
        drop-shadow(0 0 24px rgba(0,212,255,.55))
        drop-shadow(0 0 42px rgba(79,172,254,.32))
        drop-shadow(0 0 60px rgba(139,92,246,.22));

}

/* =========================================
   PORTFOLIO HERO
   RIGHT VISUAL VERTICAL CENTER ALIGNMENT
========================================= */

.page-hero .hero-visual{

    display:flex;
    align-items:center;
    justify-content:center;

    align-self:stretch;

}

/* =========================================
   PORTFOLIO HERO
   RIGHT CARD VERTICAL CENTER POSITION
========================================= */

@media (min-width: 993px){

    .page-hero .hero-visual{
        position:relative;
        top:80px;
    }

}

/* =========================================
   PORTFOLIO HERO BACKGROUND
========================================= */

body.post-type-archive-portfolio .page-hero{

    position: relative;

    background-image:
        linear-gradient(
            90deg,
            rgba(5,8,22,.16) 0%,
            rgba(5,8,22,.18) 72%,
            rgba(5,8,22,.50) 86%,
            #050816 100%
        ),
        url("https://staging.felixindia.com/wp-content/uploads/2026/07/felix-portfolio-hero-background.png") !important;

    background-size:
        100% 100%,
        110% 100% !important;

    background-position:
        left top,
        left top !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

}

/* =========================================
   PORTFOLIO HERO HEADING READABILITY
========================================= */

body.post-type-archive-portfolio .page-hero .page-title{

    position: relative;
    z-index: 2;

    filter:
        drop-shadow(0 2px 3px rgba(5,8,22,1))
        drop-shadow(0 8px 18px rgba(5,8,22,.95))
        drop-shadow(0 0 22px rgba(5,8,22,.80));

}

body.post-type-archive-portfolio .page-hero .page-title::before{

    content: "";

    position: absolute;

    top: 5%;
    right: -8%;
    width: 42%;
    height: 48%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(5,8,22,.88) 0%,
            rgba(5,8,22,.72) 35%,
            rgba(5,8,22,.38) 58%,
            rgba(5,8,22,.12) 74%,
            transparent 88%
        );

    filter: blur(18px);

    z-index: -1;

    pointer-events: none;

}

/* =========================================
   PORTFOLIO HERO MOBILE
   REMOVE DESKTOP VISUAL LAYOUT SPACE
========================================= */

@media (max-width: 768px){

    body.post-type-archive-portfolio .page-hero .hero-visual{
        display:none !important;
        min-height:0 !important;
        height:0 !important;
        padding:0 !important;
        margin:0 !important;
        transform:none !important;
    }

}

/* =========================================
   PORTFOLIO HERO MOBILE
   STATS GAP FIX
========================================= */

@media (max-width: 768px){

    body.post-type-archive-portfolio .page-hero .hero-stats{
        transform: translateY(-35px) !important;
        margin-top: 55px !important;
    }

}

/* =========================================
   PORTFOLIO HERO MOBILE
   BACKGROUND COMPOSITION FIX
========================================= */

@media (max-width: 768px){

    body.post-type-archive-portfolio .page-hero{

        background-size:
            100% 100%,
            auto 100% !important;

        background-position:
            center top,
            22% top !important;

    }

}

/* =========================================
   PORTFOLIO HERO MOBILE
   CONTENT READABILITY OVERLAY
========================================= */

@media (max-width: 768px){

    body.post-type-archive-portfolio .page-hero::before{
        content:"" !important;
        display:block !important;

        position:absolute !important;
        inset:0 !important;

        background:
            linear-gradient(
                90deg,
                rgba(5,8,22,.18) 0%,
                rgba(5,8,22,.42) 50%,
                rgba(5,8,22,.18) 100%
            ) !important;

        pointer-events:none !important;
        z-index:1 !important;
    }

    body.post-type-archive-portfolio .page-hero .hero-grid{
        position:relative !important;
        z-index:5 !important;
    }

}

/* =========================================
   PORTFOLIO HERO MOBILE
   CONTENT GROUP UP SHIFT
========================================= */

@media (max-width: 768px){

    body.post-type-archive-portfolio .page-hero .hero-content{
        transform: translateY(-105px) !important;
    }

}

/* =========================================
   PORTFOLIO HERO MOBILE
   BOTTOM CROP FIX
========================================= */

@media (max-width: 768px){

    body.post-type-archive-portfolio .page-hero .hero-grid{
        margin-bottom: -175px !important;
    }

}

/* =========================================
   PORTFOLIO CARDS MOBILE
   WIDTH + BORDER VISIBILITY FIX
========================================= */

@media (max-width: 768px){

    body.post-type-archive-portfolio .portfolio-card{
        width: calc(100% - 28px) !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

/* =========================================
   PORTFOLIO PROCESS BADGE
   TEXT VISIBILITY FIX
========================================= */

body.post-type-archive-portfolio
.process-section .section-title > span{
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;

    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   PORTFOLIO PAGE — FINAL FELIX HOMEPAGE GRADIENT HEADINGS
========================================================= */

.portfolio-heading-title,
.process-section .section-title h2,
.cta-title {
    background: linear-gradient(
        90deg,
        rgb(0, 212, 255) 0%,
        rgb(79, 172, 254) 52%,
        rgb(107, 124, 255) 76%,
        rgb(139, 92, 246) 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}