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

.training-hero{

    position:relative;
    overflow:hidden;

    background:#fff;

    padding:70px 0 90px;
    
    display:flex;
    align-items:center;
}

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

.training-hero .container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 40px;
    position:relative;
    z-index:5;
}

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

.hero-grid-bg{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
    background-size:60px 60px;
    opacity:.45;
    z-index:1;
}

.hero-gradient{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
}

.hero-gradient.one{
    width:520px;
    height:520px;
    background:#3b82f6;
    opacity:.10;
    top:-120px;
    left:-120px;
}

.hero-gradient.two{
    width:500px;
    height:500px;
    background:#0ea5e9;
    opacity:.08;
    bottom:-180px;
    right:-150px;
}

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

.hero-wrapper{
    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
}

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

.hero-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    padding:7px 16px;
    font-size:.7rem;
    gap:10px;
    background:#f8fbff;
    border:1px solid #dbeafe;
    border-radius:999px;
    font-weight:700;
    letter-spacing:.08em;
    color:#2563eb;
    text-transform:uppercase;
}

.hero-tag .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#2563eb;
    box-shadow:0 0 20px #2563eb;
}

.hero-left h1{
    font-size:3rem;         /* was 3.45rem */
    line-height:1.1;
    max-width:620px;
    margin-bottom:22px;
    letter-spacing:-2px;
    font-weight:800;
    color:#111827;
}

.hero-left h1 span{
    display:block;
    color:#2563eb;
}

.hero-left p{
    max-width:460px;
    font-size:.92rem;
    line-height:1.7;
    max-width:560px;
    color:#6b7280;
}

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

.hero-buttons{
    display:flex;
    align-items:center;
    margin-top:35px;
    gap:14px;
    flex-wrap:wrap;
}

.hero-buttons a{
    position:relative;
    overflow:hidden;
    text-decoration:none;
    transition:.35s ease;
}

/* Primary */

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    font-size:.85rem;
    border-radius:9px;

    background:#2563eb;
    color:#fff;

    
    font-weight:700;
    letter-spacing:.02em;

    box-shadow:
        0 18px 45px rgba(37,99,235,.22);
}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 28px 55px rgba(37,99,235,.35);

    background:#1d4ed8;

}

/* Shine Effect */

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.8s;

}

.btn-primary:hover::before{

    left:130%;

}

/* Outline */

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;
    font-size:.85rem;
    border-radius:9px;


    border:1px solid #dbe4f0;

    background:#fff;

    color:#111827;

    font-weight:700;

}

.btn-outline:hover{

    border-color:#2563eb;

    color:#2563eb;

    transform:translateY(-5px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

}

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


.hero-highlights{
    display:grid;
    grid-template-columns:repeat(2,minmax(220px,1fr));
    margin-top:38px;
    gap:14px 18px;
}

.hero-highlights div{

    display:flex;
    align-items:center;
    gap:14px;

    background:rgba(255,255,255,.65);
    backdrop-filter:blur(12px);

    border:1px solid rgba(37,99,235,.08);
    padding:12px 15px;
    font-size:.84rem;
    border-radius:14px;;

    color:#1f2937;
    font-weight:600;

    transition:.35s ease;
}

.hero-highlights i{

    width:34px;
    height:34px;
    font-size:14px;

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

    flex-shrink:0;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );

    color:#2563eb;
    transition:.35s ease;
}

.hero-highlights div:hover{

    transform:translateY(-6px);

    background:#fff;

    border-color:rgba(37,99,235,.18);

    box-shadow:
        0 18px 35px rgba(37,99,235,.08);
}

.hero-highlights div:hover i{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    transform:scale(1.08);
}

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

@media (max-width: 1200px){

    .hero-wrapper{
        grid-template-columns:1fr;
        gap:60px;
        text-align:center;
    }

    .hero-illustration{
        width:520px;
        height:520px;
        margin:auto;
    }

    .hero-left h1{
        font-size:3.5rem;
    }

}

@media (max-width: 768px){

    .hero-left h1{
        font-size:2.6rem;
    }

    .hero-highlights{
        grid-template-columns:1fr;
    }

    .hero-illustration{
        width:380px;
        height:380px;
    }

    .floating-card{
        padding:10px 14px;
        font-size:.85rem;
    }

}


/*==================================================
TECH PANEL
==================================================*/

.hero-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.tech-panel{
    position:relative;

    width:500px;
    height:500px;    /* was 580 */
    border-radius:28px;

    background:rgba(255,255,255,.78);
    backdrop-filter:blur(18px);

    border:1px solid rgba(220,230,245,.9);

    box-shadow:0 25px 70px rgba(15,23,42,.08);

    overflow:hidden;
}

/* subtle background grid */

.tech-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(circle,#dbeafe 1px,transparent 1px);

    background-size:22px 22px;

    opacity:.45;

}

/*==================================================
ORBIT AREA
==================================================*/

.orbit{
    position:relative;
    width:100%;
    height:calc(100% - 75px);
    display:flex;
    justify-content:center;
    align-items:center;
}

/*==================================================
CENTER CORE
==================================================*/

.core{

    position:absolute;

    top:50%;
    left:50%;

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

    width:72px;       /* was 92 */
    height:72px;

    border-radius:50%;

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

    background:
        radial-gradient(circle at center,#1e3a8a,#0f172a);

    box-shadow:
        0 0 0 15px rgba(59,130,246,.08),
        0 0 50px rgba(37,99,235,.22);

    z-index:10;

}

.core::before{

    content:"";

    position:absolute;

    width:120px;      /* was 150 */
    height:120px;

    border-radius:50%;

    border:1px dashed rgba(59,130,246,.20);

}

.core::after{

    content:"";

    position:absolute;

    width:42px;       /* was 52 */
    height:42px;
    font-size:24px;

    border-radius:50%;

    border:1px solid rgba(59,130,246,.08);

}

.core-inner{

    width:34px;     
    height:34px;

    border-radius:50%;

    background:
        linear-gradient(135deg,#3b82f6,#2563eb);

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

    color:#fff;

    font-size:20px;

    box-shadow:
        0 0 30px rgba(37,99,235,.50),
        inset 0 0 10px rgba(255,255,255,.18);

    animation:pulseCore 2.8s ease-in-out infinite;

}

.core-inner i{

    font-size:17px;
    color:#fff;

}

/*==================================================
ORBIT RING
==================================================*/

.orbit-ring{
    position:absolute;
    width:315px;     
    height:315px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transform-origin:center;
    border-radius:50%;
}


.orbit-item{
    position:absolute;
    inset:0;
    transform:rotate(var(--angle));
}

.tech-node{
    filter:drop-shadow(0 10px 20px rgba(37,99,235,.18));
    position:absolute;
    top:0;
    left:50%;
    width:50px;       
    height:50px;
    transform:
        translate(-50%,-50%)
        rotate(calc(-1 * var(--angle)));
}


.orbit-ring::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(59,130,246,.08);

}

.orbit-ring::after{

    content:"";

    position:absolute;

    inset:18px;

    border-radius:50%;

    border:1px dashed rgba(59,130,246,.18);

}




/*==================================================
ANIMATIONS
==================================================*/


@keyframes pulseCore{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

}
/*==================================================
TECH NODES
==================================================*/



.tech-node i{
    font-size:42px;
    transition:transform 0s;
    transform-origin:center;
}

.tech-node:hover{
    transform:translate(-50%,-50%) scale(1.15);
}


.icon-holder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    will-change:transform;
}



.orbit-lines{
    position:absolute;
    width:315px;
    height:315px;

    left:50%;
    top:50%;

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

.orbit-lines line{
    stroke:#dbeafe;
    stroke-width:2;
    opacity:.55;
}

/*==================================================
PREMIUM STATUS BAR
==================================================*/

.status-bar{

    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;

    height:68px;     
    padding:0 22px;

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

    background:rgba(255,255,255,.82);
    backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.75);
    border-radius:22px;

    box-shadow:
        0 18px 45px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

    overflow:hidden;

    z-index:20;
}

/* subtle shine */

.status-bar::before{

    content:"";

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

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );

}

.status-left{

    display:flex;
    flex-direction:column;
    gap:5px;
}

.status-left small{

    font-size:9px;
    letter-spacing:.25em;
    text-transform:uppercase;

    color:#94a3b8;

    font-weight:700;
}

.status-left span{

    display:flex;
    align-items:center;
    gap:10px;

    color:#111827;

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

.live-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
        0 0 12px rgba(34,197,94,.7);

    animation:livePulse 1.8s infinite;
}

.status-right{

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

    min-width:105px;
    height:38px;
    font-size:12px;

    padding:0 18px;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        #f8fbff,
        #edf5ff
    );

    border:1px solid rgba(37,99,235,.08);

    color:#2563eb;
    font-weight:700;

    transition:.35s ease;
}

.status-right:hover{

    transform:translateY(-2px);

    background:#2563eb;
    color:#fff;

    box-shadow:
        0 10px 25px rgba(37,99,235,.22);

}
/*==================================================
BACKGROUND EFFECT
==================================================*/

.tech-panel::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    background:

    radial-gradient(circle,
        rgba(37,99,235,.14),
        transparent 70%
    );

    left:50%;
    top:42%;

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

    filter:blur(40px);

}

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

@keyframes livePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.55;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}



.react{

    color:#61DAFB;

   

}

.laravel{

    color:#FF2D20;

    

}

.php{

    color:#777BB4;

  

}

.html{

    color:#E34F26;

    

}

.css{

    color:#1572B6;

    

}

.js{

    color:#F7DF1E;

   

}

.wordpress{

    color:#21759B;

   

}

.ai{

    color:#2563EB;

    

}
/*==================================================
FLOATING PARTICLES
==================================================*/

.particle{

    position:absolute;

    border-radius:50%;

    background:#3b82f6;

    opacity:.18;

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

}

.p1{

    width:6px;
    height:6px;

    top:18%;
    left:24%;

}

.p2{

    width:9px;
    height:9px;

    top:28%;
    right:20%;

    animation-delay:1s;

}

.p3{

    width:5px;
    height:5px;

    bottom:18%;
    left:18%;

    animation-delay:2s;

}

.p4{

    width:8px;
    height:8px;

    bottom:22%;
    right:24%;

    animation-delay:3s;

}

.p5{

    width:6px;
    height:6px;

    top:50%;
    left:12%;

    animation-delay:4s;

}















/*=====================================
ROOT
=====================================*/

:root{

--primary:#2563eb;
--primary-light:#eff6ff;
--dark:#0f172a;
--text:#475569;
--border:#e5e7eb;
--white:#fff;
--radius:22px;
--shadow:0 12px 40px rgba(15,23,42,.08);

}

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

.learning-path{

position:relative;
padding:90px 0;
background:#f8fafc;
overflow:hidden;

}

