/*======================================================
    SERVICES PAGE
======================================================*/

.section{

    padding:120px 0;

}

/*======================================================
SERVICE CARD
======================================================*/

.service-card{

    height:100%;
    transition:.35s ease;

}

.service-card-inner{

display:flex;

min-height:460px;

flex-direction:column;

height:100%;

min-height:470px;

position:relative;

background:rgba(16,24,43,.72);

backdrop-filter:blur(18px);

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

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

border-radius:28px;

overflow:hidden;

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

}

.service-card-inner::before{

content:"";

position:absolute;

inset:0;

border-radius:28px;

padding:1px;

background:

linear-gradient(

135deg,

rgba(0,212,255,.35),

rgba(107,92,255,.15)

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-card:hover .service-card-inner{

transform:translateY(-10px);

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

box-shadow:
0 18px 55px rgba(0,212,255,.16),

0 0 35px rgba(0,212,255,.08);

border-color:#00D4FF;

}

.section-heading h2{

 font-size:clamp(42px,4vw,58px);

    font-weight:800;
    margin:0 auto 18px;
    text-align:center;

    line-height:1.18;

    letter-spacing:-0.5px;

    margin-bottom:18px;

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

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

}

.section-heading p{

max-width:900px;
margin:18px auto 0;
text-align:center;

    font-size:18px;

    line-height:1.8;

    color:var(--text-light);

    margin:18px 0 0;

}

.section-heading{

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

margin:0 auto 45px;
text-align:center;

}

.section-heading .section-subtitle{

    display:block;

    text-align:center;

    margin-bottom:16px;

}

.service-title a{

color:#ffffff;

text-decoration:none;

transition:.3s;

}

.service-card:hover .service-title a{

color:var(--primary);

}

.service-card-image{

    display:block;

    overflow:hidden;

    aspect-ratio:16/10;

}

.service-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.service-card:hover .service-image{

    transform:scale(1.08);

}

.service-card-placeholder{

height:125px;

display:flex;

align-items:center;

justify-content:center;

background:
radial-gradient(circle at center,
rgba(0,212,255,.18),
transparent 70%),

linear-gradient(
135deg,
#1b4168,
#232c59
);

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

}

.service-card-placeholder::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(

rgba(0,212,255,.35),

transparent 70%

);

filter:blur(30px);

}

.service-card-placeholder i{

font-size:52px;

color:var(--primary);

text-shadow:0 0 25px rgba(0,212,255,.45);

}

.service-card-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:34px;
    background:#12192C;

}

.service-title{

 margin:0 0 16px;

font-size:24px;

font-weight:700;

line-height:1.3;

color:#FFFFFF;

}

.gradient-heading{

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

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

}

.service-excerpt{

margin-top:18px;

margin:0;

font-size:15px;

line-height:1.85;

color:#B9C7E3;

color:var(--text-light);

flex:1;

}

.service-link{

   margin-top:auto;

padding-top:28px;

    font-size:13px;
    font-weight:700;

    color:var(--primary);

    display:inline-flex;

align-items:center;

gap:10px;

letter-spacing:.5px;

text-transform:uppercase;

}

.service-card:hover .service-link{

color:#4FD6FF;

}

.service-link i{

    transition:transform .3s ease;

}

.service-card:hover .service-link i{

    transform:translateX(6px);

}


/*======================================
SERVICES CARD IC0NS
======================================*/

.service-icon{

    position:relative;

    width:64px;
    height:64px;
    margin-top:-2px;
    color:#00E5FF;

    margin:0;
    translate:0 -6px;

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

    z-index:2;

}

.service-icon::before{

content:"";

position:absolute;

width:72px;

height:72px;

border-radius:50%;

background:

radial-gradient(

rgba(0,212,255,.12),

transparent 70%

);

filter:blur(16px);

}


.service-icon svg{

    width:64px !important;
    height:64px !important;
    color:#00D4FF;
    stroke:currentColor;

    display:block;

    transition:.35s ease;

    filter:
        drop-shadow(0 0 12px rgba(0,212,255,.70))
        drop-shadow(0 0 30px rgba(79,172,254,.45))
        drop-shadow(0 0 60px rgba(79,172,254,.25));

}

.service-icon svg *{
    stroke:currentColor;
}

