/* =========================
   ABOUT HERO
========================= */

.about-hero{

    width:100%;
    aspect-ratio:2.231 / 1;

    position:relative;

    background:
        linear-gradient(
            rgba(5,8,22,.20),
            rgba(5,8,22,.30)
        ),
        url('../images/about-bg.webp');

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

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

    padding:40px 0 10px;

    line-height:1.15;
}

.about-hero-content h1{
    font-size:72px;
    line-height:1.25;
    max-width:900px;
	padding-bottom:25px;
    margin:0 auto 20px;
	overflow:visible;
	margin-bottom:30px;
	overflow:visible;

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

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

}

.about-hero-content{
    max-width:900px;
	margin-top:-80px;
	padding-top:10px;
    margin:0 auto;
    text-align:center;
    position:relative;
    z-index:2;
}

.about-hero-content p{

    margin-top:40px;
	margin-bottom:30px;
    max-width:800px;
 	margin:35px auto 0;
    line-height:1.8;
    margin-left:auto;
    margin-right:auto;

}

.hero-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:20px !important;
    margin-top:40px !important;
	min-width:260px;
    height:60px;
}

.hero-buttons .btn{
    width:auto !important;
    min-width:240px !important;
    margin:0 !important;
    display:inline-flex !important;
    justify-content:center;
    align-items:center;
	height:56px;
	padding:16px 32px;
    font-size:16px;
}

.about-story{
    margin-top:0;
    position:relative;
    padding-top:40px;
}

.about-story .container{

    background:rgba(10,18,40,.85);

    backdrop-filter:blur(20px);

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

    border-radius:30px;

  	padding:24px;

}


/* =========================
   ABOUT INTRO
========================= */

.about-intro{
    padding:0 0 80px;
    text-align:center;

}

.about-intro .container{

    max-width:1200px;
    margin:0 auto;

}

.about-intro h2{
max-width:1200px;
    margin:25px auto;
    font-size:64px;
    line-height:1.18;
	padding-bottom:10px;

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

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

}

.about-intro p{

    max-width:850px;
    margin:0 auto 40px;

    font-size:20px;
    line-height:1.9;

}

.about-intro .hero-buttons{

    flex-wrap:wrap;

}

.about-intro .hero-buttons .btn{
    min-width:240px;
    width:auto;
}

.about-intro .section-desc{

    max-width:900px;
    margin:0 auto;

}

.about-image img{
    border-radius:24px;

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

    border:2px solid rgba(0,212,255,.15);

    box-shadow:
        0 0 30px rgba(0,212,255,.15),
        0 0 60px rgba(138,92,255,.10);
}

.about-image img:hover{
    transform:translateY(-6px);
    box-shadow:
        0 0 40px rgba(0,212,255,.25),
        0 0 80px rgba(138,92,255,.15);
}

.about-image{
    position:relative;
}

.about-image::after{
    content:"";
    position:absolute;
    inset:20px;
    background:radial-gradient(
        circle,
        rgba(0,212,255,.18),
        transparent 70%
    );
    filter:blur(40px);
    z-index:-1;
}


/* =========================
   ABOUT STORY
========================= */

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-content p{
    text-align:center;
}

.about-content h2{
   font-size:clamp(42px,3.5vw,52px);
}

@media(max-width:768px){

.about-story{
    margin-top:40px;
}

.mission-vision{
    margin-top:0;
}

.about-content{
    width:100% !important;
    max-width:none !important;
    padding:0 15px !important;
	text-align:center;

}

.about-content h2{
    font-size:42px;
    line-height:1.15;

}

.about-content p{
    max-width:100%;
    text-align:left;
	font-size:16px;
    line-height:1.8;
}

	.about-image{
    width:100%;
    margin-top:30px;
}

.about-image img{
    width:100%;
    height:auto;
    display:block;
}

	.stats-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

	.stat-box{
    padding:30px 20px;
}

	.stat-box h3{
    font-size:42px;
}


	#floating-whatsapp{
    bottom:15px;
    left:15px;
}

	#scroll-top{
    bottom:15px;
    right:15px;
}

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

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

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

.stat-box{
    text-align:center;
}

.about-stats{
    padding-bottom:40px;
}


/* =========================
   MISSION VISION
========================= */

