/*==========================================
Google Fonts
==========================================*/

:root{

--bg:#071521;
--bg2:#0A2235;
--card:rgba(255,255,255,.05);

--primary:#00C896;
--secondary:#00B4FF;

--white:#ffffff;

--text:#E6EEF8;

--muted:#9CB3C9;

--border:rgba(255,255,255,.08);

--shadow:0 25px 70px rgba(0,0,0,.35);

--radius:24px;

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

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

h1,h2,h3,h4,h5{

font-family:'Outfit',sans-serif;

font-weight:700;

line-height:1.2;

color:#fff;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1280px,92%);

margin:auto;

}

section{

position:relative;

padding:120px 0;

overflow:hidden;

}

/*====================================================
Hero Section
====================================================*/

.msme-hero{

position:relative;

padding:170px 0 130px;

background:
linear-gradient(135deg,#071521 0%,#081C2C 40%,#0A2235 100%);

overflow:hidden;

isolation:isolate;

}

/*==================================
Aurora Lights
==================================*/

.hero-aurora{

position:absolute;

width:520px;

height:520px;

border-radius:50%;

filter:blur(130px);

opacity:.20;

pointer-events:none;

z-index:-1;

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

}

.aurora-left{

background:#00C896;

top:-180px;

left:-150px;

}

.aurora-right{

background:#00B4FF;

bottom:-220px;

right:-160px;

animation-delay:5s;

}

/*==================================
Grid
==================================*/

.hero-wrapper{

display:grid;

grid-template-columns:1.15fr .85fr;

align-items:center;

gap:70px;

}

/*==================================
Left Content
==================================*/

.hero-content{

position:relative;

z-index:2;

}

.hero-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:50px;

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

border:1px solid rgba(0,200,150,.30);

color:#00E0A4;

font-size:.90rem;

font-weight:700;

letter-spacing:.6px;

backdrop-filter:blur(18px);

box-shadow:

0 0 25px rgba(0,200,150,.15);

margin-bottom:30px;

}

.hero-tag::before{

content:"";

width:10px;

height:10px;

border-radius:50%;

background:#00E0A4;

box-shadow:

0 0 15px #00E0A4,

0 0 30px #00E0A4;

}

/*==================================
Heading
==================================*/

.hero-content h1{

font-size:4rem;

font-weight:800;

line-height:1.15;

letter-spacing:-1.5px;

margin-bottom:28px;

color:#fff;

max-width:760px;

}

.hero-content h1 span{

display:block;

margin-top:12px;

background:linear-gradient(90deg,#00E0A4,#00B4FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/*==================================
Description
==================================*/

.hero-description{

max-width:700px;

font-size:1.10rem;

line-height:2;

color:#B8D0E3;

margin-bottom:40px;

}

/*====================================================
Hero Trust Points
====================================================*/

.hero-points{

display:grid;

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

gap:18px;

margin-bottom:45px;

max-width:700px;

}

.point{

position:relative;

display:flex;

align-items:center;

gap:14px;

padding:18px 22px;

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

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

border-radius:18px;

backdrop-filter:blur(18px);

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

overflow:hidden;

transition:all .45s cubic-bezier(.4,0,.2,1);

cursor:default;

}

.point::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

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

transition:all .8s ease;

}

.point:hover::before{

left:100%;

}

.point:hover{

transform:translateY(-8px);

border-color:rgba(0,200,150,.35);

box-shadow:

0 18px 40px rgba(0,0,0,.35),

0 0 30px rgba(0,200,150,.12);

}

.point i{

font-size:1.15rem;

color:#00E0A4;

min-width:24px;

text-shadow:0 0 12px rgba(0,224,164,.5);

}

.point{

font-size:.96rem;

font-weight:600;

color:#EAF6FF;

}

/*====================================================
Hero Buttons
====================================================*/

.hero-buttons{

display:flex;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

/* Primary Button */

.btn-primary{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:60px;

background:linear-gradient(135deg,#00C896,#00B4FF);

color:#fff;

font-weight:700;

font-size:1rem;

letter-spacing:.4px;

overflow:hidden;

transition:all .45s cubic-bezier(.4,0,.2,1);

box-shadow:

0 18px 45px rgba(0,180,255,.25);

}

.btn-primary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(

90deg,

transparent,

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

transparent

);

transform:skewX(-25deg);

transition:.9s;

}

.btn-primary:hover::before{

left:150%;

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:

0 22px 55px rgba(0,180,255,.35),

0 0 35px rgba(0,200,150,.25);

}

/* Secondary Button */

.btn-secondary{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:60px;

border:1px solid rgba(0,200,150,.35);

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

backdrop-filter:blur(18px);

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

color:#fff;

font-weight:700;

transition:all .45s ease;

overflow:hidden;

}

.btn-secondary::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
135deg,
rgba(0,200,150,.15),
rgba(0,180,255,.12)
);

opacity:0;

transition:.4s;

}

.btn-secondary span{

position:relative;

z-index:2;

}

.btn-secondary:hover::after{

opacity:1;

}

.btn-secondary:hover{

transform:translateY(-6px);

border-color:#00E0A4;

box-shadow:

0 18px 45px rgba(0,200,150,.18);

}

/*====================================================
Button Focus Accessibility
====================================================*/

.btn-primary:focus,

.btn-secondary:focus{

outline:none;

box-shadow:

0 0 0 4px rgba(0,200,150,.18),

0 18px 45px rgba(0,180,255,.25);

}

/*====================================================
Hero Right Side
====================================================*/

.hero-visual{

position:relative;

display:flex;

justify-content:center;

align-items:center;

z-index:2;

}

.glass-card{

position:relative;

width:100%;

max-width:480px;

padding:40px;

border-radius:30px;

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

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

backdrop-filter:blur(25px);

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

overflow:hidden;

box-shadow:

0 30px 80px rgba(0,0,0,.35);

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

}

.glass-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:250px;

height:250px;

background:radial-gradient(circle,#00C89655,transparent 70%);

}

.glass-card::after{

content:"";

position:absolute;

bottom:-120px;

left:-120px;

width:250px;

height:250px;

background:radial-gradient(circle,#00B4FF40,transparent 70%);

}

.glass-header{

display:flex;

gap:10px;

margin-bottom:30px;

}

.glass-header span{

width:14px;

height:14px;

border-radius:50%;

}

.glass-header span:nth-child(1){

background:#ff5f57;

}

.glass-header span:nth-child(2){

background:#febc2e;

}

.glass-header span:nth-child(3){

background:#28c840;

}

.glass-card h3{

font-size:2rem;

margin-bottom:30px;

color:#ffffff;

}

.glass-list{

display:flex;

flex-direction:column;

gap:18px;

}

.glass-item{

display:flex;

align-items:center;

gap:15px;

padding:18px 20px;

border-radius:18px;

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

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

transition:var(--transition);

font-weight:600;

color:#EAF6FF;

}

.glass-item span{

display:flex;

align-items:center;

justify-content:center;

width:34px;

height:34px;

border-radius:50%;

background:linear-gradient(135deg,#00C896,#00B4FF);

color:#fff;

font-weight:700;

}

.glass-item:hover{

transform:translateX(10px);

border-color:rgba(0,200,150,.35);

box-shadow:

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

}

/*====================================================
Hero Statistics
====================================================*/

.hero-stats{

display:grid;

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

gap:25px;

margin-top:90px;

}

.stat-card{

padding:35px 25px;

text-align:center;

border-radius:24px;

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

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

backdrop-filter:blur(18px);

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-10px);

border-color:rgba(0,200,150,.35);

box-shadow:

0 25px 60px rgba(0,180,255,.12);

}

.stat-card h3{

font-size:2rem;

margin-bottom:10px;

background:linear-gradient(90deg,#00E0A4,#00B4FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.stat-card p{

color:#B8D0E3;

font-size:.95rem;

line-height:1.7;

}

/*====================================================
Animations
====================================================*/

@keyframes auroraFloat{

0%,100%{

transform:translateY(0px) translateX(0px);

}

50%{

transform:translateY(40px) translateX(30px);

}

}

@keyframes floatCard{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

}

/*====================================================
Responsive
====================================================*/

@media(max-width:1100px){

.hero-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.hero-content{

text-align:center;

}

.hero-description{

margin-inline:auto;

}

.hero-points{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

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

}

}

@media(max-width:768px){

.msme-hero{

padding:120px 0 80px;

}

.hero-content h1{

font-size:2.7rem;

}

.hero-points{

grid-template-columns:1fr;

}

.hero-stats{

grid-template-columns:1fr;

}

.glass-card{

padding:30px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:2.2rem;

}

.hero-description{

font-size:1rem;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

width:100%;

}

.glass-card{

padding:25px;

}

}

/*====================================================
SECTION 3 : ABOUT MSME
====================================================*/

.msme-about{

position:relative;

padding:140px 0;

background:
linear-gradient(180deg,#071521 0%,#081C2C 45%,#071521 100%);

overflow:hidden;

isolation:isolate;

}

/*==================================
Background Glow
==================================*/

.msme-about::before{

content:"";

position:absolute;

width:520px;

height:520px;

top:-220px;

left:-180px;

border-radius:50%;

background:#00C896;

filter:blur(150px);

opacity:.10;

z-index:-2;

}

.msme-about::after{

content:"";

position:absolute;

width:460px;

height:460px;

bottom:-180px;

right:-180px;

border-radius:50%;

background:#00B4FF;

filter:blur(140px);

opacity:.12;

z-index:-2;

}

/*==================================
Section Heading
==================================*/

.section-heading{

max-width:900px;

margin:0 auto 80px;

text-align:center;

}

.section-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:50px;

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

border:1px solid rgba(0,200,150,.25);

color:#00E0A4;

font-size:.90rem;

font-weight:700;

letter-spacing:.5px;

backdrop-filter:blur(18px);

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

margin-bottom:28px;

}

.section-tag::before{

content:"";

width:10px;

height:10px;

border-radius:50%;

background:#00E0A4;

box-shadow:

0 0 12px #00E0A4,

0 0 25px #00E0A4;

}

.section-heading h2{

font-size:3.2rem;

font-weight:800;

line-height:1.15;

letter-spacing:-1px;

color:#fff;

margin-bottom:28px;

}

.section-heading p{

font-size:1.08rem;

line-height:2;

color:#B7CDDE;

max-width:850px;

margin:auto;

}

/*==================================
Grid
==================================*/

.about-grid{

display:grid;

grid-template-columns:1.15fr .85fr;

gap:55px;

align-items:start;

}

/*==================================
Left Content
==================================*/

.about-content{

position:relative;

padding:50px;

border-radius:30px;

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

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

backdrop-filter:blur(22px);

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

box-shadow:

0 30px 70px rgba(0,0,0,.28);

overflow:hidden;

transition:var(--transition);

}

.about-content::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:linear-gradient(
90deg,
#00C896,
#00B4FF
);

}

.about-content:hover{

transform:translateY(-10px);

border-color:rgba(0,200,150,.25);

box-shadow:

0 35px 80px rgba(0,0,0,.35),

0 0 35px rgba(0,200,150,.08);

}

.about-content h3{

font-size:2rem;

margin-bottom:25px;

color:#fff;

}

.about-content p{

font-size:1.02rem;

line-height:2;

color:#C2D5E4;

margin-bottom:22px;

}

/*====================================================
Feature Boxes
====================================================*/

.about-features{

display:grid;

gap:22px;

margin-top:45px;

}

.feature-box{

display:flex;

align-items:flex-start;

gap:20px;

padding:22px 24px;

border-radius:22px;

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

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

transition:var(--transition);

position:relative;

overflow:hidden;

}

.feature-box::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

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

transition:.9s;

}

.feature-box:hover::before{

left:150%;

}

.feature-box:hover{

transform:translateX(10px);

border-color:rgba(0,200,150,.30);

box-shadow:

0 18px 40px rgba(0,180,255,.12);

}

.feature-box i{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:linear-gradient(135deg,#00C896,#00B4FF);

color:#fff;

font-size:1.3rem;

flex-shrink:0;

box-shadow:

0 10px 30px rgba(0,180,255,.25);

}

.feature-box h4{

font-size:1.15rem;

margin-bottom:8px;

color:#fff;

}

.feature-box p{

margin:0;

font-size:.95rem;

line-height:1.8;

color:#AFC7D9;

}

/*====================================================
Right Card
====================================================*/

.about-card{

position:sticky;

top:120px;

padding:40px;

border-radius:30px;

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

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

backdrop-filter:blur(24px);

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

box-shadow:

0 30px 70px rgba(0,0,0,.30);

overflow:hidden;

}

.about-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:30px;

background:linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.25)
);

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

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

