/*============================

Financial Solutions Co.

PAN & TAN Registration

Luxury Premium Theme

=============================*/

:root{

--primary:#0F4C81;

--secondary:#16A085;

--accent:#00C9A7;

--dark:#081420;

--dark-light:#122538;

--white:#ffffff;

--text:#4B5563;

--heading:#06141F;

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

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

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

--radius:24px;

--transition:.35s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,Segoe UI,sans-serif;

background:#F5F9FC;

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

.container{

width:min(1280px,92%);

margin:auto;

}

/* HERO */

.pan-hero{

position:relative;

padding:120px 0 90px;

overflow:hidden;

background:

linear-gradient(135deg,#081420 0%,#0F4C81 45%,#16A085 100%);

}

.hero-grid{

position:absolute;

inset:0;

background-image:

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

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

background-size:45px 45px;

opacity:.4;

}

.hero-bg-circle{

position:absolute;

border-radius:50%;

filter:blur(70px);

}

.circle-one{

width:380px;

height:380px;

background:#00C9A7;

top:-120px;

left:-100px;

opacity:.22;

}

.circle-two{

width:340px;

height:340px;

background:#2D8CFF;

right:-90px;

bottom:-120px;

opacity:.25;

}

.hero-wrapper{

position:relative;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

z-index:2;

}

.hero-badge{

display:inline-block;

padding:10px 20px;

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

backdrop-filter:blur(15px);

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

border-radius:50px;

color:#fff;

font-size:.95rem;

margin-bottom:25px;

}

.hero-content h1{

font-size:3.4rem;

line-height:1.15;

color:#fff;

margin-bottom:25px;

font-weight:800;

}

.hero-content p{

font-size:1.12rem;

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

max-width:720px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:45px;

}

.primary-btn{

padding:16px 34px;

background:#fff;

color:#0F4C81;

border-radius:60px;

font-weight:700;

transition:var(--transition);

box-shadow:var(--shadow);

}

.primary-btn:hover{

transform:translateY(-5px);

}

.secondary-btn{

padding:16px 34px;

border-radius:60px;

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

color:#fff;

transition:var(--transition);

}

.secondary-btn:hover{

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

}

.hero-features{

display:grid;

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

gap:20px;

}

.feature-box{

display:flex;

gap:15px;

padding:22px;

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

backdrop-filter:blur(20px);

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

border-radius:20px;

}

.feature-icon{

width:45px;

height:45px;

border-radius:50%;

background:#00C9A7;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

color:#fff;

}

.feature-box h3{

color:#fff;

font-size:1rem;

margin-bottom:5px;

}

.feature-box p{

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

font-size:.9rem;

margin:0;

}

.glass-card{

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

backdrop-filter:blur(25px);

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

padding:40px;

border-radius:30px;

box-shadow:var(--shadow);

}

.status{

display:flex;

align-items:center;

gap:10px;

color:#fff;

margin-bottom:25px;

}

.status-dot{

width:12px;

height:12px;

background:#00FF99;

border-radius:50%;

}

.glass-card h2{

font-size:2.3rem;

color:#fff;

margin-bottom:20px;

}

.glass-card p{

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

margin-bottom:35px;

}

.hero-stats{

display:grid;

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

text-align:center;

gap:15px;

}

.hero-stats h3{

color:#fff;

font-size:1.3rem;

}

.hero-stats span{

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

font-size:.9rem;

}

/* Trust */

.trust-strip{

padding:70px 0;

background:#fff;

}

.trust-grid{

display:grid;

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

gap:25px;

}

.trust-item{

padding:30px;

background:#fff;

border-radius:22px;

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

transition:.35s;

}

.trust-item:hover{

transform:translateY(-10px);

}

.trust-item h3{

color:#081420;

margin-bottom:12px;

}

@media(max-width:991px){

.hero-wrapper{

grid-template-columns:1fr;

}

.hero-features{

grid-template-columns:1fr;

}

.trust-grid{

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

}

.hero-content h1{

font-size:2.5rem;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:2rem;

}

.trust-grid{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

grid-template-columns:1fr;

}

}

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

.section-spacing{

padding:110px 0;

background:#f7fbfd;

}

.section-heading{

max-width:850px;

margin:0 auto 70px;

text-align:center;

}

.section-tag{

display:inline-block;

padding:10px 22px;

background:rgba(15,76,129,.08);

color:var(--primary);

border-radius:50px;

font-weight:700;

margin-bottom:22px;

}

.section-heading h2{

font-size:2.8rem;

color:var(--heading);

margin-bottom:20px;

line-height:1.2;

}

.section-heading p{

font-size:1.08rem;

color:var(--text);

}

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

.info-grid{

display:grid;

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

gap:35px;

}

.info-card{

background:#fff;

border-radius:28px;

padding:45px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.info-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#0F4C81,#16A085,#00C9A7);

}

.info-card:hover{

transform:translateY(-12px);

}

.card-number{

display:inline-flex;

align-items:center;

justify-content:center;

width:70px;

height:70px;

border-radius:20px;

background:linear-gradient(135deg,#0F4C81,#16A085);

color:#fff;

font-size:1.3rem;

font-weight:800;

margin-bottom:28px;

}

.info-card h3{

font-size:1.7rem;

margin-bottom:18px;

color:var(--heading);

}

.info-card p{

margin-bottom:25px;

}

.info-card ul{

padding-left:22px;

}

.info-card li{

margin-bottom:14px;

color:var(--text);

}

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

.comparison-section{

padding:110px 0;

background:#ffffff;

}

.table-wrapper{

overflow:auto;

border-radius:28px;

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

}

table{

width:100%;

border-collapse:collapse;

min-width:900px;

}

thead{

background:linear-gradient(135deg,#0F4C81,#16A085);

}

thead th{

padding:24px;

color:#fff;

font-size:1rem;

text-align:left;

}

tbody tr{

transition:.3s;

}

tbody tr:nth-child(even){

background:#f7fbfd;

}

tbody tr:hover{

background:#eef8f6;

}

tbody td{

padding:22px;

border-bottom:1px solid #edf1f4;

color:var(--text);

}

tbody td:first-child{

font-weight:700;

color:var(--heading);

}

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

@media(max-width:991px){

.info-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:2.2rem;

}

}

@media(max-width:768px){

.section-heading h2{

font-size:1.9rem;

}

.info-card{

padding:30px;

}

}

/*=========================================
        LUXURY SECTION BACKGROUND
=========================================*/

.need-section{

    position:relative;
    padding:140px 0;
    overflow:hidden;

    background:
    radial-gradient(circle at 10% 15%,rgba(0,201,167,.18),transparent 28%),
    radial-gradient(circle at 90% 80%,rgba(45,140,255,.18),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(22,160,133,.12),transparent 35%),
    linear-gradient(135deg,#03111b 0%,#071b2d 40%,#081420 100%);

}

/*=========================================*/

.need-section::before{

content:"";

position:absolute;
inset:0;

background-image:

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

background-size:70px 70px;

opacity:.45;

animation:gridMove 25s linear infinite;

}

/*=========================================*/

.need-section::after{

content:"";

position:absolute;

width:900px;
height:900px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(0,201,167,.18),
transparent 70%);

left:-300px;
top:-250px;

filter:blur(120px);

animation:auroraOne 14s ease-in-out infinite alternate;

}

/*=========================================*/

.aurora{

position:absolute;

border-radius:50%;

filter:blur(130px);

mix-blend-mode:screen;

opacity:.55;

pointer-events:none;

}

/*=========================================*/

.aurora-left{

width:420px;
height:420px;

background:#00C9A7;

top:10%;

left:-130px;

animation:floatOne 9s ease-in-out infinite;

}

/*=========================================*/

.aurora-right{

width:500px;
height:500px;

background:#2D8CFF;

right:-180px;

bottom:-120px;

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

}

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

.need-grid{

position:relative;

display:grid;

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

gap:45px;

z-index:5;

}

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

.luxury-card{

position:relative;

padding:48px;

overflow:hidden;

border-radius:34px;

background:

linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.04));

backdrop-filter:blur(40px);

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

box-shadow:

0 30px 80px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.05) inset;

transition:

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

isolation:isolate;

}

