/*==================================================
CORE VALUES PAGE
==================================================*/

:root{

--cv-primary:#071C2C;
--cv-secondary:#0B3150;
--cv-accent:#00C853;
--cv-accent-light:#6EFFA8;

--cv-white:#ffffff;
--cv-light:#F5FAF8;
--cv-text:#334155;
--cv-gray:#64748B;

--cv-radius:22px;

--cv-shadow:0 25px 60px rgba(0,0,0,.15);

}



/*==================================================
GENERAL
==================================================*/

.cv-hero,
.cv-foundation,
.cv-values,
.cv-mission,
.cv-metrics,
.cv-cta{

position:relative;

overflow:hidden;

}

.cv-section-title{

max-width:820px;

margin:auto;

text-align:center;

}

.cv-section-title>p{

display:inline-flex;

padding:10px 24px;

border-radius:50px;

background:rgba(0,200,83,.10);

color:var(--cv-accent);

font-size:.85rem;

font-weight:700;

letter-spacing:2px;

margin-bottom:24px;

}

.cv-section-title h2{

font-size:clamp(2.4rem,4vw,3.5rem);

color:var(--cv-primary);

line-height:1.2;

margin-bottom:25px;

}

.cv-section-title h2 span{

display:block;

color:var(--cv-accent);

}

.cv-section-title p:last-child{

font-size:1.05rem;

line-height:1.9;

color:var(--cv-gray);

}



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

.cv-hero{

min-height:100vh;

display:flex;

align-items:center;

padding:170px 0 100px;

background:

linear-gradient(

135deg,

rgba(4,18,30,.92),

rgba(8,44,70,.85)

),

url("../images/core-bg.jpg")

center center/cover no-repeat;

}



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

.cv-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at 80% 30%,

rgba(0,200,83,.20),

transparent 40%);

}

.cv-grid{

position:absolute;

inset:0;

background-image:

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

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

background-size:70px 70px;

opacity:.35;

}



/*==================================================
LAYOUT
==================================================*/

.cv-wrapper{

position:relative;

z-index:5;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



/*==================================================
LEFT CONTENT
==================================================*/

.cv-content{

max-width:620px;

}

.cv-pill{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 22px;

border-radius:100px;

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

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

color:#8EFFBB;

font-size:.85rem;

font-weight:700;

letter-spacing:2px;

margin-bottom:30px;

}

.cv-pill i{

color:var(--cv-accent);

}

.cv-content h1{

font-size:clamp(3.2rem,5vw,5.2rem);

line-height:1.05;

font-weight:800;

color:#fff;

margin-bottom:25px;

}

.cv-content h1 span{

display:block;

color:var(--cv-accent-light);

}

.cv-content p{

font-size:1.05rem;

line-height:1.9;

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

margin-bottom:40px;

max-width:560px;

}



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

.cv-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:55px;

}



/*==================================================
HIGHLIGHTS
==================================================*/

.cv-highlights{

display:flex;

gap:22px;

flex-wrap:wrap;

}

.cv-highlight{

display:flex;

align-items:center;

gap:16px;

padding:20px;

min-width:230px;

border-radius:18px;

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

backdrop-filter:blur(16px);

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

}

.cv-highlight i{

width:55px;

height:55px;

border-radius:15px;

background:var(--cv-accent);

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

color:#fff;

}

.cv-highlight h3{

font-size:1.1rem;

color:#fff;

margin-bottom:4px;

}

.cv-highlight span{

color:#C6D4DE;

font-size:.9rem;

}



/*==================================================
RIGHT
==================================================*/

.cv-visual{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:650px;

}

.cv-ring{

width:520px;

height:520px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

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

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

box-shadow:0 0 90px rgba(0,200,83,.20);

}

.cv-ring img{

width:340px;

filter:drop-shadow(0 20px 40px rgba(0,255,120,.35));

}



/*==================================================
FLOATING CARDS
==================================================*/

.cv-floating{

position:absolute;

display:flex;

align-items:center;

gap:15px;

padding:18px 24px;

border-radius:18px;

background:rgba(7,28,44,.92);

backdrop-filter:blur(18px);

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

box-shadow:0 20px 45px rgba(0,0,0,.30);

color:#fff;

}

.cv-floating i{

width:50px;

height:50px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(0,200,83,.20);

color:var(--cv-accent-light);

font-size:20px;

}

.cv-floating h4{

font-size:1rem;

margin-bottom:3px;

}

.cv-floating span{

font-size:.85rem;

color:#C5D2DD;

}

.cv-top{

top:90px;

left:-10px;

}

.cv-right{

top:250px;

right:-20px;

}

.cv-bottom{

left:60px;

bottom:50px;

}



/*==================================================
FOUNDATION
==================================================*/

.cv-foundation{

padding:120px 0;

background:#fff;

}
/*==================================================
CORE VALUES
==================================================*/

