/* ==========================================
   INDUSTRIES PAGE
========================================== */

.page-hero{

position:relative;

overflow:hidden;

padding:120px 0 90px;

background:
linear-gradient(180deg,#071120 0%,#050816 100%);

}


.page-hero .container{

position:relative;

z-index:2;

}


.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}


.hero-content{

max-width:620px;

}

/*

.hero-badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 24px;

margin-bottom:24px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#18C8FF;

background:rgba(24,200,255,.08);

border:1px solid rgba(24,200,255,.25);

border-radius:999px;

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

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

}

*/

.page-title{

font-size:clamp(44px,5vw,68px);

font-weight:800;

line-height:1.08;

letter-spacing:-1px;

margin-bottom:28px;

color:#fff;

}


.page-title span{

display:block;

margin-top:8px;

background:linear-gradient(
90deg,
#18C8FF,
#5E5BFF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


.hero-content p{

font-size:20px;

line-height:1.8;

color:#B9C3D5;

margin-bottom:42px;

}


.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}


.hero-image{

display:flex;

justify-content:center;

align-items:center;

}


.hero-image img{

width:100%;

max-width:560px;

height:auto;

display:block;

}


.hero-glow{

position:absolute;

border-radius:50%;

filter:blur(100px);

opacity:.35;

}


.glow-1{

width:420px;

height:420px;

background:#18C8FF;

top:-140px;

left:-120px;

}


.glow-2{

width:420px;

height:420px;

background:#5E5BFF;

right:-120px;

bottom:-140px;

}

/*=========================================
    INDUSTRY FEATURES
=========================================*/

.industry-features{

    margin:8px 0 0;

    padding:0;

    list-style:none;

}

.industry-features li{

    position:relative;

    padding-left:22px;

    margin-bottom:10px;

    font-size:15px;

    color:#B9C3D5;

    line-height:1.6;

}

.industry-features li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:var(--primary);

    font-weight:700;

}

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

.industries-section{

    padding:100px 0;

}

.industries-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    align-items:stretch;

}

.industry-card{

    display:flex;

    flex-direction:column;

    height:100%;

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

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

    border-radius:24px;

    padding:32px;

    transition:.35s ease;

}

.industry-card:hover{

    transform:translateY(-10px);

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

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

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

}

.industry-card:hover .industry-icon{

    transform:scale(1.08) rotate(-5deg);

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

    transition:.35s ease;

}

.industry-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:var(--primary);

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

    margin-bottom:25px;

}

.industry-card h3{

    font-size:26px;

    margin-bottom:15px;

}

.industry-card p{

    color:#B9C3D5;

    line-height:1.8;

    font-size:16px;

    margin:18px 0 24px;

    flex:1;

}

@media(max-width:992px){

    .industries-grid{

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

    }

}

@media(max-width:768px){

    .industries-grid{

        grid-template-columns:1fr;

    }

}

/*=========================================
    INDUSTRIES FEATURES
=========================================*/

.industry-features{

    list-style:none;

    margin-top:auto;

    padding-top:24px;

    padding-left:0;

}

.industry-features li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    font-size:15px;

    color:#D7E6FF;

}

.industry-features li:last-child{

    margin-bottom:0;

}

.industry-features li::before{

    content:"✓";

    color:var(--primary);

    font-weight:700;

    font-size:16px;

    flex-shrink:0;

}

/*=========================================
    SECTION HEADER
=========================================*/

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 24px;

margin-bottom:24px;

border-radius:999px;

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

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

color:var(--primary);

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

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);

}

.section-title{

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

    font-weight:800;

    line-height:1.12;

    letter-spacing:-1px;

    color:#fff;

    margin-bottom:24px;

}

.section-title .section-badge{

    display:block;

    margin-top:8px;

    background:linear-gradient(
        90deg,
        #18C8FF,
        #4EA6FF,
        #8B5CF6
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.section-description{

    max-width:700px;

    margin:0 auto;

    font-size:18px;

    line-height:1.8;

    color:#B9C3D5;

}

/*=========================================
    WHY CHOOSE FELIX
=========================================*/

.why-industries{

    position:relative;

    padding:120px 0;

}

.why-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.why-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    height:100%;

    padding:40px 35px;

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

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

    border-radius:24px;

    transition:.35s ease;

}

.why-card:hover{

    transform:translateY(-10px);

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

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

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

}

.why-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:20px;

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

    color:var(--primary);

    font-size:30px;

    transition:.35s ease;

}

.why-card:hover .why-icon{

    transform:scale(1.08) rotate(-5deg);

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

}

.why-card h3{

    font-size:28px;

    font-weight:700;

    color:#fff;

    margin-bottom:18px;

    line-height:1.3;

}

