/*==================================================
VIDHYARTH
GLOBAL DESIGN SYSTEM
==================================================*/

/*=========================================
GOOGLE FONTS
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;700&display=swap');


/*=========================================
CSS VARIABLES
=========================================*/



:root{

--primary:#6A1B9A;

--secondary:#38C9B9;

--background:
linear-gradient(
135deg,
#f9eefb,
#eef7f6
);

--surface:#ffffff;

--text:#111111;

--text-light:#5d5d5d;

--border:#ece8f4;

--radius:24px;

--radius-lg:34px;

--shadow-sm:
0 10px 25px rgba(0,0,0,.05);

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

--shadow-lg:
0 30px 70px rgba(0,0,0,.12);



--radius-sm:14px;

--radius:22px;

--radius-lg:30px;

--radius-xl:42px;

--transition:.35s ease;

--container:1240px;

}


/*=========================================
RESET
=========================================*/

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

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:
linear-gradient(
135deg,
#f9eefb,
#eef7f6
);

color:#111;

overflow-x:hidden;



color:var(--text);

line-height:1.6;

overflow-x:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

}

button{

border:none;

outline:none;

background:none;

font:inherit;

cursor:pointer;

}

ul{

list-style:none;

}


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

.container{

width:min(92%,var(--container));

margin-inline:auto;

}


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

section{

position:relative;

padding:110px 0;

overflow:hidden;

}


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

h1,
h2,
h3,
h4{

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

font-weight:700;

letter-spacing:-.03em;

color:var(--text);

}

h1{

font-size:clamp(3rem,7vw,5.4rem);

line-height:1.05;

}

h2{

font-size:clamp(2.2rem,5vw,3.8rem);

line-height:1.1;

margin-bottom:22px;

}

h3{

font-size:1.7rem;

}

p{

font-size:1rem;

line-height:1.9;

color:var(--text-light);

}


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

.section-heading{

max-width:760px;

margin-inline:auto;

margin-bottom:70px;

}

.section-heading.center{

text-align:center;

}

.section-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

margin-bottom:22px;

border-radius:999px;

background:rgba(106,27,154,.08);

color:var(--primary);

font-size:.82rem;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}

.section-tag::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:var(--secondary);

}


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

.gradient-text{

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

-webkit-background-clip:text;

background-clip:text;

-webkit-text-fill-color:transparent;

color:transparent;

}


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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 34px;

border-radius:999px;

font-size:.95rem;

font-weight:700;

transition:var(--transition);

position:relative;

overflow:hidden;

}

.primary-btn{

background:

linear-gradient(

135deg,

var(--primary),

#7E2DB5

);

color:#fff;

box-shadow:

0 18px 40px rgba(106,27,154,.18);

}

.primary-btn:hover{

transform:translateY(-4px);

box-shadow:

0 26px 55px rgba(106,27,154,.25);

}

.secondary-btn,

.outline-btn{

border:1px solid rgba(106,27,154,.12);

background:#fff;

color:var(--text);

}

.secondary-btn:hover,

.outline-btn:hover{

background:#f8f2fc;

transform:translateY(-4px);

}


/*=========================================
UTILITY
=========================================*/

.text-center{

text-align:center;

}

.mt-40{

margin-top:40px;

}

.mb-40{

margin-bottom:40px;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


/* Firefox */

*{

scrollbar-width:thin;

scrollbar-color:var(--primary) #f3f3f3;

}


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

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .8s ease both;

}


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

@media(max-width:992px){

section{

padding:90px 0;

}

.section-heading{

margin-bottom:55px;

}

}

@media(max-width:768px){

.container{

width:94%;

}

section{

padding:70px 0;

}

.section-heading{

margin-bottom:45px;

}

.btn{

width:100%;

padding:15px 24px;

}

}
/*==================================================
CSS 1B
NAVBAR + MOBILE MENU
==================================================*/

/*=========================================
NAVBAR
=========================================*/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

padding:18px 0;

transition:.4s ease;

background:transparent;

}

.navbar.scrolled{

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

backdrop-filter:blur(18px);

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

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

padding:14px 0;

}


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

.nav-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}


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

.logo{

display:flex;

align-items:center;

flex-shrink:0;

}

.logo img{

height:58px;

width:auto;

transition:.35s ease;

}

.navbar.scrolled .logo img{

height:52px;

}


/*=========================================
DESKTOP NAVIGATION
=========================================*/

.desktop-nav{

display:flex;

align-items:center;

gap:38px;

margin-left:auto;

}

.desktop-nav a{

position:relative;

font-size:15px;

font-weight:600;

color:#222;

transition:.35s ease;

padding:8px 0;

}

.desktop-nav a:hover{

color:var(--primary);

}


/* underline */

.desktop-nav a::after{

content:"";

position:absolute;

left:50%;

bottom:-2px;

width:0;

height:2px;

background:linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

transition:.35s ease;

transform:translateX(-50%);

border-radius:30px;

}

.desktop-nav a:hover::after{

width:100%;

}


/*=========================================
NAV ACTIONS
=========================================*/

.nav-actions{

display:flex;

align-items:center;

gap:18px;

}


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

.menu-toggle{

display:none;

width:50px;

height:50px;

border-radius:16px;

background:#fff;

box-shadow:var(--shadow-sm);

color:var(--primary);

font-size:20px;

transition:.35s ease;

}