.mission-vision{
    margin-top:-20px;
	padding-bottom:40px;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.mission-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:40px;
    transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.mission-card:hover{
    transform:translateY(-6px);

    border-color:#00D4FF;

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

.mission-card h3{

    font-size:54px;

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

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

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

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

@media(max-width:768px){

.about-grid,
.grid-2,
.stats-grid,
.why-felix .services-grid{

    grid-template-columns:1fr;

}

}

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

.value-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:24px;
    text-align:center;
	flex-direction:column;
	min-height:160px;
	display:flex;
    justify-content:center;
    align-items:center;
}

.value-card i{
    font-size:32px;
    margin-bottom:16px;
    background:linear-gradient(
        90deg,
        #00D4FF,
        #4FACFE,
        #8B5CF6
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    display:block;
}

.value-card:hover{
    transform:translateY(-6px);
    border-color:#00D4FF;
    box-shadow:0 0 25px rgba(0,212,255,.25);
}

.value-card h4{

    margin:0;
    color:#fff;
    font-size:18px;

}




/* =========================
   TECHNOLOGY BADGES
========================= */

.tech-badges{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;

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

    margin:15px auto 50px;
}

.tech-badges::-webkit-scrollbar{
    display:none;
}

.tech-badges span{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:80px;
    width:100%;

    padding:20px;

    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;

    color:#fff;
    font-size:18px;
    font-weight:700;

    transition:.3s ease;

}

.tech-badges span i{
    font-size:22px;
}

@media(max-width:992px){

    .tech-badges{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .tech-badges{
        grid-template-columns:1fr;
		padding-bottom:80px;
    }

}

.tech-badges span i{
    font-size:26px;
    color:#00D4FF;
	padding:18px 28px;
}

.tech-badges span:hover{
    transform:translateY(-4px);

    border-color:#00D4FF;

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

.tech-stack-desc,
.section-desc{

    max-width:700px;
    margin:20px auto 0;

}


/* =========================
   OUR PRECESS LIST
========================= */

.process-list{
    list-style:none;
    padding:0;
    margin-top:15px;
}

.process-list li{
    margin-bottom:8px;
    color:#d8e6ff;
    font-size:14px;
}

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

.process-section{
    padding-top:90px;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
	max-width:1200px;
    margin:0 auto;
}

.process-step{

    position:relative;

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

    text-align:center;

    min-height:140px;

    padding:30px 20px;

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

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

    border-radius:24px;

    transition:.35s ease;

}

.process-step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:40px;
    left:100%;
    width:40px;
    height:2px;

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

.process-step span{
    display:block;
    font-size:34px;
    font-weight:800;
    color:#00D4FF;
    margin-bottom:10px;
}

.process-step h4{
    margin:0;
}

.process-step:hover{

    transform:translateY(-6px);

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

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

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

}

.process-step:hover span{

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

}

.process-step:hover::after{

    opacity:1;

}

.why-felix .section-title{

    text-align:center;

    max-width:900px;

    margin:0 auto 50px;

}

.why-felix{
    padding-top:0;
    margin-top:0;
}

.section-desc{
    max-width:800px;
    margin:20px auto 0;
    text-align:center;

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

    font-size:18px;
    line-height:1.8;
}

@media(max-width:992px){

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

.process-step::after{
    display:none;
}

}

@media(max-width:768px){

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

.process-step{
    width:100%;
}

.process-step::after{
    display:none;
}

.about-intro h2{

    font-size:36px;
    line-height:1.15;

    max-width:100%;
    margin:20px auto;

}

.about-intro p{

    font-size:16px;
    line-height:1.7;

}

.about-hero{

        min-height:100vh !important;
        height:auto !important;

        padding:0 !important;

        background-size:auto 88% !important;
        background-position:center top !important;
        background-repeat:no-repeat !important;

}

.about-content .section-tag{
    font-size:42px;
    text-align:center;
}

	.about-story .container{
    padding:30px 25px;
	padding-bottom:40px;
}

}


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

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

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

    margin:0 auto;
}

.service-card{
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-height:240px;

    padding:32px;

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

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

    border-radius:24px;

    transition:.35s ease;
}

.service-card p{

    margin-top:14px;

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

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

}

.service-card:hover{

    transform:translateY(-6px);

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

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

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

}

.service-card i{

    font-size:28px;
    margin-bottom:18px;

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

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

    transition:.35s ease;

}

.service-card:hover i{

    transform:scale(1.08);

    filter:
        drop-shadow(0 0 10px rgba(0,212,255,.45))
        drop-shadow(0 0 18px rgba(139,92,246,.35));

}

.why-felix .service-card{
    min-height:240px;
	margin-bottom:20px;
	display:flex;
    flex-direction:column;
    justify-content:center;
}

.why-felix .service-card h3{
    margin-bottom:18px;
}

.section-title{
    overflow:visible;
}

.section-title h2{

    font-size:clamp(42px,3.5vw,52px);
    line-height:1.15;
    font-weight:800;

    margin-top:18px;
    margin-bottom:0;
    padding-top:0;

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

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

}


.section-divider{
	display:none;
    width:220px;
    height:2px;
    margin:60px auto;
    background:linear-gradient(
        90deg,
        transparent,
        #00D4FF,
        #8B5CF6,
        transparent
    );
}


/* =========================
   ABOUT SECTION HEADINGS
========================= */

.about-story h2,
.mission-card h3,
.vision-card h3{

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

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

    font-weight:800;
    line-height:1.15;
}

.about-story h2{
    font-size:48px;
    margin-bottom:24px;
}

.mission-card h3,
.vision-card h3{
    font-size:34px;
    margin-bottom:18px;
}



/* =========================
   ABOUT HEADINGS
========================= */

.about-content .section-tag{

     font-size:48px;
    font-weight:800;

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

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

.about-content h2,
.mission-card h3{
    background:linear-gradient(
        90deg,
        #00E5FF,
        #4FACFE,
        #A855F7
    );

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

    font-weight:800;
    line-height:1.15;
}

.core-values{
    text-align:center;
    margin-top:0px;
	padding-top:20px;
	padding-bottom:20px;

}

.tech-stack{
    margin-top:30px;
}

.core-values .section-title{
     text-align:center;
    max-width:900px;
    margin:0 auto 40px;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    max-width:1000px;
    margin:0 auto;
	margin-top:0px;
	min-height:110px;
    transition:all .3s ease;
}

@media(max-width:768px){

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

.story-label{
    display:block;
    margin-bottom:12px;

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

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

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

/* CTA Section */

.cta-section{

    position:relative;
    overflow:hidden;

    padding:120px 20px 150px;

    background:

radial-gradient(
    circle at center,
    rgba(79,172,254,.10),
    transparent 42%
),

linear-gradient(
    90deg,
    #102B4A 0%,
    #1B2152 52%,
    #2C2A6C 100%
);

}

.cta-section::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.035;

    background-image:

        radial-gradient(circle at 20% 20%, rgba(255,255,255,.8) 1px, transparent 1.2px),

        radial-gradient(circle at 80% 70%, rgba(255,255,255,.6) 1px, transparent 1.2px),

        radial-gradient(circle at 40% 85%, rgba(255,255,255,.5) 1px, transparent 1.2px);

    background-size:
        180px 180px,
        220px 220px,
        260px 260px;

}

.cta-bg{

    display:none;

}

.cta-bg::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

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

    width:900px;
    height:500px;

    border-radius:50%;

    background:

        radial-gradient(

            ellipse,

            rgba(255,255,255,.08) 0%,

            rgba(79,172,254,.06) 35%,

            rgba(139,92,246,.05) 60%,

            transparent 100%

        );

    filter:blur(70px);

    pointer-events:none;

}

.cta-box{

    position:relative;
    z-index:2;

    max-width:900px;

    margin:0 auto;

    text-align:center;

    padding:64px 60px;

    border-radius:36px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.045)
        );

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

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

    overflow:hidden;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 30px 90px rgba(0,0,0,.35),
        0 0 80px rgba(79,172,254,.08),
        0 0 120px rgba(139,92,246,.08);

}

/* =========================
   CTA MOBILE FIX
========================= */

@media (max-width:768px){

    .cta-box{

        max-width:100%;

        width:100%;

        padding:40px 24px;

        border-radius:28px;

    }

}

@media (hover:hover){

    .cta-box:hover{

        transform:translateY(-4px);

    border-color:rgba(79,172,254,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 40px 110px rgba(0,0,0,.42),
        0 0 100px rgba(79,172,254,.12),
        0 0 140px rgba(139,92,246,.12);

    }

}

.cta-box:hover{

    transform:translateY(-4px);

    border-color:rgba(79,172,254,.18);

    box-shadow:
        0 35px 90px rgba(0,0,0,.35),
        0 0 90px rgba(79,172,254,.10),
        0 0 120px rgba(139,92,246,.10);

}

.cta-box::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:55%;
    height:120px;
    pointer-events:none;
    border-radius:50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.03) 45%,
            transparent 100%
        );
}

.cta-box::after{

    content:"";

    position:absolute;

    inset:-80px;

    z-index:-1;

    background:

    radial-gradient(

        circle,

        rgba(79,172,254,.14),

        rgba(139,92,246,.10),

        transparent 70%

    );

    filter:blur(90px);

}

/*

.cta-bg::before{

    content:"";

    position:absolute;

    left:-180px;
    top:50%;

    transform:translateY(-50%);

    width:520px;
    height:520px;

    border-radius:50%;

    pointer-events:none;

    background:

        repeating-radial-gradient(

            circle,

            transparent 0 18px,

            rgba(0,212,255,.08) 18px 20px

        );

    opacity:.9;

    filter:
    drop-shadow(0 0 18px rgba(0,212,255,.35));

    mask-image:linear-gradient(
90deg,
#000 0%,
#000 70%,
transparent 100%);

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            #000 55%,
            transparent 100%
        );

}

.cta-bg::after{

    content:"";

    position:absolute;

    right:-180px;
    top:50%;

    transform:translateY(-50%);

    width:520px;
    height:520px;

    border-radius:50%;

    pointer-events:none;

    background:

        repeating-radial-gradient(

            circle,

            transparent 0 18px,

            rgba(139,92,246,.18) 18px 22px

        );

    opacity:.9;

    filter:
    drop-shadow(0 0 18px rgba(139,92,246,.35));

    mask-image:linear-gradient(
90deg,
transparent 0%,
#000 30%,
#000 100%);

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 45%,
            #000 100%
        );

}

*/

.cta-bg::before,
.cta-bg::after{

    width:700px;
    height:700px;

}

.cta-box h2{

    font-size:clamp(42px,3.5vw,56px);

    line-height:1.25;

    font-weight:800;

    text-align:center;

    margin-bottom:24px;

    transform:translate3d(0,0,0);

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

}

.cta-box p{

    max-width:560px;

    margin:0 auto 42px;

    font-size:20px;

    line-height:1.75;

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

}

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;
    margin-top:46px;

    flex-wrap:wrap;

    position:relative;
    z-index:2;
    filter:drop-shadow(0 12px 30px rgba(79,172,254,.12));

}