.cv-values{

padding:120px 0;

background:linear-gradient(
180deg,
#F6FAF8,
#EEF6F2);

}

.cv-values-grid{

margin-top:70px;

display:grid;

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

gap:35px;

}

.cv-value-card{

background:#fff;

padding:45px 35px;

border-radius:22px;

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

transition:.35s ease;

text-align:center;

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

}

.cv-value-card:hover{

transform:translateY(-12px);

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

border-color:rgba(0,200,83,.20);

}

.cv-value-icon{

width:85px;

height:85px;

margin:0 auto 25px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#EAF8F1;

color:var(--cv-accent);

font-size:30px;

transition:.35s;

}

.cv-value-card:hover .cv-value-icon{

background:var(--cv-accent);

color:#fff;

transform:rotate(10deg);

}

.cv-value-card h3{

font-size:1.45rem;

margin-bottom:16px;

color:var(--cv-primary);

}

.cv-value-card p{

color:var(--cv-gray);

line-height:1.8;

}



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

.cv-mission{

padding:120px 0;

text-align:center;

color:#fff;

background:

linear-gradient(
135deg,
#071C2C,
#0B3150);

}

.cv-mission h2{

font-size:clamp(2.5rem,4vw,3.8rem);

line-height:1.2;

margin-bottom:25px;

}

.cv-mission span{

display:block;

color:#72FFAE;

}

.cv-mission p{

max-width:760px;

margin:auto;

font-size:1.05rem;

line-height:1.9;

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

}



/*==================================================
METRICS
==================================================*/

.cv-metrics{

padding:120px 0;

background:#fff;

}

.cv-metrics .container{

display:grid;

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

gap:30px;

}

.cv-metric{

padding:45px;

border-radius:22px;

background:#F7FAF8;

text-align:center;

transition:.35s;

}

.cv-metric:hover{

transform:translateY(-10px);

background:#fff;

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

}

.cv-metric h2{

font-size:3.4rem;

color:var(--cv-accent);

margin-bottom:10px;

}

.cv-metric h4{

font-size:1.3rem;

margin-bottom:15px;

color:var(--cv-primary);

}

.cv-metric p{

color:var(--cv-gray);

line-height:1.8;

}



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

.cv-cta{

padding:120px 0;

background:#F5FAF8;

}

.cv-cta-box{

padding:80px;

border-radius:28px;

text-align:center;

background:

linear-gradient(
135deg,
#071C2C,
#0B3150);

color:#fff;

}

.cv-cta-box h2{

font-size:clamp(2.4rem,4vw,3.6rem);

line-height:1.2;

margin-bottom:25px;

}

.cv-cta-box p{

max-width:700px;

margin:0 auto 45px;

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

line-height:1.9;

}

.cv-cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



/*==================================================
ANIMATION
==================================================*/

@keyframes cvFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.cv-ring{

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

}

.cv-top{

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

}

.cv-right{

animation:cvFloat 6.5s ease-in-out infinite;

}

.cv-bottom{

animation:cvFloat 7s ease-in-out infinite;

}



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

@media(max-width:1100px){

.cv-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.cv-content{

margin:auto;

}

.cv-content p{

margin-left:auto;

margin-right:auto;

}

.cv-actions{

justify-content:center;

}

.cv-highlights{

justify-content:center;

}

.cv-values-grid{

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

}

.cv-metrics .container{

grid-template-columns:1fr;

}

.cv-visual{

margin-top:70px;

}

}



@media(max-width:768px){

.cv-hero{

padding:150px 0 90px;

min-height:auto;

}

.cv-content h1{

font-size:3rem;

}

.cv-ring{

width:360px;

height:360px;

}

.cv-ring img{

width:220px;

}

.cv-floating{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin:18px auto;

width:100%;

max-width:320px;

}

.cv-values-grid{

grid-template-columns:1fr;

}

.cv-cta-box{

padding:50px 30px;

}

.cv-actions,

.cv-cta-buttons{

flex-direction:column;

}

.cv-actions a,

.cv-cta-buttons a{

width:100%;

justify-content:center;

}

}



@media(max-width:576px){

.cv-section-title h2{

font-size:2.2rem;

}

.cv-content h1{

font-size:2.5rem;

}

.cv-highlight{

width:100%;

}

.cv-ring{

width:300px;

height:300px;

}

.cv-ring img{

width:180px;

}

.cv-metric{

padding:35px 25px;

}

}
/*==================================================
PREMIUM ENHANCEMENT PACK - PART 1
Hero • Buttons • Background • Floating Cards
==================================================*/


/*==================================================
SMOOTH SCROLL
==================================================*/

html{

scroll-behavior:smooth;

}



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

.cv-hero{

overflow:hidden;

isolation:isolate;

}



/* Animated grid */

.cv-grid{

animation:gridMove 18s linear infinite;

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(80px);

}

}



/*==================================================
MOVING LIGHT
==================================================*/

.cv-hero::before{

content:"";

position:absolute;

width:900px;

height:900px;

left:-250px;

top:-250px;

border-radius:50%;

background:

radial-gradient(

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

transparent 70%

);

animation:heroGlow 12s ease-in-out infinite;

z-index:0;

}

.cv-hero::after{

content:"";

position:absolute;

width:700px;

height:700px;

right:-180px;

bottom:-180px;

border-radius:50%;

background:

radial-gradient(

rgba(0,200,83,.06),

transparent 72%

);

animation:heroGlow2 14s ease-in-out infinite;

z-index:0;

}

@keyframes heroGlow{

0%{

transform:scale(.9);

opacity:.2;

}

50%{

transform:scale(1.2);

opacity:.55;

}

100%{

transform:scale(.9);

opacity:.2;

}

}

@keyframes heroGlow2{

0%{

transform:scale(1);

opacity:.15;

}

50%{

transform:scale(1.25);

opacity:.5;

}

100%{

transform:scale(1);

opacity:.15;

}

}



/*==================================================
TEXT ANIMATION
==================================================*/

.cv-content{

animation:slideLeft .9s ease;

}

.cv-visual{

animation:slideRight 1.1s ease;

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-70px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(70px);

}

to{

opacity:1;

transform:translateX(0);

}

}



/*==================================================
SHIELD GLOW
==================================================*/

.cv-ring{

position:relative;

overflow:visible;

}

.cv-ring::before{

content:"";

position:absolute;

width:460px;

height:460px;

border-radius:50%;

background:

radial-gradient(

rgba(0,255,120,.28),

transparent 72%

);

animation:ringPulse 4s infinite;

z-index:-1;

}

.cv-ring::after{

content:"";

position:absolute;

inset:-25px;

border-radius:50%;

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

animation:ringRotate 18s linear infinite;

}

@keyframes ringPulse{

0%{

transform:scale(.82);

opacity:.5;

}

50%{

transform:scale(1.12);

opacity:.75;

}

100%{

transform:scale(1.35);

opacity:0;

}

}

@keyframes ringRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



/* Floating animation */

.cv-ring img{

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

}

@keyframes shieldFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}