.menu-toggle:hover{

transform:translateY(-2px);

background:var(--primary);

color:#fff;

}


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

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:330px;

max-width:100%;

height:100vh;

background:#fff;

z-index:10001;

padding:28px;

display:flex;

flex-direction:column;

transition:.45s ease;

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

overflow-y:auto;

}

.mobile-menu.active{

right:0;

}


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

.mobile-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

.mobile-top img{

height:48px;

}

.close-menu{

width:46px;

height:46px;

border-radius:14px;

background:#f7f4fb;

color:var(--primary);

font-size:20px;

transition:.3s;

}

.close-menu:hover{

background:var(--primary);

color:#fff;

}


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

.mobile-menu nav{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:35px;

}

.mobile-menu nav a{

padding:15px 18px;

border-radius:16px;

font-size:16px;

font-weight:600;

transition:.3s;

color:#222;

}

.mobile-menu nav a:hover{

background:#f5effc;

color:var(--primary);

transform:translateX(6px);

}


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

.mobile-menu .btn{

margin-top:auto;

width:100%;

}


/*==================================================
MENU OVERLAY
==================================================*/

.menu-overlay{

position:fixed;

inset:0;

background:rgba(17,17,17,.45);

backdrop-filter:blur(3px);

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:9998;

}

.menu-overlay.active{

opacity:1;

visibility:visible;

}


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

.desktop-nav a.active,

.mobile-menu nav a.active{

color:var(--primary);

}

.desktop-nav a.active::after{

width:100%;

}


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

@media(max-width:1100px){

.desktop-nav{

display:none;

}

.nav-actions .btn{

display:none;

}

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

}

}

@media(max-width:768px){

.navbar{

padding:16px 0;

}

.logo img{

height:50px;

}

.mobile-menu{

width:100%;

padding:24px;

}

.mobile-top{

margin-bottom:30px;

}

.mobile-menu nav a{

font-size:17px;

padding:16px;

}

}

@media(max-width:480px){

.logo img{

height:46px;

}

.menu-toggle{

width:46px;

height:46px;

font-size:18px;

}

.close-menu{

width:42px;

height:42px;

font-size:18px;

}

}
/*==================================================
CSS 1C
HERO SECTION
==================================================*/

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

.hero{

position:relative;

padding:180px 0 130px;

overflow:hidden;

background:

linear-gradient(

135deg,

#f9eefb 0%,

#eef7f6 100%

);

}


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

.hero-grid-bg{

position:absolute;

inset:0;

background-image:

linear-gradient(

rgba(106,27,154,.06) 1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(106,27,154,.06) 1px,

transparent 1px

);

background-size:80px 80px;

opacity:.35;

pointer-events:none;

}


/*=========================================
GRADIENT GLOWS
=========================================*/

.hero-glow{

position:absolute;

border-radius:50%;

filter:blur(90px);

z-index:0;

}

.hero-glow-1{

width:550px;

height:550px;

background:rgba(106,27,154,.20);

top:-220px;

left:-220px;

}

.hero-glow-2{

width:520px;

height:520px;

background:rgba(56,201,185,.18);

right:-180px;

bottom:-180px;

}


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

.hero-container{

position:relative;

z-index:2;

display:grid;

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

gap:90px;

align-items:center;

}


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

.hero-content{

max-width:650px;

}


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

.hero-badge{

display:inline-flex;

align-items:center;

gap:12px;

padding:14px 22px;

background:#fff;

border-radius:999px;

box-shadow:

0 10px 30px rgba(0,0,0,.05);

margin-bottom:34px;

font-size:15px;

font-weight:700;

color:#6A1B9A;

}

.badge-dot{

width:9px;

height:9px;

border-radius:50%;

background:#38C9B9;

}


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

.hero-content h1{

font-size:clamp(4rem,8vw,6.6rem);

font-weight:900;

line-height:.95;

letter-spacing:-4px;

margin-bottom:22px;

}

.hero-content h1 span{

display:block;

margin-top:10px;

}

.hero-content h2{

font-size:clamp(2.3rem,5vw,4rem);

font-weight:700;

line-height:1.15;

letter-spacing:-2px;

color:#5a5a5a;

margin-bottom:34px;

max-width:600px;

}


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

.hero-content p{

font-size:1.35rem;

line-height:1.75;

color:#666;

max-width:640px;

margin-bottom:48px;

}


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

.hero-buttons{

display:flex;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:60px;

}

.hero-buttons .btn{

padding:18px 34px;

font-size:16px;

font-weight:700;

border-radius:999px;

transition:.35s ease;

}


/*=========================================
PRIMARY
=========================================*/

.hero-buttons .primary-btn{

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

color:#fff;

box-shadow:

0 20px 45px rgba(106,27,154,.18);

}

.hero-buttons .primary-btn:hover{

transform:translateY(-5px);

box-shadow:

0 30px 60px rgba(106,27,154,.22);

}


/*=========================================
OUTLINE
=========================================*/

.hero-buttons .outline-btn{

background:#fff;

border:1px solid rgba(106,27,154,.12);

color:#6A1B9A;

box-shadow:

0 10px 30px rgba(0,0,0,.04);

}

.hero-buttons .outline-btn:hover{

background:#faf5ff;

transform:translateY(-5px);

}


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

.hero-stats{

display:grid;

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

gap:18px;

}