.service-card:hover svg{

transform:

translateY(-3px)

scale(1.08);

}

.service-card:hover .service-icon svg{

    transform:scale(1.08);

    color:#8B5CF6;

    filter:
        drop-shadow(0 0 12px rgba(0,212,255,.55))
        drop-shadow(0 0 24px rgba(139,92,246,.35));

}

.service-card-top{

    position:relative;
    overflow:hidden;

    height:136px;

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

    border-radius:24px 24px 0 0;

    background:#273754;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -40px 60px rgba(0,0,0,.20);

}

.service-card-top::before{

    content:"";

    position:absolute;
    inset:0;

    left:50%;
    top:50%;

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

    width:260px;
    height:260px;
    z-index:1;

    pointer-events:none;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,212,255,.45) 0%,
        rgba(79,172,254,.26) 25%,
        rgba(139,92,246,.14) 50%,
        transparent 75%
    );

    filter:blur(30px);

    opacity:1;

    z-index:0;

    pointer-events:none;

}

.service-card-top::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

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

}

*/

.service-card:hover .service-card-top{

   background:#314768;
    background:
        radial-gradient(
            circle at center,
            rgba(0,212,255,.28) 0%,
            rgba(79,172,254,.16) 35%,
            rgba(139,92,246,.08) 65%,
            rgba(255,255,255,.03) 100%
        ),
        background:
        linear-gradient(
            180deg,
        #385A86 0%,
        #2D4467 100%
    );

}

/*======================================
EMPTY STATE
======================================*/

.services-empty{

    max-width:650px;

    margin:0 auto;

    padding:70px 50px;

    text-align:center;

    background:#ffffff;

    border-radius:28px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.services-empty-icon{

    width:90px;

    height:90px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:linear-gradient(135deg,#00d4ff,#7b61ff);

    color:#fff;

}

.services-empty h3{

    margin-bottom:18px;

}

.services-empty p{

    color:#666;

    margin:0;

}

/*======================================
FEATURED SERVICES
======================================*/

.featured-services{

padding-top:140px;

}

.services-grid{

display:grid;
width:100%;
display:grid;

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

gap:32px;

justify-content:center;

max-width:1200px;

margin:55px auto 0;

margin-top:40px;

align-items:stretch;

}

.featured-services .container{

    display:flex;
    flex-direction:column;
    align-items:center;

}

/* ==========================================
   TABLET
========================================== */

@media(max-width:1200px){

.services-grid{

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

}

}

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

@media(max-width:767px){

.services-grid{

grid-template-columns:1fr;

gap:24px;

}

}


/* ==========================================
   SERVICES PAGE
========================================== */

/* HERO */

.services-hero,
.services-section,
.process-section,
.tech-section,
.cta-section{

background:#050816;

}

.services-hero {
    padding: 140px 0 140px;
    padding-bottom: 170px;
    min-height: 820px;

    display: flex;
    align-items: center;

    position: relative;
    text-align: center;
    overflow: hidden;

    background:
        linear-gradient(
            rgba(5, 8, 22, .38),
            rgba(5, 8, 22, .38)
        ),
        url("../images/services-bg.webp");

    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;

    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.services-hero .container{

position:relative;

z-index:2;

}

.services-hero-content{

max-width:980px;

margin:0 auto;

}

.services-hero h1{

    font-size:clamp(48px,5vw,72px);

    font-weight:800;

    line-height:1.08;

    margin:24px 0;

    letter-spacing:-1px;

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

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

}

.services-hero p{

max-width:760px;

margin:0 auto;

font-size:20px;

line-height:1.8;

color:var(--text-light);

}

.service-highlights{

margin-top:35px;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:14px;

}

/*

.hero-badge{

display:inline-flex;

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

padding:10px 22px;
margin-bottom:18px;

border-radius:999px;

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

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

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

font-size:14px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:#00D4FF;

position:relative;

overflow:visible;

}

*/

.services-hero-content p{

max-width:850px;
margin:auto;

}

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

.services-hero-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin-top:32px;

flex-wrap:wrap;

}

.page-hero h1{

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

line-height:1.1;

font-weight:800;

margin:0 0 20px;

}

.page-hero p{

font-size:20px;

line-height:1.8;

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

max-width:900px;

}

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

.why-choose{
    padding:140px 0;
}

.why-grid{

    display:grid;

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

    gap:36px;

    margin-top:70px;

}

.why-card{

    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:280px;
    justify-content:flex-start;

    padding:36px 30px;

    border-radius:24px;
    backdrop-filter:blur(14px);

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

    background:

linear-gradient(
180deg,
rgba(26,36,58,.96) 0%,
rgba(17,25,42,.98) 55%,
rgba(10,16,29,1) 100%
);

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

    overflow:hidden;

    transition:

transform .35s ease,

box-shadow .35s ease,

border-color .35s ease;

}

.why-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

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

opacity:0;

transition:.35s;

}

.why-card:hover::before{

opacity:1;

}

.why-card:hover{

     transform:translateY(-10px);

    border-color:#00D4FF;

    box-shadow:
        0 24px 60px rgba(0,212,255,.16),

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

}

.why-icon{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    margin-bottom:26px;

    border-radius:20px;

    font-size:28px;

    color:#ffffff;

    background:
    linear-gradient(
        135deg,
        #00D4FF 0%,
        #38BDF8 35%,
        #6366F1 70%,
        #8B5CF6 100%
    );

    box-shadow:
    0 10px 24px rgba(0,212,255,.16),
    0 0 14px rgba(139,92,246,.08),
    inset 0 1px 0 rgba(255,255,255,.15);

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

}

.why-icon::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:28px;

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

    z-index:-1;

}