/*=========================================*/

.luxury-card::before{

content:"";

position:absolute;

inset:-2px;

border-radius:inherit;

padding:2px;

background:

linear-gradient(
135deg,
rgba(255,255,255,.55),
rgba(0,201,167,.85),
rgba(45,140,255,.85),
rgba(255,255,255,.35));

background-size:300% 300%;

animation:borderFlow 6s linear infinite;

-webkit-mask:

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

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/*=========================================*/

.luxury-card::after{

content:"";

position:absolute;

top:-180%;

left:-30%;

width:60%;

height:420%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.30),

transparent

);

transform:rotate(28deg);

transition:1.3s;

}

/*=========================================*/

.luxury-card:hover::after{

left:140%;

}

/*=========================================*/

.luxury-card:hover{

transform:

translateY(-18px)
scale(1.02);

border-color:

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

box-shadow:

0 45px 120px rgba(0,0,0,.55),

0 0 45px rgba(0,201,167,.18),

0 0 80px rgba(45,140,255,.18);

}

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

.luxury-top{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:100px;

background:

linear-gradient(
135deg,
#00C9A7,
#0F4C81);

box-shadow:

0 12px 35px rgba(0,201,167,.35);

margin-bottom:30px;

font-size:.95rem;

font-weight:700;

color:#fff;

letter-spacing:.6px;

text-transform:uppercase;

}

/*=========================================*/

.luxury-top span{

position:relative;

z-index:2;

}

/*=========================================*/

.luxury-card h3{

font-size:2rem;

font-weight:800;

line-height:1.25;

margin-bottom:30px;

color:#fff;

letter-spacing:-.5px;

}

/*=========================================*/

.luxury-card ul{

list-style:none;

padding:0;

margin:0;

}

/*=========================================*/

.luxury-card li{

position:relative;

padding-left:34px;

margin-bottom:18px;

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

font-size:1rem;

line-height:1.8;

}

/*=========================================*/

.luxury-card li::before{

content:"";

position:absolute;

left:0;

top:11px;

width:12px;

height:12px;

border-radius:50%;

background:

linear-gradient(
135deg,
#00C9A7,
#2D8CFF);

box-shadow:

0 0 18px rgba(0,201,167,.7);

}

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

@keyframes borderFlow{

0%{

background-position:0% 50%;

}

100%{

background-position:300% 50%;

}

}

@keyframes floatOne{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-60px);

}

}

@keyframes floatTwo{

0%{

transform:translateY(0);

}

100%{

transform:translateY(50px);

}

}

@keyframes auroraOne{

0%{

transform:scale(1);

}

100%{

transform:scale(1.25);

}

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(70px);

}

}

/*==================================================
            BENEFITS SECTION (LUXURY)
==================================================*/