.card-header{

display:flex;

align-items:center;

gap:12px;

font-size:1.2rem;

font-weight:700;

color:#fff;

margin-bottom:30px;

}

.live-dot{

width:12px;

height:12px;

border-radius:50%;

background:#00E0A4;

box-shadow:

0 0 15px #00E0A4,

0 0 30px #00E0A4;

animation:pulseGlow 2s infinite;

}

.highlight-list{

display:flex;

flex-direction:column;

gap:18px;

}

.highlight-item{

display:flex;

align-items:center;

gap:16px;

padding:18px;

border-radius:18px;

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

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

transition:var(--transition);

color:#E6EEF8;

font-weight:500;

}

.highlight-item span{

display:flex;

align-items:center;

justify-content:center;

width:34px;

height:34px;

border-radius:50%;

background:linear-gradient(135deg,#00C896,#00B4FF);

color:#fff;

font-weight:700;

flex-shrink:0;

}

.highlight-item:hover{

transform:translateX(8px);

border-color:rgba(0,200,150,.30);

}

/*====================================================
Animations
====================================================*/

@keyframes pulseGlow{

0%,100%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.25);

opacity:.65;

}

}

/*====================================================
Responsive
====================================================*/

@media(max-width:1100px){

.about-grid{

grid-template-columns:1fr;

}

.about-card{

position:relative;

top:auto;

}

}

@media(max-width:768px){

.msme-about{

padding:90px 0;

}

.section-heading{

margin-bottom:55px;

}

.section-heading h2{

font-size:2.4rem;

}

.about-content{

padding:35px;

}

.about-card{

padding:30px;

}

}

@media(max-width:576px){

.section-heading h2{

font-size:2rem;

}

.section-heading p{

font-size:1rem;

line-height:1.8;

}

.about-content{

padding:25px;

}

.feature-box{

flex-direction:column;

text-align:center;

align-items:center;

}

.highlight-item{

align-items:flex-start;

}

}

/*====================================================
SECTION 4 : MSME BENEFITS
====================================================*/

.msme-benefits{

position:relative;

padding:140px 0;

background:
linear-gradient(
180deg,
#071521 0%,
#081C2C 50%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}

/*==================================
Luxury Background
==================================*/

.msme-benefits::before{

content:"";

position:absolute;

top:-220px;

left:-220px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(170px);

opacity:.10;

z-index:-2;

}

.msme-benefits::after{

content:"";

position:absolute;

bottom:-220px;

right:-220px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(170px);

opacity:.10;

z-index:-2;

}

/*==================================
Benefits Grid
==================================*/

.benefits-grid{

display:grid;

grid-template-columns:

repeat(3,minmax(0,1fr));

gap:32px;

margin-top:80px;

}

/*==================================
Luxury Card
==================================*/

.benefit-card{

position:relative;

padding:38px;

border-radius:30px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.025)
);

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

backdrop-filter:blur(22px);

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

overflow:hidden;

transition:all .45s cubic-bezier(.4,0,.2,1);

box-shadow:

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

z-index:1;

}

/* Gradient Border */

.benefit-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:30px;

background:

linear-gradient(

135deg,

rgba(0,200,150,.55),

rgba(0,180,255,.15),

rgba(0,200,150,.45)

);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

opacity:.70;

}

/* Glow */

.benefit-card::after{

content:"";

position:absolute;

width:240px;

height:240px;

top:-120px;

right:-120px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(0,200,150,.22),

transparent 72%

);

opacity:0;

transition:.45s;

}

/*====================================================
Benefit Icon
====================================================*/

.benefit-icon{

position:relative;

width:82px;

height:82px;

margin-bottom:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

background:linear-gradient(
135deg,
rgba(0,200,150,.18),
rgba(0,180,255,.18)
);

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

overflow:hidden;

transition:all .45s cubic-bezier(.4,0,.2,1);

box-shadow:

0 18px 40px rgba(0,180,255,.15);

}

.benefit-icon::before{

content:"";

position:absolute;

inset:-2px;

background:linear-gradient(
135deg,
#00C896,
#00B4FF,
#00C896
);

opacity:.12;

filter:blur(18px);

z-index:-1;

}

.benefit-icon i{

font-size:2rem;

background:linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

transition:var(--transition);

}

/*====================================================
Card Heading
====================================================*/

.benefit-card h3{

font-size:1.45rem;

font-weight:700;

line-height:1.35;

margin-bottom:18px;

color:#ffffff;

transition:var(--transition);

}

/*====================================================
Card Paragraph
====================================================*/

.benefit-card p{

font-size:1rem;

line-height:1.9;

color:#BFD4E5;

margin:0;

transition:var(--transition);

}

/*====================================================
Luxury Hover Effects
====================================================*/

.benefit-card:hover{

transform:

translateY(-14px)

rotateX(3deg)

rotateY(-3deg);

border-color:

rgba(0,200,150,.28);

box-shadow:

0 35px 80px rgba(0,0,0,.40),

0 0 40px rgba(0,200,150,.10),

0 0 60px rgba(0,180,255,.08);

}

.benefit-card:hover::after{

opacity:1;

transform:scale(1.15);

}

.benefit-card:hover .benefit-icon{

transform:

translateY(-8px)

rotate(-6deg)

scale(1.06);

box-shadow:

0 22px 45px rgba(0,180,255,.28);

}

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

transform:scale(1.12);

}

.benefit-card:hover h3{

color:#00E0A4;

}

.benefit-card:hover p{

color:#DDECF8;

}

/*====================================================
Top Shine Animation
====================================================*/

.benefit-card .shine{

display:none;

}

.benefit-card:hover{

overflow:hidden;

}

.benefit-card:hover:before{

opacity:1;

}

/* Moving Reflection */

.benefit-card{

overflow:hidden;

}

.benefit-card .reflection{

display:none;

}

.benefit-card::marker{

content:"";

}

/* Light Sweep */

.benefit-card span{

position:relative;

}

.benefit-card::selection{

background:#00C896;

color:#071521;

}

/*====================================================
Floating Light Effect
====================================================*/

.benefit-card .light-orb{

position:absolute;

width:180px;

height:180px;

border-radius:50%;

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

top:-90px;

right:-90px;

filter:blur(30px);

opacity:.35;

pointer-events:none;

animation:benefitOrb 8s ease-in-out infinite;

}

.benefit-card:nth-child(even) .light-orb{

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

animation-delay:2s;

}

/*====================================================
Hover Border Glow
====================================================*/

.benefit-card:hover::before{

background:linear-gradient(
135deg,
rgba(0,224,164,.9),
rgba(0,180,255,.65),
rgba(0,224,164,.9)
);

}

/*====================================================
Grid Alignment
====================================================*/

.benefit-card{

display:flex;

flex-direction:column;

height:100%;

}

.benefit-card p{

flex:1;

}

/*====================================================
Animations
====================================================*/

@keyframes benefitOrb{

0%{

transform:translate(0,0) scale(1);

}

25%{

transform:translate(-12px,10px) scale(1.08);

}

50%{

transform:translate(10px,18px) scale(.95);

}

75%{

transform:translate(-8px,-10px) scale(1.04);

}

100%{

transform:translate(0,0) scale(1);

}

}

/*====================================================
Responsive
====================================================*/

@media(max-width:1200px){

.benefits-grid{

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

gap:28px;

}

}

@media(max-width:768px){

.msme-benefits{

padding:90px 0;

}

.benefits-grid{

grid-template-columns:1fr;

gap:24px;

margin-top:55px;

}

.benefit-card{

padding:30px;

border-radius:24px;

}

.benefit-icon{

width:72px;

height:72px;

margin-bottom:22px;

}

.benefit-icon i{

font-size:1.7rem;

}

.benefit-card h3{

font-size:1.3rem;

}

.benefit-card p{

font-size:.96rem;

line-height:1.8;

}

}

@media(max-width:576px){

.benefit-card{

padding:24px;

}

.benefit-icon{

width:64px;

height:64px;

border-radius:18px;

}

.benefit-icon i{

font-size:1.5rem;

}

.benefit-card h3{

font-size:1.15rem;

line-height:1.45;

}

.benefit-card p{

font-size:.94rem;

}

}

/*====================================================
SECTION 5 : WHY CHOOSE US
====================================================*/

.why-us-section{

position:relative;

padding:140px 0;

background:
linear-gradient(
180deg,
#071521 0%,
#081C2C 45%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}

/*==================================
Luxury Background
==================================*/

.why-us-section::before{

content:"";

position:absolute;

top:-240px;

left:-220px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(170px);

opacity:.10;

z-index:-2;

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

}

.why-us-section::after{

content:"";

position:absolute;

bottom:-220px;

right:-220px;

width:480px;

height:480px;

border-radius:50%;

background:#00B4FF;

filter:blur(170px);

opacity:.10;

z-index:-2;

animation:auroraFloat 18s ease-in-out infinite reverse;

}

/*==================================
Grid
==================================*/

.why-grid{

display:grid;

grid-template-columns:1.15fr .85fr;

gap:55px;

align-items:start;

margin-top:80px;

}

/*==================================
Left Content
==================================*/

.why-content{

position:relative;

padding:50px;

border-radius:32px;

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

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

backdrop-filter:blur(22px);

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

overflow:hidden;

transition:var(--transition);

box-shadow:

0 30px 70px rgba(0,0,0,.30);

}

.why-content::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}

.why-content:hover{

transform:translateY(-10px);

border-color:rgba(0,200,150,.25);

box-shadow:

0 40px 90px rgba(0,0,0,.35),

0 0 35px rgba(0,200,150,.08);

}

.why-content h3{

font-size:2rem;

line-height:1.3;

margin-bottom:24px;

color:#ffffff;

}

.why-content p{

font-size:1.03rem;

line-height:2;

color:#BDD3E3;

margin-bottom:22px;

}

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

.why-features{

display:grid;

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

gap:24px;

margin-top:45px;

}

.why-feature{

position:relative;

display:flex;

align-items:flex-start;

gap:18px;

padding:24px;

border-radius:22px;

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

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

overflow:hidden;

transition:all .45s cubic-bezier(.4,0,.2,1);

}

.why-feature::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent

);

transition:.9s ease;

}

.why-feature:hover::before{

left:150%;

}

.why-feature:hover{

transform:translateY(-8px);

border-color:rgba(0,200,150,.35);

box-shadow:

0 20px 45px rgba(0,0,0,.28),

0 0 30px rgba(0,200,150,.10);

}