.why-card:hover .why-icon{

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

    box-shadow:
        0 16px 40px rgba(0,212,255,.30),
        0 0 32px rgba(139,92,246,.18);

}

.why-card h3{

    font-size:30px;

    font-weight:700;

    line-height:1.2;

    color:#ffffff;

    margin:22px 0 16px;

    letter-spacing:-0.4px;

}

.why-card p{

    color:#C7D3E8;

    margin-top:8px;

    flex:1;

    max-width:92%;

    line-height:1.8;

    font-size:16px;

    font-weight:400;

}

@media(max-width:992px){

    .why-grid{

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

    }

}

@media(max-width:768px){

    .why-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================
OUR PROCESS
==========================================*/

.process-grid{

    display:grid;

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

    gap:36px;

    margin-top:55px;

}

.process-card{

    position:relative;

    overflow:hidden;

    padding:40px 34px;

    min-height:300px;

    border-radius:26px;

    background:linear-gradient(
        180deg,
        rgba(24,33,52,.95),
        rgba(14,21,36,.98)
    );

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

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-10px);

    border-color:#00D4FF;

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

}

.process-card:hover .process-icon{

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

}

.process-number{

    position:absolute;

    right:26px;

    top:18px;

    font-size:86px;

    font-weight:800;

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

    line-height:1;

    pointer-events:none;

}

.process-icon{

    width:72px;

    height:72px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#fff;

    margin-bottom:30px;
    transition:.35s;

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

    box-shadow:
0 12px 35px rgba(0,212,255,.30),
0 0 45px rgba(139,92,246,.15);

}

.process-card h3{

    font-size:28px;

    margin-bottom:18px;

    color:#fff;

    font-weight:700;
    transition:.35s;

}

.process-card:hover h3{

    color:#00D4FF;

}

.process-card p{

    color:#B8C4D8;

    line-height:1.8;

    font-size:16px;

}

.process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

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

    opacity:0;

    transition:.35s;

}

.process-card:hover::before{

    opacity:1;

}

/*==========================================
CTA SECTION
==========================================*/

.cta-section{

    padding:140px 0;

    position:relative;

}

.cta-box{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:90px 70px;

    border-radius:36px;

    background:
    linear-gradient(
        180deg,
        rgba(22,32,52,.96),
        rgba(12,18,33,.99)
    );

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

    box-shadow:
    0 35px 100px rgba(0,212,255,.10),
    inset 0 1px 0 rgba(255,255,255,.05);

}

.cta-box::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

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

    top:-180px;

    left:-120px;

}

.cta-box::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
radial-gradient(
rgba(139,92,246,.12),
transparent 72%
);

    right:-120px;

    bottom:-180px;

}

.cta-box>*{

    position:relative;

    z-index:2;

}