.benefit-section{

    position:relative;
    padding:150px 0;
    overflow:hidden;

    background:

    radial-gradient(circle at top left,
    rgba(0,201,167,.10),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(45,140,255,.12),
    transparent 35%),

    linear-gradient(
    180deg,
    #f7fbff 0%,
    #eef7ff 45%,
    #ffffff 100%);

}

/*==============================*/

.benefit-section::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(rgba(15,76,129,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(15,76,129,.025) 1px,transparent 1px);

background-size:70px 70px;

opacity:.45;

}

/*==============================*/

.benefit-grid{

position:relative;

display:grid;

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

gap:35px;

z-index:2;

}

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

.benefit-card{

position:relative;

padding:42px;

border-radius:32px;

background:

rgba(255,255,255,.72);

backdrop-filter:blur(35px);

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

overflow:hidden;

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

box-shadow:

0 20px 60px rgba(18,38,63,.08),
0 1px 0 rgba(255,255,255,.9) inset;

transition:

all .55s cubic-bezier(.2,.8,.2,1);

isolation:isolate;

}

/*==============================*/

.benefit-card::before{

content:"";

position:absolute;

inset:-1px;

padding:1px;

border-radius:inherit;

background:

linear-gradient(
135deg,

rgba(0,201,167,.85),

rgba(45,140,255,.85),

rgba(255,255,255,.9),

rgba(0,201,167,.75));

background-size:250% 250%;

animation:borderRotate 7s linear infinite;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/*==============================*/

.benefit-card::after{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,201,167,.22),

transparent 70%);

transition:.6s;

}

/*==============================*/

.benefit-card:hover{

transform:

translateY(-16px)
rotateX(2deg)
scale(1.02);

box-shadow:

0 45px 90px rgba(18,38,63,.18),

0 0 40px rgba(0,201,167,.12),

0 0 70px rgba(45,140,255,.10);

}

/*==============================*/

.benefit-card:hover::after{

transform:

scale(1.4);

opacity:.9;

}

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

.benefit-card h3{

position:relative;

padding-top:82px;

font-size:1.45rem;

font-weight:800;

color:#071521;

margin-bottom:18px;

line-height:1.35;

}

/*==============================*/