.why-card p{

    color:#B9C3D5;

    font-size:17px;

    line-height:1.8;

    margin:0;

}

@media(max-width:992px){

    .why-grid{

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

    }

}

@media(max-width:768px){

    .why-industries{

        padding:90px 0;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .why-card{

        padding:30px;

    }

    .why-icon{

        width:64px;

        height:64px;

        font-size:26px;

    }

    .why-card h3{

        font-size:24px;

    }

}

/*=========================================
    INDUSTRIES CTA
=========================================*/

.industries-cta{

    position:relative;

    padding:140px 0;

}

.industries-cta .section-description{

    max-width:720px;

    margin:30px auto 0;

}

.industries-cta .cta-box{

    position:relative;

    max-width:980px;

    margin:0 auto;

    text-align:center;

    padding:80px 70px;

    border-radius:32px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.95),
            rgba(8,12,24,.98)
        );

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

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

}

.industries-cta .cta-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-120px;

    top:-120px;

    border-radius:50%;

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

    filter:blur(90px);

}

.industries-cta .cta-box::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(107,92,255,.12);

    filter:blur(90px);

}

.industries-cta .section-badge,

.industries-cta .section-title,

.industries-cta .section-description,

.industries-cta .hero-buttons{

    position:relative;

    z-index:2;

}

.industries-cta .hero-buttons{

    justify-content:center;

    margin-top:55px;

}

@media(max-width:768px){

    .industries-cta{

        padding:90px 0;

    }

    .industries-cta .cta-box{

        padding:50px 28px;

        border-radius:24px;

    }

}

/* =========================
   INDUSTRIES HERO BADGE FINAL
========================= */

.page-hero .hero-content > .hero-badge{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

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

    padding:10px 22px !important;
    margin-bottom: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;
}

/* =========================
   INDUSTRIES PAGE
   FELIX GRADIENT HEADINGS
========================= */

.industries-section h2.section-title,
.why-industries h2.section-title,
.industries-cta h2.section-title{
    display:inline-block;

    padding-bottom:8px;

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

    -webkit-background-clip:text;
    background-clip:text;

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

/* =========================================
   INDUSTRIES HERO IMAGE SIZE + 4-SIDE BLEND
========================================= */

.hero-image > img{

    width: 145% !important;
    max-width: none !important;
    height: auto !important;

    position: relative;
    left: 2%;

    display: block;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.55) 6%,
            #000 14%,
            #000 88%,
            rgba(0,0,0,.65) 95%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 88%,
            transparent 100%
        );

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.55) 6%,
            #000 14%,
            #000 88%,
            rgba(0,0,0,.65) 95%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 88%,
            transparent 100%
        );

    mask-composite: intersect;

}

/* =========================================================
   INDUSTRIES HERO — PREMIUM TECHNOLOGY BACKGROUND
========================================================= */

body.page-id-2757 .page-hero{
    position:relative;
    isolation:isolate;

    background:
        linear-gradient(
            90deg,
            rgba(3,8,24,.18) 0%,
            rgba(3,8,24,.28) 36%,
            rgba(3,8,24,.76) 61%,
            rgba(3,8,24,.98) 78%
        ),
        url("https://staging.felixindia.com/wp-content/uploads/2026/07/felix-industries-hero-background.png")
        center center / cover no-repeat !important;
}

/* =========================================================
   INDUSTRIES HERO — FINAL BADGE + IMAGE POSITION
========================================================= */

/* FELIX STANDARD CYAN GLOW BADGE */

body.page-id-2757 .page-hero .hero-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    padding: 12px 24px;
    margin-bottom: 24px;

    border-radius: 999px;

    background-color: #031525 !important;
    background-image: none !important;

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

    color: #00D4FF;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow:
    0 0 8px rgba(0, 212, 255, .65),
    0 0 22px rgba(0, 212, 255, .55),
    0 0 45px rgba(0, 212, 255, .42),
    0 0 80px rgba(0, 212, 255, .32),
    0 0 110px rgba(0, 212, 255, .18);
}

/* RIGHT INDUSTRY ECOSYSTEM IMAGE — SHIFT RIGHT */

body.page-id-2757 .page-hero .hero-image{
    transform:translateX(55px);
}

/* =========================
   INDUSTRIES HERO - MOBILE
========================= */