.cta-box h2{

font-size:58px;

line-height:1.18;

margin:20px auto 28px;

padding-bottom:16px;

max-width:820px;

font-weight:800;

letter-spacing:-1px;

overflow:visible;

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

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

-webkit-text-fill-color:transparent;

}

.cta-box p{

    max-width:700px;

    margin:0 auto 40px;

    color:#B8C4D8;

    font-size:19px;

    line-height:1.8;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    margin-top:45px;

    flex-wrap:wrap;

}

.cta-buttons a{

    transition:.35s;

}

.cta-buttons .btn-primary:hover{

    transform:translateY(-4px);

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

}

.cta-buttons .btn-secondary:hover{

    border-color:#00D4FF;

    color:#fff;

    transform:translateY(-4px);

}

.section-tag{

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

padding:10px 18px;

border-radius:999px;

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

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

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

font-size:14px;
font-weight:600;

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

color:#00D4FF;

margin-bottom:22px;

position:relative;
overflow:visible;

}

.cta-stat-number{

    font-size:54px;

    font-weight:800;

    line-height:1;

}

.cta-stat-label{

    color:#AEBBD2;

    font-size:16px;

    margin-top:12px;

}

.cta-stats{

    margin-top:70px;
    padding-top:40px;
    display:grid;

    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.06);

    gap:40px;

}

.cta-stats strong{

    display:block;

    font-size:46px;
    font-weight:800;
    color:#fff;

    margin-bottom:8px;

}

.cta-stats span{

    color:#9FB2CC;

}

@media(max-width:991px){

.cta-box{

padding:70px 40px;

}

.cta-box h2{

font-size:44px;

}

.cta-stats{

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

}

}

@media(max-width:767px){

.cta-box{

padding:55px 28px;

}

.cta-box h2{

font-size:34px;

}

.cta-box p{

font-size:16px;

}

.cta-stats{

grid-template-columns:1fr;

gap:28px;

}

}

/*======================================
=            FAQ SECTION
======================================*/

.services-faq{

    padding:140px 0 170px;

}

.faq-list{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    background:linear-gradient(
        180deg,
        rgba(24,33,52,.95),
        rgba(14,21,36,.98)
    );

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

    border-radius:20px;

    margin-bottom:20px;

    overflow:hidden;

    transition:.35s;

}

.faq-item:hover{

    border-color:#00D4FF;

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

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:28px 32px;

    cursor:pointer;

    font-size:22px;

    font-weight:700;

    text-align:left;

}

.faq-question span{

    flex:1;

}

.faq-question i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.35s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 32px 28px;

    color:#B9C4D6;

    line-height:1.9;

    font-size:17px;

}

.faq-item.active{

    border-color:#00D4FF;

}

.faq-item.active .faq-answer{

    max-height:220px;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

/*======================================
=        TECH STACK SECTION
======================================*/

.tech-stack-section{

    padding:120px 0 140px;

    position:relative;

}

.tech-stack-section .container{

    max-width:1320px;

    margin:0 auto;

}

.tech-grid{

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
    width:100%;
    margin-top:55px;
    align-items:stretch;

}

.tech-card{

    position:relative;
    height:100%;
    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:180px;

    padding:30px 24px;

    border-radius:24px;

    background:
    linear-gradient(
        180deg,
        rgba(28,38,60,.98) 0%,
        rgba(18,26,44,.98) 55%,
        rgba(12,18,32,.99) 100%
    );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 18px 45px rgba(0,0,0,.22);

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

}

.tech-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(0,212,255,.95),
        rgba(91,92,255,.18),
        rgba(139,92,246,.85)
    );

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

.tech-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 24px 60px rgba(0,212,255,.16),
        0 10px 25px rgba(0,0,0,.25);

}

.tech-icon{

    width:64px;

    height:64px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    font-size:32px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #00D4FF,
        #38BDF8,
        #6366F1,
        #8B5CF6
    );

    box-shadow:
        0 12px 28px rgba(0,212,255,.18),
        inset 0 1px 0 rgba(255,255,255,.18);

    transition:.35s ease;

}

.tech-card:hover .tech-icon{

    transform:

        translateY(-4px)

        rotate(-6deg)

        scale(1.06);

    box-shadow:
        0 18px 40px rgba(0,212,255,.25);

}