.btn-secondary{

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

    min-width:170px;
    height:56px;

    padding:0 32px;

    border-radius:999px;

    color:#F5F8FF;

    font-weight:600;

    text-decoration:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.04)
        );

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

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

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

    transition:all .35s ease;

}

.btn-secondary:hover{

    transform:translateY(-3px);

    color:#FFFFFF;

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

    background:
        linear-gradient(
            180deg,
            rgba(0,212,255,.10),
            rgba(139,92,246,.12)
        );

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

}

.btn-primary{

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

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:linear-gradient(
        90deg,
        #00E5FF,
        #4FACFE,
        #7C6CFF
    );

    box-shadow:
        0 18px 38px rgba(0,212,255,.30),
        0 12px 30px rgba(139,92,246,.18);

}

.cta-divider{

    position:relative;

    width:145px;
    height:8px;

    margin:24px auto 36px;

    border-radius:999px;

    overflow:hidden;

    animation:dividerGlow 6s ease-in-out infinite;

    filter:
        blur(.2px)
        drop-shadow(0 0 8px rgba(0,212,255,.55))
        drop-shadow(0 0 18px rgba(139,92,246,.45));

    background:linear-gradient(
        90deg,
        rgba(139,92,246,0) 0%,
        #8B5CF6 15%,
        #5B7CFF 32%,
        #00F0FF 50%,
        #5B7CFF 68%,
        #8B5CF6 85%,
        rgba(139,92,246,0) 100%
    );

    box-shadow:
        0 0 10px rgba(0,212,255,.35),
        0 0 18px rgba(79,172,254,.25);

}