/*==================================================
FLOATING PANELS
==================================================*/

.cv-floating{

transition:.45s ease;

cursor:pointer;

backdrop-filter:blur(18px);

}

.cv-floating:hover{

transform:

translateY(-10px)

scale(1.04);

box-shadow:

0 25px 60px rgba(0,0,0,.35),

0 0 30px rgba(0,255,120,.25);

}

.cv-floating i{

transition:.35s;

}

.cv-floating:hover i{

transform:rotate(360deg);

background:#00C853;

color:#fff;

}



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

.btn-primary{

position:relative;

overflow:hidden;

transition:.35s ease;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;

left:-130%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.55),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.btn-primary:hover::before{

left:150%;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 15px 35px rgba(0,200,83,.35);

}



/* Outline Button */

.btn-outline{

position:relative;

overflow:hidden;

transition:.35s ease;

}

.btn-outline::before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:#00C853;

z-index:-1;

transition:.35s;

}

.btn-outline:hover{

color:#fff;

border-color:#00C853;

transform:translateY(-4px);

}

.btn-outline:hover::before{

width:100%;

}



/*==================================================
HIGHLIGHT CARDS
==================================================*/

.cv-highlight{

transition:.35s ease;

}

.cv-highlight:hover{

transform:translateY(-8px);

background:

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

box-shadow:

0 20px 45px rgba(0,0,0,.30);

}

.cv-highlight:hover i{

transform:rotate(360deg);

transition:.6s;

}



/*==================================================
PILL
==================================================*/

.cv-pill{

position:relative;

overflow:hidden;

}

.cv-pill::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transform:skewX(-25deg);

animation:pillSweep 6s infinite;

}

@keyframes pillSweep{

0%{

left:-120%;

}

100%{

left:180%;

}

}



/*==================================================
SCROLL INDICATOR
==================================================*/

.cv-actions{

position:relative;

}

.cv-actions::after{

content:"";

position:absolute;

bottom:-45px;

left:0;

width:2px;

height:28px;

background:#00C853;

animation:scrollLine 1.5s infinite;

}

@keyframes scrollLine{

0%{

opacity:0;

transform:translateY(0);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(15px);

}

}
/*==================================================
PREMIUM ENHANCEMENT PACK - PART 2
Core Values • Mission • Metrics
==================================================*/


/*==================================================
VALUES SECTION BACKGROUND
==================================================*/

.cv-values{

position:relative;

overflow:hidden;

}

.cv-values::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

top:-280px;

right:-220px;

background:
radial-gradient(
rgba(0,200,83,.06),
transparent 70%);

animation:rotateGlow 18s linear infinite;

}

.cv-values::after{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

bottom:-250px;

left:-200px;

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

animation:rotateGlow 22s linear infinite reverse;

}

@keyframes rotateGlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



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

.cv-values-grid{

position:relative;

z-index:5;

}



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

.cv-value-card{

position:relative;

overflow:hidden;

cursor:pointer;

transition:.45s cubic-bezier(.2,.8,.2,1);

background:

linear-gradient(

180deg,

#ffffff,

#fbfcfc

);

}



/*==================================================
TOP GREEN BAR
==================================================*/

.cv-value-card::before{

content:"";

position:absolute;

top:0;

left:50%;

width:0;

height:4px;

background:#00C853;

transition:.45s;

transform:translateX(-50%);

}

.cv-value-card:hover::before{

width:100%;

}



/*==================================================
LIGHT SWEEP
==================================================*/

.cv-value-card::after{

content:"";

position:absolute;

top:0;

left:-130%;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.75),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.cv-value-card:hover::after{

left:170%;

}



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

.cv-value-card:hover{

transform:

translateY(-18px)

scale(1.02);

box-shadow:

0 30px 60px rgba(0,0,0,.12),

0 0 35px rgba(0,200,83,.15);

}



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

.cv-value-icon{

position:relative;

overflow:hidden;

transition:.45s;

}

.cv-value-icon::before{

content:"";

position:absolute;

inset:0;

border-radius:50%;

background:

conic-gradient(

#00C853,

transparent,

#00C853

);

opacity:0;

transition:.5s;

animation:spinIcon 4s linear infinite;

}

.cv-value-icon i{

position:relative;

z-index:5;

transition:.45s;

}

.cv-value-card:hover .cv-value-icon{

background:#00C853;

color:#fff;

transform:rotate(8deg);

}

.cv-value-card:hover .cv-value-icon::before{

opacity:1;

}

.cv-value-card:hover .cv-value-icon i{

transform:scale(1.15);

}



@keyframes spinIcon{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



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

.cv-value-card h3{

transition:.35s;

}

.cv-value-card:hover h3{

color:#00C853;

letter-spacing:.5px;

}



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

.cv-value-card p{

transition:.35s;

}

.cv-value-card:hover p{

color:#334155;

}



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

.cv-mission{

overflow:hidden;

position:relative;

}

.cv-mission::before{

content:"";

position:absolute;

width:550px;

height:550px;

border-radius:50%;

left:-180px;

top:-180px;

background:

radial-gradient(

rgba(0,255,120,.10),

transparent

);

animation:missionGlow 14s ease infinite;

}

.cv-mission::after{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

right:-150px;

bottom:-150px;

background:

radial-gradient(

rgba(0,200,83,.08),

transparent

);

animation:missionGlow2 18s ease infinite;

}



@keyframes missionGlow{

0%{

transform:scale(.8);

opacity:.2;

}

50%{

transform:scale(1.2);

opacity:.7;

}

100%{

transform:scale(.8);

opacity:.2;

}

}

@keyframes missionGlow2{

0%{

transform:scale(1);

opacity:.2;

}

50%{

transform:scale(1.35);

opacity:.55;

}

100%{

transform:scale(1);

opacity:.2;

}

}



/*==================================================
MISSION TITLE
==================================================*/

.cv-mission h2{

position:relative;

display:inline-block;

}

.cv-mission h2::after{

content:"";

position:absolute;

left:50%;

bottom:-12px;

width:70px;

height:3px;

background:#00C853;

transform:translateX(-50%);

}



/*==================================================
METRICS
==================================================*/

.cv-metric{

position:relative;

overflow:hidden;

transition:.45s;

}

.cv-metric::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:0;

background:

linear-gradient(

180deg,

rgba(0,200,83,.08),

transparent

);

transition:.45s;

}