.tech-card h3{

    min-height:52px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    text-align:center;

}

.tech-card p{

    margin-top:0px;

    font-size:12px;
    line-height:1.5;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#B8C7E8;
    opacity:.95;

}

.tech-card:hover p{

    color:#6DDCFF;

}

.tech-card:hover h3{

    color:#00D4FF;

}

.section-badge{

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

padding:10px 18px;

border-radius:999px;

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

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

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

font-size:14px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;

color:#00D4FF;

position:relative;
overflow:visible;

margin:0 auto 28px;

}

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

@media (max-width:1024px){

    .tech-grid{

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

    }

}

@media (max-width:768px){

    .tech-stack-section{

        padding:90px 0;

    }

    .tech-grid{

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

        gap:20px;

    }

    .tech-card{

      min-height:180px;
      position:relative;
      overflow:hidden;
      padding:28px 18px;

    }

    .tech-icon{

        width:62px;

        height:62px;

        font-size:30px;
        margin-bottom:18px;
        transition:.35s;

        box-shadow:
        0 12px 28px rgba(0,212,255,.18),
        inset 0 1px 0 rgba(255,255,255,.18);

    }

    .tech-card h3{

        font-size:18px;
        margin:20px 0 12px;

    }

}

@media (max-width:480px){

    .tech-grid{

        grid-template-columns:1fr 1fr;

        gap:16px;

    }

    .tech-card{

        min-height:165px;

    }

}

/* =========================
   BREADCRUMBS
========================= */

.breadcrumbs{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:8px;

margin-bottom:24px;

font-size:13px;

font-weight:500;

text-transform:uppercase;

letter-spacing:.08em;

}

.breadcrumbs a{

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

text-decoration:none;

transition:.3s;

}

.breadcrumbs a:hover{

color:#00D4FF;

}

.breadcrumbs span{

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

}

.breadcrumbs span:last-child{

color:#00D4FF;

font-weight:600;

}

.page-hero-content{

max-width:700px;

}

.page-hero-content p{

max-width:850px;

line-height:1.8;

}

/*====================================
 SINGLE SERVICE HERO
====================================*/

.hero-grid{

display:grid;

grid-template-columns:1fr 520px;

gap:70px;

align-items:center;

}

.hero-image{

display:flex;

justify-content:flex-end;

align-items:center;

}

.service-hero-image{

width:100%;

max-width:520px;

height:auto;

display:block;

border-radius:22px;

overflow:hidden;

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

box-shadow:

0 30px 80px rgba(0,0,0,.45),

0 0 0 1px rgba(255,255,255,.03);

}

/* Tablet */

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;

gap:50px;

}

.hero-image{

justify-content:center;

}

.service-hero-image{

max-width:500px;

}

}

/* Mobile */

@media(max-width:767px){

.hero-grid{

gap:40px;

}

.service-hero-image{

max-width:100%;

}

}

/* =========================================================
   SINGLE SERVICE — HERO SECTION
========================================================= */

.single-service .page-hero{

    position:relative;

    padding:110px 0 120px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 12% 35%,
            rgba(0,212,255,.16),
            transparent 38%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(107,92,255,.14),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #050816 0%,
            #06101f 55%,
            #050816 100%
        );

}


/* HERO CONTAINER */

.single-service .page-hero .container{

    position:relative;

    z-index:2;

}


/* HERO GRID */

.single-service .page-hero .hero-grid{

    display:grid;

    grid-template-columns:minmax(0, 1.15fr) minmax(420px, .85fr);

    align-items:center;

    gap:80px;

}


/* HERO CONTENT */

.single-service .page-hero .hero-content{

    max-width:760px;

}


/* HERO IMAGE */