.stat-card{

background:#fff;

padding:26px;

border-radius:24px;

box-shadow:

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

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h3{

font-size:32px;

font-weight:900;

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:6px;

}

.stat-card span{

font-size:14px;

color:#666;

font-weight:600;

}



/*==================================================
HERO CSS PART 2
ORB + FLOATING CARDS
==================================================*/


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

.hero-visual{

position:relative;

height:760px;

display:flex;

align-items:center;

justify-content:center;

}


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

.hero-visual::before{

content:"";

position:absolute;

width:480px;

height:480px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(106,27,154,.28),

rgba(56,201,185,.12),

transparent 72%

);

filter:blur(35px);

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

z-index:0;

}


/*=========================================
MAIN ORB
=========================================*/

.hero-orb{

position:absolute;

width:360px;

height:360px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

background:

linear-gradient(

135deg,

#6A1B9A,

#7d4cc2,

#38C9B9

);

box-shadow:

0 45px 100px rgba(106,27,154,.28);

animation:

orbFloat 7s ease-in-out infinite;

z-index:3;

}


/* Gloss */

.hero-orb::before{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

background:

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

top:35px;

left:45px;

filter:blur(20px);

}


/* Border */

.hero-orb::after{

content:"";

position:absolute;

inset:14px;

border-radius:50%;

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

}


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

.hero-orb img{

width:170px;

height:170px;

object-fit:contain;

filter:

drop-shadow(

0 10px 25px rgba(0,0,0,.18)

);

z-index:2;

}


/*=========================================
COMMON FLOATING CARD
=========================================*/

.floating-card{

position:absolute;

background:

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

backdrop-filter:blur(20px);

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

position:absolute;

width:170px;

min-height:150px;

padding:18px;

border-radius:24px;

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

backdrop-filter:blur(18px);

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

box-shadow:

0 18px 45px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

justify-content:flex-start;

transition:.35s;



box-shadow:

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

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

transition:.35s;

animation:

cardFloat 6s ease-in-out infinite;

z-index:5;

}


/* Hover */

.floating-card:hover{

transform:

translateY(-8px)

scale(1.03);

box-shadow:

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

}


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

.card-icon{

font-size:24px;

margin-bottom:12px;

}


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

.floating-card span{

display:block;

font-size:11px;

font-weight:700;



text-transform:uppercase;
color:#7b7b7b;
margin-bottom:10px;

}



.floating-card h4{

font-size:18px;

font-weight:800;

line-height:1.15;

color:#111;

}


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

.card-1{

top:40px;

left:80px;

animation-delay:.3s;

}

.card-2{

top:110px;

right:30px;

animation-delay:1s;

}

.card-3{

left:110px;

bottom:160px;

animation-delay:1.7s;

}

.card-4{

left:210px;

bottom:10px;

animation-delay:2.4s;

}

.card-5{

right:170px;

bottom:80px;

animation-delay:3.2s;

}

.card-6{

right:40px;

bottom:200px;

animation-delay:4s;

}


/*=========================================
SMALL GLOW BEHIND CARDS
=========================================*/

.floating-card::before{

content:"";

position:absolute;

inset:0;

border-radius:inherit;

background:

linear-gradient(

135deg,

rgba(106,27,154,.03),

rgba(56,201,185,.03)

);

pointer-events:none;

}


/*=========================================
DECORATIVE RINGS
=========================================*/

.hero-ring{

position:absolute;

border-radius:50%;

border:2px dashed rgba(106,27,154,.10);

animation:rotateRing 35s linear infinite;

}

.hero-ring.ring-1{

width:520px;

height:520px;

}

.hero-ring.ring-2{

width:640px;

height:640px;

animation-direction:reverse;

opacity:.55;

}


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

@keyframes orbFloat{

0%,100%{

transform:

translateY(0px);

}

50%{

transform:

translateY(-18px);

}

}


@keyframes cardFloat{

0%,100%{

transform:

translateY(0);

}

50%{

transform:

translateY(-12px);

}

}


@keyframes glowPulse{

0%,100%{

transform:scale(1);

opacity:.9;

}

50%{

transform:scale(1.12);

opacity:.55;

}

}