.benefit-card h3::before{

content:"";

position:absolute;

left:0;

top:0;

width:58px;

height:58px;

border-radius:18px;

background:

linear-gradient(
135deg,
#00C9A7,
#0F4C81);

box-shadow:

0 15px 40px rgba(0,201,167,.30);

}

/*==============================*/

.benefit-card h3::after{

content:"✓";

position:absolute;

left:20px;

top:17px;

font-size:18px;

font-weight:800;

color:#fff;

}

/*==============================*/

.benefit-card p{

font-size:1rem;

line-height:1.9;

color:#5b6677;

}

/*==================================================
            SECTION HEADING UPGRADE
==================================================*/

.benefit-section .section-heading{

margin-bottom:80px;

}

.benefit-section .section-tag{

padding:12px 26px;

font-size:.95rem;

font-weight:700;

letter-spacing:1px;

background:

linear-gradient(
135deg,

rgba(0,201,167,.10),

rgba(45,140,255,.10));

border:1px solid rgba(15,76,129,.08);

}

.benefit-section .section-heading h2{

font-size:3.2rem;

font-weight:800;

letter-spacing:-1px;

line-height:1.15;

background:

linear-gradient(
135deg,

#071521,

#0F4C81);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.benefit-section .section-heading p{

max-width:760px;

margin:auto;

font-size:1.08rem;

line-height:2;

}

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

.benefit-section .blob-one{

position:absolute;

width:380px;

height:380px;

border-radius:50%;

left:-140px;

top:-120px;

filter:blur(100px);

background:

rgba(0,201,167,.16);

}

.benefit-section .blob-two{

position:absolute;

width:450px;

height:450px;

right:-180px;

bottom:-180px;

border-radius:50%;

background:

rgba(45,140,255,.14);

filter:blur(120px);

}

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

@keyframes borderRotate{

0%{

background-position:0% 50%;

}

100%{

background-position:250% 50%;

}

}

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

@media(max-width:1100px){

.benefit-grid{

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

}

}

@media(max-width:768px){

.benefit-grid{

grid-template-columns:1fr;

}

.benefit-card{

padding:32px;

}

.benefit-section .section-heading h2{

font-size:2.2rem;

}

}

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

.registration-process{

position:relative;

padding:150px 0;

background:

linear-gradient(180deg,#06131d,#081c2d);

overflow:hidden;

}

.process-blur{

position:absolute;

width:450px;

height:450px;

border-radius:50%;

filter:blur(120px);

opacity:.35;

}

.blur-left{

background:#00C9A7;

top:-120px;

left:-150px;

}

.blur-right{

background:#2D8CFF;

bottom:-150px;

right:-150px;

}

/*========================================================*/

.timeline{

position:relative;

max-width:1100px;

margin:auto;

padding:40px 0;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

transform:translateX(-50%);

width:4px;

height:100%;

background:

linear-gradient(

180deg,

#00C9A7,

#2D8CFF);

border-radius:50px;

box-shadow:

0 0 25px rgba(0,201,167,.5);

}

/*========================================================*/

.timeline-card{

position:relative;

width:46%;

padding:35px;

margin-bottom:70px;

border-radius:30px;

background:

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

backdrop-filter:blur(35px);

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

transition:.5s;

}

.timeline-card:nth-child(odd){

left:0;

}

.timeline-card:nth-child(even){

left:54%;

}

.timeline-card:hover{

transform:translateY(-15px);

box-shadow:

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

}

/*========================================================*/

.step-no{

position:absolute;

top:50%;

right:-70px;

transform:translateY(-50%);

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:1.4rem;

font-weight:800;

background:

linear-gradient(135deg,#00C9A7,#0F4C81);

color:#fff;

box-shadow:

0 20px 40px rgba(0,201,167,.35);

}

.timeline-card:nth-child(even) .step-no{

left:-70px;

right:auto;

}

.timeline-content span{

display:inline-block;

margin-bottom:12px;

font-size:.85rem;

letter-spacing:2px;

text-transform:uppercase;

color:#00C9A7;

}

.timeline-content h3{

font-size:1.8rem;

color:#fff;

margin-bottom:15px;

}

.timeline-content p{

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

line-height:1.8;

}

/*========================================================*/

@media(max-width:991px){

.timeline::before{

left:30px;

}

.timeline-card{

width:calc(100% - 80px);

left:80px !important;

}

.step-no{

left:-60px !important;

right:auto;

}

}

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

.documents-section{

position:relative;

padding:160px 0;

overflow:hidden;

background:

linear-gradient(180deg,

#ffffff,

#f5fbff);

}

/*==========================*/

.documents-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle at 15% 20%,

rgba(0,201,167,.12),

transparent 28%),

radial-gradient(circle at 85% 80%,

rgba(45,140,255,.14),

transparent 30%);

pointer-events:none;

}

/*==========================*/

.documents-grid{

display:grid;

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

gap:34px;

position:relative;

z-index:5;

}

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

.document-card{

position:relative;

padding:42px;

border-radius:34px;

overflow:hidden;

background:

rgba(255,255,255,.72);

backdrop-filter:blur(35px);

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

box-shadow:

0 25px 70px rgba(8,20,32,.08);

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

isolation:isolate;

}

/*==========================*/

.document-card::before{

content:"";

position:absolute;

inset:-2px;

padding:2px;

border-radius:inherit;

background:

linear-gradient(

135deg,

#00C9A7,

#2D8CFF,

#16A085,

#ffffff,

#00C9A7);

background-size:350%;

animation:docBorder 7s linear infinite;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}

/*==========================*/

.document-card::after{

content:"";

position:absolute;

top:-200px;

left:-140px;

width:280px;

height:500px;

background:

linear-gradient(

90deg,

transparent,

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

transparent);

transform:rotate(25deg);

transition:1.2s;

}

/*==========================*/

.document-card:hover::after{

left:140%;

}

/*==========================*/

.document-card:hover{

transform:

translateY(-18px)

scale(1.03);

box-shadow:

0 40px 100px rgba(15,76,129,.15),

0 0 50px rgba(0,201,167,.15);

}

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

.document-icon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

font-size:2rem;

margin-bottom:28px;

background:

linear-gradient(

135deg,

#00C9A7,

#0F4C81);

color:#fff;

box-shadow:

0 20px 50px rgba(0,201,167,.30);

}

/*==========================*/

.document-card h3{

font-size:1.45rem;

margin-bottom:18px;

font-weight:800;

color:#071521;

}

/*==========================*/

.document-card p{

line-height:1.9;

color:#5f6979;

}

/*==========================*/

@keyframes docBorder{

0%{

background-position:0%;

}

100%{

background-position:350%;

}

}

/*==========================*/

@media(max-width:1100px){

.documents-grid{

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

}

}

@media(max-width:768px){

.documents-grid{

grid-template-columns:1fr;

}

}

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

.premium-cta{

position:relative;

padding:170px 0;

overflow:hidden;

background:

linear-gradient(135deg,

#03111b,

#081b2d,

#0f4c81);

}

/*==============================*/

.cta-grid{

position:absolute;

inset:0;

background-image:

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

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

background-size:65px 65px;

opacity:.5;

}

/*==============================*/

.cta-orb{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.28;

animation:orbMove 10s ease-in-out infinite alternate;

}

.orb-one{

width:420px;

height:420px;

background:#00C9A7;

left:-150px;

top:-120px;

}

.orb-two{

width:480px;

height:480px;

background:#2D8CFF;

right:-180px;

bottom:-180px;

animation-delay:2s;

}

/*====================================================*/

.cta-wrapper{

position:relative;

z-index:5;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:50px;

align-items:center;

padding:70px;

border-radius:40px;

background:

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

backdrop-filter:blur(35px);

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

box-shadow:

0 40px 120px rgba(0,0,0,.45);

overflow:hidden;

}

/*==============================*/

.cta-wrapper::before{

content:"";

position:absolute;

inset:-2px;

padding:2px;

border-radius:inherit;

background:

linear-gradient(

135deg,

#00C9A7,

#2D8CFF,

#ffffff,

#00C9A7);

background-size:300%;

animation:borderMove 8s linear infinite;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}

/*==============================*/

.cta-badge{

display:inline-block;

padding:12px 24px;

border-radius:100px;

background:

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

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

color:#fff;

margin-bottom:28px;

}

/*==============================*/

.cta-content h2{

font-size:3.4rem;

line-height:1.15;

font-weight:800;

color:#fff;

margin-bottom:28px;

}

.cta-content h2 span{

background:

linear-gradient(

90deg,

#00C9A7,

#6CE5FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.cta-content p{

font-size:1.08rem;

line-height:2;

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

margin-bottom:35px;

}

/*====================================================*/

.cta-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.cta-btn-primary{

padding:18px 36px;

border-radius:100px;

background:

linear-gradient(

135deg,

#00C9A7,

#0F4C81);

color:#fff;

font-weight:700;

transition:.45s;

box-shadow:

0 18px 45px rgba(0,201,167,.35);

}

.cta-btn-primary:hover{

transform:

translateY(-8px);

}

.cta-btn-secondary{

padding:18px 36px;

border-radius:100px;

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

color:#fff;

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

transition:.45s;

}

.cta-btn-secondary:hover{

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

transform:translateY(-8px);

}

/*====================================================*/

.cta-highlight{

display:flex;

flex-direction:column;

gap:25px;

}

.highlight-card{

padding:35px;

border-radius:28px;

background:

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

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

backdrop-filter:blur(25px);

transition:.45s;

}

.highlight-card:hover{

transform:

translateX(-8px);

box-shadow:

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

}

.highlight-number{

font-size:2.7rem;

font-weight:900;

margin-bottom:15px;

background:

linear-gradient(

135deg,

#00C9A7,

#6CE5FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.highlight-card h3{

font-size:1.4rem;

color:#fff;

margin-bottom:12px;

}

.highlight-card p{

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

line-height:1.8;

}

/*====================================================*/

@keyframes orbMove{

0%{

transform:translateY(0) scale(1);

}

100%{

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

}

}

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

/*====================================================*/

@media(max-width:991px){

.cta-wrapper{

grid-template-columns:1fr;

padding:45px;

}

.cta-content h2{

font-size:2.5rem;

}

}

@media(max-width:768px){

.cta-buttons{

flex-direction:column;

}

.cta-content h2{

font-size:2rem;

}

}

/*==================================================
        WHY CHOOSE FSC
==================================================*/

.why-fsc{

position:relative;

padding:170px 0;

overflow:hidden;

background:

linear-gradient(180deg,

#04111c,

#081b2d,

#071521);

}

/*==============================*/

.why-glow{

position:absolute;

width:450px;

height:450px;

border-radius:50%;

filter:blur(140px);

opacity:.28;

}

.glow-left{

left:-180px;

top:-100px;

background:#00C9A7;

animation:whyFloat 9s ease-in-out infinite alternate;

}

.glow-right{

right:-180px;

bottom:-100px;

background:#2D8CFF;

animation:whyFloat 12s ease-in-out infinite alternate;

}

/*==============================*/

.why-fsc .section-heading h2{

color:#fff;

}

.why-fsc .section-heading h2 span{

background:

linear-gradient(90deg,#00C9A7,#74E9FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.why-fsc .section-heading p{

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

}

/*==============================*/

.why-grid{

display:grid;

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

gap:35px;

align-items:stretch;

position:relative;

z-index:5;

}

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

.why-card{

position:relative;

padding:45px;

border-radius:34px;

overflow:hidden;

background:

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

backdrop-filter:blur(30px);

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

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

min-height:340px;

}

/* Animated Border */

.why-card::before{

content:"";

position:absolute;

inset:-2px;

padding:2px;

border-radius:inherit;

background:

linear-gradient(

135deg,

#00C9A7,

#2D8CFF,

#7EF9D6,

#00C9A7);

background-size:300%;

animation:borderMove 8s linear infinite;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}

/* Glow Spot */

.card-light{

position:absolute;

width:220px;

height:220px;

right:-90px;

top:-90px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.18),

transparent 70%);

opacity:0;

transition:.5s;

}

.why-card:hover .card-light{

opacity:1;

transform:scale(1.3);

}

.why-card:hover{

transform:

translateY(-16px);

box-shadow:

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

0 0 40px rgba(0,201,167,.12);

}

/*==============================*/

.why-icon{

width:82px;

height:82px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

background:

linear-gradient(135deg,#00C9A7,#0F4C81);

color:#fff;

margin-bottom:30px;

box-shadow:

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

}

/*==============================*/

.card-count{

position:absolute;

right:35px;

top:30px;

font-size:3rem;

font-weight:900;

opacity:.08;

color:#fff;

letter-spacing:2px;

}

.why-card h3{

font-size:1.8rem;

color:#fff;

margin-bottom:18px;

line-height:1.35;

}

.why-card p{

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

line-height:1.9;

}

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

.featured-card{

background:

linear-gradient(

135deg,

rgba(0,201,167,.12),

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

display:flex;

flex-direction:column;

justify-content:center;

}

.featured-badge{

display:inline-flex;

width:max-content;

padding:10px 18px;

border-radius:50px;

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

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

color:#fff;

margin-bottom:24px;

font-size:.9rem;

}

.featured-btn{

margin-top:35px;

display:inline-flex;

width:max-content;

padding:16px 30px;

border-radius:100px;

background:

linear-gradient(135deg,#00C9A7,#0F4C81);

color:#fff;

font-weight:700;

transition:.4s;

}

.featured-btn:hover{

transform:translateY(-6px);

box-shadow:

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

}

/*==================================================*/

@keyframes whyFloat{

from{

transform:translateY(0);

}

to{

transform:translateY(-60px);

}

}

@media(max-width:991px){

.why-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.why-card{

padding:35px;

min-height:auto;

}

.card-count{

font-size:2rem;

}

.why-card h3{

font-size:1.5rem;

}

}

/*==================================================
        COMMON MISTAKES SECTION
==================================================*/

.mistakes-section{

position:relative;

padding:170px 0;

overflow:hidden;

background:

linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 45%,
#eef6ff 100%);

}

/*==============================*/

.mistake-glow{

position:absolute;

width:420px;

height:420px;

border-radius:50%;

filter:blur(130px);

opacity:.18;

pointer-events:none;

animation:mistakeFloat 12s ease-in-out infinite alternate;

}

.mistake-glow.glow-left{

left:-180px;

top:-120px;

background:#ff6b6b;

}

.mistake-glow.glow-right{

right:-180px;

bottom:-120px;

background:#ffb347;

animation-delay:3s;

}

/*==============================*/

.mistakes-section .section-heading h2 span{

background:

linear-gradient(
135deg,
#d63031,
#ff8f00);

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

}

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

.mistakes-grid{

display:grid;

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

gap:34px;

position:relative;

z-index:5;

}

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

.mistake-card{

position:relative;

padding:40px;

border-radius:30px;

background:

rgba(255,255,255,.72);

backdrop-filter:blur(30px);

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

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

overflow:hidden;

transition:

all .55s cubic-bezier(.2,.8,.2,1);

box-shadow:

0 22px 60px rgba(15,23,42,.08);

isolation:isolate;

}

/* Animated Border */

.mistake-card::before{

content:"";

position:absolute;

inset:-1px;

padding:1px;

border-radius:inherit;

background:

linear-gradient(
135deg,

rgba(255,107,107,.95),

rgba(255,179,71,.95),

rgba(255,255,255,.9),

rgba(255,107,107,.9));

background-size:300%;

animation:mistakeBorder 8s linear infinite;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/* Shine */

.mistake-card::after{

content:"";

position:absolute;

top:-220px;

left:-120px;

width:180px;

height:520px;

background:

linear-gradient(
90deg,

transparent,

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

transparent);

transform:rotate(25deg);

transition:1.1s;

}

.mistake-card:hover::after{

left:140%;

}

/*==============================*/

.mistake-card:hover{

transform:

translateY(-16px)
scale(1.02);

box-shadow:

0 40px 90px rgba(214,48,49,.14),

0 12px 35px rgba(0,0,0,.08);

}

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

.mistake-icon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

margin-bottom:28px;

font-size:2rem;

color:#fff;

background:

linear-gradient(
135deg,
#ff6b6b,
#d63031);

box-shadow:

0 18px 40px rgba(214,48,49,.28);

}

/*==============================*/

.mistake-card h3{

font-size:1.45rem;

font-weight:800;

color:#071521;

margin-bottom:18px;

line-height:1.35;

}

.mistake-card p{

font-size:1rem;

line-height:1.9;

color:#5d6676;

}

/*==================================================
            EXPERT TIP CARD
==================================================*/

.premium-tip{

background:

linear-gradient(
135deg,

#071521,

#0F4C81);

color:#fff;

}

.premium-tip h3{

color:#fff;

}

.premium-tip p{

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

}

.tip-badge{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:50px;

margin-bottom:22px;

font-size:.88rem;

font-weight:700;

background:

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

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

color:#fff;

backdrop-filter:blur(10px);

}

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

@keyframes mistakeBorder{

0%{

background-position:0% 50%;

}

100%{

background-position:300% 50%;

}

}

@keyframes mistakeFloat{

0%{

transform:
translateY(0)
scale(1);

}

100%{

transform:
translateY(-55px)
scale(1.08);

}

}

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

@media(max-width:1100px){

.mistakes-grid{

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

}

}

@media(max-width:768px){

.mistakes-section{

padding:110px 0;

}

.mistakes-grid{

grid-template-columns:1fr;

gap:24px;

}

.mistake-card{

padding:32px;

}

.mistake-icon{

width:68px;

height:68px;

font-size:1.7rem;

}

.mistake-card h3{

font-size:1.3rem;

}

}

/*==================================================
        REGISTRATION TIMELINE
==================================================*/

.timeline-section{

position:relative;

padding:180px 0;

overflow:hidden;

background:
linear-gradient(
180deg,
#04111c 0%,
#071521 40%,
#081b2d 100%);

}

/*================================*/

.timeline-bg-circle{

position:absolute;

border-radius:50%;

filter:blur(140px);

opacity:.22;

pointer-events:none;

animation:timelineFloat 12s ease-in-out infinite alternate;

}

.circle-one{

width:420px;
height:420px;

left:-180px;
top:-120px;

background:#00C9A7;

}

.circle-two{

width:500px;
height:500px;

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

background:#2D8CFF;

animation-delay:3s;

}

/*================================*/

.timeline-section .section-heading{

max-width:860px;

margin:0 auto 90px;

text-align:center;

position:relative;

z-index:5;

}

.timeline-section .section-heading h2{

color:#fff;

}

.timeline-section .section-heading h2 span{

background:
linear-gradient(
90deg,
#00C9A7,
#6CE5FF);

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

}

.timeline-section .section-heading p{

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

}

/*==================================================

WRAPPER

==================================================*/

.timeline-wrapper{

display:grid;

grid-template-columns:

430px

1fr;

gap:80px;

align-items:start;

position:relative;

z-index:5;

}

/*==================================================

LEFT SIDE

==================================================*/

.timeline-intro{

position:sticky;

top:120px;

}

.intro-badge{

display:inline-flex;

padding:12px 22px;

border-radius:100px;

background:

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

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

color:#fff;

margin-bottom:26px;

font-size:.9rem;

}

.timeline-intro h3{

font-size:2.2rem;

line-height:1.3;

color:#fff;

margin-bottom:25px;

}

.timeline-intro p{

line-height:2;

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

}

/*==================================================

SUMMARY CARD

==================================================*/

.timeline-summary{

margin-top:45px;

padding:36px;

border-radius:30px;

background:

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

backdrop-filter:blur(28px);

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

box-shadow:

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

}

.timeline-summary h4{

font-size:1.4rem;

margin-bottom:22px;

color:#fff;

}

.timeline-summary ul{

margin:0;

padding:0;

list-style:none;

}

.timeline-summary li{

position:relative;

padding-left:30px;

margin-bottom:16px;

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

line-height:1.7;

}

.timeline-summary li::before{

content:"";

position:absolute;

left:0;

top:10px;

width:10px;

height:10px;

border-radius:50%;

background:#00C9A7;

box-shadow:

0 0 12px rgba(0,201,167,.55);

}

/*==================================================

RIGHT

==================================================*/

.timeline-right{

position:relative;

padding-left:85px;

}

/*================================*/

.timeline-line{

position:absolute;

left:34px;

top:0;

bottom:0;

width:3px;

border-radius:50px;

background:

linear-gradient(

180deg,

rgba(0,201,167,.18),

#00C9A7,

#2D8CFF,

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

box-shadow:

0 0 25px rgba(0,201,167,.25);

}

/*==================================================

ITEM

==================================================*/

.timeline-item{

position:relative;

padding-bottom:55px;

}

/*================================*/

.timeline-dot{

position:absolute;

left:-85px;

top:15px;

width:68px;

height:68px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1rem;

font-weight:800;

color:#fff;

background:

linear-gradient(

135deg,

#00C9A7,

#0F4C81);

box-shadow:

0 18px 40px rgba(0,201,167,.30);

z-index:5;

transition:.45s;

}

/*================================*/

.timeline-card{

position:relative;

padding:38px;

border-radius:30px;

overflow:hidden;

background:

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

backdrop-filter:blur(30px);

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

transition:

all .55s cubic-bezier(.2,.8,.2,1);

}

/*================================*/

.timeline-card::before{

content:"";

position:absolute;

inset:-2px;

padding:2px;

border-radius:inherit;

background:

linear-gradient(

135deg,

#00C9A7,

#2D8CFF,

rgba(255,255,255,.95),

#00C9A7);

background-size:320%;

animation:borderMove 8s linear infinite;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}

/*================================*/

.timeline-card::after{

content:"";

position:absolute;

top:-220px;

left:-150px;

width:180px;

height:520px;

background:

linear-gradient(

90deg,

transparent,

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

transparent);

transform:rotate(25deg);

transition:1s;

}

.timeline-card:hover::after{

left:140%;

}

/*================================*/

.timeline-item:hover .timeline-dot{

transform:

scale(1.12);

box-shadow:

0 25px 60px rgba(0,201,167,.45);

}

.timeline-item:hover .timeline-card{

transform:

translateY(-12px);

box-shadow:

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

0 0 35px rgba(0,201,167,.12);

}

/*================================*/

.timeline-card h3{

font-size:1.55rem;

margin-bottom:18px;

color:#fff;

}

.timeline-card p{

line-height:1.9;

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

}

/*==================================================

ANIMATION

==================================================*/

@keyframes timelineFloat{

0%{

transform:
translateY(0)
scale(1);

}

100%{

transform:
translateY(-55px)
scale(1.08);

}

}

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

/* Large Laptop */

@media (max-width:1400px){

.timeline-wrapper{

grid-template-columns:380px 1fr;

gap:60px;

}

}

/*==============================*/

/* Tablet */

@media (max-width:1100px){

.timeline-section{

padding:140px 0;

}

.timeline-wrapper{

grid-template-columns:1fr;

gap:70px;

}

.timeline-intro{

position:relative;

top:0;

}

.timeline-summary{

margin-top:35px;

}

.timeline-right{

padding-left:70px;

}

.timeline-line{

left:28px;

}

.timeline-dot{

left:-70px;

width:60px;

height:60px;

font-size:.9rem;

}

}

/*==============================*/

/* Mobile */

@media (max-width:768px){

.timeline-section{

padding:100px 0;

}

.timeline-section .section-heading{

margin-bottom:60px;

}

.timeline-section .section-heading h2{

font-size:2rem;

}

.timeline-wrapper{

gap:50px;

}

.timeline-right{

padding-left:58px;

}

.timeline-line{

left:22px;

width:2px;

}

.timeline-dot{

left:-58px;

width:46px;

height:46px;

font-size:.8rem;

box-shadow:

0 10px 25px rgba(0,201,167,.25);

}

.timeline-card{

padding:26px;

border-radius:22px;

}

.timeline-card h3{

font-size:1.25rem;

margin-bottom:14px;

}

.timeline-card p{

font-size:.95rem;

line-height:1.8;

}

.timeline-summary{

padding:28px;

border-radius:22px;

}

.timeline-summary h4{

font-size:1.2rem;

}

.timeline-summary li{

padding-left:24px;

font-size:.95rem;

}

.intro-badge{

padding:10px 18px;

font-size:.8rem;

}

.timeline-intro h3{

font-size:1.8rem;

}

}

/*==============================*/

/* Small Mobile */

@media (max-width:480px){

.timeline-right{

padding-left:48px;

}

.timeline-line{

left:18px;

}

.timeline-dot{

left:-48px;

width:38px;

height:38px;

font-size:.72rem;

}

.timeline-card{

padding:22px;

}

.timeline-card h3{

font-size:1.1rem;

}

.timeline-card p{

font-size:.9rem;

}

}

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

.timeline-card{

will-change:transform;

}

.timeline-card:hover{

transition:

transform .45s ease,

box-shadow .45s ease;

}

.timeline-dot{

will-change:transform;

}

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

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

.timeline-bg-circle,

.timeline-card::before,

.timeline-card::after,

.timeline-dot{

animation:none !important;

transition:none !important;

}

.timeline-item:hover .timeline-card,

.timeline-item:hover .timeline-dot{

transform:none;

}

}

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

.timeline-card:focus-within{

outline:2px solid rgba(0,201,167,.5);

outline-offset:4px;

}

/*==================================================
        PRINT OPTIMIZATION
==================================================*/

@media print{

.timeline-bg-circle,

.timeline-line{

display:none;

}

.timeline-card{

background:#fff;

color:#000;

box-shadow:none;

border:1px solid #ddd;

}

.timeline-card h3{

color:#000;

}

.timeline-card p{

color:#333;

}

}

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

.faq-section{

position:relative;

padding:170px 0;

overflow:hidden;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f7fbff 45%,
#edf6ff 100%);

}

/*================================*/

.faq-section::before{

content:"";

position:absolute;

left:-180px;

top:-120px;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,201,167,.18),

transparent 70%);

filter:blur(120px);

animation:faqFloat 10s ease-in-out infinite alternate;

pointer-events:none;

}

.faq-section::after{

content:"";

position:absolute;

right:-180px;

bottom:-150px;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(45,140,255,.16),

transparent 70%);

filter:blur(140px);

animation:faqFloat 13s ease-in-out infinite alternate;

pointer-events:none;

}

/*================================*/

.faq-section .section-heading{

max-width:850px;

margin:0 auto 70px;

text-align:center;

position:relative;

z-index:5;

}

.faq-section .section-heading h2 span{

background:

linear-gradient(
90deg,
#00C9A7,
#2D8CFF);

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

}

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

.faq-wrapper{

max-width:980px;

margin:auto;

display:flex;

flex-direction:column;

gap:22px;

position:relative;

z-index:5;

}

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

.faq-item{

position:relative;

overflow:hidden;

border-radius:28px;

background:

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

backdrop-filter:blur(30px);

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

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

transition:

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

box-shadow:

0 18px 55px rgba(10,25,41,.08);

}

/* Animated Border */

.faq-item::before{

content:"";

position:absolute;

inset:-2px;

padding:2px;

border-radius:inherit;

background:

linear-gradient(
135deg,

#00C9A7,

#2D8CFF,

#ffffff,

#00C9A7);

background-size:320%;

animation:borderMove 8s linear infinite;

-webkit-mask:

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

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/*================================*/

.faq-item:hover{

transform:translateY(-6px);

box-shadow:

0 28px 70px rgba(0,0,0,.10),

0 0 25px rgba(0,201,167,.10);

}

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

.faq-question{

width:100%;

padding:28px 75px 28px 32px;

background:none;

border:none;

cursor:pointer;

text-align:left;

font-size:1.18rem;

font-weight:700;

color:#071521;

position:relative;

line-height:1.6;

}

/*================================*/

.faq-question::after{

content:"+";

position:absolute;

right:30px;

top:50%;

transform:translateY(-50%);

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1.5rem;

font-weight:300;

color:#fff;

background:

linear-gradient(
135deg,
#00C9A7,
#0F4C81);

transition:.35s;

box-shadow:

0 10px 30px rgba(0,201,167,.25);

}

/* Active State */

.faq-item.active .faq-question::after{

content:"−";

transform:

translateY(-50%)

rotate(180deg);

}

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

.faq-answer{

max-height:0;

overflow:hidden;

transition:

max-height .45s ease,

padding .35s ease;

padding:0 32px;

}

.faq-item.active .faq-answer{

max-height:350px;

padding:0 32px 28px;

}

.faq-answer p{

color:#5d6676;

line-height:1.9;

font-size:1rem;

}

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

@keyframes faqFloat{

0%{

transform:
translateY(0)
scale(1);

}

100%{

transform:
translateY(-50px)
scale(1.08);

}

}

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

@media(max-width:991px){

.faq-section{

padding:130px 0;

}

}

@media(max-width:768px){

.faq-section{

padding:100px 0;

}

.faq-question{

padding:

22px

65px

22px

22px;

font-size:1rem;

}

.faq-question::after{

right:20px;

width:36px;

height:36px;

font-size:1.3rem;

}

.faq-answer{

padding:0 22px;

}

.faq-item.active .faq-answer{

padding:0 22px 22px;

}

.faq-answer p{

font-size:.95rem;

}

}

@media(max-width:480px){

.faq-wrapper{

gap:16px;

}

.faq-item{

border-radius:22px;

}

}

/*=====================================
PROCESS SECTION HEADING FIX
=====================================*/

.registration-process .section-heading{

position:relative;
z-index:10;
text-align:center;
margin-bottom:80px;

}

.registration-process .section-heading h2{

font-size:3.5rem;
font-weight:800;
line-height:1.2;

color:#ffffff !important;

margin:25px 0;

}

.registration-process .section-heading p{

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

font-size:1.15rem;
line-height:1.9;

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

}

.registration-process .section-tag{

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

padding:14px 30px;

border-radius:999px;

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

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

color:#00C9A7;

font-weight:700;

}

/*==================================
Need Section Heading Fix
==================================*/

.need-section .section-heading{

position:relative;
z-index:5;

text-align:center;

max-width:1000px;

margin:0 auto 80px;

}

.need-section .section-tag{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 30px;

border-radius:100px;

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

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

color:#00C9A7;

font-weight:700;

margin-bottom:25px;

}

.need-section .section-heading h2{

font-size:3.5rem;

font-weight:800;

line-height:1.2;

color:#ffffff !important;

opacity:1 !important;

text-shadow:0 10px 30px rgba(0,201,167,.20);

margin:20px 0;

}

.need-section .section-heading p{

font-size:1.15rem;

line-height:1.9;

max-width:900px;

margin:0 auto;

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

opacity:1 !important;

}