.single-service .page-hero .hero-image{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* HERO IMAGE GLOW */

.single-service .page-hero .hero-image::before{

    content:"";

    position:absolute;

    width:82%;

    height:82%;

    border-radius:50%;

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

    filter:blur(90px);

    z-index:0;

}


/* HERO IMAGE */

.single-service .page-hero .hero-image img{

    position:relative;

    z-index:1;

    display:block;

    width:100%;

    max-width:560px;

    height:auto;

    border-radius:24px;

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

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

}

/* =========================================================
   SINGLE SERVICE — BREADCRUMBS
========================================================= */

.single-service .page-hero .breadcrumbs{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:24px;

    font-size:13px;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#8fa4bd;

}


.single-service .page-hero .breadcrumbs a{

    color:#b9c3d5;

    text-decoration:none;

    transition:
        color .25s ease,
        text-shadow .25s ease;

}


.single-service .page-hero .breadcrumbs a:hover{

    color:#00D4FF;

    text-shadow:0 0 12px rgba(0,212,255,.45);

}


.single-service .page-hero .breadcrumbs span{

    color:#00D4FF;

}


/* =========================================================
   SINGLE SERVICE — HERO BADGE
========================================================= */

.single-service .page-hero .hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:fit-content;

    max-width:100%;

    padding:12px 22px;

    margin-bottom:24px;

    border-radius:999px;

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

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

    color:#00D4FF;

    font-size:13px;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

    line-height:1;

    white-space:nowrap;

    box-shadow:
        0 0 12px rgba(0,212,255,.65),
        0 0 26px rgba(0,212,255,.48),
        0 0 46px rgba(0,212,255,.28),
        inset 0 0 18px rgba(0,212,255,.08);

}

/* =========================================================
   SINGLE SERVICE — HERO TITLE
========================================================= */

.page-hero .hero-content h1{

    margin:0 0 22px;

    padding-bottom:8px;

    font-size:clamp(48px, 4.5vw, 68px);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1.5px;

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

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

    -webkit-text-fill-color:transparent;

    color:transparent;

}

/* =========================================================
   WHY BUSINESSES CHOOSE FELIX
   PREMIUM FELIX CARD SYSTEM
========================================================= */

.why-choose {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
}


/* =========================
   BACKGROUND GLOW
========================= */

.why-choose::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    top: 5%;
    left: -280px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.08);
    filter: blur(120px);
    pointer-events: none;
}

.why-choose::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -260px;
    bottom: 0;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.08);
    filter: blur(120px);
    pointer-events: none;
}


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

.why-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;

    margin-top: 70px;
}


/* =========================
   PREMIUM CARD
========================= */

.why-card {
    position: relative;
    min-height: 230px;

    padding: 36px 32px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background:
        linear-gradient(
            145deg,
            rgba(20, 31, 55, 0.96),
            rgba(8, 16, 34, 0.96)
        );

    border: 1px solid rgba(0, 212, 255, 0.16);
    border-radius: 20px;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    overflow: hidden;

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


/* =========================
   CARD TOP GLOW LINE
========================= */

.why-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #00d4ff,
        #8b5cf6,
        transparent
    );

    opacity: 0;

    transition: opacity 0.35s ease;
}


/* =========================
   CARD INTERNAL GLOW
========================= */

.why-card::after {
    content: "";

    position: absolute;
    width: 180px;
    height: 180px;

    top: -100px;
    right: -100px;

    border-radius: 50%;

    background: rgba(139, 92, 246, 0.16);
    filter: blur(65px);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.35s ease;
}


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

.why-card:hover {
    transform: translateY(-10px);

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

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        0 0 35px rgba(0, 212, 255, 0.10),
        0 0 55px rgba(139, 92, 246, 0.08);
}

.why-card:hover::before,
.why-card:hover::after {
    opacity: 1;
}


/* =========================
   ICON CONTAINER
========================= */

.why-icon {
    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

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

    margin-bottom: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #00d4ff 0%,
            #4facfe 45%,
            #8b5cf6 100%
        );

    box-shadow:
        0 10px 30px rgba(0, 212, 255, 0.22),
        0 0 24px rgba(139, 92, 246, 0.16);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================
   ICON
========================= */

.why-icon i {
    font-size: 25px;
    color: #ffffff;
}


/* =========================
   ICON HOVER
========================= */

.why-card:hover .why-icon {
    transform: translateY(-4px) scale(1.06);

    box-shadow:
        0 15px 40px rgba(0, 212, 255, 0.32),
        0 0 35px rgba(139, 92, 246, 0.24);
}


/* =========================
   CARD HEADING
========================= */

.why-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 16px;

    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;

    color: #ffffff;
}


/* =========================
   CARD TEXT
========================= */

.why-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size: 15px;
    line-height: 1.75;

    color: var(--text-light);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .why-choose {
        padding: 110px 0;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 55px;
    }

    .why-card {
        min-height: 230px;
    }

}


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