.cv-metric:hover::before{

height:100%;

}

.cv-metric:hover{

transform:

translateY(-15px);

box-shadow:

0 25px 60px rgba(0,0,0,.10);

}



/*==================================================
NUMBERS
==================================================*/

.cv-metric h2{

transition:.4s;

}

.cv-metric:hover h2{

transform:scale(1.15);

text-shadow:

0 0 15px rgba(0,200,83,.35);

}



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

.cv-metric h4{

transition:.35s;

}

.cv-metric:hover h4{

color:#00C853;

}



/*==================================================
SECTION TITLES
==================================================*/

.cv-section-title h2{

transition:.35s;

}

.cv-section-title:hover h2{

letter-spacing:.5px;

}



/*==================================================
FADE-IN ANIMATION
==================================================*/

.cv-value-card{

animation:fadeUp .9s both;

}

.cv-value-card:nth-child(2){

animation-delay:.1s;

}

.cv-value-card:nth-child(3){

animation-delay:.2s;

}

.cv-value-card:nth-child(4){

animation-delay:.3s;

}

.cv-value-card:nth-child(5){

animation-delay:.4s;

}

.cv-value-card:nth-child(6){

animation-delay:.5s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==================================================
PREMIUM ENHANCEMENT PACK - PART 3
CTA • Footer • Final Polish
==================================================*/


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

.cv-cta{

position:relative;

overflow:hidden;

}

.cv-cta::before{

content:"";

position:absolute;

width:800px;

height:800px;

border-radius:50%;

left:-320px;

top:-320px;

background:
radial-gradient(
rgba(0,255,120,.08),
transparent 70%);

animation:ctaGlow1 16s ease-in-out infinite;

}

.cv-cta::after{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

right:-260px;

bottom:-260px;

background:
radial-gradient(
rgba(0,200,83,.06),
transparent 72%);

animation:ctaGlow2 18s ease-in-out infinite;

}

@keyframes ctaGlow1{

0%,100%{

transform:scale(.9);

opacity:.25;

}

50%{

transform:scale(1.25);

opacity:.65;

}

}

@keyframes ctaGlow2{

0%,100%{

transform:scale(1);

opacity:.18;

}

50%{

transform:scale(1.3);

opacity:.55;

}

}



/*==================================================
CTA BOX
==================================================*/

.cv-cta-box{

position:relative;

overflow:hidden;

transition:.45s ease;

}

.cv-cta-box:hover{

transform:translateY(-6px);

box-shadow:

0 35px 70px rgba(0,0,0,.22);

}

.cv-cta-box::before{

content:"";

position:absolute;

top:0;

left:-150%;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.15),
transparent);

transform:skewX(-25deg);

animation:ctaSweep 9s linear infinite;

}

@keyframes ctaSweep{

100%{

left:180%;

}

}



/*==================================================
CTA TITLE
==================================================*/

.cv-cta-box h2{

transition:.4s;

}

.cv-cta-box:hover h2{

letter-spacing:.8px;

}



/*==================================================
CTA BUTTONS
==================================================*/

.cv-cta-buttons a{

transition:.35s;

}

.cv-cta-buttons a:hover{

transform:translateY(-5px);

}



/*==================================================
FOOTER
==================================================*/

.footer{

position:relative;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:1px;

background:

linear-gradient(
90deg,
transparent,
#00C853,
transparent);

animation:footerLine 5s linear infinite;

}

@keyframes footerLine{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(100%);

}

}



/*==================================================
FOOTER LINKS
==================================================*/

.footer a{

position:relative;

transition:.35s;

}

.footer a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:#00C853;

transition:.35s;

}

.footer a:hover{

color:#00C853;

}

.footer a:hover::after{

width:100%;

}



/*==================================================
FOOTER LOGO
==================================================*/

.footer-logo{

transition:.5s ease;

}

.footer-logo:hover{

transform:scale(1.08);

filter:

drop-shadow(0 0 20px rgba(0,255,120,.35));

}



/*==================================================
SOCIAL ICONS
==================================================*/

.footer-contact i{

transition:.35s;

}

.footer-contact li:hover i{

color:#00C853;

transform:scale(1.2);

}



/*==================================================
SECTION TITLES
==================================================*/

.cv-section-title{

position:relative;

}

.cv-section-title::after{

content:"";

display:block;

width:70px;

height:4px;

margin:30px auto 0;

background:#00C853;

border-radius:50px;

transition:.4s;

}

.cv-section-title:hover::after{

width:130px;

}



/*==================================================
IMAGE HOVER
==================================================*/

.cv-ring img{

transition:.45s;

}

.cv-ring:hover img{

transform:scale(1.04);

}



/*==================================================
SUBTLE PAGE FLOAT
==================================================*/

.cv-foundation,
.cv-values,
.cv-mission,
.cv-metrics,
.cv-cta{

animation:sectionFade .8s ease both;

}

@keyframes sectionFade{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#071C2C;

}

::-webkit-scrollbar-thumb{

background:#00C853;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#00E676;

}



/*==================================================
TEXT SELECTION
==================================================*/

::selection{

background:#00C853;

color:#fff;

}



/*==================================================
FOCUS STATES
==================================================*/

a:focus,
button:focus{

outline:none;

box-shadow:

0 0 0 3px rgba(0,200,83,.25);

border-radius:8px;

}



/*==================================================
PREMIUM TRANSITIONS
==================================================*/

*{

transition:

background-color .25s ease,

color .25s ease,

border-color .25s ease;

}