@media (max-width: 768px){

/* =========================
   MOBILE HERO BACKGROUND POSITION
========================= */

body.page-id-2757 .page-hero{
     background-image:
        linear-gradient(
            90deg,
            rgba(3, 8, 24, .18) 0%,
            rgba(3, 8, 24, .18) 36%,
            rgba(3, 8, 24, .28) 68%,
            rgba(3, 8, 24, .18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 8, 24, .08) 0%,
            rgba(3, 8, 24, .10) 65%,
            rgba(3, 8, 24, .20) 100%
        ),
        url("https://staging.felixindia.com/wp-content/uploads/2026/07/felix-industries-hero-background.png") !important;

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

    background-position:
        0 50%,
        0 50%,
        left center !important;

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

    .page-hero{
        min-height: auto;
        padding: 90px 0 70px;
        overflow: hidden;
    }

    .page-hero .container{
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-hero .hero-grid{
        display: flex !important;
        flex-direction: column;
        gap: 42px !important;
        align-items: stretch !important;
    }

    .page-hero .hero-content{
        width: 100%;
        max-width: 100%;
        position: relative;
        z-index: 3;
    }

    .page-hero .hero-badge{
        margin-bottom: 22px;
    }

    .page-hero .page-title{
        font-size: 46px;
        line-height: 1.08;
        letter-spacing: -1.5px;
        max-width: 100%;
    }

    .page-hero .hero-content p{
        max-width: 100%;
        font-size: 17px;
        line-height: 1.75;
    }

    .page-hero .hero-image{
        width: 100%;
        max-width: 100%;
        margin: 0;
        transform: none;
        position: relative;
        z-index: 2;
    }

    .page-hero .hero-image img{
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

}

/* =========================================
   INDUSTRIES HERO IMAGE — MOBILE FINAL
========================================= */

@media (max-width: 768px){

    body.page-id-2757 .page-hero .hero-image{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 28px 0 0 !important;

        transform: none !important;

        position: relative !important;
        z-index: 2 !important;

        overflow: visible !important;
    }

    body.page-id-2757 .page-hero .hero-image img{
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;

        transform: none !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

}

@media (max-width: 767px){

    .page-hero .container{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .page-hero .hero-grid{
        display: block !important;
        width: 100% !important;
    }

    .page-hero .hero-content{
        width: 100% !important;
        max-width: 100% !important;
    }

    .page-hero .page-title{
        font-size: 42px !important;
        line-height: 1.08 !important;
        letter-spacing: -1.2px !important;
        max-width: 100% !important;
    }

}

@media (max-width: 768px){

    .page-hero .hero-buttons{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;

        width: 100% !important;
        max-width: 100% !important;

        align-items: stretch !important;
    }

    .page-hero .hero-buttons .btn-primary,
    .page-hero .hero-buttons .btn-secondary{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

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

        padding: 14px 10px !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
        text-align: center !important;

        white-space: nowrap !important;
    }

}

/* =========================
   MOBILE HERO TEXT READABILITY
========================= */

.page-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 24, .28) 0%,
            rgba(2, 8, 24, .16) 55%,
            rgba(2, 8, 24, 0) 100%
        );
}

.page-hero .container{
    position: relative;
    z-index: 2;
}

/* =========================================
   INDUSTRIES HERO — MOBILE HEIGHT FIX
========================================= */

@media (max-width: 768px){

    body.page-id-2757 .page-hero{
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

}

/* =========================================
   INDUSTRIES SECTION — MOBILE TOP GAP FIX
========================================= */

@media (max-width: 768px){

    body.page-id-2757 .industries-section{
        padding-top: 20px !important;
    }

}

/* =========================================
   INDUSTRIES ECOSYSTEM IMAGE — MOBILE GAP
========================================= */

@media (max-width: 768px){

    body.page-id-2757 .page-hero + .hero-image{
        width:100% !important;
        max-width:100% !important;

        margin:28px 0 0 !important;

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

        position:relative !important;
        transform:none !important;

        overflow:hidden !important;
    }

    body.page-id-2757 .page-hero + .hero-image img{
        display:block !important;

        width:100% !important;
        max-width:100% !important;
        height:auto !important;

        margin:0 !important;
    }

}

/* =========================================================
   FELIX HOMEPAGE GRADIENT — INDUSTRIES PAGE HEADINGS
   ========================================================= */

.page-title,
.industries-section h2.section-title,
.why-industries h2.section-title,
.industries-cta h2.section-title {
    display: inline-block !important;

    background: linear-gradient(
    90deg,
    #00D4FF 0%,
    #4FACFE 50%,
    #7C3AED 100%
) !important;

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

/* =========================================================
   BLOG PAGE — FINAL FELIX GRADIENT
   EXISTING GRADIENT TEXT ONLY
========================================================= */

.page-hero .page-title span,
.featured-posts-section .section-title h2,
.blog-categories .section-title span,
.blog-cta .cta-title span {
    background: linear-gradient(
        90deg,
        #00D4FF 0%,
        #4FACFE 42%,
        #6B5CFF 72%,
        #7C3AED 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

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