@media (max-width: 767px) {

    .why-choose {
        padding: 85px 0;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 45px;
    }

    .why-card {
        min-height: auto;
        padding: 30px 26px;
        border-radius: 18px;
    }

    .why-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .why-icon i {
        font-size: 23px;
    }

    .why-card h3 {
        font-size: 22px;
    }

    .why-card p {
        font-size: 15px;
        line-height: 1.7;
    }

}

/* =========================================================
   OUR PROCESS
   PREMIUM FELIX PROCESS CARD SYSTEM
========================================================= */

.our-process {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
}


/* =========================
   SECTION BACKGROUND GLOW
========================= */

.our-process::before {
    content: "";
    position: absolute;

    width: 620px;
    height: 620px;

    top: 0;
    right: -300px;

    border-radius: 50%;

    background: rgba(139, 92, 246, 0.08);
    filter: blur(120px);

    pointer-events: none;
}

.our-process::after {
    content: "";
    position: absolute;

    width: 600px;
    height: 600px;

    left: -300px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(0, 212, 255, 0.07);
    filter: blur(120px);

    pointer-events: none;
}


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

.process-grid {
    position: relative;
    z-index: 2;

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

    gap: 28px;

    margin-top: 70px;
}


/* =========================
   PROCESS CARD
========================= */

.process-card {
    position: relative;

    min-height: 230px;
    padding: 36px 32px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background:
        linear-gradient(
            145deg,
            rgba(20, 31, 55, 0.96),
            rgba(8, 16, 34, 0.96)
        );

    border: 1px solid rgba(0, 212, 255, 0.16);
    border-radius: 20px;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    overflow: hidden;

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


/* =========================
   TOP GRADIENT GLOW LINE
========================= */

.process-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #00d4ff,
        #8b5cf6,
        transparent
    );

    opacity: 0;

    transition: opacity 0.35s ease;
}


/* =========================
   INTERNAL PURPLE GLOW
========================= */

.process-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -100px;

    border-radius: 50%;

    background: rgba(139, 92, 246, 0.16);

    filter: blur(65px);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.35s ease;
}


/* =========================
   PROCESS CARD HOVER
========================= */

.process-card:hover {
    transform: translateY(-10px);

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

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        0 0 35px rgba(0, 212, 255, 0.10),
        0 0 55px rgba(139, 92, 246, 0.08);
}

.process-card:hover::before,
.process-card:hover::after {
    opacity: 1;
}


/* =========================
   PROCESS NUMBER
========================= */

.process-number {
    position: absolute;

    top: 14px;
    right: 20px;

    z-index: 1;

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

    font-weight: 800;

    letter-spacing: -2px;

    color: rgba(255, 255, 255, 0.035);

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =========================
   PROCESS NUMBER HOVER
========================= */

.process-card:hover .process-number {
    color: rgba(0, 212, 255, 0.10);

    transform: translateY(-3px);
}


/* =========================
   PROCESS ICON
========================= */

.process-icon {
    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

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

    margin-bottom: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #00d4ff 0%,
            #4facfe 45%,
            #8b5cf6 100%
        );

    box-shadow:
        0 10px 30px rgba(0, 212, 255, 0.22),
        0 0 24px rgba(139, 92, 246, 0.16);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================
   PROCESS ICON SYMBOL
========================= */

.process-icon i {
    font-size: 25px;

    color: #ffffff;
}


/* =========================
   PROCESS ICON HOVER
========================= */

.process-card:hover .process-icon {
    transform: translateY(-4px) scale(1.06);

    box-shadow:
        0 15px 40px rgba(0, 212, 255, 0.32),
        0 0 35px rgba(139, 92, 246, 0.24);
}


/* =========================
   PROCESS HEADING
========================= */

.process-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 16px;

    font-size: 24px;
    line-height: 1.25;

    font-weight: 700;

    color: #ffffff;

    transition: color 0.35s ease;
}


/* =========================
   HEADING HOVER
========================= */

.process-card:hover h3 {
    color: #00d4ff;
}


/* =========================
   PROCESS TEXT
========================= */