/*==================================================
FLOATING DECORATION
==================================================*/

.cv-values .container::before{

content:"";

position:absolute;

width:12px;

height:12px;

border-radius:50%;

background:#00C853;

top:40px;

right:80px;

box-shadow:

0 0 18px rgba(0,255,120,.6);

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

}

.cv-values .container::after{

content:"";

position:absolute;

width:8px;

height:8px;

border-radius:50%;

background:#00C853;

bottom:80px;

left:60px;

box-shadow:

0 0 14px rgba(0,255,120,.6);

animation:floatDot 7s ease-in-out infinite reverse;

}

@keyframes floatDot{

0%,100%{

transform:translateY(0);

opacity:.6;

}

50%{

transform:translateY(-20px);

opacity:1;

}

}



/*==================================================
REDUCE MOTION
==================================================*/

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

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}
.cv-hero{

min-height:780px !important;

padding:120px 0 50px !important;

display:flex;

align-items:center;

}
/*==================================================
FINAL HERO OVERRIDE
Paste BELOW everything else
==================================================*/


/*---------------------------------
HERO
---------------------------------*/

.cv-hero{

min-height:760px !important;

padding:125px 0 45px !important;

display:flex;

align-items:center;

overflow:hidden;

}



/*---------------------------------
LAYOUT
---------------------------------*/

.cv-wrapper{

display:grid !important;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:35px;

}



/*---------------------------------
LEFT CONTENT
---------------------------------*/

.cv-content{

max-width:560px;

padding:0;

background:none;

backdrop-filter:none;

}

.cv-pill{

margin-bottom:20px;

}

.cv-content h1{

font-size:clamp(3rem,5vw,4.8rem);

line-height:.98;

margin-bottom:16px !important;

letter-spacing:-2px;

}

.cv-content h1 span{

display:block;

}

.cv-content p{

max-width:470px;

font-size:.98rem;

line-height:1.65;

margin-bottom:24px !important;

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

}



/*---------------------------------
BUTTONS
---------------------------------*/

.cv-actions{

display:flex;

gap:16px;

margin-bottom:26px !important;

flex-wrap:wrap;

}

.cv-actions a{

height:52px;

padding:0 30px;

border-radius:50px;

display:inline-flex;

align-items:center;

justify-content:center;

font-weight:600;

font-size:.95rem;

transition:.35s ease;

text-decoration:none;

}



/* Primary */