@keyframes dividerGlow{

0%,100%{

    transform:scaleX(1);

    filter:brightness(1);

}

50%{

    transform:scaleX(1.08);

    filter:brightness(1.25);

}

}

.cta-divider::before{

    content:'';

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:inherit;

    filter:blur(8px);

    opacity:.75;

    z-index:-1;

}

/* ==========================================
   CTA Button Premium Animation
========================================== */

.cta-title{
    margin:0 0 28px;
}

.cta-description{
    max-width:620px;

    margin:0 auto 44px;

    font-size:1.25rem;

    line-height:1.8;

    color:rgba(255,255,255,.88);
}

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:18px;

    flex-wrap:wrap;

}

.cta-buttons a{

    position:relative;

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

    will-change:transform;

}

.cta-buttons a:hover{

    transform:translateY(-4px);

}

.cta-buttons .btn-primary:hover{

    box-shadow:
        0 10px 30px rgba(0,212,255,.28),
        0 0 35px rgba(139,92,246,.18);

}

.cta-buttons .btn-secondary:hover{

    border-color:#00D4FF;

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

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

}

.cta-buttons a:active{

    transform:translateY(-1px) scale(.98);

}

/* ==========================
   SECTION BADGE
========================== */

.section-badge{

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

    padding:12px 28px;

    border-radius:999px;

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

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

    color:#00D4FF;

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

    letter-spacing:.14em;
    text-transform:uppercase;

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

    box-shadow:
        0 0 8px rgba(0,212,255,.18),
        0 0 18px rgba(0,212,255,.12),
        inset 0 0 14px rgba(0,212,255,.04);
}