/*====================================================
Feature Icon
====================================================*/

.feature-icon{

width:68px;

height:68px;

min-width:68px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:linear-gradient(
135deg,
rgba(0,200,150,.18),
rgba(0,180,255,.18)
);

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

box-shadow:

0 15px 35px rgba(0,180,255,.15);

transition:var(--transition);

}

.feature-icon i{

font-size:1.5rem;

background:linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.why-feature:hover .feature-icon{

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

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}

.why-feature h4{

font-size:1.15rem;

margin-bottom:10px;

color:#fff;

}

.why-feature p{

margin:0;

font-size:.95rem;

line-height:1.8;

color:#AFC6D7;

}

/*====================================================
RIGHT GLASS CARD
====================================================*/

.why-card{

position:sticky;

top:120px;

padding:40px;

border-radius:30px;

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

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

backdrop-filter:blur(24px);

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

overflow:hidden;

box-shadow:

0 30px 70px rgba(0,0,0,.30);

}

.why-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:30px;

background:linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.25)
);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

.why-card-header{

display:flex;

align-items:center;

gap:12px;

font-size:1.2rem;

font-weight:700;

color:#ffffff;

margin-bottom:28px;

}

.status-dot{

width:12px;

height:12px;

border-radius:50%;

background:#00E0A4;

box-shadow:

0 0 12px #00E0A4,

0 0 28px #00E0A4;

animation:pulseGlow 2s infinite;

}

/*====================================================
COMMITMENT LIST
====================================================*/

.commitment-list{

display:flex;

flex-direction:column;

gap:18px;

}

.commitment-item{

display:flex;

align-items:center;

gap:16px;

padding:18px;

border-radius:18px;

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

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

transition:var(--transition);

font-weight:500;

color:#EAF4FF;

}

.commitment-item span{

width:36px;

height:36px;

min-width:36px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

box-shadow:

0 12px 28px rgba(0,180,255,.18);

}

.commitment-item:hover{

transform:translateX(8px);

border-color:rgba(0,200,150,.30);

box-shadow:

0 15px 35px rgba(0,180,255,.12);

}

/*====================================================
BOTTOM COMMITMENT BOX
====================================================*/

.why-bottom{

position:relative;

margin-top:35px;

padding:28px;

border-radius:24px;

background:linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.06)
);

border:1px solid rgba(0,200,150,.15);

overflow:hidden;

}

.why-bottom::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:linear-gradient(
90deg,
#00C896,
#00B4FF
);

}

.why-bottom h4{

font-size:1.4rem;

font-weight:700;

color:#ffffff;

margin-bottom:15px;

}

.why-bottom p{

margin:0;

font-size:1rem;

line-height:1.9;

color:#BFD4E5;

}

/*====================================================
Luxury Hover Polish
====================================================*/

.why-card{

transition:all .45s cubic-bezier(.4,0,.2,1);

}

.why-card:hover{

transform:translateY(-10px);

border-color:rgba(0,200,150,.28);

box-shadow:

0 40px 90px rgba(0,0,0,.38),

0 0 40px rgba(0,200,150,.10),

0 0 70px rgba(0,180,255,.08);

}

.why-card:hover .status-dot{

box-shadow:

0 0 15px #00E0A4,

0 0 35px #00E0A4,

0 0 60px rgba(0,224,164,.45);

}

/*====================================================
Responsive
====================================================*/

@media (max-width:1100px){

.why-grid{

grid-template-columns:1fr;

gap:40px;

}

.why-card{

position:relative;

top:auto;

}

}

@media (max-width:768px){

.why-us-section{

padding:90px 0;

}

.why-grid{

margin-top:55px;

}

.why-content{

padding:35px;

}

.why-card{

padding:32px;

}

.why-features{

grid-template-columns:1fr;

gap:20px;

}

.why-feature{

padding:20px;

}

.feature-icon{

width:60px;

height:60px;

min-width:60px;

border-radius:18px;

}

.feature-icon i{

font-size:1.3rem;

}

.why-content h3{

font-size:1.7rem;

}

.why-bottom{

padding:24px;

}

.why-bottom h4{

font-size:1.25rem;

}

}

@media (max-width:576px){

.why-content{

padding:25px;

}

.why-card{

padding:24px;

border-radius:24px;

}

.why-feature{

flex-direction:column;

align-items:center;

text-align:center;

}

.feature-icon{

margin-bottom:10px;

}

.commitment-item{

align-items:flex-start;

font-size:.95rem;

}

.commitment-item span{

width:32px;

height:32px;

min-width:32px;

font-size:.85rem;

}

.why-bottom h4{

font-size:1.15rem;

}

.why-bottom p{

font-size:.95rem;

line-height:1.8;

}

}

/*====================================================
Accessibility
====================================================*/

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

.why-content,
.why-card,
.why-feature,
.commitment-item,
.feature-icon{

transition:none;

animation:none;

transform:none !important;

}

}

/*====================================================
SECTION 6 : ELIGIBILITY
====================================================*/

.eligibility-section{

position:relative;

padding:140px 0;

background:
linear-gradient(
135deg,
#06141F 0%,
#081C2C 35%,
#0A2235 65%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}

/*==================================
Luxury Background
==================================*/

.eligibility-section::before{

content:"";

position:absolute;

top:-220px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(170px);

opacity:.10;

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

z-index:-2;

}

.eligibility-section::after{

content:"";

position:absolute;

bottom:-220px;

left:-180px;

width:500px;

height:500px;

border-radius:50%;

background:#00B4FF;

filter:blur(170px);

opacity:.10;

animation:auroraFloat 16s ease-in-out infinite reverse;

z-index:-2;

}

/*==================================
Grid Layout
==================================*/

.eligibility-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

margin-top:80px;

}

/*==================================
Left Content
==================================*/

.eligibility-content{

position:relative;

padding:50px;

border-radius:32px;

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

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

backdrop-filter:blur(24px);

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

box-shadow:

0 30px 70px rgba(0,0,0,.30);

overflow:hidden;

transition:var(--transition);

}

.eligibility-content::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}

.eligibility-content:hover{

transform:translateY(-10px);

border-color:rgba(0,200,150,.28);

box-shadow:

0 40px 90px rgba(0,0,0,.35),

0 0 35px rgba(0,200,150,.08);

}

.eligibility-content h3{

font-size:2rem;

margin-bottom:24px;

line-height:1.3;

color:#ffffff;

}

.eligibility-content p{

font-size:1.02rem;

line-height:2;

color:#BDD3E3;

margin-bottom:22px;

}

/*====================================================
ELIGIBILITY INFORMATION NOTE
====================================================*/

.eligibility-note{

position:relative;

display:flex;

align-items:flex-start;

gap:18px;

margin-top:40px;

padding:26px;

border-radius:24px;

background:linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.06)
);

border:1px solid rgba(0,200,150,.18);

overflow:hidden;

}

.eligibility-note::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:linear-gradient(
90deg,
#00C896,
#00B4FF
);

}

.eligibility-note i{

width:54px;

height:54px;

min-width:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.3rem;

box-shadow:

0 15px 35px rgba(0,180,255,.20);

}

.eligibility-note p{

margin:0;

color:#D7E8F5;

line-height:1.9;

font-size:.98rem;

}

/*====================================================
ELIGIBILITY CARDS GRID
====================================================*/

.eligibility-cards{

display:grid;

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

gap:26px;

}

/*====================================================
LUXURY ELIGIBILITY CARD
====================================================*/

.eligibility-card{

position:relative;

padding:32px;

border-radius:28px;

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

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

backdrop-filter:blur(22px);

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

overflow:hidden;

transition:all .45s cubic-bezier(.4,0,.2,1);

box-shadow:

0 22px 55px rgba(0,0,0,.28);

}

.eligibility-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:28px;

background:linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.18)
);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

.eligibility-card::after{

content:"";

position:absolute;

top:-90px;

right:-90px;

width:180px;

height:180px;

border-radius:50%;

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

opacity:0;

transition:.45s ease;

}

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

.eligibility-icon{

width:74px;

height:74px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

margin-bottom:24px;

background:linear-gradient(
135deg,
rgba(0,200,150,.20),
rgba(0,180,255,.18)
);

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

box-shadow:

0 18px 40px rgba(0,180,255,.16);

transition:var(--transition);

}

.eligibility-icon i{

font-size:1.8rem;

background:linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

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

.eligibility-card h4{

font-size:1.28rem;

font-weight:700;

line-height:1.35;

color:#ffffff;

margin-bottom:14px;

transition:var(--transition);

}

.eligibility-card p{

margin:0;

font-size:.96rem;

line-height:1.8;

color:#BFD4E5;

transition:var(--transition);

}

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

.eligibility-card:hover{

transform:
translateY(-12px)
rotateX(3deg)
rotateY(-3deg);

border-color:rgba(0,200,150,.30);

box-shadow:

0 35px 80px rgba(0,0,0,.38),

0 0 35px rgba(0,200,150,.10),

0 0 60px rgba(0,180,255,.08);

}

.eligibility-card:hover::after{

opacity:1;

transform:scale(1.2);

}

.eligibility-card:hover .eligibility-icon{

transform:

translateY(-6px)

rotate(-6deg)

scale(1.08);

box-shadow:

0 22px 50px rgba(0,180,255,.25);

}

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

transform:scale(1.1);

}

.eligibility-card:hover h4{

color:#00E0A4;

}

.eligibility-card:hover p{

color:#EAF5FF;

}

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

@media(max-width:1100px){

.eligibility-grid{

grid-template-columns:1fr;

gap:40px;

}

.eligibility-cards{

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

}

}

@media(max-width:768px){

.eligibility-section{

padding:90px 0;

}

.eligibility-grid{

margin-top:55px;

}

.eligibility-content{

padding:35px;

}

.eligibility-cards{

grid-template-columns:1fr;

gap:22px;

}

.eligibility-card{

padding:28px;

}

.eligibility-icon{

width:68px;

height:68px;

border-radius:20px;

margin-bottom:20px;

}

.eligibility-icon i{

font-size:1.6rem;

}

.eligibility-content h3{

font-size:1.7rem;

}

.eligibility-note{

padding:22px;

}

}

@media(max-width:576px){

.eligibility-content{

padding:25px;

}

.eligibility-card{

padding:24px;

border-radius:24px;

}

.eligibility-note{

flex-direction:column;

align-items:flex-start;

padding:20px;

}

.eligibility-note i{

width:48px;

height:48px;

min-width:48px;

font-size:1.1rem;

}

.eligibility-card h4{

font-size:1.15rem;

}

.eligibility-card p{

font-size:.92rem;

line-height:1.7;

}

}

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

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

.eligibility-card,
.eligibility-content,
.eligibility-icon{

transition:none;

animation:none;

transform:none !important;

}

}

/*====================================================
SECTION 7 : DOCUMENTS REQUIRED
====================================================*/

.documents-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#071521 0%,
#081C2C 50%,
#06141F 100%
);

overflow:hidden;

isolation:isolate;

}


/*==================================
Background Glow
==================================*/


.documents-section::before{

content:"";

position:absolute;

top:-220px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(170px);

opacity:.10;

z-index:-2;

}


.documents-section::after{

content:"";

position:absolute;

bottom:-220px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(170px);

opacity:.10;

z-index:-2;

}


/*==================================
Wrapper
==================================*/


.documents-wrapper{

display:flex;

flex-direction:column;

gap:70px;

margin-top:80px;

}


/*==================================
Document Group
==================================*/