@keyframes rotateRing{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



/*==================================================
HERO CSS PART 3
RESPONSIVE
==================================================*/


/*=========================================
1400px
=========================================*/

@media (max-width:1400px){

.hero-container{

gap:70px;

}

.hero-visual{

height:700px;

}

.hero-orb{

width:430px;

height:430px;

}

.hero-orb img{

width:190px;

}

.floating-card{

width:190px;

padding:20px;

}

.floating-card h4{

font-size:28px;

}

}


/*=========================================
1200px
=========================================*/

@media (max-width:1200px){

.hero-container{

grid-template-columns:1fr;

gap:90px;

text-align:center;

}

.hero-content{

max-width:900px;

margin:auto;

}

.hero-content p{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

max-width:850px;

margin:auto;

}

.hero-visual{

height:650px;

max-width:700px;

margin:auto;

}

.hero-orb{

width:300px;

height:300px;

}

.hero-orb img{

width:140px;

}

/* Top Left */

.card-1{

top:40px;

left:40px;

}

/* Top Right */

.card-2{

top:70px;

right:20px;

}

/* Left */

.card-3{

left:0;

top:320px;

}

/* Bottom Left */

.card-4{

left:90px;

bottom:20px;

}

/* Bottom Center */

.card-5{

left:50%;

transform:translateX(-50%);

bottom:-20px;

}

/* Bottom Right */

.card-6{

right:20px;

top:360px;

}

}


/*=========================================
992px
=========================================*/

@media (max-width:992px){

.hero{

padding:150px 0 90px;

}

.hero-grid-bg{

background-size:60px 60px;

}

.hero-content h1{

font-size:clamp(3.5rem,10vw,5rem);

letter-spacing:-3px;

}

.hero-content h2{

font-size:2.2rem;

}

.hero-content p{

font-size:1.1rem;

}

.hero-visual{

position:relative;

height:820px;

}


.hero-orb{

z-index:1;

}

.floating-card{

z-index:5;

}

.floating-card:hover{

transform:

translateY(-8px)

scale(1.03);

box-shadow:

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

}

.hero-orb{

width:260px;

height:260px;

}

.hero-orb img{

width:120px;

}

.hero-ring.ring-1{

width:420px;

height:420px;

}

.hero-ring.ring-2{

width:520px;

height:520px;

}

.floating-card{

width:170px;

padding:18px;

border-radius:22px;

}

.card-icon{

font-size:26px;

}

.floating-card h4{

font-size:22px;

}

}


/*=========================================
768px
=========================================*/

@media (max-width:768px){

.hero{

padding:130px 0 70px;

}

.hero-container{

gap:60px;

}

.hero-badge{

font-size:13px;

padding:12px 18px;

}

.hero-content h1{

font-size:3.2rem;

line-height:1;

}

.hero-content h2{

font-size:1.9rem;

}

.hero-content p{

font-size:1rem;

margin-bottom:35px;

}

.hero-buttons{

flex-direction:column;

width:100%;

gap:15px;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats{

grid-template-columns:1fr;

gap:15px;

}

.hero-visual{

height:auto;

padding-top:30px;

display:grid;

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

gap:16px;

}

.hero-ring{

display:none;

}

.hero-orb{

position:relative;

grid-column:span 2;

margin:auto;

width:220px;

height:220px;

}

.hero-orb img{

width:100px;

}

.floating-card{

position:relative;

width:100%;

left:auto!important;

right:auto!important;

top:auto!important;

bottom:auto!important;

animation:none;

padding:18px;

text-align:center;

}

.floating-card h4{

font-size:20px;

}

.card-icon{

margin-bottom:12px;

font-size:24px;

}

}


/*=========================================
480px
=========================================*/

@media (max-width:480px){

.hero{

padding:120px 0 60px;

}

.hero-grid-bg{

background-size:40px 40px;

}

.hero-glow{

display:none;

}

.hero-content h1{

font-size:2.8rem;

letter-spacing:-2px;

}

.hero-content h2{

font-size:1.6rem;

}

.hero-content p{

font-size:.95rem;

}

.hero-badge{

font-size:12px;

padding:10px 16px;

}

.hero-orb{

width:180px;

height:180px;

}

.hero-orb img{

width:85px;

}

.hero-visual{

grid-template-columns:1fr;

}

.hero-orb{

grid-column:auto;

}

.floating-card{

padding:16px;

border-radius:20px;

}

.floating-card span{

font-size:11px;

}

.floating-card h4{

font-size:18px;

}

.card-icon{

font-size:22px;

}

.stat-card{

padding:20px;

}

.stat-card h3{

font-size:26px;

}

}


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

@media (max-width:360px){

.hero-content h1{

font-size:2.4rem;

}

.hero-content h2{

font-size:1.4rem;

}

.hero-orb{

width:160px;

height:160px;

}

.hero-orb img{

width:70px;

}

.floating-card{

padding:14px;

}

.hero-buttons .btn{

padding:15px 18px;

font-size:15px;

}

}


/*==================================================
CSS PART 2
ABOUT
JOURNEY
PROGRAMMES
==================================================*/


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

.about-section{

background:#fff;

position:relative;

overflow:hidden;

}

.about-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(106,27,154,.05);

top:-220px;

left:-220px;

filter:blur(80px);

}

.about-section::after{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:rgba(56,201,185,.06);

bottom:-220px;

right:-220px;

filter:blur(70px);

}


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

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

position:relative;

z-index:2;

}


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

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:32px;

display:block;

box-shadow:var(--shadow-lg);

transition:.4s;

}

.about-image:hover img{

transform:translateY(-10px);

}


/* Decorative */

.about-image::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:

linear-gradient(

135deg,

rgba(106,27,154,.18),

rgba(56,201,185,.15)

);

top:-60px;

right:-60px;

z-index:-1;

filter:blur(20px);

}


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

.about-content h2{

max-width:580px;

margin-bottom:26px;

}

.about-content p{

margin-bottom:22px;

font-size:1.05rem;

}

.about-content .btn{

margin-top:20px;

}


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

.journey-section{

padding:95px 0 80px;

background:

linear-gradient(

135deg,

#f9eefb,

#eef7f6

);

position:relative;

overflow:hidden;

}


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

.journey-wrapper{

position:relative;

display:grid;

grid-template-columns:repeat(5,minmax(160px,1fr));

align-items:start;

column-gap:12px;

margin-top:55px;

width:100%;

}

.journey-step{

text-align:center;

min-width:0;

}

/*========================================*/
.journey-line{

position:absolute;

left:9%;

right:9%;

top:40px;              /* Center of 80px circle */

height:2px;

background:linear-gradient(
90deg,
#6A1B9A,
#38C9B9
);

z-index:0;

border-radius:50px;

}


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