.lp-container{

max-width:1300px;
margin:auto;
padding:0 24px;
position:relative;
z-index:2;

}

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

.lp-bg{

position:absolute;
inset:0;

background-image:

linear-gradient(rgba(15,23,42,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 1px);

background-size:42px 42px;

}

.lp-gradient{

position:absolute;
width:550px;
height:550px;
border-radius:50%;
filter:blur(120px);
opacity:.25;

}

.lp-g1{

background:#60a5fa;
top:-180px;
left:-180px;

}

.lp-g2{

background:#c4b5fd;
bottom:-180px;
right:-180px;

}

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

.lp-heading{

max-width:1000px;
margin:0 auto 60px;
text-align:center;
margin-bottom:60px;

}

.lp-badge{

display:inline-flex;
padding:8px 18px;
border-radius:999px;
background:var(--primary-light);
color:var(--primary);
font-size:12px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:18px;

}

.lp-heading h2{

font-size:52px;
line-height:1.08;
letter-spacing:-2px;
white-space:nowrap;
font-weight:800;
color:var(--dark);
margin-bottom:20px;
}

.lp-heading h2 span{

color:var(--primary);

}

.lp-heading p{

font-size:16px;
line-height:1.8;
color:var(--text);
max-width:650px;
margin:auto;

}

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

.lp-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;

}

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

.lp-card{

background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
padding:26px;
display:flex;
flex-direction:column;
gap:18px;
box-shadow:var(--shadow);
position:relative;
transition:.3s;

}



.lp-card:hover{

transform:translateY(-6px);
border-color:var(--primary);

}

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

.card-more{

position:absolute;
top:22px;
right:22px;
width:34px;
height:34px;
border:none;
border-radius:50%;
background:#f1f5f9;
cursor:pointer;
color:#64748b;

}

.card-head{

display:flex;
align-items:center;
gap:16px;

}

.card-icon{

width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#fff;
flex-shrink:0;

}

.blue{background:#2563eb;}
.purple{background:#7c3aed;}
.teal{background:#0f766e;}
.orange{background:#ea580c;}

.card-head h3{

font-size:24px;
font-weight:700;
color:var(--dark);
margin-bottom:4px;

}

.card-head span{

font-size:13px;
color:#64748b;

}

.card-desc{

font-size:14px;
line-height:1.8;
color:var(--text);

}
/*=====================================
CARD BODY
=====================================*/

.card-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
align-items:start;
margin-top:6px;

}

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

.card-grid ul{

list-style:none;
display:flex;
flex-direction:column;
gap:14px;

}

.card-grid li{

display:flex;
align-items:center;
gap:10px;
font-size:13px;
font-weight:500;
color:var(--dark);

}

.card-grid li i{

width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#eef4ff;
color:var(--primary);
font-size:11px;
flex-shrink:0;

}

/*=====================================
TAGS
=====================================*/

.card-tags{

display:flex;
flex-wrap:wrap;
gap:10px;
align-content:flex-start;

}

.card-tags span{

padding:8px 14px;
background:#f8fafc;
border:1px solid var(--border);
border-radius:999px;
font-size:12px;
font-weight:600;
color:#334155;
white-space:nowrap;
transition:.25s;

}

.card-tags span:hover{

background:var(--primary);
border-color:var(--primary);
color:#fff;

}

/*=====================================
BUTTON
=====================================*/

.card-btn{

margin-top:auto;
display:inline-flex;
align-items:center;
gap:10px;
padding:13px 18px;
width:max-content;
border-radius:14px;
text-decoration:none;
font-size:13px;
font-weight:700;
color:var(--dark);
background:#f8fafc;
border:1px solid var(--border);
transition:.3s;

}



.card-btn:hover{

background:var(--primary);
border-color:var(--primary);
color:#fff;

}

.card-btn i{

font-size:12px;
transition:.25s;

}

.card-btn:hover i{

transform:translateX(4px);

}

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

.lp-stats{

margin-top:55px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

.stat-box{

background:#fff;
border:1px solid var(--border);
border-radius:20px;
padding:28px;
text-align:center;
box-shadow:var(--shadow);
transition:.3s;

}

.stat-box:hover{

transform:translateY(-5px);

}

.stat-box h4{

font-size:34px;
font-weight:800;
color:var(--dark);
line-height:1;

}

.stat-box span{

display:block;
margin-top:10px;
font-size:13px;
color:#64748b;

}

/*=====================================
COLOR THEMES
=====================================*/

.lp-card:nth-child(1){

--primary:#2563eb;

}

.lp-card:nth-child(2){

--primary:#7c3aed;

}

.lp-card:nth-child(3){

--primary:#0f766e;

}

.lp-card:nth-child(4){

--primary:#ea580c;

}

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

.lp-card{

overflow:hidden;

}

.lp-card::before{

content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(37,99,235,.05),transparent 45%);
opacity:0;
transition:.35s;
pointer-events:none;

}

.lp-card:hover::before{

opacity:1;

}

.lp-card:hover .card-icon{

transform:scale(1.06) rotate(-6deg);

}

.card-icon{

transition:.3s;

}

.card-head h3,
.card-desc,
.card-btn,
.card-tags span,
.stat-box{

transition:.3s;

}
/*=====================================
DESKTOP POLISH
=====================================*/

.lp-grid{

align-items:stretch;

}

.lp-card{

min-height:320px;

}

.card-head{

margin-bottom:4px;

}

.card-desc{

max-width:95%;

}

.card-grid{

padding-top:4px;

}

.card-btn{

margin-top:22px;

}

/*=====================================
SMALL DETAILS
=====================================*/

.card-more{

display:flex;
align-items:center;
justify-content:center;
transition:.25s;

}

.card-more:hover{

background:#e2e8f0;
color:#0f172a;

}

.card-head h3{

letter-spacing:-.4px;

}

.card-desc{

letter-spacing:.1px;

}

.card-grid li{

line-height:1.5;

}

.card-tags span{

cursor:default;

}

.card-tags span:hover{

transform:translateY(-2px);

}

.stat-box h4{

letter-spacing:-1px;

}

.stat-box{

position:relative;
overflow:hidden;

}

.stat-box::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:3px;
background:var(--primary);
opacity:.12;

}

/*=====================================
LAPTOP
=====================================*/

@media(max-width:1200px){

.lp-heading h2{

font-size:48px;

}

.lp-grid{

gap:18px;

}

.lp-card{

padding:22px;

}

.lp-stats{

gap:16px;

}

}

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

@media(max-width:992px){

.learning-path{

padding:70px 0;

}

.lp-heading{

margin-bottom:45px;

}

.lp-heading h2{

font-size:42px;

}

.lp-grid{

grid-template-columns:1fr;

}

.card-grid{

grid-template-columns:1fr;

gap:18px;

}

.lp-stats{

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

}

}

/*=====================================
PHONE
=====================================*/

@media(max-width:576px){

.lp-container{

padding:0 18px;

}

.lp-heading h2{

font-size:34px;

line-height:1.15;

}

.lp-heading p{

font-size:14px;

}

.lp-card{

padding:20px;

border-radius:18px;

}

.card-head{

gap:12px;

}

.card-icon{

width:50px;
height:50px;
font-size:18px;
border-radius:14px;

}

.card-head h3{

font-size:20px;

}

.card-btn{

width:100%;
justify-content:center;

}

.lp-stats{

grid-template-columns:1fr;

}

.stat-box{

padding:22px;

}

.stat-box h4{

font-size:28px;

}

}

/*=====================================
LIGHT PREMIUM EFFECT
=====================================*/

.lp-card{

background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#ffffff,#f1f5f9) border-box;

}

.lp-card:hover{

box-shadow:

0 18px 45px rgba(15,23,42,.08);

}

.card-btn.fill{

box-shadow:

0 8px 20px rgba(37,99,235,.18);

}

.card-btn.fill:hover{

box-shadow:

0 12px 28px rgba(37,99,235,.25);

}

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

::selection{

background:#2563eb;
color:#fff;

}

/*=====================================
FINAL TUNING
=====================================*/

*{

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
box-sizing:border-box;

}

img{

display:block;
max-width:100%;

}

button{

font:inherit;

}

a{

text-decoration:none;

}













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

.tech-stack-section{
    position:relative;
    overflow:hidden;
    padding:70px 0 70px;
    background:
        radial-gradient(circle at top,#f8fbff 0%,#ffffff 55%);
}

/*----------------------------------*/

.tech-stack-section .container{
    position:relative;
width:min(1320px,94%);    margin:auto;
    z-index:5;
}

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

.tech-bg-grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.45;

    background-image:

        linear-gradient(
            rgba(37,99,235,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37,99,235,.05) 1px,
            transparent 1px
        );

    background-size:62px 62px;
}

/* soft blue glow */

.tech-stack-section::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    left:50%;
    top:-380px;

    transform:translateX(-50%);

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;

}

/* bottom glow */

.tech-stack-section::after{

    content:"";

    position:absolute;

    width:720px;
    height:720px;

    left:50%;
    bottom:-420px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(37,99,235,.08),
            transparent 70%);

    filter:blur(90px);

    pointer-events:none;

}

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

.stack-heading{

    max-width:860px;

    margin:0 auto 50px;

    text-align:center;

}

.stack-tag{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 26px;

    margin-bottom:24px;

    border-radius:999px;

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

    border:1px solid
        rgba(37,99,235,.08);

    box-shadow:
        0 10px 35px
        rgba(15,23,42,.05);

    color:#2563eb;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;
}

.stack-tag i{

    width:34px;
    height:34px;

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

    border-radius:50%;

    color:#2563eb;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

}

/*----------------------------------*/

.stack-heading h2{

    margin:0;

font-size:clamp(2.5rem,4vw,3.7rem);
    line-height:1.08;

    font-weight:800;

    letter-spacing:-2px;

    color:#0f172a;

}

.stack-heading h2 span{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #60a5fa
        );

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

}

/*----------------------------------*/

.stack-heading p{

    width:min(760px,100%);

    font-size:1rem;
    line-height:1.7;
    margin:18px auto 0;
    max-width:650px;

    color:#64748b;

}
/*==================================================
PREMIUM TECHNOLOGY GRID
==================================================*/

.stack-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:45px;

    position:relative;

}

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

.stack-card{

    position:relative;

    overflow:hidden;

    padding:24px;

    min-height:220px;


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

    backdrop-filter:blur(22px);

    border:1px solid rgba(220,230,245,.9);

    border-radius:34px;

    box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 8px 20px rgba(37,99,235,.05),
    0 20px 40px rgba(15,23,42,.04);

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s,
        border-color .35s;

}

/*==================================================
PATH DESTINATIONS
==================================================*/

.path-links{

    margin:22px 0;

    padding-top:18px;

    border-top:1px solid rgba(37,99,235,.08);

}

.path-links span{

    display:block;

    margin-bottom:12px;

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#2563eb;

}