.document-group{

position:relative;

padding:45px;

border-radius:32px;

background:

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

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

backdrop-filter:blur(24px);

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

box-shadow:

0 30px 70px rgba(0,0,0,.30);

overflow:hidden;

}


.document-group::before{

content:"";

position:absolute;

top:0;

left:0;

height:2px;

width:100%;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



/*==================================
Document Header
==================================*/


.document-header{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

margin-bottom:40px;

}


.document-title{

display:flex;

align-items:center;

gap:18px;

}


.document-title i{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.20),
rgba(0,180,255,.20)
);

color:#00E0A4;

font-size:1.5rem;

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

box-shadow:

0 15px 35px rgba(0,180,255,.15);

}


.document-title h3{

font-size:1.8rem;

color:#ffffff;

margin:0;

}



/*==================================
Badge
==================================*/


.document-badge{

padding:10px 22px;

border-radius:50px;

font-size:.85rem;

font-weight:700;

background:

rgba(0,200,150,.15);

border:1px solid rgba(0,200,150,.30);

color:#00E0A4;

}


.document-badge.optional{

background:

rgba(0,180,255,.15);

border-color:

rgba(0,180,255,.30);

color:#00B4FF;

}

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

.documents-grid{

display:grid;

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

gap:26px;

}


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


.document-card{

position:relative;

padding:30px;

border-radius:26px;

background:

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

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

overflow:hidden;

transition:

all .45s cubic-bezier(.4,0,.2,1);

box-shadow:

0 20px 50px rgba(0,0,0,.25);

}


/* Animated Border */

.document-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:26px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.25)
);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}



/* Glow Orb */

.document-card::after{

content:"";

position:absolute;

width:170px;

height:170px;

right:-80px;

top:-80px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.20),
transparent 70%
);

opacity:0;

transition:.45s ease;

}



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


.document-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

margin-bottom:24px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.18),
rgba(0,180,255,.18)
);

border:

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

box-shadow:

0 18px 40px rgba(0,180,255,.15);

transition:

all .45s ease;

}


.document-icon i{

font-size:1.8rem;

background:

linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

transition:.4s ease;

}



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


.document-card h4{

font-size:1.25rem;

font-weight:700;

color:#ffffff;

margin-bottom:14px;

line-height:1.4;

transition:.35s ease;

}


.document-card p{

font-size:.95rem;

line-height:1.8;

color:#BFD4E5;

margin:0;

}



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


.document-card:hover{

transform:

translateY(-12px)

rotateX(3deg)

rotateY(-3deg);

border-color:

rgba(0,200,150,.30);


box-shadow:

0 35px 80px rgba(0,0,0,.38),

0 0 40px rgba(0,200,150,.10),

0 0 60px rgba(0,180,255,.08);

}



.document-card:hover::after{

opacity:1;

transform:scale(1.15);

}



.document-card:hover .document-icon{

transform:

translateY(-8px)

rotate(-8deg)

scale(1.08);


box-shadow:

0 25px 50px rgba(0,180,255,.25);

}



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

transform:scale(1.12);

}



.document-card:hover h4{

color:#00E0A4;

}



/*====================================================
SECONDARY DOCUMENT GROUP
====================================================*/


.secondary-documents{

margin-top:10px;

}

/*====================================================
DOCUMENT NOTE
====================================================*/

.document-note{

position:relative;

display:flex;

align-items:center;

gap:20px;

margin-top:55px;

padding:30px 35px;

border-radius:28px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:1px solid rgba(0,200,150,.18);

overflow:hidden;

}


.document-note::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



.document-note i{

width:58px;

height:58px;

min-width:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.4rem;

box-shadow:

0 18px 40px rgba(0,180,255,.22);

}



.document-note p{

margin:0;

font-size:1rem;

line-height:1.9;

color:#D8EAF7;

}



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

.document-group{

animation:

documentFloat 8s ease-in-out infinite;

}


@keyframes documentFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-6px);

}


100%{

transform:translateY(0);

}


}



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


@media(max-width:1200px){


.documents-grid{

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

}


.document-title h3{

font-size:1.6rem;

}


}



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


@media(max-width:768px){


.documents-section{

padding:90px 0;

}



.documents-wrapper{

gap:45px;

margin-top:55px;

}



.document-group{

padding:30px;

border-radius:26px;

}



.document-header{

align-items:flex-start;

flex-direction:column;

}



.document-title h3{

font-size:1.35rem;

}



.documents-grid{

grid-template-columns:1fr;

gap:22px;

}



.document-card{

padding:26px;

}



.document-icon{

width:65px;

height:65px;

border-radius:18px;

}



.document-icon i{

font-size:1.5rem;

}



.document-note{

flex-direction:column;

align-items:flex-start;

padding:25px;

}



}



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


@media(max-width:576px){


.document-group{

padding:22px;

}



.document-card{

border-radius:22px;

padding:22px;

}



.document-card h4{

font-size:1.15rem;

}



.document-card p{

font-size:.92rem;

line-height:1.7;

}



.document-note i{

width:48px;

height:48px;

min-width:48px;

font-size:1.1rem;

}



.document-note p{

font-size:.94rem;

}



}



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


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


.document-group,
.document-card,
.document-icon{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 8 : MSME REGISTRATION PROCESS
====================================================*/

.process-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#06141F 0%,
#081C2C 50%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}


/*==================================
Background Glow
==================================*/


.process-section::before{

content:"";

position:absolute;

top:-200px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(170px);

opacity:.10;

z-index:-2;

}



.process-section::after{

content:"";

position:absolute;

bottom:-200px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(170px);

opacity:.10;

z-index:-2;

}


/*==================================
Timeline Wrapper
==================================*/


.process-timeline{

position:relative;

max-width:950px;

margin:90px auto 0;

padding-left:40px;

}



/*==================================
Vertical Line
==================================*/


.process-timeline::before{

content:"";

position:absolute;

left:20px;

top:0;

height:100%;

width:2px;

background:

linear-gradient(
180deg,
#00C896,
#00B4FF,
#00C896
);

opacity:.45;

}



/*==================================
Process Item
==================================*/


.process-item{

position:relative;

display:flex;

gap:40px;

margin-bottom:55px;

}



/*==================================
Number Circle
==================================*/


.process-number{

position:absolute;

left:-40px;

top:25px;

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.2rem;

font-weight:800;

box-shadow:

0 20px 45px rgba(0,180,255,.25),

0 0 30px rgba(0,200,150,.25);

z-index:2;

}



/*==================================
Process Content Card
==================================*/


.process-content{

position:relative;

width:100%;

padding:35px;

border-radius:30px;

background:

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

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

backdrop-filter:blur(22px);

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

box-shadow:

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

overflow:hidden;

transition:

all .45s cubic-bezier(.4,0,.2,1);

}



.process-content::before{

content:"";

position:absolute;

top:0;

left:0;

height:2px;

width:100%;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}

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

.process-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

margin-bottom:25px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.18),
rgba(0,180,255,.18)
);

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

box-shadow:

0 18px 40px rgba(0,180,255,.15);

transition:

all .45s ease;

}



.process-icon i{

font-size:1.8rem;

background:

linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



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


.process-content h3{

font-size:1.5rem;

font-weight:700;

line-height:1.4;

color:#ffffff;

margin-bottom:16px;

transition:.35s ease;

}



.process-content p{

font-size:1rem;

line-height:1.9;

color:#BFD4E5;

margin:0;

}



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


.process-content:hover{

transform:

translateY(-12px)

rotateX(3deg);

border-color:

rgba(0,200,150,.30);


box-shadow:

0 40px 85px rgba(0,0,0,.40),

0 0 35px rgba(0,200,150,.10),

0 0 55px rgba(0,180,255,.08);

}



.process-content:hover .process-icon{

transform:

translateY(-8px)

rotate(-8deg)

scale(1.08);


box-shadow:

0 25px 50px rgba(0,180,255,.25);

}



.process-content:hover h3{

color:#00E0A4;

}



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


.process-item:hover .process-number{

transform:

scale(1.12);

box-shadow:

0 25px 55px rgba(0,180,255,.35),

0 0 45px rgba(0,200,150,.35);

}



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


.process-number{

transition:

all .4s ease;

}



/*====================================================
TIMELINE GLOW DOT
====================================================*/


.process-item::before{

content:"";

position:absolute;

left:-27px;

top:52px;

width:16px;

height:16px;

border-radius:50%;

background:#00E0A4;

box-shadow:

0 0 20px #00E0A4,

0 0 40px rgba(0,224,164,.5);

z-index:1;

}



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


.process-content::after{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:240px;

height:240px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.18),
transparent 70%
);

opacity:0;

transition:.45s ease;

}



.process-content:hover::after{

opacity:1;

transform:scale(1.2);

}

/*====================================================
PROCESS NOTE / CTA BOX
====================================================*/

.process-note{

position:relative;

display:flex;

align-items:center;

gap:22px;

margin:60px auto 0;

max-width:950px;

padding:32px 38px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:1px solid rgba(0,200,150,.18);

overflow:hidden;

}


.process-note::before{

content:"";

position:absolute;

top:0;

left:0;

height:2px;

width:100%;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



.process-note i{

width:62px;

height:62px;

min-width:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:white;

font-size:1.5rem;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}



.process-note p{

margin:0;

font-size:1.05rem;

line-height:1.9;

color:#D8EAF7;

}



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


.process-content{

animation:

processFloat 8s ease-in-out infinite;

}



.process-item:nth-child(even) .process-content{

animation-delay:1.5s;

}



@keyframes processFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-5px);

}


100%{

transform:translateY(0);

}


}



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


@media(max-width:900px){


.process-timeline{

padding-left:35px;

}



.process-content{

padding:30px;

}



.process-number{

width:60px;

height:60px;

font-size:1rem;

}



.process-item{

gap:25px;

}



}



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


@media(max-width:768px){


.process-section{

padding:90px 0;

}



.process-timeline{

margin-top:55px;

padding-left:30px;

}



.process-timeline::before{

left:15px;

}



.process-item{

gap:20px;

margin-bottom:40px;

}



.process-number{

left:-35px;

width:55px;

height:55px;

font-size:.9rem;

}



.process-item::before{

left:-20px;

width:12px;

height:12px;

top:45px;

}



.process-content{

padding:25px;

border-radius:24px;

}



.process-icon{

width:62px;

height:62px;

border-radius:18px;

}



.process-icon i{

font-size:1.5rem;

}



.process-content h3{

font-size:1.25rem;

}



.process-content p{

font-size:.94rem;

line-height:1.75;

}



.process-note{

flex-direction:column;

align-items:flex-start;

padding:25px;

margin-top:40px;

}



}



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


@media(max-width:576px){


.process-timeline{

padding-left:25px;

}



.process-timeline::before{

left:12px;

}



.process-number{

left:-30px;

width:48px;

height:48px;

}



.process-item::before{

left:-17px;

}



.process-content{

padding:22px;

}



.process-note i{

width:50px;

height:50px;

min-width:50px;

font-size:1.2rem;

}



.process-note p{

font-size:.95rem;

}


}



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


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


.process-content,
.process-number,
.process-icon{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 9 : FEES & SERVICE CHARGES
====================================================*/

.fees-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#071521 0%,
#081C2C 50%,
#06141F 100%
);

overflow:hidden;

isolation:isolate;

}


/*==================================
Background Glow
==================================*/


.fees-section::before{

content:"";

position:absolute;

top:-220px;

left:-200px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(170px);

opacity:.10;

z-index:-2;

}



.fees-section::after{

content:"";

position:absolute;

bottom:-220px;

right:-200px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(170px);

opacity:.10;

z-index:-2;

}