.btn-primary{

background:linear-gradient(135deg,#00C853,#16f276);

box-shadow:

0 15px 35px rgba(0,200,83,.30);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 22px 45px rgba(0,200,83,.45);

}



/* Outline */

.btn-outline{

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

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

backdrop-filter:blur(10px);

color:#fff;

}

.btn-outline:hover{

background:#fff;

color:#071C2C;

transform:translateY(-5px);

}



/*---------------------------------
HIGHLIGHTS
---------------------------------*/

.cv-highlights{

display:flex;

gap:14px;

margin-top:5px;

flex-wrap:nowrap;

}

.cv-highlight{

padding:16px;

min-width:220px;

border-radius:18px;

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

backdrop-filter:blur(14px);

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

transition:.35s;

}

.cv-highlight:hover{

transform:translateY(-8px);

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

}

.cv-highlight i{

width:48px;

height:48px;

font-size:18px;

}

.cv-highlight h3{

font-size:1rem;

margin-bottom:4px;

}

.cv-highlight span{

font-size:.82rem;

color:#d4dde6;

}



/*---------------------------------
RIGHT SIDE
---------------------------------*/

.cv-visual{

min-height:520px;

display:flex;

justify-content:center;

align-items:center;

}



/*---------------------------------
SHIELD
---------------------------------*/

.cv-ring{

width:520px;

height:520px;

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

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

box-shadow:

0 0 100px rgba(0,200,83,.12);

}

.cv-ring img{

width:320px;

max-width:100%;

height:auto;

filter:

drop-shadow(0 0 35px rgba(0,255,120,.35));

}



/*---------------------------------
FLOATING CARDS
---------------------------------*/

.cv-floating{

padding:16px 22px;

border-radius:18px;

background:rgba(8,26,43,.92);

backdrop-filter:blur(16px);

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

}

.cv-floating h4{

font-size:.92rem;

}

.cv-floating span{

font-size:.78rem;

}



/* Positions */

.cv-top{

top:55px;

left:20px;

}

.cv-right{

top:210px;

right:-10px;

}

.cv-bottom{

left:35px;

bottom:55px;

}



/*---------------------------------
REMOVE EXCESS SPACE
---------------------------------*/

.cv-foundation{

padding-top:90px;

}



/*---------------------------------
TABLET
---------------------------------*/

@media(max-width:991px){

.cv-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.cv-content{

margin:auto;

}

.cv-content p{

margin-left:auto;

margin-right:auto;

}

.cv-actions{

justify-content:center;

}

.cv-highlights{

justify-content:center;

flex-wrap:wrap;

}

.cv-highlight{

min-width:210px;

}

.cv-visual{

margin-top:35px;

}

.cv-top,

.cv-right,

.cv-bottom{

position:relative;

top:auto;

left:auto;

right:auto;

bottom:auto;

margin:12px auto;

}

}



/*---------------------------------
MOBILE
---------------------------------*/

@media(max-width:768px){

.cv-hero{

padding:110px 0 50px !important;

min-height:auto;

}

.cv-content h1{

font-size:2.7rem;

}

.cv-content p{

font-size:.95rem;

}

.cv-actions{

flex-direction:column;

}

.cv-actions a{

width:100%;

}

.cv-highlights{

flex-direction:column;

align-items:center;

}

.cv-highlight{

width:100%;

max-width:340px;

}

.cv-ring{

width:340px;

height:340px;

}

.cv-ring img{

width:220px;

}

}
/*==================================================
PREMIUM GLASS VALUE CARDS
==================================================*/

.cv-values{

position:relative;

background:
linear-gradient(
180deg,
#edf8f2,
#f7fcf9);

overflow:hidden;

}

.cv-values::before{

content:"";

position:absolute;

width:700px;

height:700px;

top:-280px;

right:-250px;

border-radius:50%;

background:

radial-gradient(

rgba(0,200,83,.08),

transparent 72%

);

}

.cv-values::after{

content:"";

position:absolute;

width:600px;

height:600px;

left:-200px;

bottom:-220px;

border-radius:50%;

background:

radial-gradient(

rgba(0,255,120,.06),

transparent 72%

);

}



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

.cv-value-card{

position:relative;

overflow:hidden;

background:

linear-gradient(

135deg,

rgba(8,62,38,.82),

rgba(10,95,55,.70)

) !important;

backdrop-filter:blur(18px);

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

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

box-shadow:

0 20px 45px rgba(0,0,0,.15);

transition:.45s cubic-bezier(.2,.8,.2,1);

}



/*==================================================
TOP GLOW
==================================================*/

.cv-value-card::before{

content:"";

position:absolute;

top:0;

left:50%;

width:0;

height:4px;

background:#5DFF9B;

transition:.4s;

transform:translateX(-50%);

}

.cv-value-card:hover::before{

width:100%;

}



/*==================================================
LIGHT SWEEP
==================================================*/

.cv-value-card::after{

content:"";

position:absolute;

top:0;

left:-130%;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.cv-value-card:hover::after{

left:180%;

}



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

.cv-value-card:hover{

transform:

translateY(-15px)

scale(1.02);

background:

linear-gradient(

135deg,

rgba(12,82,50,.92),

rgba(15,125,70,.82)

) !important;

box-shadow:

0 30px 60px rgba(0,0,0,.22),

0 0 30px rgba(0,255,120,.20);

}



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

.cv-value-icon{

background:

rgba(255,255,255,.10) !important;

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

color:#8DFFC0 !important;

backdrop-filter:blur(8px);

}

.cv-value-card:hover .cv-value-icon{

background:#00C853 !important;

color:#fff !important;

transform:rotate(8deg);

}



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

.cv-value-card h3{

color:#fff !important;

font-weight:700;

margin-top:18px;

}



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

.cv-value-card p{

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

line-height:1.75;

}



/*==================================================
FLOATING GLOW
==================================================*/

.cv-value-card .cv-value-icon{

box-shadow:

0 0 20px rgba(0,255,120,.15);

}



/*==================================================
SECTION TITLE
==================================================*/

.cv-values .cv-section-title h2{

margin-bottom:15px;

}

.cv-values .cv-section-title::after{

background:#00C853;

}



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

.cv-values-grid{

gap:32px;

}
/*==================================================
FINAL PREMIUM DEFENCE CARDS
==================================================*/

.cv-value-card{

background:
linear-gradient(
145deg,
#082416 0%,
#0D3521 40%,
#13502F 100%) !important;

border:1px solid rgba(0,255,120,.12);

border-radius:22px;

box-shadow:
0 18px 45px rgba(0,0,0,.22);

position:relative;

overflow:hidden;

transition:.45s cubic-bezier(.2,.8,.2,1);

}



/* Premium hover */

.cv-value-card:hover{

background:
linear-gradient(
145deg,
#0B2E1D,
#135A35,
#187744) !important;

transform:
translateY(-15px)
scale(1.02);

box-shadow:
0 28px 60px rgba(0,0,0,.28),
0 0 30px rgba(0,255,120,.18);

}



/* Green top bar */

.cv-value-card::before{

content:"";

position:absolute;

left:50%;

top:0;

width:0;

height:4px;

background:#67FFAA;

transition:.4s;

transform:translateX(-50%);

}

.cv-value-card:hover::before{

width:100%;

}



/* Shine */

.cv-value-card::after{

content:"";

position:absolute;

top:0;

left:-130%;

width:70%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent);

transform:skewX(-25deg);

transition:.8s;

}

.cv-value-card:hover::after{

left:180%;

}



/* ICON */

.cv-value-icon{

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

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

color:#8EFFBC !important;

box-shadow:

0 0 18px rgba(0,255,120,.12);

}



.cv-value-card:hover .cv-value-icon{

background:#00C853 !important;

color:#fff !important;

transform:rotate(10deg);

}



/* TITLE */

.cv-value-card h3{

color:#fff !important;

font-size:1.3rem;

margin-top:18px;

}



/* TEXT */

.cv-value-card p{

color:rgba(255,255,255,.84) !important;

line-height:1.8;

}



/* Icon animation */

.cv-value-card:hover .cv-value-icon{

animation:iconBounce .6s ease;

}

@keyframes iconBounce{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}
/*==================================================
FINAL NEXUS GREEN VALUE CARDS
==================================================*/

.cv-value-card{

background:#00A651 !important;

background:linear-gradient(
135deg,
#00A651 0%,
#0AB35C 55%,
#18C769 100%) !important;

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

border-radius:22px;

box-shadow:
0 18px 40px rgba(0,166,81,.25);

color:#fff;

overflow:hidden;

position:relative;

transition:.4s ease;

}



/* Hover */

.cv-value-card:hover{

background:linear-gradient(
135deg,
#00994A,
#00B359,
#1AD56E) !important;

transform:translateY(-12px);

box-shadow:
0 25px 55px rgba(0,166,81,.35);

}



/* Top line */

.cv-value-card::before{

content:"";

position:absolute;

top:0;

left:50%;

width:0;

height:4px;

background:#ffffff;

transform:translateX(-50%);

transition:.35s;

}

.cv-value-card:hover::before{

width:100%;

}



/* Shine */

.cv-value-card::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent);

transform:skewX(-25deg);

transition:.8s;

}

.cv-value-card:hover::after{

left:170%;

}



/* Icon */

.cv-value-icon{

background:rgba(255,255,255,.18) !important;

color:#fff !important;

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

box-shadow:none;

}

.cv-value-card:hover .cv-value-icon{

background:#fff !important;

color:#00A651 !important;

transform:scale(1.1);

}



/* Heading */

.cv-value-card h3{

color:#fff !important;

font-weight:700;

}



/* Text */

.cv-value-card p{

color:rgba(255,255,255,.92) !important;

line-height:1.8;

}



/* Slight zoom */

.cv-value-card:hover h3{

letter-spacing:.5px;

}
/*=========================================
PREMIUM DEFENCE BLUE CARDS
=========================================*/

.cv-value-card{

background:linear-gradient(
145deg,
#163854 0%,
#1A4465 55%,
#21547A 100%) !important;

border:1px solid rgba(61,145,201,.22);

border-radius:22px;

box-shadow:
0 20px 45px rgba(0,0,0,.22);

transition:.4s ease;

overflow:hidden;

position:relative;

}

.cv-value-card:hover{

background:linear-gradient(
145deg,
#1B4669,
#23567E,
#2B6995) !important;

transform:translateY(-12px);

box-shadow:
0 28px 60px rgba(0,0,0,.28),
0 0 25px rgba(0,200,83,.12);

}

/* White top highlight */

.cv-value-card::before{

content:"";

position:absolute;

top:0;

left:50%;

width:0;

height:4px;

background:#00C853;

transform:translateX(-50%);

transition:.35s;

}

.cv-value-card:hover::before{

width:100%;

}

/* Icon */

.cv-value-icon{

background:#00C853 !important;

color:#fff !important;

border:none;

}

.cv-value-card:hover .cv-value-icon{

background:#15D463 !important;

transform:scale(1.08);

}

/* Text */

.cv-value-card h3{

color:#fff !important;

}

.cv-value-card p{

color:rgba(255,255,255,.88) !important;

}
/*=========================================
DEEP STEEL BLUE VALUE CARDS
=========================================*/

.cv-value-card{

background:linear-gradient(
145deg,
#13344D 0%,
#1A405E 55%,
#234E70 100%) !important;

border:1px solid rgba(82,155,214,.16);

border-radius:22px;

box-shadow:
0 18px 45px rgba(0,0,0,.28);

position:relative;

overflow:hidden;

transition:.4s ease;

}

/* Hover */

.cv-value-card:hover{

background:linear-gradient(
145deg,
#18415F,
#215476,
#2A648C) !important;

transform:translateY(-12px);

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

}

/* Green top accent */

.cv-value-card::before{

content:"";

position:absolute;

top:0;

left:50%;

width:0;

height:4px;

background:#00C853;

transform:translateX(-50%);

transition:.35s;

}

.cv-value-card:hover::before{

width:100%;

}

/* Icon */

.cv-value-icon{

background:#00C853 !important;

color:#fff !important;

border:none;

}

.cv-value-card:hover .cv-value-icon{

background:#12D562 !important;

transform:scale(1.08);

}

/* Text */

.cv-value-card h3{

color:#fff !important;

}

.cv-value-card p{

color:rgba(255,255,255,.88) !important;

}
/*==================================================
MATCH "VALUES THAT INSPIRE" BLUE CARDS
==================================================*/

.cv-value-card{

    background:#16344D !important;

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

    border-radius:22px;

    box-shadow:0 18px 40px rgba(0,0,0,.22);

    transition:all .35s ease;

    overflow:hidden;

    position:relative;

}

.cv-value-card:hover{

    background:#1C425F !important;

    transform:translateY(-10px);

    box-shadow:
    0 24px 55px rgba(0,0,0,.30),
    0 0 20px rgba(0,200,83,.10);

}

/* Top accent */

.cv-value-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#00C853;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}

.cv-value-card:hover::before{

    transform:scaleX(1);

}

/* Icon */

.cv-value-icon{

    background:#00C853 !important;

    color:#fff !important;

    border:none;

}

.cv-value-card:hover .cv-value-icon{

    background:#12D562 !important;

    transform:scale(1.08);

}

/* Text */

.cv-value-card h3{

    color:#fff !important;

}

.cv-value-card p{

    color:rgba(255,255,255,.86) !important;

}
/* =========================================================
   NEXUS DATA & DEFENSE
   CORE VALUES — FINAL MOBILE POLISH
   ADD AT THE VERY BOTTOM OF core-values.css
========================================================= */


@media (max-width:768px){

    /* =====================================================
       GLOBAL SAFETY
    ===================================================== */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .cv-hero,
    .cv-foundation,
    .cv-values,
    .cv-mission,
    .cv-metrics,
    .cv-cta{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }


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

    .cv-hero{

        min-height:auto !important;

        padding:
            105px 0 55px !important;

        display:block;

    }

    .cv-wrapper{

        display:flex !important;

        flex-direction:column;

        align-items:stretch;

        gap:38px;

        width:100%;

    }


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

    .cv-content{

        width:100%;

        max-width:100%;

        text-align:left;

    }

    .cv-pill{

        display:inline-flex;

        max-width:100%;

        padding:
            8px 13px;

        margin-bottom:18px;

        font-size:8px;

        letter-spacing:1.5px;

        box-sizing:border-box;

    }

    .cv-content h1{

        width:100%;

        font-size:
            clamp(35px,9.5vw,48px) !important;

        line-height:1.05;

        letter-spacing:-1.2px;

        margin-bottom:17px !important;

    }

    .cv-content h1 span{

        display:block;

    }

    .cv-content p{

        width:100%;

        max-width:100%;

        font-size:13px;

        line-height:1.8;

        margin-bottom:23px !important;

    }


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

    .cv-actions{

        width:100%;

        display:flex;

        flex-direction:column !important;

        align-items:stretch;

        gap:10px;

        margin-bottom:24px !important;

    }

    .cv-actions a{

        width:100% !important;

        max-width:100%;

        height:50px;

        padding:
            0 18px;

        box-sizing:border-box;

        justify-content:center;

        border-radius:13px;

        font-size:12px;

    }

    .cv-actions::after{

        display:none;

    }


    /* =====================================================
       HERO HIGHLIGHTS
    ===================================================== */

    .cv-highlights{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:10px;

    }

    .cv-highlight{

        width:100%;

        max-width:none;

        min-width:0;

        padding:14px;

        box-sizing:border-box;

        border-radius:14px;

    }

    .cv-highlight i{

        width:42px;

        height:42px;

        min-width:42px;

        border-radius:11px;

        font-size:16px;

    }

    .cv-highlight h3{

        font-size:13px;

    }

    .cv-highlight span{

        font-size:9px;

    }


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

    .cv-visual{

        width:100%;

        min-height:390px;

        margin-top:0;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        position:relative;

    }

    .cv-ring{

        width:330px !important;

        height:330px !important;

        max-width:85vw;

        max-height:85vw;

    }

    .cv-ring img{

        width:210px !important;

        max-width:65%;

    }

    .cv-ring::before{

        width:290px;

        height:290px;

    }

    .cv-ring::after{

        inset:-15px;

    }


    /* =====================================================
       FLOATING CARDS
    ===================================================== */

    .cv-floating{

        position:relative !important;

        top:auto !important;

        left:auto !important;

        right:auto !important;

        bottom:auto !important;

        width:100%;

        max-width:290px;

        min-width:0;

        margin:9px auto;

        padding:12px 14px;

        box-sizing:border-box;

        border-radius:13px;

        gap:10px;

    }

    .cv-floating i{

        width:38px;

        height:38px;

        min-width:38px;

        font-size:14px;

    }

    .cv-floating h4{

        font-size:10px;

    }

    .cv-floating span{

        font-size:8px;

    }


    /* =====================================================
       FOUNDATION
    ===================================================== */

    .cv-foundation{

        padding:
            65px 0;

    }

    .cv-section-title{

        width:100%;

        max-width:100%;

    }

    .cv-section-title > p{

        padding:
            7px 13px;

        font-size:8px;

        letter-spacing:1.5px;

        margin-bottom:17px;

    }

    .cv-section-title h2{

        font-size:
            clamp(30px,8vw,38px);

        line-height:1.12;

        margin-bottom:18px;

    }

    .cv-section-title p:last-child{

        font-size:13px;

        line-height:1.8;

    }


    /* =====================================================
       CORE VALUES CARDS
    ===================================================== */

    .cv-values{

        padding:
            65px 0;

    }

    .cv-values-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:13px;

        margin-top:38px;

    }

    .cv-value-card{

        width:100%;

        min-height:auto;

        padding:
            28px 20px;

        box-sizing:border-box;

        border-radius:17px;

        text-align:center;

    }

    .cv-value-icon{

        width:65px;

        height:65px;

        margin-bottom:18px;

        font-size:23px;

    }

    .cv-value-card h3{

        font-size:18px;

        margin-bottom:10px;

    }

    .cv-value-card p{

        font-size:11px;

        line-height:1.75;

    }


    /* =====================================================
       MISSION BANNER
    ===================================================== */

    .cv-mission{

        padding:
            70px 0;

        text-align:center;

    }

    .cv-mission h2{

        font-size:
            clamp(31px,8vw,40px);

        line-height:1.12;

        margin-bottom:20px;

    }

    .cv-mission p{

        font-size:13px;

        line-height:1.8;

    }


    /* =====================================================
       METRICS
    ===================================================== */

    .cv-metrics{

        padding:
            65px 0;

    }

    .cv-metrics .container{

        display:grid;

        grid-template-columns:1fr;

        gap:13px;

    }

    .cv-metric{

        width:100%;

        padding:
            28px 20px;

        box-sizing:border-box;

        border-radius:17px;

    }

    .cv-metric h2{

        font-size:40px;

    }

    .cv-metric h4{

        font-size:16px;

        margin-bottom:10px;

    }

    .cv-metric p{

        font-size:11px;

        line-height:1.75;

    }


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

    .cv-cta{

        padding:
            65px 0;

    }

    .cv-cta-box{

        width:100%;

        padding:
            45px 20px;

        box-sizing:border-box;

        border-radius:20px;

    }

    .cv-cta-box h2{

        font-size:
            clamp(30px,8vw,39px);

        line-height:1.12;

    }

    .cv-cta-box p{

        font-size:12px;

        line-height:1.8;

        margin-bottom:28px;

    }

    .cv-cta-buttons{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:10px;

    }

    .cv-cta-buttons a{

        width:100%;

        min-height:50px;

        justify-content:center;

        box-sizing:border-box;

        border-radius:13px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:480px){

    .cv-hero{

        padding:
            95px 0 45px !important;

    }

    .cv-content h1{

        font-size:34px !important;

    }

    .cv-content p{

        font-size:12px;

    }

    .cv-visual{

        min-height:350px;

    }

    .cv-ring{

        width:285px !important;

        height:285px !important;

    }

    .cv-ring img{

        width:180px !important;

    }

    .cv-ring::before{

        width:250px;

        height:250px;

    }

    .cv-floating{

        max-width:270px;

    }

    .cv-section-title h2{

        font-size:29px;

    }

    .cv-section-title p:last-child{

        font-size:12px;

    }

    .cv-value-card{

        padding:
            25px 18px;

    }

    .cv-mission h2{

        font-size:30px;

    }

    .cv-cta-box{

        padding:
            40px 18px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:380px){

    .cv-content h1{

        font-size:31px !important;

    }

    .cv-pill{

        font-size:7px;

    }

    .cv-visual{

        min-height:320px;

    }

    .cv-ring{

        width:255px !important;

        height:255px !important;

    }

    .cv-ring img{

        width:160px !important;

    }

    .cv-floating{

        max-width:245px;

        padding:10px 12px;

    }

    .cv-section-title h2{

        font-size:27px;

    }

    .cv-value-card h3{

        font-size:17px;

    }

    .cv-mission h2{

        font-size:28px;

    }

}