.path-links small{

    display:inline-flex;

    align-items:center;

    margin:4px 6px 4px 0;

    padding:7px 12px;

    border-radius:30px;

    background:#eff6ff;

    color:#1d4ed8;

    font-size:.78rem;

    font-weight:600;

}

.path-card:hover .path-links small{

    background:rgba(37,99,235,.12);

}

/* glossy layer */

.stack-card::before{

    content:"";

    position:absolute;

    inset:0;

   .stack-card::before{
    background: linear-gradient(
        145deg,
        rgba(255,255,255,.25),
        transparent 45%
    );
}

    pointer-events:none;

}

/* glow */

.stack-card::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    top:-160px;
    right:-160px;

    border-radius:50%;


    transition:.55s;

}

/*--------------------------------*/

.stack-card:hover{

    transform:
        translateY(-12px);

    border-color:
        rgba(37,99,235,.18);

    box-shadow:

        0 40px 90px rgba(37,99,235,.12),
        0 15px 40px rgba(15,23,42,.08);

}

.stack-card:hover::after{

    transform:scale(1.3);

}

/*==================================================
NUMBER BADGE
==================================================*/

.card-number{

    position:absolute;

    top:28px;
    right:28px;

    width:42px; 
    height:42px;
    font-size:3.8rem;

    border-radius:50%;

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

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #eef5ff
        );

    border:1px solid rgba(37,99,235,.08);

    color:#2563eb;
    font-weight:700;

    box-shadow:
        0 8px 22px rgba(15,23,42,.05);

}

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

.stack-icon{

    width:58px;
    height:58px;

    margin-bottom:16px;

    border-radius:16px;

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



    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f8ff
        );

    border:1px solid rgba(220,230,245,.9);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 12px 35px rgba(15,23,42,.05);

    transition:.45s;

}

.stack-icon i{

    font-size:28px;

    color:#2563eb;

    transition:.45s;

}

.stack-card:hover .stack-icon{

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

}

.stack-card:hover .stack-icon i{

    transform:scale(1.12);

}

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

.stack-card h3{

    font-size:1.15rem;

    margin-bottom:8px;
margin:0 0 10px;
    line-height:1.2;

    font-weight:800;

    color:#0f172a;

}

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

.stack-card p{

    margin:0;

    max-width:92%;

    font-size:.88rem;

    line-height:1.55;

    color:#64748b;

}

/*==================================================
TECH TAGS
==================================================*/

.stack-tags{

    display:flex;

    flex-wrap:wrap;

    margin-top:14px;

    gap:6px;
}

.stack-tags span{

    padding:6px 11px;

    font-size:.72rem;
    border-radius:999px;

    background:#fff;

    border:1px solid rgba(37,99,235,.12);

    color:#2563eb;

    font-weight:700;

    transition:.35s;

    box-shadow:
        0 8px 18px rgba(15,23,42,.04);

}

.stack-tags span:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 12px 28px rgba(37,99,235,.18);

}

/*==================================================
DECORATIVE DOTS
==================================================*/

.stack-card .dots{

    position:absolute;

    right:26px;
    bottom:26px;

    width:62px;
    height:62px;

    opacity:.25;

    background-image:
        radial-gradient(#2563eb 1.5px,transparent 1.5px);

    background-size:10px 10px;

}
/*==================================================
TECH MARQUEE
==================================================*/

.tech-marquee{

    position:relative;

    margin:10px 0 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* edge fade */

.tech-marquee::before,
.tech-marquee::after{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:130px;

    z-index:5;

    pointer-events:none;

}

.tech-marquee::before{

    left:0;

    background:
        linear-gradient(
            90deg,
            #ffffff 15%,
            rgba(255,255,255,0)
        );

}

.tech-marquee::after{

    right:0;

    background:
        linear-gradient(
            -90deg,
            #ffffff 15%,
            rgba(255,255,255,0)
        );

}

/*==================================================
ROW
==================================================*/

.marquee-row{

    overflow:hidden;

    width:100%;

    padding:8px 0;

}

.marquee-track{

    display:flex;

    align-items:center;

    gap:18px;

    width:max-content;

}

/* top */

.marquee-row.top .marquee-track{

    animation:marqueeLeft 32s linear infinite;

}

/* bottom */

.marquee-row.bottom .marquee-track{

    animation:marqueeRight 32s linear infinite;

}

.marquee-row:hover .marquee-track{

    animation-play-state:paused;

}

/*==================================================
TECH PILLS
==================================================*/

.tech-pill{

    flex-shrink:0;

    display:flex;

    align-items:center;

    gap:14px;

min-width:150px;
padding:12px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(220,230,245,.95);

    box-shadow:
        0 14px 35px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.95);

    transition:.4s;

}

.tech-pill:hover{

    transform:translateY(-6px) scale(1.05);


    box-shadow:
        0 24px 45px rgba(37,99,235,.12);

}

.tech-pill i{

    font-size:22px;
    transition:.35s ease;

}
.tech-pill:hover i{
    transform:scale(1.15) rotate(-5deg);
}

.tech-pill span{

    font-size:14px;

    font-weight:700;

    color:#0f172a;

}

/*==================================================
BOTTOM BAR
==================================================*/

.learning-bar{

    display:grid;

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

    gap:0;

margin-top:40px;
    overflow:hidden;

    border-radius:34px;

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

    backdrop-filter:blur(22px);

    border:1px solid rgba(220,230,245,.95);

    box-shadow:
        0 30px 70px rgba(15,23,42,.08);

}

.learn-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

}

.learn-item:not(:last-child){

    border-right:1px solid rgba(226,232,240,.8);

}

.learn-item i{

    width:40px;
    height:40px;
    font-size:20px;

    border-radius:20px;

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

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    color:#2563eb;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);

}

.learn-item strong{

    display:block;

    margin-bottom:5px;

    font-size:16px;

    color:#0f172a;

}

.learn-item span{

    color:#64748b;

    font-size:13px;

}

/*==================================================
ANIMATIONS
==================================================*/

@keyframes marqueeLeft{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes marqueeRight{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}

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

@media (max-width:1100px){

    .stack-grid{

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

    .learning-bar{

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

    }

}

@media (max-width:768px){

    .stack-heading h2{

        font-size:2.6rem;

    }

    .stack-card{

        padding:34px;

    }

    .learning-bar{

        grid-template-columns:1fr;

    }

    .learn-item{

        border-right:none !important;

        border-bottom:1px solid rgba(226,232,240,.8);

    }

    .learn-item:last-child{

        border-bottom:none;

    }

    .tech-pill{

        min-width:165px;

        padding:15px 22px;

    }

}












/*==================================================
LEARNING EXPERIENCE
==================================================*/

.learning-experience{
    position:relative;
    padding:20px 0;  
    background:#fff;
    overflow:hidden;
}

.learning-experience .container{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 32px;
    position:relative;
    z-index:2;
}

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

.learning-experience::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.45;

}

.learning-experience::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 72%);

    top:-180px;
    right:-140px;

    filter:blur(90px);

}

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

.learning-heading{

    max-width:760px;
    margin:0 auto 55px;

    text-align:center;

}

.section-tag{

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

    padding:8px 18px;

    border-radius:999px;

     background:#ffffff;

    border:1px solid #e7ebf3;
    color:#2563eb;


    font-size:.72rem;

    letter-spacing:.12em;

    font-weight:700;

    text-transform:uppercase;

}

.learning-heading h2{

    font-size:2.45rem;    /* was 2.7rem */
    margin:18px 0 14px;

    line-height:1.15;

    font-weight:800;

    color:#111827;

    letter-spacing:-1.4px;

}

.learning-heading h2 span{

    display:block;

    color:#2563eb;

}

.learning-heading p{

    max-width:560px;

    margin:auto;

    font-size:.96rem;

    line-height:1.9;

    color:#6b7280;

}

/*==================================================
JOURNEY
==================================================*/

.journey{

    position:relative;

    max-width:930px;

    margin:auto;

    padding:30px 0;

}

/* Vertical Line */

.journey-line{

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:2px;

    transform:translateX(-50%);

    background:
    linear-gradient(
    to bottom,
    transparent,
    rgba(37,99,235,.35),
    rgba(37,99,235,.55),
    rgba(37,99,235,.35),
    transparent);

}

.journey-line::before{

    content:"";

    position:absolute;

    inset:0;

    background:#2563eb;

    filter:blur(10px);

    opacity:.35;

}
/*==================================================
JOURNEY STEPS
==================================================*/

.journey-step{

    position:relative;

    width:100%;

    display:flex;

    margin:0 0 45px; 
}

.journey-step:last-child{

    margin-bottom:0;

}

/* left & right */

.journey-step.left{

    justify-content:flex-start;

}

.journey-step.right{

    justify-content:flex-end;

}

/*==================================================
GLOWING MILESTONE DOT
==================================================*/

.step-dot{

    position:absolute;

    left:50%;
    top:50%;

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

    width:46px;
    height:46px;

    border-radius:50%;

    background:#fff;

    border:2px solid rgba(37,99,235,.14);

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

    z-index:20;

    box-shadow:
        0 0 0 10px rgba(37,99,235,.05),
        0 10px 30px rgba(37,99,235,.12);

}

.step-dot::before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );

    animation:dotPulse 2.5s ease-in-out infinite;

}

.step-dot span{

    position:relative;

    z-index:2;

    font-size:.72rem;

    color:#fff;

    font-weight:700;

}

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

.journey-card{

    position:relative;

    width:460px;          /* was 410px */
    padding:28px 30px 24px;

    border-radius:26px;

    backdrop-filter:blur(18px);

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

    overflow:hidden;

    transition:.45s ease;

background: #fff;

border: 1px solid rgba(37,99,235,.08);

box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 10px 30px rgba(37,99,235,.05),
    0 30px 60px rgba(15,23,42,.04);
}

/* premium glow */

.journey-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;



    top:-120px;
    right:-120px;

    transition:.45s;

}

.journey-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 35px 70px rgba(37,99,235,.12);

}

.journey-card:hover::before{

    transform:scale(1.2);

}

/*==================================================
FLOATING NUMBER
==================================================*/

.card-number{

    position:absolute;

    right:22px;
    top:16px;

    font-size:4.7rem;

    font-weight:900;

    color:rgba(37,99,235,.05);

    line-height:1;

    pointer-events:none;

    user-select:none;

}

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

.card-icon{

    width:50px;
    height:50px;
    margin-bottom:16px;
    font-size:20px;
    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    color:#2563eb;


    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 12px 24px rgba(37,99,235,.08);

    transition:.4s ease;

}

.journey-card:hover .card-icon{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color:#fff;

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

}

.journey-card h3{

    font-size:1.25rem;
    margin-bottom:10px;

    font-weight:700;

    color:#111827;

    letter-spacing:-.4px;

}

.journey-card p{

    margin:0;

    font-size:.9rem;
    line-height:1.7;

    color:#6b7280;

}