/*==================================
Fees Grid
==================================*/


.fees-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:45px;

align-items:center;

margin-top:80px;

}



/*==================================
Premium Pricing Card
==================================*/


.fees-card{

position:relative;

padding:45px;

border-radius:34px;

background:

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

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

backdrop-filter:blur(25px);

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

overflow:hidden;

box-shadow:

0 35px 80px rgba(0,0,0,.35);

transition:

all .45s cubic-bezier(.4,0,.2,1);

}



.fees-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:34px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.65),
rgba(0,180,255,.35)
);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}



/*==================================
Recommended Badge
==================================*/


.fees-badge{

position:absolute;

top:25px;

right:25px;

padding:10px 22px;

border-radius:50px;

font-size:.82rem;

font-weight:700;

color:#ffffff;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

box-shadow:

0 15px 35px rgba(0,180,255,.25);

}


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

.fees-icon{

width:82px;

height:82px;

display:flex;

align-items:center;

justify-content:center;

border-radius:26px;

margin-bottom:28px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.20),
rgba(0,180,255,.20)
);

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

box-shadow:

0 20px 45px rgba(0,180,255,.18);

transition:.45s ease;

}



.fees-icon i{

font-size:2rem;

background:

linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



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


.fees-card h3{

font-size:1.8rem;

line-height:1.4;

font-weight:750;

color:#ffffff;

margin-bottom:18px;

}



.fees-description{

font-size:1rem;

line-height:1.9;

color:#BFD4E5;

margin-bottom:30px;

}



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


.fees-card ul{

list-style:none;

padding:0;

margin:0 0 35px;

display:flex;

flex-direction:column;

gap:16px;

}



.fees-card ul li{

display:flex;

align-items:center;

gap:14px;

font-size:1rem;

color:#E6F2FC;

}



.fees-card ul li i{

width:28px;

height:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

font-size:.75rem;

color:#ffffff;

box-shadow:

0 10px 25px rgba(0,180,255,.20);

}



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


.fees-btn{

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:50px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-weight:700;

font-size:1rem;

text-decoration:none;

overflow:hidden;

transition:.45s ease;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}



.fees-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:

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

transition:.8s ease;

}



.fees-btn:hover::before{

left:150%;

}



.fees-btn:hover{

transform:translateY(-5px);

box-shadow:

0 30px 65px rgba(0,180,255,.35);

color:#ffffff;

}



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


.fees-card:hover{

transform:translateY(-12px);

border-color:

rgba(0,200,150,.35);


box-shadow:

0 45px 100px rgba(0,0,0,.40),

0 0 40px rgba(0,200,150,.10);

}



.fees-card:hover .fees-icon{

transform:

rotate(-8deg)

scale(1.08);

}



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


.fees-card{

animation:

feesFloat 8s ease-in-out infinite;

}



@keyframes feesFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-5px);

}


100%{

transform:translateY(0);

}


}

/*====================================================
FEES INFORMATION CARD
====================================================*/

.fees-info-card{

position:relative;

padding:42px;

border-radius:34px;

background:

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

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

backdrop-filter:blur(24px);

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

box-shadow:

0 30px 70px rgba(0,0,0,.30);

overflow:hidden;

}



.fees-info-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:2px;

width:100%;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



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


.info-header{

display:flex;

align-items:center;

gap:18px;

margin-bottom:35px;

}



.info-header i{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.20),
rgba(0,180,255,.20)
);

color:#00E0A4;

font-size:1.4rem;

}



.info-header h3{

margin:0;

font-size:1.5rem;

color:#ffffff;

}



/*====================================================
INFO ITEMS
====================================================*/


.info-item{

display:flex;

align-items:flex-start;

gap:18px;

padding:22px 0;

border-bottom:

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

}



.info-item:last-child{

border-bottom:none;

}



.info-item span{

width:46px;

height:46px;

min-width:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

}



.info-item p{

margin:0;

font-size:.96rem;

line-height:1.8;

color:#C9DDEC;

}



/*====================================================
BOTTOM TRUST BOX
====================================================*/


.fees-bottom{

display:flex;

align-items:center;

gap:20px;

margin-top:60px;

padding:30px 35px;

border-radius:28px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:1px solid rgba(0,200,150,.18);

}



.fees-bottom i{

width:60px;

height:60px;

min-width:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.4rem;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}



.fees-bottom p{

margin:0;

font-size:1rem;

line-height:1.9;

color:#D8EAF7;

}



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


@media(max-width:1000px){


.fees-grid{

grid-template-columns:1fr;

gap:35px;

}



.fees-card,
.fees-info-card{

padding:35px;

}


}



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


@media(max-width:768px){


.fees-section{

padding:90px 0;

}



.fees-grid{

margin-top:55px;

}



.fees-card,
.fees-info-card{

padding:28px;

border-radius:28px;

}



.fees-card h3{

font-size:1.5rem;

}



.fees-icon{

width:70px;

height:70px;

}



.fees-badge{

top:18px;

right:18px;

padding:8px 16px;

}



.info-header h3{

font-size:1.25rem;

}



.fees-bottom{

flex-direction:column;

align-items:flex-start;

padding:25px;

}



}



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


@media(max-width:576px){


.fees-card,
.fees-info-card{

padding:22px;

}



.fees-card ul li{

font-size:.92rem;

}



.fees-btn{

width:100%;

}



.info-item{

gap:12px;

}



.info-item p{

font-size:.9rem;

}



}

/*====================================================
SECTION 10 : GOVERNMENT BENEFITS
====================================================*/

.government-benefits-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#06141F 0%,
#081C2C 50%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}


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


.government-benefits-section::before{

content:"";

position:absolute;

top:-220px;

right:-200px;

width:540px;

height:540px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



.government-benefits-section::after{

content:"";

position:absolute;

bottom:-220px;

left:-200px;

width:540px;

height:540px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



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


.government-benefits-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:80px;

}



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


.benefit-box{

position:relative;

padding:38px 32px;

border-radius:30px;

background:

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

border:

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

backdrop-filter:

blur(22px);

-webkit-backdrop-filter:

blur(22px);

overflow:hidden;

box-shadow:

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

transition:

all .45s cubic-bezier(.4,0,.2,1);

}



/* Gradient Border */


.benefit-box::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.25)
);


-webkit-mask:

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

linear-gradient(#fff 0 0);


-webkit-mask-composite:xor;

mask-composite:exclude;

}



/* Glow Circle */


.benefit-box::after{

content:"";

position:absolute;

top:-100px;

right:-100px;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.20),
transparent 70%
);

opacity:0;

transition:.45s ease;

}

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

.benefit-icon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

margin-bottom:26px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.18),
rgba(0,180,255,.18)
);

border:

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

box-shadow:

0 20px 45px rgba(0,180,255,.16);

transition:

all .45s ease;

}



.benefit-icon i{

font-size:2rem;

background:

linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

transition:.4s ease;

}



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


.benefit-box h3{

font-size:1.35rem;

font-weight:750;

line-height:1.4;

color:#ffffff;

margin-bottom:16px;

transition:.35s ease;

}



.benefit-box p{

font-size:.96rem;

line-height:1.85;

color:#BFD4E5;

margin:0;

transition:.35s ease;

}



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


.benefit-box:hover{

transform:

translateY(-14px)

rotateX(3deg)

rotateY(-3deg);


border-color:

rgba(0,200,150,.35);


box-shadow:

0 45px 95px rgba(0,0,0,.40),

0 0 45px rgba(0,200,150,.12),

0 0 70px rgba(0,180,255,.08);

}



.benefit-box:hover::after{

opacity:1;

transform:scale(1.2);

}



.benefit-box:hover .benefit-icon{

transform:

translateY(-8px)

rotate(-8deg)

scale(1.08);


box-shadow:

0 28px 55px rgba(0,180,255,.25);

}



.benefit-box:hover .benefit-icon i{

transform:scale(1.12);

}



.benefit-box:hover h3{

color:#00E0A4;

}



.benefit-box:hover p{

color:#E8F5FF;

}



/*====================================================
CARD FLOAT EFFECT
====================================================*/


.benefit-box{

animation:

benefitFloat 9s ease-in-out infinite;

}



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

animation-delay:1s;

}


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

animation-delay:2s;

}


.benefit-box:nth-child(4){

animation-delay:1.5s;

}


.benefit-box:nth-child(5){

animation-delay:2.5s;

}


.benefit-box:nth-child(6){

animation-delay:3s;

}



@keyframes benefitFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-6px);

}


100%{

transform:translateY(0);

}


}

/*====================================================
BENEFITS HIGHLIGHT BOX
====================================================*/

.benefits-highlight{

position:relative;

display:flex;

align-items:center;

gap:22px;

margin-top:65px;

padding:32px 38px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:

1px solid rgba(0,200,150,.18);

overflow:hidden;

}



.benefits-highlight::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



.benefits-highlight i{

width:62px;

height:62px;

min-width:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.5rem;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}



.benefits-highlight p{

margin:0;

font-size:1.05rem;

line-height:1.9;

color:#D8EAF7;

}



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


@media(max-width:1100px){


.government-benefits-grid{

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

}



}



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


@media(max-width:768px){


.government-benefits-section{

padding:90px 0;

}



.government-benefits-grid{

grid-template-columns:1fr;

gap:22px;

margin-top:55px;

}



.benefit-box{

padding:30px;

border-radius:26px;

}



.benefit-icon{

width:68px;

height:68px;

border-radius:20px;

}



.benefit-icon i{

font-size:1.7rem;

}



.benefit-box h3{

font-size:1.2rem;

}



.benefit-box p{

font-size:.94rem;

line-height:1.75;

}



.benefits-highlight{

flex-direction:column;

align-items:flex-start;

padding:25px;

margin-top:45px;

}



}



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


@media(max-width:576px){


.benefit-box{

padding:24px;

}



.benefit-box h3{

font-size:1.15rem;

}



.benefit-box p{

font-size:.9rem;

}



.benefits-highlight i{

width:50px;

height:50px;

min-width:50px;

font-size:1.2rem;

}



.benefits-highlight p{

font-size:.94rem;

}



}



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


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


.benefit-box,
.benefit-icon{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 11 : COMMON MISTAKES
====================================================*/

.mistakes-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#071521 0%,
#081C2C 50%,
#06141F 100%
);

overflow:hidden;

isolation:isolate;

}



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


.mistakes-section::before{

content:"";

position:absolute;

top:-220px;

left:-200px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



.mistakes-section::after{

content:"";

position:absolute;

bottom:-220px;

right:-200px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



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


.mistakes-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:32px;

margin-top:80px;

}



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


.mistake-card{

position:relative;

display:flex;

gap:25px;

padding:35px;

border-radius:32px;

background:

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

border:

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

backdrop-filter:

blur(22px);

-webkit-backdrop-filter:

blur(22px);

overflow:hidden;

box-shadow:

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

transition:

all .45s cubic-bezier(.4,0,.2,1);

}



/* Premium Border */


.mistake-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:32px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.40),
rgba(0,180,255,.25)
);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}



/* Glow Effect */


.mistake-card::after{

content:"";

position:absolute;

width:200px;

height:200px;

top:-100px;

right:-100px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.20),
transparent 70%
);

opacity:0;

transition:.45s ease;

}

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

.mistake-icon{

width:78px;

height:78px;

min-width:78px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

background:

linear-gradient(
135deg,
rgba(255,80,80,.18),
rgba(255,160,60,.12)
);

border:

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

box-shadow:

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

transition:

all .45s ease;

}