/* =========================
   ABOUT PAGE BADGES
   EXACT HOMEPAGE STYLE
========================= */

.about-intro .section-badge,
.core-values .section-badge,
.why-felix .section-badge,
.process-section .section-badge{

    display:inline-flex;

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

    width:auto;

    padding:10px 22px;

    margin:0 auto 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:#00D4FF;

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

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

    backdrop-filter:blur(15px);

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

    box-shadow:
        0 0 8px rgba(0,212,255,.45),
        0 0 20px rgba(0,212,255,.28),
        0 0 40px rgba(0,212,255,.18),
        inset 0 0 20px rgba(0,212,255,.08);

}

/* =========================================
   ABOUT INTRO — MOVE INTO HERO IMAGE
========================================= */

.about-intro{
    position: relative;
    z-index: 5;
    transform: translateY(-800px);
}

/* =========================
   ABOUT STORY GAP FIX
========================= */

.about-story{
    margin-top: -480px;
}

/* =========================================
   ABOUT INTRO — MOBILE POSITION RESET
========================================= */

@media (max-width: 768px){

    .about-intro{
        transform:none !important;
        margin-top:-815px !important;
    }

}

/* =========================================
   ABOUT PAGE — MOBILE STORY FLOW FIX
========================================= */

@media (max-width: 768px){

    .about-story{
        margin-top:+20px !important;
    }

}

/* =========================================
   ABOUT STORY — OUTER LARGE CARD
========================================= */

.about-story > .container{
    background:rgba(25, 44, 84, 0.82) !important;
}

/* =========================================
   ABOUT STORY IMAGE — PREMIUM GLOW
========================================= */

.about-image img{
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.55),
        0 0 18px rgba(0, 212, 255, 0.42),
        0 0 38px rgba(0, 212, 255, 0.24),
        0 0 58px rgba(139, 92, 246, 0.18),
        0 20px 50px rgba(0, 0, 0, 0.40) !important;
}

/* =========================
   ABOUT HERO REAL MOBILE HEADER FIX
========================= */

@media (max-width: 768px){

    .about-intro{
        position:relative !important;
        top:45px !important;
    }

}

/* =========================================
   ABOUT PAGE BADGE TEXT COLOR FINAL
========================================= */

body.page-id-2653 .section-badge{
    color:#00D4FF !important;

    background-color:rgba(0,212,255,.10) !important;
    background-image:none !important;

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

    -webkit-text-fill-color:#00D4FF !important;
}

/* =========================================
   ABOUT — OUR STORY MAIN HEADING
   HOMEPAGE FELIX GRADIENT
========================================= */

.about-story .story-content h2{
    display:inline-block;

    padding-bottom:0.12em;

    background:linear-gradient(
        90deg,
        #00E5FF 0%,
        #4FACFE 50%,
        #A855F7 100%
    );

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

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

.about-content h2.felix-line-gradient{
    background:none !important;
    -webkit-text-fill-color:initial !important;

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

.about-content h2.felix-line-gradient span{
    display:inline-block;

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

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

    padding-bottom:.12em;
}

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

.core-values .section-title h2,
.why-felix .section-title h2,
.process-section .section-title h2 {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

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