/*==================================================
BOTTOM FEATURE CHIP
==================================================*/

.card-chip{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:18px;
    padding:8px 15px;
    font-size:.72rem;

    border-radius:999px;

    background:#f8fbff;

    border:1px solid rgba(37,99,235,.10);

    color:#2563eb;
    font-weight:700;

    letter-spacing:.05em;

}

.card-chip i{

    font-size:13px;

}

/*==================================================
CONNECTOR LINE
==================================================*/

.journey-step.left .journey-card{

    margin-right:50px;

}

.journey-step.right .journey-card{

    margin-left:50px;

}

.journey-step.left .journey-card::after{

    content:"";

    position:absolute;

    right:-70px;
    top:50%;

    width:50px;
    height:2px;

    transform:translateY(-50%);

    background:
        linear-gradient(
            to right,
            rgba(37,99,235,.18),
            rgba(37,99,235,.45)
        );

}

.journey-step.right .journey-card::after{

    content:"";

    position:absolute;

    left:-70px;
    top:50%;

    width:50px;
    height:2px;

    transform:translateY(-50%);

    background:
        linear-gradient(
            to left,
            rgba(37,99,235,.18),
            rgba(37,99,235,.45)
        );

}

/*==================================================
ANIMATIONS
==================================================*/

@keyframes dotPulse{

    0%,100%{

        transform:scale(1);

        box-shadow:
            0 0 0 rgba(37,99,235,.45);

    }

    50%{

        transform:scale(1.12);

        box-shadow:
            0 0 20px rgba(37,99,235,.35);

    }

}

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

@media (max-width:992px){

    .journey-line{

        left:24px;

    }

    .journey-step{

        justify-content:flex-start !important;

        padding-left:75px;

    }

    .step-dot{

        left:24px;

    }

    .journey-card{

        width:100%;

        margin:0 !important;

    }

    .journey-card::after{

        display:none;

    }

}

@media (max-width:768px){

    .learning-experience{

        padding:85px 0;

    }

    .learning-heading{

        margin-bottom:60px;

    }

    .learning-heading h2{

        font-size:2.1rem;

    }

    .journey-card{

        padding:28px;

        border-radius:22px;

    }

    .card-number{

        font-size:3.5rem;

    }

    .card-icon{

        width:52px;
        height:52px;

        font-size:20px;

    }

    .journey-card h3{

        font-size:1.18rem;

    }

    .journey-card p{

        font-size:.9rem;

        line-height:1.8;

    }

    .card-chip{

        font-size:.72rem;

    }

}








/*==========================================================
WHY RADIANT
PART 1
==========================================================*/

:root{

    --blue:#2563eb;
    --blue-light:#eff6ff;
    --purple:#7c3aed;
    --green:#16a34a;
    --orange:#ea580c;
    --pink:#db2777;

    --title:#0f172a;
    --text:#64748b;
    --line:#e6edf5;

    --bg:#f7f9fc;
    --card:#ffffff;

}

.why-rs{

    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:var(--bg);

}

.why-rs .container{

    width:min(1500px,94%);
    margin:auto;
    position:relative;
    z-index:2;

}

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

.why-grid-bg{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);

    background-size:42px 42px;

}

.why-glow{

    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    filter:blur(110px);
    opacity:.16;

}

.why-glow.left{

    background:#3b82f6;
    left:-220px;
    top:-160px;

}

.why-glow.right{

    background:#8b5cf6;
    right:-220px;
    bottom:-200px;

}

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

.why-heading{

    max-width:760px;
    margin:0 auto 55px;
    text-align:center;

}

.why-label{

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

    padding:8px 16px;

    border-radius:40px;

    background:#eef5ff;

    color:var(--blue);

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

}

.why-heading h2{

    margin:20px 0 18px;

    font-size:46px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-2px;

    color:var(--title);

}

.why-heading h2 span{

    display:block;
    color:var(--blue);

}

.why-heading p{

    font-size:14px;
    line-height:1.8;
    color:var(--text);

}

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

.why-dashboard{
    display:grid;

    grid-template-columns: 1.15fr 1fr 1fr;

    grid-template-rows: 220px 220px 170px;

    grid-template-areas:
        "feature mentor project"
        "feature career career"
        "bottom career career";

    gap:18px;
}

.bottom-cards{

    grid-area:bottom;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    height:100%;

}

.certification-card,
.support-card{

    padding:18px;

    border-radius:20px;

}

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

.card{

    background:#fff;

    border:1px solid var(--line);

    border-radius:24px;

    padding:18px;
    height:100%;

    box-shadow:

    0 10px 30px rgba(15,23,42,.05);

    position:relative;

}

.feature-card{
    grid-area:feature;
    height:100%;
}

.mentor-card{
    grid-area:mentor;
}



/*==========================================================
LIVE PROJECTS CARD
==========================================================*/

.live-lab-card{

    grid-area:project;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    height:100%;

    padding:20px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:24px;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(15,23,42,.05);

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

}

/* animated top line */

.live-lab-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        #16a34a,
        #22c55e
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

/* hover */

.live-lab-card:hover{

    transform:translateY(-8px);

    border-color:#d8e6ff;

    box-shadow:
    0 22px 55px rgba(15,23,42,.08);

}

.live-lab-card:hover::before{

    transform:scaleX(1);

}

/* icon */

.live-lab-card .icon{

    transition:
        transform .3s ease;

}

.live-lab-card:hover .icon{

    transform:scale(1.08);

}

/* dots */

.live-lab-card .dots{

    transition:
        background .3s,
        color .3s;

}

.live-lab-card:hover .dots{

    background:#eef5ff;

    color:#2563eb;

}


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

.top{

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

    margin-bottom:12px;

}

.tag{

    padding:7px 14px;

    border-radius:40px;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.tag.blue{

    background:#eef5ff;
    color:var(--blue);

}

.tag.purple{

    background:#f4e8ff;
    color:var(--purple);

}

.tag.green{

    background:#eafaf0;
    color:var(--green);

}

.tag.orange{

    background:#fff2e8;
    color:var(--orange);

}

.tag.pink{

    background:#ffeaf4;
    color:var(--pink);

}

.dots{

    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#f4f7fb;

    color:#94a3b8;

    font-size:11px;

}
/*==========================================================
ICONS
==========================================================*/

.icon{

    width:54px;
    height:54px;

    border-radius:16px;

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

    margin-bottom:12px;

    color:#fff;

    font-size:19px;

}

.icon.blue{

    background:linear-gradient(135deg,#2563eb,#60a5fa);

}

.icon.purple{

    background:linear-gradient(135deg,#7c3aed,#a855f7);

}

.icon.green{

    background:linear-gradient(135deg,#16a34a,#22c55e);

}

.icon.orange{

    background:linear-gradient(135deg,#ea580c,#fb923c);

}

.icon.pink{

    background:linear-gradient(135deg,#db2777,#ec4899);

}

/*==========================================================
TYPOGRAPHY
==========================================================*/

.card h3{

    font-size:31px;
    line-height:1.15;
    letter-spacing:-1px;

    color:var(--title);

    margin-bottom:14px;

}

.card h4{

    font-size:21px;

    color:var(--title);

    margin-bottom:8px;

}

.card h5{

    font-size:13px;

    color:var(--title);

    margin-bottom:2px;

}

.card p{

    font-size:13px;

    line-height:1.55;

    color:var(--text);

}

/*==========================================================
FEATURE LIST
==========================================================*/

.feature-list{

    margin-top:24px;

    display:flex;
    flex-direction:column;
    gap:13px;

    list-style:none;

}

.feature-list li{

    display:flex;
    align-items:center;

    gap:11px;

    font-size:12px;

    color:var(--title);

    font-weight:600;

}

.feature-list i{

    color:var(--blue);

    font-size:13px;

}

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

.career-card{
    grid-area:career;

    display:grid;
    grid-template-columns:300px 1fr;
    gap:28px;

    align-items:center;

    padding:30px;

    min-height:0;
}

.career-left h3{

    font-size:34px;
    line-height:1.1;
    margin:18px 0 18px;

    color:var(--title);

}

.career-left p{

    font-size:14px;
    line-height:1.9;
}

.career-right{

    display:grid;

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

    gap:14px;

}

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

.mini-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:20px;
    min-height:102px;
    border:1px solid var(--line);

    border-radius:16px;

    background:#fbfdff;

}

.mini-icon{

    width:50px;
    height:50px;
    font-size:18px;

    border-radius:12px;

    background:#eef5ff;

    color:var(--blue);

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

}

.mini-card span{

    font-size:11px;

    color:#94a3b8;

}
/*==========================================================
PREMIUM EFFECTS
==========================================================*/

.card{

    overflow:hidden;

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

}

.card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:linear-gradient(90deg,#2563eb,#60a5fa);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#d8e6ff;

    box-shadow:
    0 22px 55px rgba(15,23,42,.08);

}

.card:hover::before{

    transform:scaleX(1);

}

.card:hover .icon{

    transform:scale(1.08);

}

.card:hover .dots{

    background:#eef5ff;
    color:#2563eb;

}

.icon,
.dots{

    transition:.3s;

}

/*==========================================================
DESKTOP TUNING
==========================================================*/

.feature-card{

    padding:24px;

}

.card:not(.feature-card){

    padding:20px;

}

.career-card{

    padding:24px;

}

.why-dashboard{

    gap:18px;

}

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

@media(max-width:1200px){

.why-dashboard{

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

}

.feature-card{

grid-column:span 2;

min-height:auto;

}

.career-card{

grid-template-columns:360px 1fr;
}

}

@media(max-width:991px){

.why-rs{

padding:80px 0;

}

.why-heading h2{

font-size:38px;

}

.why-dashboard{

grid-template-columns:1fr;

}

.feature-card,
.career-card{

grid-column:auto;

}

.career-card{

grid-template-columns:1fr;

}

.career-right{

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

}

.card{

min-height:auto;

}

}

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

@media(max-width:768px){

.why-heading{

margin-bottom:40px;

}

.why-heading h2{

font-size:30px;

}

.why-heading p{

font-size:13px;

}

.card{

padding:18px;

border-radius:18px;

}

.icon{

width:46px;
height:46px;
font-size:16px;

}

.card h3{

font-size:24px;

}

.card h4{

font-size:18px;

}

.career-left h3{

font-size:24px;

}

.career-right{

grid-template-columns:1fr;

}

.mini-card{

padding:12px;

}

}

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

@media(max-width:576px){

.why-rs .container{

width:92%;

}

.top{

margin-bottom:14px;

}

.tag{

font-size:8px;

padding:6px 12px;

}

.dots{

width:28px;
height:28px;

}

.feature-list{

margin-top:18px;
gap:10px;

}

.feature-list li{

font-size:11px;

}

.card p{

font-size:12px;

line-height:1.7;

}

}

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

.why-rs *{

box-sizing:border-box;

}

.why-rs img{

display:block;
max-width:100%;

}

.why-rs button{

font:inherit;
border:none;
cursor:pointer;

}

.why-rs a{

text-decoration:none;

}

::selection{

background:#2563eb;
color:#fff;

}











/*==================================================
IMPACT SECTION
Premium Dashboard Redesign
PART 1
Section • Background • Heading • Dashboard Layout
==================================================*/

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

.impact-section{

    position:relative;
    overflow:hidden;

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:50px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 55%,
            #f5f8fc 100%
        );

}

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

.impact-grid-bg{

    position:absolute;
    inset:0;

    opacity:.18;

    background-image:
        linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);

    background-size:70px 70px;

}

/* Large Glow */

.impact-glow{

    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(130px);

}

.glow-left{

    width:520px;
    height:520px;

    top:-180px;
    left:-220px;

    background:#c7d2fe;

    opacity:.45;

}

.glow-right{

    width:520px;
    height:520px;

    bottom:-220px;
    right:-220px;

    background:#bfdbfe;

    opacity:.45;

}

/* Dashboard Spotlight */

.impact-section::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

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

    width:900px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.06),
            transparent 70%
        );

    pointer-events:none;

}

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