.mistake-icon i{

font-size:2rem;

color:#FF8A65;

}



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


.mistake-content h3{

font-size:1.35rem;

font-weight:750;

color:#ffffff;

line-height:1.4;

margin-bottom:15px;

transition:.35s ease;

}



.mistake-content p{

font-size:.96rem;

line-height:1.85;

color:#BFD4E5;

margin-bottom:22px;

}



/*====================================================
SOLUTION BOX
====================================================*/


.solution-box{

display:flex;

align-items:flex-start;

gap:10px;

padding:15px 18px;

border-radius:18px;

background:

rgba(0,200,150,.08);

border:

1px solid rgba(0,200,150,.18);

}



.solution-box strong{

color:#00E0A4;

font-size:.95rem;

white-space:nowrap;

}



.solution-box span{

color:#D7EAF7;

font-size:.92rem;

line-height:1.7;

}



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


.mistake-card:hover{

transform:

translateY(-12px)

rotateX(3deg)

rotateY(-3deg);


border-color:

rgba(0,200,150,.35);


box-shadow:

0 45px 95px rgba(0,0,0,.42),

0 0 40px rgba(0,200,150,.12),

0 0 60px rgba(0,180,255,.08);

}



.mistake-card:hover::after{

opacity:1;

transform:scale(1.2);

}



.mistake-card:hover .mistake-icon{

transform:

translateY(-8px)

rotate(-8deg)

scale(1.08);


box-shadow:

0 28px 55px rgba(255,80,80,.25);

}



.mistake-card:hover h3{

color:#00E0A4;

}



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


.mistake-icon i{

transition:.4s ease;

}


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

transform:scale(1.15);

}



/*====================================================
FLOATING EFFECT
====================================================*/


.mistake-card{

animation:

mistakeFloat 9s ease-in-out infinite;

}



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

animation-delay:1.5s;

}


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

animation-delay:2.5s;

}


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

animation-delay:3.5s;

}



@keyframes mistakeFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-6px);

}


100%{

transform:translateY(0);

}


}

/*====================================================
MISTAKES HIGHLIGHT BOX
====================================================*/

.mistakes-highlight{

position:relative;

display:flex;

align-items:center;

gap:22px;

margin-top:65px;

padding:32px 38px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:

1px solid rgba(0,200,150,.18);

overflow:hidden;

}



.mistakes-highlight::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



.mistakes-highlight i{

width:62px;

height:62px;

min-width:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.5rem;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}



.mistakes-highlight p{

margin:0;

font-size:1.05rem;

line-height:1.9;

color:#D8EAF7;

}



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


@media(max-width:1000px){


.mistakes-grid{

grid-template-columns:1fr;

}


}



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


@media(max-width:768px){


.mistakes-section{

padding:90px 0;

}



.mistakes-grid{

margin-top:55px;

gap:22px;

}



.mistake-card{

flex-direction:column;

padding:28px;

border-radius:26px;

}



.mistake-icon{

width:68px;

height:68px;

min-width:68px;

border-radius:20px;

}



.mistake-icon i{

font-size:1.7rem;

}



.mistake-content h3{

font-size:1.2rem;

}



.mistake-content p{

font-size:.94rem;

line-height:1.75;

}



.solution-box{

flex-direction:column;

gap:6px;

}



.mistakes-highlight{

flex-direction:column;

align-items:flex-start;

padding:25px;

margin-top:45px;

}


}



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


@media(max-width:576px){


.mistake-card{

padding:22px;

}



.mistake-content h3{

font-size:1.15rem;

}



.mistake-content p{

font-size:.9rem;

}



.solution-box{

padding:14px;

}



.solution-box span{

font-size:.88rem;

}



.mistakes-highlight i{

width:50px;

height:50px;

min-width:50px;

font-size:1.2rem;

}



.mistakes-highlight p{

font-size:.94rem;

}


}



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


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


.mistake-card,
.mistake-icon{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 12 : MSME FAQ SECTION
====================================================*/


.msme-faq-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#06141F 0%,
#081C2C 50%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}



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


.msme-faq-section::before{

content:"";

position:absolute;

top:-220px;

right:-200px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



.msme-faq-section::after{

content:"";

position:absolute;

bottom:-220px;

left:-200px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



/*==================================
FAQ WRAPPER
==================================*/


.faq-wrapper{

max-width:950px;

margin:80px auto 0;

display:flex;

flex-direction:column;

gap:22px;

}



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


.faq-item{

position:relative;

border-radius:26px;

background:

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

border:

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

backdrop-filter:

blur(22px);

-webkit-backdrop-filter:

blur(22px);

overflow:hidden;

box-shadow:

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

transition:

all .45s ease;

}



/* Gradient Top Line */


.faq-item::before{

content:"";

position:absolute;

top:0;

left:0;

height:2px;

width:100%;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

opacity:.7;

}



/*==================================
FAQ QUESTION BUTTON
==================================*/


.faq-question{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:28px 32px;

background:none;

border:none;

cursor:pointer;

font-size:1.12rem;

font-weight:700;

color:#ffffff;

text-align:left;

}



.faq-question span{

width:42px;

height:42px;

min-width:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

transition:.4s ease;

box-shadow:

0 15px 35px rgba(0,180,255,.25);

}

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


.faq-answer{

max-height:0;

overflow:hidden;

transition:

max-height .45s ease,

padding .45s ease;

}



.faq-answer p{

margin:0;

padding:0 32px 28px;

font-size:1rem;

line-height:1.85;

color:#BFD4E5;

}



/*====================================================
ACTIVE FAQ STATE
====================================================*/


.faq-item.active{

border-color:

rgba(0,200,150,.35);


box-shadow:

0 40px 90px rgba(0,0,0,.40),

0 0 40px rgba(0,200,150,.10);

}



.faq-item.active .faq-question{

color:#00E0A4;

}



.faq-item.active .faq-question span{

transform:

rotate(45deg);

box-shadow:

0 20px 45px rgba(0,200,150,.35);

}



.faq-item.active .faq-answer{

max-height:300px;

}



/*====================================================
FAQ HOVER EFFECT
====================================================*/


.faq-item:hover{

transform:

translateY(-8px);

border-color:

rgba(0,180,255,.30);

}



.faq-item:hover .faq-question span{

transform:

scale(1.08);

}



/*====================================================
QUESTION TEXT EFFECT
====================================================*/


.faq-question{

transition:.35s ease;

}



.faq-question:hover{

color:#00E0A4;

}



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


.faq-question i{

font-size:.95rem;

transition:

transform .4s ease;

}



/*====================================================
SMOOTH GLOW EFFECT
====================================================*/


.faq-item.active::after{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:250px;

height:250px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.18),
transparent 70%
);

pointer-events:none;

}

/*====================================================
FAQ TRUST BOX
====================================================*/


.faq-trust-box{

position:relative;

display:flex;

align-items:center;

gap:22px;

max-width:950px;

margin:65px auto 0;

padding:32px 38px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:

1px solid rgba(0,200,150,.18);

overflow:hidden;

}



.faq-trust-box::before{

content:"";

position:absolute;

top:0;

left:0;

height:2px;

width:100%;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



.faq-trust-box i{

width:62px;

height:62px;

min-width:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.5rem;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}



.faq-trust-box p{

margin:0;

font-size:1.05rem;

line-height:1.9;

color:#D8EAF7;

}



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


@media(max-width:900px){


.faq-question{

padding:24px 25px;

font-size:1rem;

}



.faq-answer p{

padding:

0 25px 25px;

}


}



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


@media(max-width:768px){


.msme-faq-section{

padding:90px 0;

}



.faq-wrapper{

margin-top:55px;

gap:18px;

}



.faq-item{

border-radius:22px;

}



.faq-question{

padding:22px;

font-size:1rem;

}



.faq-question span{

width:36px;

height:36px;

min-width:36px;

}



.faq-answer p{

padding:

0 22px 22px;

font-size:.94rem;

line-height:1.75;

}



.faq-trust-box{

flex-direction:column;

align-items:flex-start;

padding:25px;

margin-top:45px;

}



}



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


@media(max-width:576px){


.faq-wrapper{

gap:15px;

}



.faq-question{

padding:20px;

font-size:.95rem;

}



.faq-question span{

width:32px;

height:32px;

min-width:32px;

}



.faq-question i{

font-size:.8rem;

}



.faq-answer p{

font-size:.9rem;

}



.faq-trust-box i{

width:50px;

height:50px;

min-width:50px;

font-size:1.2rem;

}



.faq-trust-box p{

font-size:.94rem;

}


}



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


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


.faq-item,
.faq-question span{

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 13 : MSME CTA SECTION
====================================================*/


.msme-cta-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#071521 0%,
#081C2C 50%,
#06141F 100%
);

overflow:hidden;

isolation:isolate;

}



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


.msme-cta-section::before{

content:"";

position:absolute;

top:-220px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.12;

z-index:-2;

}



.msme-cta-section::after{

content:"";

position:absolute;

bottom:-220px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.12;

z-index:-2;

}



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


.cta-wrapper{

display:grid;

grid-template-columns:

1fr 1fr;

gap:60px;

align-items:center;

}



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


.cta-content h2{

font-size:

clamp(2rem,4vw,3rem);

font-weight:800;

line-height:1.25;

color:#ffffff;

margin:25px 0;

}



.cta-content p{

font-size:1.08rem;

line-height:1.9;

color:#BFD4E5;

max-width:560px;

}



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


.cta-points{

display:flex;

flex-direction:column;

gap:18px;

margin-top:35px;

}



.cta-point{

display:flex;

align-items:center;

gap:15px;

font-size:1rem;

color:#E7F3FC;

}



.cta-point i{

font-size:1.3rem;

color:#00E0A4;

filter:

drop-shadow(0 0 12px rgba(0,224,164,.5));

}

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


.cta-form-card{

position:relative;

padding:42px;

border-radius:35px;

background:

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

border:

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

backdrop-filter:

blur(25px);

-webkit-backdrop-filter:

blur(25px);

box-shadow:

0 35px 80px rgba(0,0,0,.35);

overflow:hidden;

}



/* Premium Border */

.cta-form-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:35px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.50),
rgba(0,180,255,.35)
);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}



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


.form-heading{

margin-bottom:30px;

}



.form-heading h3{

font-size:1.8rem;

font-weight:750;

color:#ffffff;

margin-bottom:12px;

}



.form-heading p{

font-size:.95rem;

color:#BFD4E5;

margin:0;

}



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


.form-group{

margin-bottom:18px;

}



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

width:100%;

padding:16px 18px;

border-radius:16px;

background:

rgba(255,255,255,.06);

border:

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

color:#ffffff;

font-size:.95rem;

outline:none;

transition:.35s ease;

}



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

color:#9DB4C8;

}



.form-group select{

cursor:pointer;

}



.form-group select option{

background:#071521;

color:#ffffff;

}



.form-group textarea{

resize:none;

}



/* Input Focus */

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

border-color:#00C896;

box-shadow:

0 0 25px rgba(0,200,150,.15);

background:

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

}



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


.cta-submit-btn{

position:relative;

width:100%;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:17px 30px;

border:none;

border-radius:50px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1rem;

font-weight:700;

cursor:pointer;

overflow:hidden;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

transition:.45s ease;

}



.cta-submit-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:

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

transition:.8s ease;

}



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

left:150%;

}



.cta-submit-btn:hover{

transform:

translateY(-5px);

box-shadow:

0 35px 70px rgba(0,180,255,.35);

}



.cta-submit-btn i{

transition:.35s ease;

}



.cta-submit-btn:hover i{

transform:

translateX(6px);

}