.journey-circle{

position:relative;

z-index:2;

width:82px;

height:82px;

margin:auto;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

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

border:6px solid #fff;

}

.journey-circle:hover{

transform:translateY(-10px);

}



.journey-circle{

font-size:34px;

}





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


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

.journey-age{

display:inline-block;

margin-top:16px;

margin-bottom:8px;

padding:6px 12px;

border-radius:999px;

background:rgba(106,27,154,.08);

color:#6A1B9A;

font-size:11px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}



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


.journey-step h3{

margin-top:18px;

font-size:22px;

font-weight:700;

letter-spacing:-0.5px;

}

.journey-step p{

.journey-step p{

margin-top:6px;

font-size:14px;

line-height:1.5;

color:#777;

}

}


@media(max-width:1100px){

.journey-wrapper{

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

row-gap:45px;

}

.journey-line{

display:none;

}

}

@media(max-width:768px){

.journey-wrapper{

grid-template-columns:1fr;

}

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

@media(max-width:992px){

.journey-wrapper{

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

row-gap:50px;

}

.journey-line{

display:none;

}

}


@media(max-width:768px){

.journey-wrapper{

grid-template-columns:1fr;

}


.journey-circle{

width:88px;

height:88px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

box-shadow:

0 10px 30px rgba(0,0,0,.06);



}

.journey-circle i{

font-size:30px;

}

.journey-step h3{

font-size:24px;

}

}

/*==================================================
PROGRAMME
==================================================*/



/*==================================================
FLAGSHIP PROGRAMMES
==================================================*/

.flagship-section{

padding:100px 0;

background:
linear-gradient(
135deg,
#f9eefb,
#eef7f6
);

position:relative;

overflow:hidden;

}


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

.flagship-section::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:rgba(106,27,154,.05);

border-radius:50%;

top:-180px;

left:-180px;

filter:blur(80px);

}

.flagship-section::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:rgba(56,201,185,.07);

right:-150px;

bottom:-150px;

border-radius:50%;

filter:blur(80px);

}


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

.flagship-grid{

display:grid;

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

gap:24px;

margin-top:55px;

position:relative;

z-index:2;

}


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

.programme-card{

background:#fff;

border-radius:30px;

overflow:hidden;

position:relative;

padding:26px;

border:1px solid rgba(106,27,154,.05);

box-shadow:

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

transition:.35s;

display:flex;

flex-direction:column;

height:100%;

}

.programme-card:hover{

transform:translateY(-8px);

box-shadow:

0 25px 55px rgba(0,0,0,.08);

}


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

.programme-strip{

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

#6A1B9A,

#38C9B9

);

}


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

.programme-icon{

width:62px;

height:62px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(

135deg,

rgba(106,27,154,.08),

rgba(56,201,185,.08)

);

margin-bottom:18px;

}

.programme-icon i{

font-size:28px;

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


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

.programme-age{

display:inline-block;

margin-bottom:12px;

font-size:12px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#38C9B9;

}


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

.programme-card h3{

font-size:22px;

font-weight:800;

margin-bottom:14px;

letter-spacing:-.5px;

color:#111;

}


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

.programme-card p{

font-size:15px;

line-height:1.75;

color:#666;

margin-bottom:22px;

}

/*==================================================
FLAGSHIP PROGRAMMES
CSS PART 2
==================================================*/


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

.programme-list{

list-style:none;

margin:0 0 28px;

padding:0;

display:flex;

flex-direction:column;

gap:14px;

}

.programme-list li{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:500;

color:#444;

line-height:1.5;

}

.programme-list li::before{

content:"";

width:6px;

height:6px;

border-radius:50%;

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

flex-shrink:0;

}


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

.programme-btn{

margin-top:auto;

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

width:max-content;

padding:14px 26px;

border:none;

border-radius:999px;

background:#fff;

border:1px solid rgba(106,27,154,.12);

color:#6A1B9A;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.35s;

box-shadow:

0 8px 20px rgba(0,0,0,.04);

}

.programme-btn i{

font-size:18px;

transition:.35s;

}

.programme-btn:hover{

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

color:#fff;

border-color:transparent;

transform:translateY(-3px);

box-shadow:

0 20px 40px rgba(106,27,154,.16);

}

.programme-btn:hover i{

transform:translateX(4px);

}


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

.featured-programme{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(106,27,154,.10);

}

.featured-programme .programme-strip{

height:5px;

}

.featured-programme::after{

content:"Most Popular";

position:absolute;

top:18px;

right:20px;

padding:7px 14px;

border-radius:999px;

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

color:#fff;

font-size:11px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

}


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

@media(max-width:1024px){

.flagship-grid{

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

gap:20px;

}

.featured-programme{

transform:none;

}

}


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

@media(max-width:768px){

.flagship-grid{

display:flex;

overflow-x:auto;

gap:18px;

scroll-snap-type:x mandatory;

padding-bottom:10px;

margin-top:45px;

scrollbar-width:none;

}

.flagship-grid::-webkit-scrollbar{

display:none;

}

.programme-card{

min-width:300px;

max-width:300px;

flex:0 0 auto;

scroll-snap-align:start;

padding:24px;

}

.programme-card h3{

font-size:21px;

}

.programme-card p{

font-size:14px;

line-height:1.7;

}

.programme-list{

gap:12px;

margin-bottom:24px;

}

.programme-list li{

font-size:14px;

}

.programme-btn{

padding:13px 22px;

font-size:14px;

}

.featured-programme{

transform:none;

}

.featured-programme::after{

top:16px;

right:16px;

font-size:10px;

padding:6px 12px;

}

}


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

@media(max-width:480px){

.flagship-section{

padding:80px 0;

}

.programme-card{

min-width:285px;

max-width:285px;

padding:22px;

border-radius:26px;

}

.programme-icon{

width:56px;

height:56px;

}

.programme-icon i{

font-size:24px;

}

.programme-card h3{

font-size:20px;

}

.programme-card p{

font-size:14px;

}

.programme-age{

font-size:11px;

}

.programme-btn{

width:100%;

justify-content:center;

}

}
/*==================================================
LEARNING ECOSYSTEM
==================================================*/

/*==================================================
LEARNING ECOSYSTEM
==================================================*/

.ecosystem-section{

padding:100px 0;

background:
linear-gradient(
135deg,
#f9eefb,
#eef7f6
);

position:relative;

overflow:hidden;

}


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

.ecosystem-section::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:rgba(106,27,154,.05);

left:-180px;

top:-180px;

filter:blur(80px);

}