.impact-section .container{

    position:relative;
    z-index:2;

}

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

.impact-heading{

    max-width:760px;

    margin:0 auto 42px;

    text-align:center;

}

/*==================================================
TAG
==================================================*/

.impact-tag{

    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:11px 20px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    color:#2563eb;

    font-size:.76rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    box-shadow:
        0 10px 25px rgba(15,23,42,.04);

}

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

.impact-heading h2{

    margin:20px 0 16px;

    font-size:2.75rem;

    line-height:1.08;

    font-weight:800;

    color:#0f172a;

    letter-spacing:-.03em;

}

.impact-heading h2 span{

    display:block;

    margin-top:4px;

    color:#2563eb;

}

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

.impact-heading p{

    max-width:560px;

    margin:auto;

    font-size:.97rem;

    line-height:1.75;

    color:#64748b;

}

/*==================================================
DASHBOARD
==================================================*/

.impact-dashboard{
    display:grid;

    grid-template-columns:1.45fr 1fr 1fr;

    grid-template-rows:220px 220px;

    grid-template-areas:
        "large client tech"
        "large support support";

    gap:24px;
}

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

.metric-card.large{
    justify-content:space-between;
    grid-area:large;
}


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

.metric-card{

    position:relative;

    display:flex;
    flex-direction:column;

    padding:34px;
    min-height:230px;

    background:#ffffff;

    border-radius:24px;

    border:1px solid #e7edf5;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

}

.metric-card.client{
    grid-area:client;
}

.metric-card.tech{
    grid-area:tech;
}

.metric-card.support{
    grid-area:support;
}

/*==================================================
TOP SHINE
==================================================*/

.metric-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,.35),
            transparent
        );

}

/*==================================================
CORNER LIGHT
==================================================*/

.metric-card::after{

    content:"";

    position:absolute;

    top:-70px;
    right:-70px;

    width:170px;
    height:170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.10),
            transparent 70%
        );

    opacity:0;

    transition:.45s;

}

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

.metric-card:hover{

    transform:
        translateY(-4px)
        scale(1.015);

    border-color:#bfdbfe;

    box-shadow:
        0 22px 50px rgba(15,23,42,.10);

}

.metric-card:hover::after{

    opacity:1;

}

/*==================================================
REMOVE OLD FLOAT OFFSETS
==================================================*/

.metric-card:nth-child(2),
.metric-card:nth-child(3){

    margin-top:0;

}
/*==================================================
IMPACT SECTION
Premium Dashboard Redesign
PART 2
Card Content • Header • Icons • Numbers • Progress
==================================================*/

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

.metric-card>*{

    position:relative;
    z-index:2;

}

.metric-card.large{

    justify-content:space-between;

}

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

.metric-header{

    display:flex;

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

    margin-bottom:18px;

}

/*==================================================
LABEL
==================================================*/

.metric-header span{

    display:inline-block;

    font-size:.74rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#64748b;

    transition:.35s;

}

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

.metric-header i{

    width:48px;
    height:48px;

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

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #60a5fa
        );

    color:#ffffff;

    font-size:18px;

    box-shadow:
        0 10px 22px rgba(37,99,235,.22);

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

}

.metric-card:hover .metric-header i{

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

    box-shadow:
        0 18px 32px rgba(37,99,235,.28);

}

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

.metric-number{

    display:flex;
    align-items:flex-end;
    gap:4px;

    margin:22px 0;

    font-size:3.15rem;

    font-weight:800;

    line-height:1;

    letter-spacing:-.05em;

    color:#0f172a;

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

}

.metric-number span{

    display:inline-block;

}

.metric-card:hover .metric-number{

    color:#2563eb;

    transform:translateY(-2px);

}

/*==================================================
SMALL SYMBOLS
==================================================*/

.metric-number sup{

    font-size:1.3rem;

    font-weight:700;

    top:-.6em;

    position:relative;

}

.metric-number sub{

    font-size:1.1rem;

    font-weight:700;

    bottom:0;

    position:relative;

}

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

.metric-card p{

    margin:0;
    margin-top:18px;


    font-size:.93rem;

    line-height:1.7;

    color:#64748b;

}

.metric-card small{

    display:block;

    margin-top:10px;

    font-size:.86rem;

    line-height:1.6;

    color:#94a3b8;

}

/*==================================================
LARGE CARD CONTENT
==================================================*/

.metric-card.large .metric-number{

    font-size:2.5rem;

    margin-top:10px;

}

.metric-card.large p{

    max-width:92%;

}

.metric-card.large small{

    margin-top:16px;

}

/*==================================================
SMALL CARD CONTENT
==================================================*/

.metric-card:not(.large) .metric-number{

    font-size:2.7rem;

}

.metric-card:not(.large) p{

    margin-top:6px;

    font-size:.9rem;

}

/*==================================================
PROGRESS AREA
==================================================*/

.metric-progress{

    position:relative;

    width:100%;
    height:8px;

    margin-top:28px;

    overflow:hidden;

    border-radius:999px;

    background:#edf3fb;

}

/*==================================================
TRACK GLOW
==================================================*/

.metric-progress::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.05),
            rgba(96,165,250,.12),
            rgba(37,99,235,.05)
        );

}

/*==================================================
FILL
==================================================*/

.metric-progress span{

    position:absolute;

    left:0;
    top:0;

    width:0;
    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    animation:progressFill 2s ease forwards;

}

/*==================================================
SHIMMER
==================================================*/

.metric-progress span::after{

    content:"";

    position:absolute;

    top:0;
    right:-20px;

    width:26px;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.85),
            transparent
        );

    animation:progressShine 2.5s linear infinite;

}

/*==================================================
CARD FOOTER ALIGNMENT
==================================================*/

.metric-card .metric-progress{

    margin-top:18px;

}

.metric-card.large .metric-progress{

    margin-top:22px;

}

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

.metric-card:hover .metric-header span{

    color:#2563eb;

}

.metric-card:hover p{

    color:#475569;

}

.metric-card:hover small{

    color:#64748b;

}

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

.metric-card hr{

    width:100%;
    height:1px;

    margin:18px 0;

    border:none;

    background:#edf2f7;

}

/*==================================================
ANIMATIONS
==================================================*/

@keyframes progressFill{

    from{

        width:0;

    }

    to{

        width:var(--progress,90%);

    }

}

@keyframes progressShine{

    from{

        transform:translateX(-140px);

    }

    to{

        transform:translateX(260px);

    }

}
/*==================================================
IMPACT SECTION
Premium Dashboard Redesign
PART 3
Marquee • Hover Effects • Floating Accents • Animations
==================================================*/

/*==================================================
TECH MARQUEE
==================================================*/

.impact-marquee{

    position:relative;

    margin-top:38px;

    overflow:hidden;

    padding:12px 0;

    border-top:1px solid #e8edf5;
    border-bottom:1px solid #e8edf5;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #f8fbff,
            #ffffff
        );

}

/*==================================================
EDGE FADES
==================================================*/

.impact-marquee::before,
.impact-marquee::after{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:110px;

    z-index:3;

    pointer-events:none;

}

.impact-marquee::before{

    left:0;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            transparent
        );

}

.impact-marquee::after{

    right:0;

    background:
        linear-gradient(
            -90deg,
            #ffffff,
            transparent
        );

}

/*==================================================
TRACK
==================================================*/

.impact-track{

    display:flex;

    align-items:center;

    gap:14px;

    width:max-content;

    animation:impactMarquee 26s linear infinite;

}

.impact-track:hover{

    animation-play-state:paused;

}

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

.impact-track span{

    display:flex;

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

    white-space:nowrap;

    padding:9px 18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    color:#475569;

    font-size:.84rem;

    font-weight:600;

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

    box-shadow:
        0 6px 18px rgba(15,23,42,.04);

}

.impact-track span:hover{

    transform:translateY(-3px);

    color:#2563eb;

    border-color:#93c5fd;

    box-shadow:
        0 14px 28px rgba(37,99,235,.12);

}

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

.metric-card{

    transform-origin:center;

    will-change:transform;

}

.metric-card:hover{

    cursor:default;

}

.metric-card:hover .metric-number{

    letter-spacing:-.055em;

}

.metric-card:hover .metric-progress{

    background:#e8f1fc;

}

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

.metric-header i::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:18px;

    background:
        radial-gradient(
            circle,
            rgba(96,165,250,.35),
            transparent 75%
        );

    opacity:0;

    transition:.4s;

    z-index:-1;

}

.metric-card:hover .metric-header i::before{

    opacity:1;

}

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

.metric-card{

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

}

.metric-card:nth-child(2){

    animation-delay:1s;

}

.metric-card:nth-child(3){

    animation-delay:2s;

}

.metric-card:nth-child(4){

    animation-delay:3s;

}

/*==================================================
CORNER LIGHT PULSE
==================================================*/

.metric-card::after{

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

}

/*==================================================
REVEAL
==================================================*/

.metric-card{

    opacity:0;

    animation:
        revealCard .7s ease forwards,
        metricFloat 7s ease-in-out infinite;

}

.metric-card:nth-child(1){

    animation-delay:.1s,0s;

}

.metric-card:nth-child(2){

    animation-delay:.2s,1s;

}

.metric-card:nth-child(3){

    animation-delay:.3s,2s;

}

.metric-card:nth-child(4){

    animation-delay:.4s,3s;

}

/*==================================================
MARQUEE
==================================================*/

@keyframes impactMarquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*==================================================
FLOAT
==================================================*/

@keyframes metricFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

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

@keyframes pulseGlow{

    0%,100%{

        opacity:.12;

        transform:scale(1);

    }

    50%{

        opacity:.4;

        transform:scale(1.08);

    }

}