/*====================================================
CTA CARD FLOAT ANIMATION
====================================================*/


.cta-form-card{

animation:

ctaFloat 8s ease-in-out infinite;

}



@keyframes ctaFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-8px);

}


100%{

transform:translateY(0);

}


}



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


@media(max-width:1000px){


.cta-wrapper{

grid-template-columns:1fr;

gap:45px;

}



.cta-content{

text-align:center;

}



.cta-content p{

margin-left:auto;

margin-right:auto;

}



.cta-points{

align-items:center;

}



.cta-form-card{

max-width:600px;

margin:auto;

}


}



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


@media(max-width:768px){


.msme-cta-section{

padding:90px 0;

}



.cta-wrapper{

gap:35px;

}



.cta-content h2{

font-size:2rem;

}



.cta-content p{

font-size:.95rem;

line-height:1.75;

}



.cta-point{

font-size:.94rem;

}



.cta-form-card{

padding:28px;

border-radius:28px;

}



.form-heading h3{

font-size:1.45rem;

}



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

padding:14px 16px;

}



.cta-submit-btn{

padding:15px 25px;

}


}



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


@media(max-width:576px){


.cta-content h2{

font-size:1.65rem;

}



.cta-content p{

font-size:.9rem;

}



.cta-points{

gap:14px;

}



.cta-point{

align-items:flex-start;

}



.cta-form-card{

padding:22px;

}



.form-heading p{

font-size:.9rem;

}



.cta-submit-btn{

font-size:.95rem;

}


}



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


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


.cta-form-card,
.cta-submit-btn{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 14 : RELATED SERVICES
====================================================*/


.related-services-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#06141F 0%,
#081C2C 50%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}



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


.related-services-section::before{

content:"";

position:absolute;

top:-220px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



.related-services-section::after{

content:"";

position:absolute;

bottom:-220px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



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


.related-services-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:80px;

}



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


.related-card{

position:relative;

display:block;

padding:35px;

border-radius:30px;

background:

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

border:

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

backdrop-filter:

blur(22px);

-webkit-backdrop-filter:

blur(22px);

text-decoration:none;

overflow:hidden;

box-shadow:

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

transition:

all .45s cubic-bezier(.4,0,.2,1);

}



/* Premium Border */

.related-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.30)
);

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}



/* Glow Effect */

.related-card::after{

content:"";

position:absolute;

top:-100px;

right:-100px;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.18),
transparent 70%
);

opacity:0;

transition:.45s ease;

}

/*====================================================
RELATED SERVICE ICON
====================================================*/


.related-icon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

margin-bottom:25px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.18),
rgba(0,180,255,.18)
);

border:

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

box-shadow:

0 20px 45px rgba(0,180,255,.16);

transition:

all .45s ease;

}



.related-icon i{

font-size:2rem;

background:

linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

transition:.4s ease;

}



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


.related-card h3{

font-size:1.35rem;

font-weight:750;

line-height:1.4;

color:#ffffff;

margin-bottom:15px;

transition:.35s ease;

}



.related-card p{

font-size:.95rem;

line-height:1.85;

color:#BFD4E5;

margin-bottom:25px;

}



/*====================================================
LEARN MORE LINK
====================================================*/


.related-card span{

display:inline-flex;

align-items:center;

gap:10px;

font-size:.95rem;

font-weight:700;

color:#00E0A4;

transition:.35s ease;

}



.related-card span i{

transition:.35s ease;

}



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


.related-card:hover{

transform:

translateY(-14px)

rotateX(3deg)

rotateY(-3deg);


border-color:

rgba(0,200,150,.35);


box-shadow:

0 45px 95px rgba(0,0,0,.42),

0 0 45px rgba(0,200,150,.12),

0 0 70px rgba(0,180,255,.08);

}



.related-card:hover::after{

opacity:1;

transform:scale(1.2);

}



.related-card:hover .related-icon{

transform:

translateY(-8px)

rotate(-8deg)

scale(1.08);


box-shadow:

0 28px 55px rgba(0,180,255,.25);

}



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

transform:scale(1.15);

}



.related-card:hover h3{

color:#00E0A4;

}



.related-card:hover span{

color:#ffffff;

}



.related-card:hover span i{

transform:

translateX(7px);

}



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


.related-card{

animation:

serviceFloat 9s ease-in-out infinite;

}



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

animation-delay:1s;

}



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

animation-delay:2s;

}



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

animation-delay:1.5s;

}



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

animation-delay:2.5s;

}



.related-card:nth-child(6){

animation-delay:3s;

}



@keyframes serviceFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-6px);

}


100%{

transform:translateY(0);

}


}

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


@media(max-width:1100px){


.related-services-grid{

grid-template-columns:

repeat(2,1fr);

}



.related-card{

padding:32px;

}


}



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


@media(max-width:768px){


.related-services-section{

padding:90px 0;

}



.related-services-grid{

grid-template-columns:1fr;

gap:22px;

margin-top:55px;

}



.related-card{

padding:28px;

border-radius:26px;

}



.related-icon{

width:68px;

height:68px;

border-radius:20px;

}



.related-icon i{

font-size:1.7rem;

}



.related-card h3{

font-size:1.2rem;

}



.related-card p{

font-size:.94rem;

line-height:1.75;

}



.related-card span{

font-size:.92rem;

}


}



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


@media(max-width:576px){


.related-card{

padding:24px;

}



.related-card h3{

font-size:1.15rem;

}



.related-card p{

font-size:.9rem;

}



.related-icon{

width:60px;

height:60px;

}



.related-icon i{

font-size:1.5rem;

}



}



/*====================================================
TOUCH DEVICE OPTIMIZATION
====================================================*/


@media(hover:none){


.related-card:hover{

transform:none;

box-shadow:

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

}



.related-card:hover .related-icon{

transform:none;

}


}



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


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


.related-card,
.related-icon{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 15 : WHY CHOOSE SECTION
====================================================*/


.whychoose-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#071521 0%,
#081C2C 50%,
#06141F 100%
);

overflow:hidden;

isolation:isolate;

}



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


.whychoose-section::before{

content:"";

position:absolute;

top:-220px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



.whychoose-section::after{

content:"";

position:absolute;

bottom:-220px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



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


.whychoose-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:28px;

margin-top:80px;

}



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


.why-card{

position:relative;

padding:35px 28px;

border-radius:30px;

background:

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

border:

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

backdrop-filter:

blur(22px);

-webkit-backdrop-filter:

blur(22px);

overflow:hidden;

box-shadow:

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

transition:

all .45s cubic-bezier(.4,0,.2,1);

}



/* Premium Border */


.why-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.30)
);


-webkit-mask:

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

linear-gradient(#fff 0 0);


-webkit-mask-composite:xor;

mask-composite:exclude;

}



/* Glow */


.why-card::after{

content:"";

position:absolute;

top:-100px;

right:-100px;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.18),
transparent 70%
);

opacity:0;

transition:.45s ease;

}

/*====================================================
WHY CARD ICON
====================================================*/


.why-icon{

width:76px;

height:76px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

margin-bottom:25px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.18),
rgba(0,180,255,.18)
);

border:

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

box-shadow:

0 20px 45px rgba(0,180,255,.16);

transition:

all .45s ease;

}



.why-icon i{

font-size:1.9rem;

background:

linear-gradient(
135deg,
#00E0A4,
#00B4FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

transition:.4s ease;

}



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


.why-card h3{

font-size:1.25rem;

font-weight:750;

line-height:1.4;

color:#ffffff;

margin-bottom:15px;

transition:.35s ease;

}



.why-card p{

font-size:.94rem;

line-height:1.85;

color:#BFD4E5;

margin:0;

}



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


.why-card:hover{

transform:

translateY(-14px)

rotateX(3deg)

rotateY(-3deg);


border-color:

rgba(0,200,150,.35);


box-shadow:

0 45px 95px rgba(0,0,0,.42),

0 0 45px rgba(0,200,150,.12),

0 0 70px rgba(0,180,255,.08);

}



.why-card:hover::after{

opacity:1;

transform:scale(1.2);

}



.why-card:hover .why-icon{

transform:

translateY(-8px)

rotate(-8deg)

scale(1.08);


box-shadow:

0 28px 55px rgba(0,180,255,.25);

}



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

transform:scale(1.15);

}



.why-card:hover h3{

color:#00E0A4;

}



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


.why-card{

animation:

whyFloat 9s ease-in-out infinite;

}



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

animation-delay:1s;

}



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

animation-delay:2s;

}



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

animation-delay:3s;

}



@keyframes whyFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-6px);

}


100%{

transform:translateY(0);

}


}

/*====================================================
AUTHORITY BOX
====================================================*/


.authority-box{

position:relative;

display:flex;

align-items:center;

gap:25px;

margin-top:70px;

padding:35px 40px;

border-radius:32px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:

1px solid rgba(0,200,150,.18);

overflow:hidden;

}



/* Top Gradient Line */


.authority-box::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



/* Authority Icon */


.authority-icon{

width:72px;

height:72px;

min-width:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:25px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.8rem;

box-shadow:

0 25px 50px rgba(0,180,255,.25);

}



.authority-box h3{

font-size:1.5rem;

font-weight:800;

color:#ffffff;

margin-bottom:10px;

}



.authority-box p{

margin:0;

font-size:1rem;

line-height:1.8;

color:#D8EAF7;

}



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


@media(max-width:1200px){


.whychoose-grid{

grid-template-columns:

repeat(2,1fr);

}


}



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


@media(max-width:768px){


.whychoose-section{

padding:90px 0;

}



.whychoose-grid{

grid-template-columns:1fr;

gap:22px;

margin-top:55px;

}



.why-card{

padding:30px;

border-radius:26px;

}



.why-icon{

width:68px;

height:68px;

border-radius:20px;

}



.why-icon i{

font-size:1.7rem;

}



.why-card h3{

font-size:1.15rem;

}



.why-card p{

font-size:.92rem;

line-height:1.75;

}



.authority-box{

flex-direction:column;

align-items:flex-start;

padding:28px;

margin-top:45px;

}



.authority-box h3{

font-size:1.25rem;

}



.authority-box p{

font-size:.94rem;

}



}



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


@media(max-width:576px){


.why-card{

padding:24px;

}



.why-card h3{

font-size:1.1rem;

}



.why-card p{

font-size:.88rem;

}



.authority-icon{

width:55px;

height:55px;

min-width:55px;

font-size:1.3rem;

}



}



/*====================================================
TOUCH DEVICE OPTIMIZATION
====================================================*/


@media(hover:none){


.why-card:hover{

transform:none;

}



.why-card:hover .why-icon{

transform:none;

}


}



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


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


.why-card,
.why-icon{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 16 : PROCESS TIMELINE
====================================================*/


.msme-process-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#06141F 0%,
#081C2C 50%,
#071521 100%
);

overflow:hidden;

isolation:isolate;

}



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