.ecosystem-section::after{

content:"";

position:absolute;

width:380px;

height:380px;

border-radius:50%;

background:rgba(56,201,185,.07);

right:-160px;

bottom:-160px;

filter:blur(80px);

}


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

.ecosystem-wrapper{

position:relative;

width:620px;

height:620px;

margin:70px auto 0;

}


/*=========================================
DASHED ORBIT
=========================================*/

.ecosystem-orbit{

position:absolute;

top:50%;

left:50%;

width:430px;

height:430px;

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

border-radius:50%;

border:2px dashed rgba(106,27,154,.12);

}


/*=========================================
CENTER CIRCLE
=========================================*/

.ecosystem-center{

position:absolute;

top:50%;

left:50%;

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

width:180px;

height:180px;

border-radius:50%;

background:

linear-gradient(

135deg,

#6A1B9A,

#7c3aed,

#38C9B9

);

display:flex;

align-items:center;

justify-content:center;

box-shadow:

0 25px 60px rgba(106,27,154,.18);

z-index:5;

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

}

.ecosystem-center::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:rgba(106,27,154,.08);

filter:blur(35px);

z-index:-1;

}

.ecosystem-center img{

width:95px;

height:95px;

object-fit:contain;

}


/*=========================================
COMMON NODE
=========================================*/

.eco-node{

position:absolute;

width:120px;

text-align:center;

}

.eco-circle{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

box-shadow:

0 12px 30px rgba(0,0,0,.06);

transition:.35s;

border:1px solid rgba(106,27,154,.05);

}

.eco-circle:hover{

transform:translateY(-6px);

box-shadow:

0 20px 40px rgba(0,0,0,.08);

}


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

.eco-node h4{

margin-top:14px;

font-size:16px;

font-weight:700;

line-height:1.35;

color:#222;

}

/*==================================================
LEARNING ECOSYSTEM
CSS PART 2
==================================================*/


/*=========================================
NODE POSITIONS
=========================================*/

/* Top */

.node-1{

top:18px;

left:50%;

transform:translateX(-50%);

}


/* Top Right */

.node-2{

top:90px;

right:20px;

}


/* Right */

.node-3{

top:50%;

right:-15px;

transform:translateY(-50%);

}


/* Bottom Right */

.node-4{

bottom:90px;

right:20px;

}


/* Bottom */

.node-5{

bottom:18px;

left:50%;

transform:translateX(-50%);

}


/* Bottom Left */

.node-6{

bottom:90px;

left:20px;

}


/* Left */

.node-7{

top:50%;

left:-15px;

transform:translateY(-50%);

}


/* Top Left */

.node-8{

top:90px;

left:20px;

}


/*=========================================
FLOATING EFFECT
=========================================*/
.eco-circle{

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

}


.node-2{

animation-delay:.4s;

}

.node-3{

animation-delay:.8s;

}

.node-4{

animation-delay:1.2s;

}

.node-5{

animation-delay:1.6s;

}

.node-6{

animation-delay:2s;

}

.node-7{

animation-delay:2.4s;

}

.node-8{

animation-delay:2.8s;

}


@keyframes ecoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}


@keyframes centerFloat{

0%,100%{

transform:

translate(-50%,-50%);

}

50%{

transform:

translate(-50%,-54%);

}

}


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

@media(max-width:992px){

.ecosystem-wrapper{

width:540px;

height:540px;

}

.ecosystem-orbit{

width:360px;

height:360px;

}

.ecosystem-center{

width:160px;

height:160px;

}

.ecosystem-center img{

width:85px;

}

.eco-circle{

width:80px;

height:80px;

font-size:30px;

}

.eco-node{

width:110px;

}

.eco-node h4{

font-size:15px;

}

}


/*=========================================
MOBILE
Instead of squeezing the orbit,
convert to a clean grid.
=========================================*/

@media(max-width:768px){

.ecosystem-wrapper{

width:100%;

height:auto;

display:grid;

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

gap:22px;

margin-top:45px;

}

.ecosystem-orbit{

display:none;

}

.ecosystem-center{

position:relative;

top:auto;

left:auto;

transform:none;

grid-column:span 2;

margin:0 auto 20px;

width:150px;

height:150px;

animation:none;

}

.ecosystem-center img{

width:80px;

}

.eco-node{

position:relative;

top:auto;

left:auto;

right:auto;

bottom:auto;

transform:none!important;

width:100%;

animation:none;

}

.eco-circle{

width:78px;

height:78px;

font-size:30px;

}

.eco-node h4{

font-size:15px;

margin-top:12px;

}

}


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