/*==================================================
REVEAL
==================================================*/

@keyframes revealCard{

    from{

        opacity:0;

        transform:
            translateY(28px)
            scale(.98);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}
/*==================================================
IMPACT SECTION
Premium Dashboard Redesign
PART 4
Responsive • Full Viewport • Final Polish
==================================================*/

/*==================================================
DESKTOP (1200px+)
Keeps section comfortably inside one screen
==================================================*/

@media (min-width:1200px){

    .impact-section{

        min-height:100vh;

        display:flex;
        align-items:center;

        padding:42px 0;

    }

    .impact-heading{

        margin-bottom:34px;

    }

    .impact-dashboard{

        gap:18px;

    }

    .metric-card.large{

        min-height:330px;

    }

}

@media(max-width:1100px){

.impact-dashboard{

grid-template-columns:1fr 1fr;

grid-template-areas:

"large large"
"client tech"
"support support";

}

.metric-card.large{

min-height:330px;

}

}



/*==================================================
LAPTOP
==================================================*/

@media (max-width:1199px){

    .impact-section{

        min-height:auto;

        padding:70px 0;

    }

    .impact-heading h2{

        font-size:2.45rem;

    }

    .impact-dashboard{

        grid-template-columns:1fr 1fr;

    }

    .metric-card.large{

        grid-column:1 / span 2;

        grid-row:auto;

        min-height:320px;

    }

    .metric-card.wide{

        grid-column:1 / span 2;

    }

}



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

@media (max-width:900px){

    .impact-section{

        padding:80px 0;

    }

    .impact-heading{

        margin-bottom:34px;

    }

    .impact-heading h2{

        font-size:2.15rem;

    }

    .impact-heading p{

        max-width:100%;

        font-size:.95rem;

    }

    .impact-dashboard{

        grid-template-columns:1fr;

        grid-auto-rows:auto;

        gap:18px;

    }

    .metric-card.large,
    .metric-card.wide{

        grid-column:auto;

        grid-row:auto;

        min-height:auto;

    }

    .metric-card{

        padding:24px;

    }

    .metric-number{

        font-size:2.9rem;

    }

    .metric-card.large .metric-number{

        font-size:3.5rem;

    }

}

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

@media (max-width:768px){

    .impact-section{

        min-height:auto;

        padding:70px 0;

    }

    .impact-heading{

        margin-bottom:30px;

    }

    .impact-tag{

        font-size:.70rem;

        padding:10px 16px;

        letter-spacing:.14em;

    }

    .impact-heading h2{

        font-size:1.95rem;

        line-height:1.15;

    }

    .impact-heading p{

        font-size:.90rem;

        line-height:1.65;

    }

    .metric-card{

        padding:22px;
        min-height:auto;

        border-radius:22px;

    }

    .metric-header{

        margin-bottom:14px;

    }

    .metric-header i{

        width:42px;
        height:42px;

        font-size:16px;

        border-radius:12px;

    }

    .metric-number{

        font-size:2.45rem;

    }

    .metric-card.large .metric-number{

        font-size:3rem;

    }

    .metric-card p{

        font-size:.90rem;

    }

    .metric-card small{

        font-size:.82rem;

    }

    .impact-marquee{

        margin-top:28px;

        padding:10px 0;

    }

    .impact-dashboard{

    grid-template-columns:1fr;

    grid-template-areas:

    "large"
    "client"
    "tech"
    "support";

    }

    .impact-track{

        gap:10px;

    }

    .impact-track span{

        padding:8px 15px;

        font-size:.78rem;

    }

}

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

@media (max-width:480px){

    .impact-section{

        padding:60px 0;

    }

    .impact-heading h2{

        font-size:1.75rem;

    }

    .metric-card{

        padding:20px;

    }

    .metric-number{

        font-size:2.1rem;

    }

    .metric-card.large .metric-number{

        font-size:2.6rem;

    }

}

/*==================================================
ACCESSIBILITY
==================================================*/

.metric-card:focus-within{

    border-color:#93c5fd;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12),
        0 20px 40px rgba(15,23,42,.08);

}

.metric-card,
.metric-header i,
.impact-track span{

    -webkit-tap-highlight-color:transparent;

}

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

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

    *{

        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;

    }

}

/*==================================================
FINAL POLISH
==================================================*/

.metric-card{

    backdrop-filter:blur(8px);

}

.metric-card:hover{

    z-index:10;

}

.metric-number{

    text-rendering:optimizeLegibility;

}

.impact-track span{

    user-select:none;

}

.impact-section *{

    box-sizing:border-box;

}










/*==================================================
PORTFOLIO SECTION
==================================================*/

.portfolio-section{

    position:relative;
    overflow:hidden;

    padding:60px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcff 55%,
            #f6f9fd
        );

}

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

.portfolio-bg-grid{

    position:absolute;
    inset:0;

    opacity:.35;

    background-image:
        linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);

    background-size:64px 64px;

}

.portfolio-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.glow-left{

    width:430px;
    height:430px;

    top:-170px;
    left:-170px;

    background:#bfdbfe;

    opacity:.45;

}

.glow-right{

    width:420px;
    height:420px;

    right:-170px;
    bottom:-170px;

    background:#ddd6fe;

    opacity:.4;

}

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

.portfolio-section .container{

    position:relative;

    max-width:1320px;

    margin:auto;

    padding:0 32px;

    z-index:5;

}

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

.portfolio-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.portfolio-heading h2{

    margin:28px 0 20px;

    font-size:3.2rem;

    line-height:1.08;

    color:#0f172a;

    font-weight:800;

}

.portfolio-heading h2 span{

    display:block;

    color:#2563eb;

}

.portfolio-heading p{

    max-width:660px;

    margin:auto;

    color:#64748b;

    line-height:1.9;

}

/*==========================================================
FEATURED PROJECTS - FILTER
==========================================================*/

.projects-filter{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    margin:45px 0 55px;
}

.projects-filter button{
    background:#f8fafc;
    color:#475569;
    border:1px solid #e2e8f0;
    padding:12px 24px;
    border-radius:50px;
    font-size:.92rem;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.projects-filter button:hover{
    background:#2563eb;
    border-color:#2563eb;
    color:#ffffff !important;
}

.projects-filter button.active{
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#ffffff !important;
}

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

.projects-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    align-items:stretch;
}

.projects-list .project-card{
    width:100%;
}

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

.projects-footer{
    margin-top:60px;
    text-align:center;
}

.projects-footer .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

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

.portfolio-projects::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(37,99,235,.04),
        transparent 70%);
    left:-220px;
    bottom:-220px;
    pointer-events:none;
}

.project-card:nth-child(1){animation-delay:.10s;}
.project-card:nth-child(2){animation-delay:.18s;}
.project-card:nth-child(3){animation-delay:.26s;}
.project-card:nth-child(4){animation-delay:.34s;}
.project-card:nth-child(5){animation-delay:.42s;}

@keyframes portfolioReveal{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==================================================
PROJECT NUMBER
==================================================*/

.project-number{

    position:absolute;

    top:22px;
    right:22px;

    font-size:3rem;

    font-weight:800;

    color:#edf2f8;

    user-select:none;

    transition:.35s;

}

.project-card:hover .project-number{

    color:#dbeafe;

}

/*==================================================
BROWSER
==================================================*/

.browser{

    position:relative;
    overflow:hidden;

    border-radius:22px;
    height:100%;

    border:1px solid #e5e7eb;

    background:#ffffff;

    box-shadow:
        0 20px 45px rgba(15,23,42,.06);

}

.browser.small{

    margin-bottom:20px;

}

.browser-top{

    display:flex;

    align-items:center;

    gap:8px;

    padding:14px 18px;

    border-bottom:1px solid #edf2f7;

    background:#f8fafc;

}

.browser-top span{

    width:11px;
    height:11px;

    border-radius:50%;

}

.browser-top span:nth-child(1){

    background:#ff5f57;

}

.browser-top span:nth-child(2){

    background:#febc2e;

}

.browser-top span:nth-child(3){

    background:#28c840;

}

.browser-preview{

    overflow:hidden;
    aspect-ratio:16/9;
    height:auto;
    aspect-ratio:auto;
    background:#eef5fb;

}

.browser-preview img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;


}

.project-card:hover .browser-preview img{

    transform:scale(1.08);

}

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

.project-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:8px;

}

.project-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    margin-bottom:20px;

    padding:8px 16px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

}

.project-status i{

    color:#22c55e;

}

.project-card h3{

    margin:0 0 14px;

    font-size:1.7rem;

    color:#0f172a;

    font-weight:700;

    transition:.3s;

}

.project-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:24px;

}

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

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:14px;

}

.project-tech span{

    padding:8px 15px;

    border-radius:999px;

    background:#f8fbff;

    border:1px solid #e5edf6;

    color:#334155;

    font-size:.82rem;

    font-weight:600;

    transition:.35s;

}

.project-card:hover .project-tech span{

    background:#eff6ff;

    border-color:#bfdbfe;

    color:#2563eb;

}

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

.project-links{

    display:flex;
    margin-top:4px;

    gap:18px;

    align-items:center;

}

.project-links a,
.project-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-weight:600;

    color:#2563eb;

    transition:.35s;

}

.project-links a:first-child,
.project-btn{

    padding:13px 24px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color:#ffffff;

    box-shadow:
        0 12px 30px rgba(37,99,235,.18);

}

.project-links a:first-child:hover,
.project-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 40px rgba(37,99,235,.25);

}

.project-links a:last-child{

    color:#64748b;

}

.project-links a:last-child:hover{

    color:#2563eb;

}

/*==================================================
ARROW
==================================================*/

.project-links i,
.project-btn i{

    transition:.35s;

}

.project-card:hover i{

    transform:translateX(6px);

}

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

.portfolio-footer{

    display:flex;

    justify-content:center;

    margin-top:70px;

}

.portfolio-footer a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#2563eb;

    font-weight:700;

    font-size:1rem;

    transition:.35s;

}

.portfolio-footer a:hover{

    gap:18px;

}

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

.project-card{
    opacity:0;
    animation:portfolioReveal .8s ease forwards;
}

.project-card:nth-child(1){animation-delay:.1s;}
.project-card:nth-child(2){animation-delay:.2s;}
.project-card:nth-child(3){animation-delay:.3s;}
.project-card:nth-child(4){animation-delay:.4s;}
.project-card:nth-child(5){animation-delay:.5s;}






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

.project-card{

    animation:
        portfolioReveal .8s forwards,
        portfolioFloat 7s ease-in-out infinite;

}

.project-card:nth-child(1){

    animation-delay:.1s,0s;

}

.project-card:nth-child(2){

    animation-delay:.18s,.8s;

}

.project-card:nth-child(3){

    animation-delay:.26s,1.4s;

}

.project-card:nth-child(4){

    animation-delay:.34s,2s;

}