.msme-process-section::before{

content:"";

position:absolute;

top:-220px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



.msme-process-section::after{

content:"";

position:absolute;

bottom:-220px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



/*==================================
TIMELINE WRAPPER
==================================*/


.process-timeline{

position:relative;

max-width:950px;

margin:85px auto 0;

display:flex;

flex-direction:column;

gap:35px;

}



/* Vertical Line */


.process-timeline::before{

content:"";

position:absolute;

top:0;

bottom:0;

left:40px;

width:2px;

background:

linear-gradient(
180deg,
#00C896,
#00B4FF
);

opacity:.35;

}



/*==================================
PROCESS STEP
==================================*/


.process-step{

position:relative;

display:flex;

align-items:flex-start;

gap:35px;

}



.step-number{

position:relative;

z-index:2;

width:82px;

height:82px;

min-width:82px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.35rem;

font-weight:800;

box-shadow:

0 25px 55px rgba(0,180,255,.30);

transition:.45s ease;

}

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


.step-content{

position:relative;

flex:1;

padding:32px 35px;

border-radius:30px;

background:

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

border:

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

backdrop-filter:

blur(22px);

-webkit-backdrop-filter:

blur(22px);

box-shadow:

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

overflow:hidden;

transition:

all .45s cubic-bezier(.4,0,.2,1);

}



/* Premium Border */


.step-content::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.45),
rgba(0,180,255,.30)
);


-webkit-mask:

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

linear-gradient(#fff 0 0);


-webkit-mask-composite:xor;

mask-composite:exclude;

}



/* Glow */


.step-content::after{

content:"";

position:absolute;

top:-100px;

right:-100px;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,200,150,.18),
transparent 70%
);

opacity:0;

transition:.45s ease;

}



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


.step-content h3{

font-size:1.35rem;

font-weight:750;

color:#ffffff;

margin-bottom:15px;

transition:.35s ease;

}



.step-content p{

font-size:.96rem;

line-height:1.85;

color:#BFD4E5;

margin:0;

}



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


.process-step:hover .step-content{

transform:

translateY(-10px)

rotateX(3deg)

rotateY(-3deg);


border-color:

rgba(0,200,150,.35);


box-shadow:

0 45px 95px rgba(0,0,0,.42),

0 0 45px rgba(0,200,150,.12);

}



.process-step:hover .step-content::after{

opacity:1;

transform:scale(1.2);

}



.process-step:hover .step-number{

transform:

scale(1.12)

rotate(8deg);


box-shadow:

0 35px 70px rgba(0,200,150,.35);

}



.process-step:hover h3{

color:#00E0A4;

}



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


.process-step{

animation:

processFloat 9s ease-in-out infinite;

}



.process-step:nth-child(2){

animation-delay:1s;

}



.process-step:nth-child(3){

animation-delay:2s;

}



.process-step:nth-child(4){

animation-delay:3s;

}



.process-step:nth-child(5){

animation-delay:4s;

}



@keyframes processFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-5px);

}


100%{

transform:translateY(0);

}


}

/*====================================================
PROCESS NOTE BOX
====================================================*/


.process-note{

position:relative;

display:flex;

align-items:center;

gap:22px;

max-width:950px;

margin:70px auto 0;

padding:32px 38px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:

1px solid rgba(0,200,150,.18);

overflow:hidden;

}



.process-note::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



.process-note i{

width:62px;

height:62px;

min-width:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.5rem;

box-shadow:

0 20px 45px rgba(0,180,255,.25);

}



.process-note p{

margin:0;

font-size:1.05rem;

line-height:1.85;

color:#D8EAF7;

}



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


@media(max-width:900px){


.process-timeline::before{

left:35px;

}



.step-number{

width:70px;

height:70px;

min-width:70px;

font-size:1.15rem;

}



.process-step{

gap:25px;

}



.step-content{

padding:28px;

}


}



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


@media(max-width:768px){


.msme-process-section{

padding:90px 0;

}



.process-timeline{

margin-top:55px;

gap:25px;

}



.process-timeline::before{

left:30px;

}



.process-step{

gap:20px;

}



.step-number{

width:60px;

height:60px;

min-width:60px;

font-size:1rem;

}



.step-content{

padding:24px;

border-radius:24px;

}



.step-content h3{

font-size:1.15rem;

}



.step-content p{

font-size:.92rem;

line-height:1.75;

}



.process-note{

flex-direction:column;

align-items:flex-start;

padding:25px;

margin-top:45px;

}



}



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


@media(max-width:576px){


.process-timeline::before{

left:25px;

}



.process-step{

gap:15px;

}



.step-number{

width:50px;

height:50px;

min-width:50px;

font-size:.85rem;

}



.step-content{

padding:20px;

}



.step-content h3{

font-size:1.05rem;

}



.step-content p{

font-size:.88rem;

}



.process-note i{

width:50px;

height:50px;

min-width:50px;

font-size:1.2rem;

}



.process-note p{

font-size:.94rem;

}


}



/*====================================================
TOUCH DEVICE
====================================================*/


@media(hover:none){


.process-step:hover .step-content{

transform:none;

}



.process-step:hover .step-number{

transform:none;

}


}



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


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


.process-step,
.step-content,
.step-number{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

/*====================================================
SECTION 17 : MSME COMPARISON SECTION
====================================================*/


.msme-comparison-section{

position:relative;

padding:140px 0;

background:

linear-gradient(
180deg,
#071521 0%,
#081C2C 50%,
#06141F 100%
);

overflow:hidden;

isolation:isolate;

}



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


.msme-comparison-section::before{

content:"";

position:absolute;

top:-220px;

right:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00C896;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



.msme-comparison-section::after{

content:"";

position:absolute;

bottom:-220px;

left:-180px;

width:520px;

height:520px;

border-radius:50%;

background:#00B4FF;

filter:blur(180px);

opacity:.10;

z-index:-2;

}



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


.comparison-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:40px;

max-width:1050px;

margin:80px auto 0;

}



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


.comparison-card{

position:relative;

padding:42px;

border-radius:35px;

background:

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

border:

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

backdrop-filter:

blur(25px);

-webkit-backdrop-filter:

blur(25px);

box-shadow:

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

overflow:hidden;

transition:

all .45s ease;

}



/* Premium Border */

.comparison-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:35px;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}



/* Positive Border */


.positive-card::before{

background:

linear-gradient(
135deg,
rgba(0,200,150,.55),
rgba(0,180,255,.30)
);

}



/* Negative Border */


.negative-card::before{

background:

linear-gradient(
135deg,
rgba(255,100,100,.40),
rgba(255,180,0,.25)
);

}

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


.comparison-header{

display:flex;

align-items:center;

gap:20px;

margin-bottom:30px;

}



.comparison-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

font-size:1.8rem;

transition:.45s ease;

}



/* Negative Icon */


.negative-card .comparison-icon{

background:

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

border:

1px solid rgba(255,100,100,.25);

color:#FF8A8A;

box-shadow:

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

}



/* Positive Icon */


.positive-card .comparison-icon{

background:

rgba(0,200,150,.12);

border:

1px solid rgba(0,200,150,.25);

color:#00E0A4;

box-shadow:

0 20px 45px rgba(0,200,150,.18);

}



.comparison-header h3{

font-size:1.45rem;

font-weight:800;

color:#ffffff;

margin:0;

}



/*====================================================
BENEFIT LIST
====================================================*/


.comparison-card ul{

padding:0;

margin:0;

list-style:none;

display:flex;

flex-direction:column;

gap:18px;

}



.comparison-card li{

display:flex;

align-items:center;

gap:15px;

font-size:1rem;

line-height:1.7;

color:#D8EAF7;

}



.comparison-card li i{

font-size:1.15rem;

}



/* Negative List */


.negative-card li i{

color:#FF8A8A;

}



/* Positive List */


.positive-card li i{

color:#00E0A4;

}



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


.comparison-card:hover{

transform:

translateY(-14px)

rotateX(3deg)

rotateY(-3deg);


box-shadow:

0 50px 100px rgba(0,0,0,.45);

}



.comparison-card:hover .comparison-icon{

transform:

scale(1.12)

rotate(-8deg);

}



.positive-card:hover{

box-shadow:

0 50px 100px rgba(0,0,0,.45),

0 0 45px rgba(0,200,150,.15);

}



.negative-card:hover{

box-shadow:

0 50px 100px rgba(0,0,0,.45),

0 0 45px rgba(255,100,100,.10);

}



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


.comparison-card{

animation:

comparisonFloat 9s ease-in-out infinite;

}



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

animation-delay:1.5s;

}



@keyframes comparisonFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-7px);

}


100%{

transform:translateY(0);

}


}

/*====================================================
GROWTH HIGHLIGHT BOX
====================================================*/


.growth-highlight{

position:relative;

display:flex;

align-items:center;

gap:22px;

max-width:950px;

margin:70px auto 0;

padding:35px 40px;

border-radius:32px;

background:

linear-gradient(
135deg,
rgba(0,200,150,.08),
rgba(0,180,255,.08)
);

border:

1px solid rgba(0,200,150,.18);

overflow:hidden;

}



.growth-highlight::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
#00C896,
#00B4FF
);

}



.growth-icon{

width:70px;

height:70px;

min-width:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:25px;

background:

linear-gradient(
135deg,
#00C896,
#00B4FF
);

color:#ffffff;

font-size:1.8rem;

box-shadow:

0 25px 55px rgba(0,180,255,.25);

}



.growth-highlight p{

margin:0;

font-size:1.05rem;

line-height:1.85;

color:#D8EAF7;

}



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


@media(max-width:900px){


.comparison-grid{

gap:25px;

}



.comparison-card{

padding:32px;

}



.comparison-header h3{

font-size:1.25rem;

}


}



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


@media(max-width:768px){


.msme-comparison-section{

padding:90px 0;

}



.comparison-grid{

grid-template-columns:1fr;

margin-top:55px;

}



.comparison-card{

padding:28px;

border-radius:28px;

}



.comparison-header{

gap:15px;

}



.comparison-icon{

width:60px;

height:60px;

font-size:1.5rem;

}



.comparison-header h3{

font-size:1.15rem;

}



.comparison-card li{

font-size:.92rem;

}



.growth-highlight{

flex-direction:column;

align-items:flex-start;

padding:28px;

margin-top:45px;

}



.growth-highlight p{

font-size:.95rem;

}


}



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


@media(max-width:576px){


.comparison-card{

padding:24px;

}



.comparison-card ul{

gap:14px;

}



.comparison-card li{

align-items:flex-start;

font-size:.88rem;

}



.growth-icon{

width:55px;

height:55px;

min-width:55px;

font-size:1.3rem;

}


}



/*====================================================
TOUCH DEVICE
====================================================*/


@media(hover:none){


.comparison-card:hover{

transform:none;

}



.comparison-card:hover .comparison-icon{

transform:none;

}


}



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


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


.comparison-card,
.comparison-icon{

animation:none!important;

transition:none!important;

transform:none!important;

}


}

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


.reveal{

opacity:0;

transform:

translateY(40px);

transition:

all .8s ease;

}



.reveal.show{

opacity:1;

transform:

translateY(0);

}



/* FAQ Icon Rotation */


.faq-question i.rotate{

transform:

rotate(45deg);

}



/* Button Ripple */


.cta-submit-btn{

position:relative;

overflow:hidden;

}



.btn-ripple{

position:absolute;

width:120px;

height:120px;

background:

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

border-radius:50%;

transform:scale(0);

animation:

rippleEffect .6s linear;

pointer-events:none;

}



@keyframes rippleEffect{


to{

transform:scale(4);

opacity:0;

}

}

@media(max-width:768px){

.msme-process-section::before,
.msme-process-section::after,
.related-services-section::before,
.related-services-section::after{

filter:blur(90px);

opacity:.08;

}

}

.why-card,
.related-card,
.comparison-card,
.process-step,
.cta-form-card{

will-change:transform, opacity;

}

/*====================================================
PERFORMANCE OPTIMIZATION
====================================================*/


.why-card,
.related-card,
.comparison-card,
.process-step,
.step-content,
.cta-form-card,
.faq-item{

transform-style:preserve-3d;

backface-visibility:hidden;

-webkit-backface-visibility:hidden;

}