@media(max-width:480px){

.ecosystem-section{

padding:80px 0;

}

.ecosystem-wrapper{

gap:18px;

}

.ecosystem-center{

width:130px;

height:130px;

}

.ecosystem-center img{

width:70px;

}

.eco-circle{

width:72px;

height:72px;

font-size:28px;

}

.eco-node h4{

font-size:14px;

line-height:1.4;

}

}


/*==================================================
DEVELOPMENT PILLARS
==================================================*/

.pillar-section{

background:#fff;

}

.pillar-grid{

margin-top:70px;

display:grid;

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

gap:26px;

}


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

.pillar-card{

background:#fff;

padding:36px;

border-radius:28px;

border:1px solid rgba(106,27,154,.08);

box-shadow:var(--shadow-sm);

transition:.35s;

position:relative;

overflow:hidden;

}

.pillar-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

}

.pillar-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}

.pillar-card.large{

grid-column:span 2;

}

.pillar-card h3{

margin-bottom:18px;

font-size:30px;

}

.pillar-card p{

font-size:15px;

}


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

.pillar-card::after{

content:"";

position:absolute;

right:-40px;

bottom:-40px;

width:160px;

height:160px;

border-radius:50%;

background:

linear-gradient(

135deg,

rgba(106,27,154,.08),

rgba(56,201,185,.08)

);

}


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

@media(max-width:1100px){

.ecosystem-wrapper{

height:auto;

display:grid;

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

gap:22px;

}

.ecosystem-center{

position:relative;

top:auto;

left:auto;

transform:none;

width:100%;

height:220px;

grid-column:span 2;

}

.eco-card{

position:relative;

top:auto;

left:auto;

right:auto;

bottom:auto;

transform:none;

width:100%;

height:200px;

}

.ecosystem-wrapper::before{

display:none;

}

.pillar-grid{

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

}

.pillar-card.large{

grid-column:span 2;

}

}

@media(max-width:768px){

.ecosystem-wrapper{

grid-template-columns:1fr;

}

.ecosystem-center{

grid-column:auto;

height:200px;

}

.eco-card{

height:180px;

}

.eco-card i{

font-size:34px;

}

.eco-card h4{

font-size:20px;

}

.pillar-grid{

grid-template-columns:1fr;

}

.pillar-card.large{

grid-column:auto;

}

}

@media(max-width:480px){

.pillar-card{

padding:28px;

}

.pillar-card h3{

font-size:24px;

}

}
/*==================================================
CSS PART 3B
GALLERY
TESTIMONIALS
==================================================*/


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

.gallery-section{

background:linear-gradient(

180deg,

#faf8fd 0%,

#ffffff 100%

);

position:relative;

overflow:hidden;

}


/* Decorative Blobs */

.gallery-section::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:rgba(106,27,154,.05);

right:-180px;

top:-150px;

filter:blur(80px);

}

.gallery-section::after{

content:"";

position:absolute;

width:360px;

height:360px;

border-radius:50%;

background:rgba(56,201,185,.08);

left:-160px;

bottom:-150px;

filter:blur(80px);

}


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

.gallery-grid{

margin-top:70px;

display:grid;

grid-template-columns:

repeat(4,1fr);

grid-auto-rows:250px;

gap:22px;

position:relative;

z-index:2;

}


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

.gallery-grid img{

width:100%;

height:100%;

object-fit:cover;

display:block;

border-radius:26px;

transition:.45s ease;

cursor:pointer;

box-shadow:var(--shadow-sm);

}


/* Premium Hover */

.gallery-grid img:hover{

transform:

translateY(-10px)

scale(1.03);

box-shadow:var(--shadow-lg);

}


/*=========================================
MASONRY LOOK
=========================================*/

.gallery-grid img:nth-child(1){

grid-column:span 2;

grid-row:span 2;

}

.gallery-grid img:nth-child(5){

grid-column:span 2;

}


/*==================================================
TESTIMONIAL SECTION
==================================================*/
/*=========================================
TESTIMONIALS
=========================================*/

.testimonial-section{

padding:100px 0;

background:

linear-gradient(

135deg,

#f9eefb,

#eef7f6

);

}

.testimonial-grid{

display:grid;

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

gap:22px;

margin-top:55px;

}

.testimonial-card{

background:#fff;

border-radius:28px;

padding:28px;

box-shadow:

0 10px 30px rgba(0,0,0,.05);

transition:.35s;

border:1px solid rgba(106,27,154,.05);

}

.testimonial-card:hover{

transform:translateY(-6px);

box-shadow:

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

}

.testimonial-top{

display:flex;

align-items:center;

gap:16px;

margin-bottom:20px;

}

.testimonial-avatar{

width:56px;

height:56px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

color:#fff;

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

font-size:18px;

}

.testimonial-top h4{

font-size:20px;

margin-bottom:4px;

font-weight:700;

}

.testimonial-top span{

font-size:14px;

color:#777;

}

.testimonial-card p{

font-size:16px;

line-height:1.7;

color:#666;

margin-bottom:20px;

}

.testimonial-rating{

font-size:18px;

letter-spacing:3px;

color:#ffb400;

}


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

@media(max-width:992px){

.testimonial-grid{

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

}

}


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