.project-card:nth-child(5){

    animation-delay:.42s,2.6s;

}

@keyframes portfolioFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/*==================================================
IMAGE SHINE
==================================================*/

.browser{

    position:relative;

}

.browser::after{
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:60%;
    height:100%;
    background:linear-gradient(
        110deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    transform:skewX(-20deg);
    transition:1s;
}

.project-card:hover .browser::after{

    left:160%;

}

/*==================================================
BUTTON RIPPLE
==================================================*/

.project-links a:first-child,
.project-btn{

    position:relative;

    overflow:hidden;

}

.project-links a:first-child::before,
.project-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

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

    opacity:0;

    transition:.35s;

}

.project-links a:first-child:hover::before,
.project-btn:hover::before{

    opacity:1;

}

/*==================================================
FILTER EFFECT
==================================================*/

.portfolio-filter button{

    position:relative;

    overflow:hidden;

}

.portfolio-filter button::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            transparent
        );

    opacity:0;

    transition:.35s;

}

.portfolio-filter button:hover::before{

    opacity:1;

}

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

.portfolio-footer a i{

    transition:.35s;

}

.portfolio-footer a:hover i{

    transform:translateX(8px);

}

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

@media(max-width:1150px){

    .portfolio-grid{

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


    }

    .project-card.featured{

        grid-column:1 / span 2;

    }

}

@media(max-width:900px){

    .project-card.featured{

        display:flex;

        grid-column:auto;

    }

}

@media(max-width:768px){
    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .portfolio-section{

        padding:100px 0;

    }

    .portfolio-heading h2{

        font-size:2.4rem;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .project-card.featured{

        grid-column:auto;

    }

    .project-card{

        padding:24px;

    }

    .project-number{

        font-size:2.2rem;

    }

    .project-links{

        flex-direction:column;

        align-items:flex-start;

    }

    .portfolio-filter{

        gap:10px;

    }

    .portfolio-filter button{

        padding:10px 18px;

        font-size:.85rem;

    }

}

/*==================================================
REDUCED MOTION
==================================================*/

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

    .project-card,
    .browser img,
    .project-links a,
    .project-btn{

        animation:none;

        transition:none;

    }

}



.portfolio-right .project-card{

    height:248px;

    padding:22px;

}











/*==================================================
PREMIUM TESTIMONIAL SECTION
==================================================*/

.testimonial-section{

    position:relative;
    overflow:hidden;

    padding:120px 0;

    background:
        radial-gradient(circle at top left,
            rgba(37,99,235,.08),
            transparent 38%),

        radial-gradient(circle at bottom right,
            rgba(14,165,233,.08),
            transparent 35%),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 55%,
            #f6f9fd 100%
        );

}

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

.testimonial-bg{

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(15,23,42,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 1px);

    background-size:62px 62px;

    opacity:.45;

}

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

.testimonial-section::before{
    display:none;
}

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

.testimonial-section .container{

    position:relative;

    max-width:1240px;

    margin:auto;

    padding:0 32px;

    z-index:5;

}

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

.testimonial-heading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.testimonial-heading h2{

    margin:22px 0 22px;

    font-size:3.3rem;

    line-height:1.08;

    letter-spacing:-2px;

    font-weight:800;

    color:#0f172a;

}

.testimonial-heading h2 span{

    display:block;

    color:#2563eb;

}

.testimonial-heading p{

    font-size:1rem;

    line-height:1.9;

    color:#64748b;

}

/*==================================================
MARQUEE
==================================================*/

.testimonial-wrapper{

    overflow:hidden;

    position:relative;

    padding:18px 0;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 8%,
            black 92%,
            transparent);

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent,
            black 8%,
            black 92%,
            transparent);

}

.testimonial-track{

    display:flex;

    gap:30px;

    width:max-content;

    animation:testimonialScroll 42s linear infinite;

}

.testimonial-wrapper:hover .testimonial-track{

    animation-play-state:paused;

}

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

.testimonial-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    flex:0 0 390px;

    padding:34px;

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(249,251,255,.92)
        );

    backdrop-filter:blur(24px);

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

    box-shadow:
        0 15px 45px rgba(15,23,42,.06),
        0 2px 10px rgba(37,99,235,.04),
        inset 0 1px 0 rgba(255,255,255,.9);

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

}

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



/*==================================================
BOTTOM LIGHT
==================================================*/

.testimonial-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:45%;

    height:100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:skewX(-20deg);

    transition:1s;

}

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

.testimonial-card:hover{

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

    border-color:
        rgba(96,165,250,.35);

    box-shadow:
        0 35px 80px rgba(37,99,235,.15),
        0 0 0 1px rgba(96,165,250,.12);

}

.testimonial-card:hover::before{

    transform:scale(1.35);

}

.testimonial-card:hover::after{

    left:160%;

}
/*==================================================
PREMIUM QUOTE BADGE
==================================================*/

.testimonial-quote{

    position:absolute;

    top:24px;
    right:24px;

    width:58px;
    height:58px;

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

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    color:#2563eb;

    font-size:26px;

    box-shadow:
        0 14px 35px rgba(37,99,235,.14);

    transition:.45s ease;

}

.testimonial-card:hover .testimonial-quote{

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

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color:#fff;

}

/*==================================================
REVIEW BADGE
==================================================*/

.review-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:7px 14px;

    margin-bottom:22px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #eff6ff,
            #dbeafe
        );

    color:#2563eb;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.04em;

}

.review-badge i{

    font-size:.75rem;

}

/*==================================================
PREMIUM STARS
==================================================*/

.testimonial-stars{

    display:flex;

    align-items:center;

    gap:6px;

    margin-bottom:24px;

}

.testimonial-stars i{

    color:#fbbf24;

    font-size:1rem;

    filter:
        drop-shadow(
            0 0 8px rgba(251,191,36,.45)
        );

    transition:.3s;

}

.testimonial-card:hover .testimonial-stars i{

    transform:translateY(-2px);

}

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

.testimonial-card p{

    margin:0 0 34px;

    color:#334155;

    font-size:1rem;

    line-height:2;

    font-weight:500;

}

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

.testimonial-divider{

    width:100%;

    height:1px;

    margin-bottom:24px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(148,163,184,.35),
            transparent
        );

}

/*==================================================
USER
==================================================*/

.testimonial-user{

    display:flex;

    align-items:center;

    gap:18px;

}

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

.testimonial-user img{

    width:68px;
    height:68px;

    flex-shrink:0;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #fff;

    box-shadow:
        0 14px 30px rgba(15,23,42,.10);

    transition:.45s ease;

}

.testimonial-card:hover .testimonial-user img{

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

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

}

/*==================================================
USER INFO
==================================================*/

.user-info{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.user-info h4{

    margin:0;

    font-size:1.05rem;

    font-weight:700;

    color:#0f172a;

    transition:.35s;

}

.user-info span{

    color:#64748b;

    font-size:.92rem;

}

.testimonial-card:hover .user-info h4{

    color:#2563eb;

}

/*==================================================
COMPANY TAG
==================================================*/

.user-company{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    padding:6px 12px;

    width:fit-content;

    border-radius:999px;

    background:#f8fbff;

    border:1px solid #dbeafe;

    color:#2563eb;

    font-size:.72rem;

    font-weight:700;

}

.user-company i{

    font-size:.75rem;

}

/*==================================================
BOTTOM GLOW
==================================================*/

.user-info::after{

    content:"";

    display:block;

    width:42px;

    height:3px;

    margin-top:10px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            transparent
        );

    transition:.35s ease;

}

.testimonial-card:hover .user-info::after{

    width:70px;

}


/*==================================================
MARQUEE SPEED
==================================================*/

.testimonial-track{

    animation:testimonialScroll 40s linear infinite;

}

.testimonial-wrapper:hover .testimonial-track{

    animation-play-state:paused;

}

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

.testimonial-card:hover{

    cursor:pointer;

}

.testimonial-card:hover .review-badge{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color:#fff;

    box-shadow:
        0 15px 35px rgba(37,99,235,.25);

}

.testimonial-card:hover .user-company{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;

}

.testimonial-card:hover .user-company i{

    color:#fff;

}

/*==================================================
SUBTLE BORDER SHINE
==================================================*/

.testimonial-card{

    position:relative;

}

.testimonial-card .card-border{

    position:absolute;

    inset:0;

    border-radius:30px;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.8),
            rgba(59,130,246,.15),
            rgba(255,255,255,.8)
        );

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.45s;

    pointer-events:none;

}

.testimonial-card:hover .card-border{

    opacity:1;

}

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

.testimonial-particle{

    position:absolute;

    border-radius:50%;

    background:#3b82f6;

    opacity:.12;

    animation:particleFloat 10s ease-in-out infinite;

}

.tp1{

    width:8px;
    height:8px;

    left:12%;
    top:20%;

}

.tp2{

    width:12px;
    height:12px;

    right:14%;
    top:30%;

    animation-delay:2s;

}

.tp3{

    width:7px;
    height:7px;

    left:18%;
    bottom:18%;

    animation-delay:4s;

}

.tp4{

    width:10px;
    height:10px;

    right:18%;
    bottom:24%;

    animation-delay:1s;

}

/*==================================================
ANIMATIONS
==================================================*/

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes blobMove{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(40px,25px);

    }

}

@keyframes blobMove2{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-35px,-30px);

    }

}

@keyframes particleFloat{

    0%,100%{

        transform:
            translateY(0)
            scale(1);

    }

    50%{

        transform:
            translateY(-18px)
            scale(1.15);

    }

}

@keyframes testimonialScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(-50% - 15px));

    }

}

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

@media(max-width:1200px){

    .testimonial-section{

        padding:100px 0;

    }

    .testimonial-heading h2{

        font-size:2.8rem;

    }

    .testimonial-card{

        flex:0 0 360px;

    }

}

@media(max-width:992px){

    .testimonial-heading{

        margin-bottom:60px;

    }

    .testimonial-heading h2{

        font-size:2.5rem;

    }

    .testimonial-card{

        flex:0 0 330px;

        padding:30px;

    }

}

@media(max-width:768px){

    .testimonial-section{

        padding:80px 0;

    }

    .testimonial-heading h2{

        font-size:2.1rem;

        letter-spacing:-1px;

    }

    .testimonial-heading p{

        font-size:.95rem;

    }

    .testimonial-card{

        flex:0 0 300px;

        padding:24px;

    }

    .testimonial-user img{

        width:60px;
        height:60px;

    }

}

@media(max-width:480px){

    .testimonial-card{

        flex:0 0 270px;

        border-radius:24px;

    }

    .testimonial-heading h2{

        font-size:1.8rem;

    }

}

/*==================================================
REDUCED MOTION
==================================================*/

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

    .testimonial-card,
    .testimonial-track,
    .testimonial-particle,
    .testimonial-section::before,
    .testimonial-section::after{

        animation:none !important;

    }

}












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