.process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size: 15px;
    line-height: 1.75;

    color: var(--text-light);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .our-process {
        padding: 110px 0;
    }

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

        gap: 24px;

        margin-top: 55px;
    }

    .process-card {
        min-height: 230px;
    }

}


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

@media (max-width: 767px) {

    .our-process {
        padding: 85px 0;
    }

    .process-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 45px;
    }

    .process-card {
        min-height: auto;

        padding: 30px 26px;

        border-radius: 18px;
    }

    .process-number {
        top: 14px;
        right: 18px;

        font-size: 48px;
    }

    .process-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 24px;

        border-radius: 16px;
    }

    .process-icon i {
        font-size: 23px;
    }

    .process-card h3 {
        font-size: 22px;
    }

    .process-card p {
        font-size: 15px;

        line-height: 1.7;
    }

}

/* =========================
   FAQ PREMIUM CARD EFFECT
========================= */

.faq-item{
    position:relative;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:linear-gradient(
        145deg,
        rgba(24,35,58,.96),
        rgba(12,21,38,.96)
    );

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


/* FAQ HOVER */

.faq-item:hover{
    transform:translateY(-3px);

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        0 0 0 1px rgba(0,212,255,.08),
        0 0 28px rgba(0,212,255,.12);
}


/* QUESTION TRANSITION */

.faq-question{
    transition:color .3s ease;
}


/* QUESTION HOVER */

.faq-item:hover .faq-question{
    color:#00D4FF;
}


/* ACTIVE / OPEN FAQ */

.faq-item.active{
    transform:translateY(-2px);

    border-color:#00D4FF;

    box-shadow:
        0 20px 50px rgba(0,0,0,.32),
        0 0 0 1px rgba(0,212,255,.12),
        0 0 34px rgba(0,212,255,.18);
}


/* ACTIVE QUESTION */

.faq-item.active .faq-question{
    color:#00D4FF;
}

/* =========================
   SERVICES HERO BACKGROUND FIX
========================= */

.services-hero {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
}

/* =========================
   SERVICES HERO
   EXACT BACKGROUND FIT
========================= */

.services-hero{
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

/* =========================
   SERVICES HERO
   CONTENT VERTICAL POSITION
========================= */

.services-hero-content{
    transform: translateY(-125px);
}

/* =========================
   SERVICES HERO BADGE
   FELIX CYAN GLOW
========================= */

.services-hero .hero-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 24px;

    color: #00E5FF;

    background:
        linear-gradient(
            135deg,
            rgba(0, 229, 255, 0.16),
            rgba(79, 172, 254, 0.08)
        );

    border: 1px solid rgba(0, 229, 255, 0.55);
    border-radius: 999px;

    box-shadow:
        0 0 8px rgba(0, 229, 255, 0.55),
        0 0 20px rgba(0, 229, 255, 0.30),
        inset 0 0 12px rgba(0, 229, 255, 0.08);

    text-shadow:
        0 0 6px rgba(0, 229, 255, 0.85),
        0 0 12px rgba(0, 229, 255, 0.45);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* =========================
   SERVICES HERO MOBILE IMAGE
========================= */

@media (max-width: 768px){

      .services-hero{
        min-height: 0 !important;
        height: 1280px !important;

        padding: 135px 20px 8px !important;

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

        text-align: center;

        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        overflow: hidden;
    }

}

/* =====================================================
   SERVICES HERO FEATURE ICON + TEXT ALIGNMENT FIX
===================================================== */

.services-hero .hero-features span{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.services-hero .hero-features span i,
.services-hero .hero-features span svg{
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.services-hero .hero-features span i{
    width: auto !important;
}

/* =====================================================
   SERVICE HIGHLIGHTS — ICON + TEXT LOCK
===================================================== */

.service-highlights{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px 24px !important;
}

.service-highlight-item{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.service-highlight-item i{
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}

@media (max-width: 768px){

    .service-highlights{
        gap: 12px 14px !important;
    }

    .service-highlight-item{
        gap: 7px !important;
    }

}

@media (max-width: 768px){

     .service-highlights{
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        justify-content: center !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 32px auto 0 !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    .service-highlight-item{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    .service-highlight-item i{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .service-highlights > div{
        white-space: nowrap !important;
    }

}

@media (max-width: 768px){

    .tech-card{
        text-align: center !important;
    }

    .tech-card p{
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}