@media(max-width:768px){

.testimonial-grid{

display:flex;

overflow-x:auto;

gap:18px;

scroll-snap-type:x mandatory;

padding-bottom:10px;

scrollbar-width:none;

}

.testimonial-grid::-webkit-scrollbar{

display:none;

}

.testimonial-card{

min-width:290px;

flex:0 0 auto;

scroll-snap-align:start;

}

}
/*==================================================
CSS PART 3C
FAQ • CTA • FOOTER
==================================================*/


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

.faq-section{

background:#faf8fd;

position:relative;

overflow:hidden;

}

.faq-section::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:rgba(106,27,154,.05);

top:-180px;

right:-180px;

filter:blur(70px);

}


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

.faq-wrapper{

max-width:900px;

margin:70px auto 0;

display:flex;

flex-direction:column;

gap:20px;

position:relative;

z-index:2;

}


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

.faq-item{

background:#fff;

border-radius:24px;

border:1px solid rgba(106,27,154,.08);

overflow:hidden;

box-shadow:var(--shadow-sm);

transition:.35s;

}

.faq-item:hover{

box-shadow:var(--shadow-md);

}

.faq-item.active{

box-shadow:var(--shadow-lg);

}


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

.faq-question{

width:100%;

padding:24px 30px;

display:flex;

justify-content:space-between;

align-items:center;

background:none;

border:none;

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

font-size:20px;

font-weight:700;

text-align:left;

cursor:pointer;

}

.faq-question i{

color:var(--primary);

transition:.35s;

}

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

transform:rotate(45deg);

}


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

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .45s ease;

}

.faq-answer p{

padding:0 30px 28px;

font-size:16px;

line-height:1.9;

color:#666;

}


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

.cta-section{

background:

linear-gradient(

135deg,

#6A1B9A,

#38C9B9

);

color:#fff;

position:relative;

overflow:hidden;

}

.cta-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

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

top:-200px;

left:-200px;

filter:blur(60px);

}

.cta-section::after{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

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

bottom:-180px;

right:-180px;

filter:blur(60px);

}


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

.cta-box{

position:relative;

z-index:2;

text-align:center;

max-width:860px;

margin:auto;

}

.cta-box .section-tag{

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

color:#fff;

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

}

.cta-box .section-tag::before{

background:#fff;

}

.cta-box h2{

color:#fff;

font-size:clamp(2.6rem,5vw,4.5rem);

margin-bottom:22px;

}

.cta-box p{

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

max-width:680px;

margin:0 auto 38px;

font-size:18px;

}

.cta-box .primary-btn{

background:#fff;

color:var(--primary);

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

}

.cta-box .primary-btn:hover{

transform:translateY(-5px);

}


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

.footer{

background:#111;

color:#fff;

padding:90px 0 25px;

}

.footer-grid{

display:grid;

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

gap:60px;

margin-bottom:60px;

}

.footer img{

height:58px;

margin-bottom:24px;

}

.footer p{

color:#bdbdbd;

line-height:1.9;

}

.footer h4{

color:#fff;

margin-bottom:24px;

font-size:22px;

}

.footer a{

display:block;

margin-bottom:14px;

color:#bdbdbd;

transition:.3s;

}

.footer a:hover{

color:#fff;

padding-left:6px;

}

.footer-bottom{

padding-top:25px;

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

text-align:center;

color:#999;

font-size:14px;

}


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

.reveal{

opacity:0;

transform:translateY(40px);

transition:

opacity .8s ease,

transform .8s ease;

}

.reveal.active{

opacity:1;

transform:none;

}


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

.btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

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

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

width:500px;

height:500px;

opacity:0;

}

}


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

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.footer img{

margin-inline:auto;

}

}

@media(max-width:768px){

.faq-question{

padding:20px;

font-size:18px;

}

.faq-answer p{

padding:0 20px 20px;

font-size:15px;

}

.cta-box p{

font-size:16px;

}

.footer{

padding:70px 0 20px;

}

}

@media(max-width:480px){

.faq-question{

font-size:16px;

}

.footer h4{

font-size:20px;

}

.footer p,

.footer a{

font-size:15px;

}

}


/*=========================================
POPUP
=========================================*/

.popup-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

padding:20px;

}

.popup-overlay.active{

opacity:1;

visibility:visible;

}


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

.popup-form{

width:100%;

max-width:500px;

background:#fff;

border-radius:28px;

padding:34px;

position:relative;

box-shadow:

0 35px 90px rgba(0,0,0,.18);

animation:popupUp .35s;

}


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

@keyframes popupUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}


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

.popup-close{

position:absolute;

top:18px;

right:18px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#f5f5f5;

cursor:pointer;

font-size:22px;

}


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

.popup-form h2{

font-size:32px;

margin-bottom:10px;

}

.popup-form p{

font-size:15px;

margin-bottom:24px;

color:#666;

}


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

.form-group{

margin-bottom:18px;

}

.form-group input,

.form-group textarea,

.form-group select{

width:100%;

padding:15px 18px;

border-radius:16px;

border:1px solid #e4e4e4;

font-size:15px;

font-family:inherit;

outline:none;

transition:.3s;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

border-color:#6A1B9A;

box-shadow:

0 0 0 4px rgba(106,27,154,.08);

}

.popup-form textarea{

resize:none;

}

.popup-form button[type="submit"]{

width:100%;

margin-top:10px;

}