.faq-section{

    position:relative;
    overflow:hidden;

    padding:60px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcff,
            #f6f9fd
        );

}

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

.faq-bg-grid{

    position:absolute;
    inset:0;

    opacity:.35;

    background-image:
        linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);

    background-size:64px 64px;

}

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

.faq-section .container{

    position:relative;

    max-width:1320px;

    margin:auto;

    z-index:2;

}

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

.faq-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.faq-heading h2{

    margin:26px 0 18px;

    font-size:3rem;

    font-weight:800;

    color:#0f172a;

    line-height:1.1;

}

.faq-heading h2 span{

    display:block;

    color:#2563eb;

}

.faq-heading p{

    color:#64748b;

    line-height:1.8;

}

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

.faq-grid{

    display:grid;

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

    gap:32px;

}

.faq-column{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*==================================================
ITEM
==================================================*/

.faq-item{

    background:#ffffff;

    border:1px solid #e8edf5;

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 12px 28px rgba(15,23,42,.05);

}

.faq-item:hover{

    border-color:#bfdbfe;

    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(37,99,235,.10);

}

/*==================================================
QUESTION
==================================================*/

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:24px 28px;

    background:none;

    border:none;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    color:#0f172a;

    text-align:left;

}

.faq-question i{

    width:36px;
    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eff6ff;

    color:#2563eb;

    transition:.35s;

    flex-shrink:0;

}

/*==================================================
ANSWER
==================================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:
        max-height .45s ease,
        padding .35s ease;

    padding:0 28px;

}

.faq-answer p{

    color:#64748b;

    line-height:1.8;

    padding-bottom:24px;

}

/*==================================================
ACTIVE
==================================================*/

.faq-item.active{

    border-color:#bfdbfe;

}

.faq-item.active .faq-answer{

    max-height:220px;

    padding:0 28px;

}

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

    transform:rotate(45deg);

    background:#2563eb;

    color:#ffffff;

}

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

@media(max-width:992px){

    .faq-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .faq-section{

        padding:100px 0;

    }

    .faq-heading h2{

        font-size:2.3rem;

    }

    .faq-question{

        padding:20px;

        font-size:.95rem;

    }

    .faq-answer{

        padding:0 20px;

    }

    .faq-item.active .faq-answer{

        padding:0 20px;

    }

}










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

.cta-section{

    position:relative;

    overflow:hidden;

    padding:60px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 55%,
            #f4f8fd 100%
        );

}

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

.cta-grid{

    position:absolute;

    inset:0;

    opacity:.35;

    background-image:
        linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);

    background-size:64px 64px;

}

.cta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    pointer-events:none;

}

.glow-left{

    width:420px;
    height:420px;

    top:-160px;
    left:-170px;

    background:#bfdbfe;

    opacity:.55;

}

.glow-right{

    width:420px;
    height:420px;

    bottom:-170px;
    right:-170px;

    background:#ddd6fe;

    opacity:.5;

}

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

.cta-section .container{

    position:relative;

    max-width:1320px;
    margin:auto;

    padding:0 32px;

    z-index:2;

}

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

.cta-wrapper{

    display:grid;

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

    gap:70px;

    align-items:center;

}

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

.cta-left{

    max-width:620px;

}

.cta-left h2{

    margin:26px 0;

    font-size:3.5rem;

    line-height:1;

    font-weight:800;

    color:#0f172a;

    letter-spacing:-1.5px;

}

.cta-left h2 span{
    line-height:1.2;

    display:block;

    margin-top:8px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.cta-left p{

    margin:28px 0 40px;

    color:#64748b;

font-size:.94rem;
line-height:1.65;

    max-width:560px;

}

/*==================================================
BENEFITS
==================================================*/

.cta-benefits{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:45px;

}

.benefit{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 20px;

    border-radius:18px;

    background:#ffffff;

    border:1px solid #edf2f7;

    box-shadow:
        0 10px 25px rgba(15,23,42,.05);

    transition:.35s;

}

.benefit:hover{

    transform:translateY(-6px);

    border-color:#bfdbfe;

    box-shadow:
        0 22px 40px rgba(37,99,235,.10);

}

.benefit i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#eff6ff;

    color:#2563eb;

    font-size:.95rem;

    flex-shrink:0;

}

.benefit span{

    color:#334155;

    font-weight:600;

    line-height:1.5;

}

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

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:20px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    padding:18px 30px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color:#fff;

    font-weight:700;

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

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 28px 60px rgba(37,99,235,.28);

}

.btn-primary i{

    transition:.35s;

}

.btn-primary:hover i{

    transform:translateX(6px);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 28px;

    text-decoration:none;

    border-radius:18px;

    background:#ffffff;

    color:#0f172a;

    font-weight:700;

    border:1px solid #e5e7eb;

    box-shadow:
        0 10px 25px rgba(15,23,42,.05);

    transition:.35s;

}

.btn-secondary:hover{

    transform:translateY(-5px);

    border-color:#bfdbfe;

    color:#2563eb;

}

.btn-secondary i{

    color:#25D366;

}

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

.cta-rating{

    display:flex;

    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;

}

.rating-box{

    flex:1;

    min-width:150px;

    padding:22px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid #edf2f7;

    box-shadow:
        0 12px 30px rgba(15,23,42,.05);

    transition:.35s;

}

.rating-box:hover{

    transform:translateY(-8px);

    border-color:#bfdbfe;

}

.rating-box h3{

font-size:1.35rem;
margin:0 0 10px;
    color:#2563eb;

    font-weight:800;

}

.rating-box span{

    display:block;

    margin-top:8px;

    color:#64748b;

    font-size:.92rem;

    line-height:1.6;

}
/*==================================================
RIGHT SIDE
==================================================*/

.cta-right{

    position:relative;

}

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

.cta-card{

    position:relative;

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

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

    border-radius:34px;

    padding:42px;

    overflow:hidden;

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

    box-shadow:
        0 35px 80px rgba(15,23,42,.08);

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

}

.cta-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 45px 90px rgba(15,23,42,.12);

}

/*===============================================
Gradient Border
===============================================*/

.cta-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.45),
            rgba(168,85,247,.35)
        );

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

/*===============================================
Corner Glow
===============================================*/

.cta-card::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    top:-120px;
    right:-120px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(37,99,235,.18),
        transparent 70%);

}

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

.card-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    margin-bottom:28px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-weight:700;

    font-size:.86rem;

}

.card-badge span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#22c55e;

    animation:pulseDot 1.8s infinite;

}

@keyframes pulseDot{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.5);

    }

    70%{

        box-shadow:0 0 0 10px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}

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

.cta-card-header{

    margin-bottom:34px;

}

.cta-card-header h3{

font-size:1.35rem;
margin:0 0 10px;
    color:#0f172a;

    font-weight:800;

}

.cta-card-header p{

    color:#64748b;

    line-height:1.8;

}

/*==================================================
FORM
==================================================*/

.cta-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

/*==================================================
FIELDS
==================================================*/

.form-field{

    position:relative;

}

.form-field.full{

    width:100%;

}

.form-field i{

    position:absolute;

    top:20px;

    left:18px;

    color:#94a3b8;

    font-size:.95rem;

    transition:.3s;

}

/*==================================================
INPUTS
==================================================*/

.form-field input,
.form-field select,
.form-field textarea{

    width:100%;

    padding:

        17px
        18px
        17px
        52px;

    border-radius:16px;

    border:1px solid #dbe4ef;

    background:#ffffff;

    color:#0f172a;

    font-size:.96rem;

    font-family:inherit;

    outline:none;

    transition:.35s;

}

.form-field textarea{

    min-height:150px;

    resize:none;

}

.form-field input::placeholder,
.form-field textarea::placeholder{

    color:#94a3b8;

}

.form-field select{

    color:#64748b;

}

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

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{

    border-color:#3b82f6;

    transform:translateY(-2px);

    box-shadow:

        0 0 0 4px rgba(37,99,235,.10),

        0 18px 35px rgba(37,99,235,.08);

}

.form-field:focus-within i{

    color:#2563eb;

}

/*==================================================
SUBMIT
==================================================*/

.cta-submit{

    margin-top:10px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    box-shadow:
        0 20px 45px rgba(37,99,235,.25);

    transition:.35s;

}

.cta-submit:hover{

    transform:translateY(-5px);

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

}

.cta-submit i{

    margin-left:10px;

    transition:.35s;

}

.cta-submit:hover i{

    transform:translateX(6px);

}
/*==================================================
CTA NOTE
==================================================*/

.cta-note{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:28px;

    padding:16px 20px;

    border-radius:16px;

    background:#f8fbff;

    border:1px solid #edf2f7;

    color:#64748b;

    font-size:.9rem;

    font-weight:500;

}

.cta-note i{

    color:#22c55e;

    font-size:1rem;

}

/*==================================================
CARD SHINE EFFECT
==================================================*/

.cta-card{

    isolation:isolate;

}

.cta-card .shine{

    display:none;

}

.cta-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-22deg);

    transition:1.1s;

    pointer-events:none;

}

.cta-card:hover::after{

    left:170%;

}

/*==================================================
BUTTON SHINE
==================================================*/

.btn-primary,
.cta-submit{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,
.cta-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:skewX(-25deg);

    transition:1s;

}

.btn-primary:hover::before,
.cta-submit:hover::before{

    left:180%;

}

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

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover{

    border-color:#bfdbfe;

}

/*==================================================
BENEFIT ICON ANIMATION
==================================================*/

.benefit:hover i{

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

    background:#2563eb;

    color:#fff;

}

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

.rating-box{

    position:relative;

    overflow:hidden;

}

.rating-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(37,99,235,.04),

            transparent

        );

    opacity:0;

    transition:.35s;

}

.rating-box:hover::before{

    opacity:1;

}

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

@keyframes ctaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.rating-box:nth-child(1){

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

}

.rating-box:nth-child(2){

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

    animation-delay:1.5s;

}

.rating-box:nth-child(3){

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

    animation-delay:3s;

}

/*==================================================
SECTION REVEAL
==================================================*/

.cta-left{

    animation:ctaReveal .8s ease forwards;

}

.cta-right{

    animation:ctaReveal .8s ease forwards;

    animation-delay:.2s;

}

@keyframes ctaReveal{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:1100px){

    .cta-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .cta-left{

        max-width:100%;

    }

}

@media(max-width:768px){

    .cta-section{

        padding:100px 0;

    }

    .cta-left h2{

        font-size:2.8rem;

    }

    .cta-benefits{

        grid-template-columns:1fr;

    }

    .cta-rating{

        flex-direction:column;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .cta-card{

        padding:28px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .btn-primary,
    .btn-secondary{

        justify-content:center;

    }

}

/*==================================================
REDUCED MOTION
==================================================*/

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

    *{

        animation:none!important;

        transition:none!important;

    }

}