/*==================================================
STUDENT PERFORMANCE SYSTEM
Official Website Stylesheet
Version : 1.0
Developer : Student Performance System

=============================================
01 ROOT VARIABLES
=============================================*/

:root{

/*========== Main Colors ==========*/

--primary:#2563eb;

--primary-dark:#1d4ed8;

--secondary:#06b6d4;

--accent:#22c55e;

--warning:#f59e0b;

--danger:#ef4444;


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

--bg:#f5f7fb;

--surface:#ffffff;

--dark:#0f172a;

--text:#1e293b;

--text-light:#64748b;

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


/*========== Glass ==========*/

--glass-bg:rgba(255,255,255,.10);

--glass-bg-2:rgba(255,255,255,.18);

--glass-border:rgba(255,255,255,.22);

--blur:18px;


/*========== Shadow ==========*/

--shadow-sm:

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

--shadow:

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

--shadow-lg:

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


/*========== Radius ==========*/

--radius-sm:10px;

--radius:18px;

--radius-lg:28px;

--radius-round:50px;


/*========== Transition ==========*/

--transition:.35s ease;


/*========== Width ==========*/

--container:1280px;

}



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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}

body{

/*font-family:"Poppins",sans-serif;*/

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

font-size:16px;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

button{

/*font-family:inherit;*/

cursor:pointer;

border:none;

outline:none;

background:none;

}

ul{

list-style:none;

}

input,

textarea,

select{

/*font-family:inherit;*/

outline:none;

}



/*=============================================
03 COMMON
=============================================*/

.container{

width:min(100% - 40px,var(--container));

margin:auto;

}

section{

padding:110px 0;

position:relative;

overflow:hidden;

}

.sectionHeader{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.sectionHeader span{

display:inline-block;

padding:8px 18px;

border-radius:50px;

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

color:var(--primary);

font-weight:700;

font-size:.92rem;

letter-spacing:.5px;

margin-bottom:18px;

}

.sectionHeader h2{

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

line-height:1.25;

font-weight:800;

margin-bottom:22px;

color:var(--dark);

}

.sectionHeader p{

font-size:1.05rem;

color:var(--text-light);

}



/*=============================================
04 GLASS SYSTEM
=============================================*/

.glass,

.glassButton,

.heroBadge,

.missionCard,

.whyCard,

.impactCard,

.analyticsCard,

.instituteCard,

.networkCard,

.userCard,

.step,

.transformCard,

.commitmentCard,

.updateCard,

.exploreCard,

.siteCard{

background:var(--glass-bg);

backdrop-filter:blur(var(--blur));

-webkit-backdrop-filter:blur(var(--blur));

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

box-shadow:var(--shadow);

border-radius:var(--radius);

transition:var(--transition);

}

.glass:hover,

.glassButton:hover,

.missionCard:hover,

.whyCard:hover,

.impactCard:hover,

.analyticsCard:hover,

.instituteCard:hover,

.networkCard:hover,

.userCard:hover,

.step:hover,

.transformCard:hover,

.commitmentCard:hover,

.updateCard:hover,

.exploreCard:hover,

.siteCard:hover{

transform:translateY(-8px);

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

}



/*=============================================
05 BUTTON SYSTEM
=============================================*/

.primaryButton,

.secondaryButton,

.glassButton{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 30px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.primaryButton{

background:linear-gradient(

135deg,

#2563eb,

#06b6d4

);

color:#fff;

box-shadow:

0 12px 25px

rgba(37,99,235,.28);

}

.primaryButton:hover{

transform:translateY(-4px);

}

.secondaryButton{

background:#fff;

color:var(--primary);

border:1px solid

rgba(37,99,235,.2);

}

.secondaryButton:hover{

background:var(--primary);

color:#fff;

}

.glassButton{

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

backdrop-filter:blur(14px);

border:1px solid

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

}

.glassButton:hover{

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

}

#loader{

position:fixed;

inset:0;

background:
linear-gradient(135deg,#2563eb,#0f172a);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:25px;

z-index:99999;

transition:.6s;

}

.loaderLogo{

width:130px;

height:130px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

backdrop-filter:blur(18px);

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

}

.loaderLogo img{

width:90px;

/*
Recommended Logo

images/logo.png

PNG Transparent

Size 300×300
*/

}

.loaderSpinner{

width:58px;

height:58px;

border-radius:50%;

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

border-top-color:#fff;

animation:loaderSpin .9s linear infinite;

}

#loader h2{

color:#fff;

font-size:1.2rem;

font-weight:600;

letter-spacing:.6px;

text-align:center;

}

/*==================================================
07 SCROLL PROGRESS
==================================================*/

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:

linear-gradient(

90deg,

#06b6d4,

#2563eb,

#22c55e

);

z-index:9999;

transition:.15s;

}


/*==================================================
08 ANIMATED BACKGROUND
==================================================*/

.background{

position:fixed;

inset:0;

overflow:hidden;

z-index:-2;

background:

linear-gradient(

135deg,

#f4f8ff,

#eef5ff,

#ffffff

);

}

.background span{

position:absolute;

display:block;

width:260px;

height:260px;

border-radius:50%;

background:

rgba(37,99,235,.08);

backdrop-filter:blur(30px);

animation:floatBall 22s linear infinite;

}

.background span:nth-child(1){

top:5%;

left:8%;

animation-duration:25s;

}

.background span:nth-child(2){

top:70%;

left:10%;

width:180px;

height:180px;

animation-duration:18s;

}

.background span:nth-child(3){

top:18%;

right:12%;

animation-duration:30s;

}

.background span:nth-child(4){

bottom:12%;

right:6%;

width:320px;

height:320px;

}

.background span:nth-child(5){

top:40%;

left:45%;

width:140px;

height:140px;

}

.background span:nth-child(6){

bottom:28%;

left:30%;

}

.background span:nth-child(7){

top:8%;

left:58%;

width:180px;

height:180px;

}

.background span:nth-child(8){

bottom:5%;

right:35%;

width:220px;

height:220px;

}


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

#header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;

padding:16px 0;

transition:
background .35s,
box-shadow .35s,
backdrop-filter .35s;

}

/*===================================================================================================================
 -----------------#header.scrolled শুধুমাত্র এই অংশটুকুই স্বচ্ছ হেডারের নিচের লেখা স্ক্রল হয় , পড়া যায়    না।-----------------
=====================================================================================================================*/
/*
#header.scrolled{

padding:16px 0;

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

backdrop-filter:blur(18px);

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

}
*/

/*===================================================================================================================
 -----------------#header.scrolled শুধুমাত্র এই অংশটুকুই স্বচ্ছ হেডারের নিচের লেখা স্ক্রল হয় , পড়া যায়।-----------------------
=====================================================================================================================*/
#header.scrolled{

background:transparent;

box-shadow:none;

backdrop-filter:none;

}

#header .container{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}


.logo{

display:flex;

align-items:center;

}

.logo img{

width:62px;

/*
Logo

images/logo.png

Transparent PNG

Recommended Size
300×300
*/

}

.headerRight{

flex:1;

display:flex;

flex-direction:column;

gap:8px;

}

.mainNav,
.sectionNav{

display:flex;

justify-content:center;

align-items:center;

gap:24px;

flex-wrap:wrap;

}

.mainNav a,
.sectionNav a{

text-decoration:none;

color:var(--dark);

font-weight:600;

padding:4px 0;

position:relative;

transition:.3s;

}

.mainNav a:hover,
.sectionNav a:hover,
.mainNav a.active,
.sectionNav a.active{

color:var(--primary);

}

.mainNav a::after,
.sectionNav a::after{

content:"";

position:absolute;

left:0;

bottom:-3px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.mainNav a:hover::after,
.sectionNav a:hover::after,
.mainNav a.active::after,
.sectionNav a.active::after{

width:100%;

}
/*==================================================
10 NAVIGATION
==================================================*/

#navbar ul{

display:flex;

align-items:center;

gap:28px;

}

#navbar a{

position:relative;

font-weight:600;

color:var(--dark);

transition:.3s;

}

#navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-7px;

width:0;

height:2px;

background:var(--primary);

transition:.35s;

}

#navbar a:hover{

color:var(--primary);

}

#navbar a:hover::after{

width:100%;

}

.anotherPage,
.thisPage{

display:flex;

align-items:center;

gap:6px;

margin:0;

padding:0;

font-size:.95rem;

font-weight:700;

white-space:nowrap;

}

/*==================================================
11 HEADER BUTTONS
==================================================*/

.headerButtons{

display:flex;

align-items:center;

gap:14px;

}

#themeButton{

width:46px;

height:46px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

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

backdrop-filter:blur(15px);

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

font-size:1rem;

transition:.35s;

}

#themeButton:hover{

transform:rotate(20deg);

}

.loginButton{

padding:13px 26px;

border-radius:50px;

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

color:#fff;

font-weight:600;

transition:.35s;

}

.loginButton:hover{

transform:translateY(-3px);

}


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

#menuButton{

display:none;

width:48px;
height:48px;

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

font-size:2.6rem;

cursor:pointer;

background:transparent;

backdrop-filter:none;
-webkit-backdrop-filter:none;

border:none;

box-shadow:none;

transition:.35s;

color:inherit;

}

#menuButton:hover{

transform:rotate(90deg);

background:transparent;

}

#menuButton.active{

background:transparent;

color:var(--primary);

transform:rotate(90deg);

}

#navbar a{

transition:.3s ease;

}
/*==================================================
HEADER EXTRA
==================================================*/

body.menuOpen{

overflow:hidden;

}

#navbar a.active{

color:var(--primary);

font-weight:700;

}

#navbar a.active::after{

width:100%;

}

/*==================================================
13 KEYFRAMES
==================================================*/

@keyframes loaderSpin{

to{

transform:rotate(360deg);

}

}

@keyframes floatBall{

0%{

transform:

translateY(0)

translateX(0)

rotate(0deg);

}

50%{

transform:

translateY(-60px)

translateX(40px)

rotate(180deg);

}

100%{

transform:

translateY(0)

translateX(0)

rotate(360deg);

}

}

/*==================================================
14 HERO SECTION
==================================================*/

.heroSection{

min-height:100vh;

display:flex;

align-items:center;

padding-top:60px;

padding-bottom:40px;

position:relative;

}

.heroContainer{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

}


/*==================================================
15 HERO LEFT
==================================================*/

.heroLeft{

animation:fadeLeft 1s ease;

}

.heroBadge{

display:inline-flex;

align-items:center;

gap:15px;

padding:10px 20px;

margin-bottom:25px;

font-weight:600;

color:var(--primary);

font-size:.95rem;

}

.heroLeft h1{

font-size:clamp(2.7rem,5vw,4.6rem);

font-weight:800;

line-height:1.15;

color:var(--dark);

margin-bottom:12px;


}

#typingText{

font-size:1.55rem;

font-weight:700;

color:var(--secondary);

min-height:45px;

margin-bottom:24px;

}

.heroLeft p{

font-size:1.08rem;

line-height:1.9;

color:var(--text-light);

max-width:650px;

margin-bottom:35px;

}

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

.heroButtons{

display:flex;

flex-wrap:wrap;

gap:18px;

}



/*==================================================
17 HERO RIGHT
==================================================*/

.heroRight{

display:flex;

justify-content:center;

animation:fadeRight 1s ease;

}


/*==================================================
18 LIVE SERVER CARD
==================================================*/

.liveServerCard{

width:100%;

max-width:520px;

padding:38px;

border-radius:32px;

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

backdrop-filter:blur(22px);

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

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

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

position:relative;

overflow:hidden;

}

.liveServerCard::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

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

top:-100px;

right:-80px;

}

.liveServerCard::after{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

background:rgba(6,182,212,.10);

bottom:-80px;

left:-60px;

}


/*==================================================
19 SERVER HEADER
==================================================*/

.serverHeader{

display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;

position:relative;

z-index:2;

}

.serverDot{

width:12px;

height:12px;

border-radius:50%;

background:#22c55e;

box-shadow:

0 0 0 6px

rgba(34,197,94,.20);

animation:serverPulse 1.5s infinite;

}

.serverHeader span{

font-size:.9rem;

font-weight:700;

letter-spacing:1px;

color:var(--text-light);

}

.liveServerCard h2{

font-size:2rem;

font-weight:800;

margin-bottom:18px;

position:relative;

z-index:2;

}

.liveServerCard p{

font-size:1rem;

line-height:1.8;

color:var(--text-light);

margin-bottom:35px;

position:relative;

z-index:2;

}


/*==================================================
20 SERVER STATS
==================================================*/

.serverStats{

display:grid;

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

gap:18px;

position:relative;

z-index:2;

}

.serverStats div{

padding:22px;

text-align:center;

border-radius:18px;

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

backdrop-filter:blur(14px);

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

transition:.35s;

}

.serverStats div:hover{

transform:translateY(-8px);

}

.serverStats h3{

font-size:2rem;

font-weight:800;

color:var(--primary);

margin-bottom:8px;

}

.serverStats span{

font-size:.95rem;

color:var(--text-light);

}


/*==================================================
21 HERO DECORATION
==================================================*/

.heroSection::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

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

top:-120px;

left:-150px;

filter:blur(20px);

}

.heroSection::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(6,182,212,.08);

bottom:-100px;

right:-100px;

filter:blur(25px);

}


/*==================================================
22 HERO ANIMATIONS
==================================================*/

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes serverPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.25);

}

100%{

transform:scale(1);

}

}
/*==================================================
23 COMMON GRID SYSTEM
==================================================*/

.missionGrid,
.whyGrid,
.impactGrid,
.analyticsGrid,
.instituteGrid,
.networkGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.missionCard,
.whyCard,
.impactCard,
.analyticsCard,
.instituteCard,
.networkCard{

padding:35px;

text-align:center;

position:relative;

overflow:hidden;

}

.missionCard i,
.whyCard i,
.impactCard i,
.analyticsCard i{

font-size:3rem;

margin-bottom:22px;

color:var(--primary);

transition:.35s;

}

.missionCard:hover i,
.whyCard:hover i,
.impactCard:hover i,
.analyticsCard:hover i{

transform:scale(1.18) rotate(6deg);

color:var(--secondary);

}

.missionCard h3,
.whyCard h3,
.impactCard h3,
.analyticsCard h3{

font-size:1.45rem;

margin-bottom:18px;

font-weight:700;

}

.missionCard p,
.whyCard p,
.impactCard p,
.analyticsCard p{

color:var(--text-light);

line-height:1.8;

}

/*==================================================
24 BEFORE VS AFTER
==================================================*/

.compareSection{

background:

linear-gradient(

180deg,

transparent,

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

transparent

);

}

.compareGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

}

.beforeBox,
.afterBox{

padding:40px;

border-radius:28px;

backdrop-filter:blur(18px);

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

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

box-shadow:var(--shadow);

}

.beforeBox{

border-left:6px solid #ef4444;

}

.afterBox{

border-left:6px solid #22c55e;

}

.beforeBox h2,
.afterBox h2{

margin-bottom:30px;

font-size:2rem;

}

.beforeBox li,
.afterBox li{

padding:13px 0;

border-bottom:1px dashed rgba(0,0,0,.08);

font-size:1.05rem;

}


/*==================================================
25 ANALYTICS
==================================================*/

.analyticsCard{

min-height:260px;

display:flex;

flex-direction:column;

justify-content:center;

}

.analyticsCard h2{

font-size:2rem;

margin-bottom:10px;

}

.analyticsCard h3{

font-size:2.4rem;

color:var(--primary);

margin-bottom:10px;

}

.analyticsCard p{

margin-top:5px;

}


/*==================================================
26 CONNECTED INSTITUTES
==================================================*/

.instituteCard{

padding:28px;

}

.instituteCard img{

width:110px;

height:110px;

margin:auto;

margin-bottom:25px;

object-fit:contain;

/*
Institute Logo

Folder:

images/institutes/

Recommended Size:

300 × 300 PNG
*/

}

.instituteCard h3{

font-size:1.25rem;

margin-bottom:8px;

}

.instituteCard span{

color:var(--primary);

font-weight:600;

}

.centerButton{

margin-top:55px;

text-align:center;

}


/*==================================================
27 COVERAGE
==================================================*/

.coverageWrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.coverageMap{

text-align:center;

}

.coverageMap img{

width:100%;

max-width:520px;

margin:auto;

/*

Map Image

images/bangladesh-map.png

Recommended Width

900px PNG

Transparent Background

*/

}

.coverageContent h3{

font-size:2rem;

margin-bottom:25px;

}

.coverageContent p{

margin-bottom:25px;

line-height:1.9;

color:var(--text-light);

}

.coverageContent ul{

display:grid;

gap:15px;

}

.coverageContent li{

padding:12px 18px;

border-radius:14px;

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

}


/*==================================================
28 NETWORK
==================================================*/

.networkCard{

padding:45px 25px;

}

.networkCard h2{

font-size:2rem;

color:var(--primary);

margin-bottom:15px;

font-weight:800;

}

.networkCard p{

font-size:1.05rem;

color:var(--text-light);

}


/*==================================================
29 SECTION HOVER EFFECT
==================================================*/

.missionCard::before,
.whyCard::before,
.impactCard::before,
.analyticsCard::before,
.instituteCard::before,
.networkCard::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transition:.8s;

}

.missionCard:hover::before,
.whyCard:hover::before,
.impactCard:hover::before,
.analyticsCard:hover::before,
.instituteCard:hover::before,
.networkCard:hover::before{

left:120%;

}
/*==================================================
30 WHO BENEFITS
==================================================*/

.usersGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.userCard{

padding:35px;

position:relative;

overflow:hidden;

}

.userCard i{

font-size:3rem;

color:var(--primary);

margin-bottom:22px;

}

.userCard h3{

font-size:1.45rem;

margin-bottom:20px;

font-weight:700;

}

.userCard ul{

display:grid;

gap:14px;

}

.userCard li{

padding:12px 15px;

border-radius:12px;

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

transition:.35s;

}

.userCard li:hover{

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

transform:translateX(8px);

}


/*==================================================
31 WORKFLOW
==================================================*/

.workflow{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:20px;

flex-wrap:wrap;

}

.step{

flex:1;

min-width:210px;

padding:30px;

text-align:center;

}

.stepNumber{

width:70px;

height:70px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:1.4rem;

font-weight:700;

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

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

}

.step h3{

margin-bottom:15px;

font-size:1.3rem;

}

.step p{

color:var(--text-light);

line-height:1.8;

}

.arrow{

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

color:var(--primary);

padding-top:55px;

}


/*==================================================
32 EDUCATION TRANSFORMATION
==================================================*/

.transformationGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.transformCard{

padding:35px;

}

.transformCard h3{

font-size:1.4rem;

margin-bottom:18px;

}

.transformCard p{

line-height:1.9;

color:var(--text-light);

}


/*==================================================
33 COMMITMENT
==================================================*/

.commitmentGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.commitmentCard{

padding:35px;

text-align:center;

}

.commitmentCard i{

font-size:3rem;

margin-bottom:22px;

color:var(--primary);

}

.commitmentCard h3{

margin-bottom:15px;

font-size:1.35rem;

}

.commitmentCard p{

line-height:1.8;

color:var(--text-light);

}


/*==================================================
34 JOIN SECTION
==================================================*/

.joinBox{

padding:70px 60px;

border-radius:35px;

text-align:center;

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

color:#fff;

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

}

.joinBox h2{

font-size:clamp(2rem,4vw,3rem);

margin-bottom:25px;

}

.joinBox p{

max-width:760px;

margin:auto;

margin-bottom:40px;

line-height:1.9;

opacity:.95;

}

.joinButtons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}


/*==================================================
35 LATEST UPDATES
==================================================*/

.updateGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.updateCard{

padding:35px;

}

.updateDate{

display:inline-block;

padding:8px 18px;

border-radius:50px;

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

color:var(--primary);

font-weight:700;

margin-bottom:20px;

}

.updateCard h3{

font-size:1.4rem;

margin-bottom:18px;

}

.updateCard p{

line-height:1.8;

color:var(--text-light);

margin-bottom:25px;

}

.updateCard a{

font-weight:700;

color:var(--primary);

}


/*==================================================
36 DEMO
==================================================*/

.demoContent{

padding:80px 50px;

text-align:center;

border-radius:35px;

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

backdrop-filter:blur(22px);

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

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

}

.demoContent h2{

font-size:clamp(2rem,4vw,3rem);

margin-bottom:25px;

}

.demoContent p{

max-width:700px;

margin:auto;

margin-bottom:40px;

line-height:1.9;

color:var(--text-light);

}


/*==================================================
37 EXPLORE MORE
==================================================*/

.exploreGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.exploreCard{

padding:35px;

text-align:center;

}

.exploreCard i{

font-size:3rem;

color:var(--primary);

margin-bottom:20px;

}

.exploreCard h3{

margin-bottom:18px;

font-size:1.35rem;

}

.exploreCard p{

line-height:1.8;

color:var(--text-light);

margin-bottom:30px;

}


/*==================================================
38 WEBSITE NAVIGATION
==================================================*/

.siteMapGrid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.siteCard{

padding:35px;

}

.siteCard i{

font-size:2.8rem;

color:var(--primary);

margin-bottom:20px;

}

.siteCard h3{

font-size:1.4rem;

margin-bottom:15px;

}

.siteCard p{

color:var(--text-light);

margin-bottom:25px;

}

.pageLinks{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.pageLinks a{

padding:10px 18px;

border-radius:50px;

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

font-size:.95rem;

font-weight:600;

transition:.35s;

}

.pageLinks a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-3px);

}

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

.footer{

position:relative;

margin-top:80px;

padding:70px 0 0;

background:linear-gradient(
135deg,
#0f172a,
#111827,
#1e293b
);

color:#fff;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

top:-180px;

left:-120px;

width:420px;

height:420px;

border-radius:50%;

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

filter:blur(80px);

}

.footer::after{

content:"";

position:absolute;

right:-140px;

bottom:-180px;

width:380px;

height:380px;

border-radius:50%;

background:rgba(6,182,212,.10);

filter:blur(80px);

}

/*==================================================
40 FOOTER GRID
==================================================*/
.footerGrid{

display:grid;

grid-template-columns:
2fr
0.9fr
1.15fr
1.1fr;

column-gap:10px;

row-gap:35px;

padding-bottom:50px;

}


/*==================================================
42 FOOTER COLUMN
==================================================*/

.footerColumn h3{

font-size:1.25rem;

margin-bottom:22px;

position:relative;

}

.footerColumn h3::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:48px;

height:3px;

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

border-radius:30px;

}

.footerColumn ul{

display:grid;

gap:12px;

}

.footerColumn ul li{

transition:.35s;

}

.footerColumn ul li:hover{

transform:translateX(6px);

}

.footerColumn a{

display:inline-block;

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

transition:.35s;

}

.footerColumn a:hover{

color:#ffffff;

}

.footerColumn a::after{

content:"";

position:absolute;

left:0;

bottom:-2px;

width:0;

height:2px;

background:#06b6d4;

transition:.35s;

}

.footerColumn a:hover::after{

width:100%;

}


/*==================================================
43 CONTACT
==================================================*/
.contactList{

display:grid;

gap:12px;

}

.contactList li{

display:flex;

align-items:center;

gap:12px;

}

.contactList i{

width:40px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

color:#06b6d4;

flex-shrink:0;

}

.contactList a{

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

text-decoration:none;

white-space:nowrap;

transition:.3s;

}

.contactList a:hover{

color:#06b6d4;

}

.contactList span{

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

}
/*==================================================
44 SOCIAL
==================================================*/

.footerSocial{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:20px;

margin-top:30px;

}

.footerSocial a{

width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1.45rem;

color:#fff;

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

backdrop-filter:blur(18px);

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

box-shadow:
0 8px 20px rgba(0,0,0,.25);

transition:
transform .35s,
box-shadow .35s,
background .35s;

}

/*=========================
INDIVIDUAL COLORS
=========================*/

.footerSocial a:nth-child(1){

color:#1877F2;

}

.footerSocial a:nth-child(2){

color:#E4405F;

}

.footerSocial a:nth-child(3){

color:#25D366;

}

.footerSocial a:nth-child(4){

color:#0088cc;

}

.footerSocial a:nth-child(5){

color:#000000;

background:#ffffff;

}

.footerSocial a:nth-child(6){

color:#0A66C2;

}

.footerSocial a:nth-child(7){

color:#FF0000;

}

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

.footerSocial a:hover{

transform:translateY(-8px) scale(1.12);

background:#ffffff;

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

}

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

.footerSocial a:active{

transform:scale(.96);

}
/*==================================================
45 FOOTER BOTTOM
==================================================*/

.footerBottom{

position:relative;

z-index:2;

padding:6px 10px;

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

display:flex;

justify-content:space-between;

align-items:center;

gap:12px;

flex-wrap:wrap;

}

.footerBottomLeft{

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

}

.footerBottomRight{

font-weight:600;

color:#06b6d4;

}


/*==================================================
46 FOOTER HOVER GLOW
==================================================*/

.footerColumn,
.footerAbout{

transition:.35s;

}

.footerColumn:hover,
.footerAbout:hover{

transform:translateY(-6px);

}

.footerColumn a{

display:inline-block;

position:relative;

}

.footerColumn a::after{

content:"";

position:absolute;

left:0;

bottom:-2px;

width:0;

height:2px;

background:#06b6d4;

transition:.35s;

}

.footerColumn a:hover::after{

width:100%;

}
/*==================================================
45 FOOTER BOTTOM
==================================================*/

.footerBottom{

position:relative;

z-index:2;

/* hr একটু উপরে আনা হয়েছে */

margin-top:-10px;

padding:10px 0 20px;

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

display:flex;

justify-content:space-between;

align-items:center;

gap:10px;

flex-wrap:nowrap;

}

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

.footerBottomLeft{

font-size:1rem;

font-weight:700;

color:#cbd5e1;

white-space:nowrap;

}

.footerBottomLeft strong{

color:#ffffff;

}

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

.footerBottomRight{

font-size:1rem;

font-weight:600;

color:#38bdf8;

text-align:right;

white-space:nowrap;

}

/* চাইলে Designed for লেখার মধ্যে
একটি span ব্যবহার করতে পারেন */

.footerBottomRight span{

color:#22d3ee;

font-weight:700;

}

/*==================================================
46 FOOTER HOVER GLOW
==================================================*/

.footerColumn,
.footerAbout{

transition:.35s;

}

.footerColumn:hover,
.footerAbout:hover{

transform:translateY(-6px);

}


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

@media (max-width:991px){

.footerGrid{

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

gap:35px;

}

}


@media (max-width:768px){

.footerBottom{

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

gap:12px;

flex-wrap:wrap;

}

.footerBottomLeft{

white-space:normal;

}

.footerBottomRight{

white-space:normal;

text-align:center;

}

}


@media (max-width:576px){

.footerGrid{

grid-template-columns:1fr;

gap:35px;

}

.footer{

padding-top:70px;

}

}
/*==================================================
47 BACK TO TOP
==================================================*/

.backToTop{

position:fixed;

right:30px;

bottom:30px;

width:58px;

height:58px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
#2563eb,
#06b6d4
);

color:#fff;

font-size:1.2rem;

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

cursor:pointer;

opacity:0;

visibility:hidden;

transform:translateY(25px);

transition:.35s;

z-index:999;

}

.backToTop.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.backToTop:hover{

transform:translateY(-8px);

}


/*==================================================
48 FLOATING BUTTONS
==================================================*/

.floatingButtons{

position:fixed;

left:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:16px;

z-index:999;

}

.floatBtn{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:1.3rem;

color:#fff;

text-decoration:none;

transition:.35s;

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

}

.floatBtn:hover{

transform:translateY(-8px) scale(1.06);

}


/*==================================================
49 FLOAT BUTTON COLORS
==================================================*/

.floatLogin{

background:linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

}

.floatDemo{

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

}

.floatContact{

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

}

/*==================================================
50 SCROLL REVEAL
==================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


/*==================================================
51 FADE VARIANTS
==================================================*/

.fadeLeft{

opacity:0;

transform:translateX(-70px);

transition:1s;

}

.fadeLeft.active{

opacity:1;

transform:translateX(0);

}

.fadeRight{

opacity:0;

transform:translateX(70px);

transition:1s;

}

.fadeRight.active{

opacity:1;

transform:translateX(0);

}

.zoomReveal{

opacity:0;

transform:scale(.8);

transition:.9s;

}

.zoomReveal.active{

opacity:1;

transform:scale(1);

}


/*==================================================
52 DARK MODE
==================================================*/

body.dark{

background:#020617;

color:#f8fafc;

}

body.dark .sectionHeader h2{

color:#fff;

}

body.dark .sectionHeader p{

color:#cbd5e1;

}

body.dark .missionCard,
body.dark .whyCard,
body.dark .impactCard,
body.dark .analyticsCard,
body.dark .userCard,
body.dark .transformCard,
body.dark .commitmentCard,
body.dark .updateCard,
body.dark .exploreCard,
body.dark .siteCard,
body.dark .step,
body.dark .networkCard,
body.dark .instituteCard{

background:rgba(15,23,42,.65);

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

color:#fff;

}

body.dark #header.scrolled{

background:rgba(2,6,23,.82);

}

body.dark #navbar a{

color:#fff;

}

body.dark .secondaryButton{

background:#111827;

color:#fff;

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

}


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

::selection{

background:#2563eb;

color:#fff;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#e5e7eb;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#2563eb,
#06b6d4
);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#2563eb;

}


/*==================================================
55 LOADING EFFECT
==================================================*/

.loading{

pointer-events:none;

opacity:.7;

filter:blur(1px);

}


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

img{

transition:.45s;

}

img:hover{

transform:scale(1.03);

}


/*==================================================
57 CARD ANIMATION
==================================================*/

.missionCard,
.whyCard,
.impactCard,
.analyticsCard,
.userCard,
.transformCard,
.commitmentCard,
.updateCard,
.exploreCard,
.siteCard,
.networkCard,
.instituteCard{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==================================================
58 RESPONSIVE
LARGE DESKTOP
1600px+
==================================================*/

@media (min-width:1600px){

:root{

--container:1450px;

}

.heroContainer{

gap:100px;

}

.heroLeft h1{

font-size:5rem;

}

.liveServerCard{

max-width:560px;

}

.sectionHeader{

max-width:850px;

}

}


/*==================================================
59 LAPTOP
1400px
==================================================*/

@media (max-width:1400px){

:root{

--container:1200px;

}

.heroContainer{

gap:60px;

}

.serverStats{

gap:16px;

}

.liveServerCard{

padding:34px;

}

}


/*==================================================
60 DESKTOP
1200px
==================================================*/

@media (max-width:1200px){

:root{

--container:1080px;

}

.heroLeft h1{

font-size:3.8rem;

}

.heroContainer{

grid-template-columns:1fr;

text-align:center;

}

.heroLeft p{

margin-left:auto;

margin-right:auto;

}

.heroButtons{

justify-content:center;

}

.heroRight{

margin-top:40px;

}

.coverageWrapper{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.coverageContent ul{

max-width:650px;

margin:auto;

}

.compareGrid{

grid-template-columns:1fr;

}
.footerGrid{

position:relative;

z-index:2;

display:grid;

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

column-gap:20px;

row-gap:40px;

padding-bottom:50px;

}

}
/*
.socialLinks{

display:flex;

flex-wrap:wrap;

gap:18px;

margin:18px 0 22px;

}
*/
.socialLinks{

display:grid;

grid-template-columns:repeat(3,56px);

gap:18px;

margin:25px 0;

justify-content:start;

}
.socialLinks a{

width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1.4rem;

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

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

transition:.35s;

}
/*
.socialLinks a{

width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

font-size:24px;

transition:.35s;

}
*/
.socialLinks a:hover{

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

background:#fff;

}

/* Individual Colors */

.socialLinks a:nth-child(1){

color:#1877F2;

}

.socialLinks a:nth-child(2){

color:#0084FF;

}

.socialLinks a:nth-child(3){

color:#25D366;

}

.socialLinks a:nth-child(4){

color:#E4405F;

}

.socialLinks a:nth-child(5){

color:#000;

background:#fff;

}

.socialLinks a:nth-child(6){

color:#0A66C2;

}

.socialLinks a:nth-child(7){

color:#FF0000;

}
.contactList{

display:grid;

gap:18px;

}

.contactList li{

display:flex;

align-items:flex-start;

gap:15px;

}

.contactList i{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

color:#06b6d4;

flex-shrink:0;

}
.footerDivider{

margin:8px 0 18px;

border:none;

height:1px;

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

}
.footerBottom{

padding:25px 0;

}

.footerLinks{

display:flex;

flex-direction:column;

gap:12px;

margin-bottom:18px;

}

.footerCopyright{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:nowrap;

}

.footerCopyright p{

margin:0;

flex:1;

}

.footerCopyright p:first-child{

text-align:left;

}

.footerCopyright p:last-child{

text-align:right;

}

.copyright{

color:#e5e7eb;

font-weight:600;

}

.designed{

color:#22d3ee;

font-weight:600;

}

.footerBottom p:nth-of-type(1){

color:#330066;

font-weight:600;

margin:0;

}

.footerBottom p:nth-of-type(2){

color:#22d3ee;

font-weight:600;

margin:0;

text-align:right;

}
@media(max-width:768px){

.footerBottom{

grid-template-columns:1fr;

text-align:center;

gap:18px;

}

.footerBottom p:nth-of-type(2){

text-align:center;

}

.footerBottom .footerLinks{

align-items:center;

}
.footerCopyright{

flex-direction:column;

gap:10px;

}

}


/*==================================================
61 TABLET LANDSCAPE
992px
==================================================*/

@media (max-width:992px){

section{

padding:90px 0;

}

.heroSection{

padding-top:120px;

}

.heroLeft h1{

font-size:3.2rem;

}

#typingText{

font-size:1.35rem;

}

.serverStats{

grid-template-columns:

repeat(2,1fr);

}

.workflow{

justify-content:center;

}

.arrow{

display:none;

}

.step{

min-width:280px;

}

.footerGrid{

grid-template-columns:

repeat(2,1fr);

}

.siteMapGrid{

grid-template-columns:

repeat(2,1fr);

}

.exploreGrid{

grid-template-columns:

repeat(2,1fr);

}

.updateGrid{

grid-template-columns:

repeat(2,1fr);

}

.usersGrid{

grid-template-columns:

repeat(2,1fr);

}

.commitmentGrid{

grid-template-columns:

repeat(2,1fr);

}

.transformationGrid{

grid-template-columns:

repeat(2,1fr);

}

.networkGrid{

grid-template-columns:

repeat(2,1fr);

}

.analyticsGrid{

grid-template-columns:

repeat(2,1fr);

}

.impactGrid{

grid-template-columns:

repeat(2,1fr);

}

.whyGrid{

grid-template-columns:

repeat(2,1fr);

}

.missionGrid{

grid-template-columns:

repeat(2,1fr);

}

.instituteGrid{

grid-template-columns:

repeat(2,1fr);

}

}


/*==================================================
62 SMALL TABLET
850px
==================================================*/

@media (max-width:850px){

.sectionHeader{

margin-bottom:55px;

}

.sectionHeader h2{

font-size:2.3rem;

}

.joinBox{

padding:55px 35px;

}

.demoContent{

padding:60px 35px;

}

.liveServerCard{

padding:30px;

}

.heroBadge{

font-size:.9rem;

}

}


/*==================================================
63 TABLET OPTIMIZATION
==================================================*/

@media (max-width:768px){

.container{

width:min(100% - 30px,var(--container));

}

.heroContainer{

gap:45px;

}

.liveServerCard{

max-width:100%;

}

.serverStats{

gap:14px;

}

.sectionHeader p{

font-size:1rem;

}

.primaryButton,

.secondaryButton,

.glassButton{

padding:13px 24px;

font-size:.95rem;

}

}
/*==================================================
64 MOBILE RESPONSIVE
768px
==================================================*/

@media (max-width:768px){

#menuButton{

display:flex;

}

#navbar{

position:fixed;

top:80px;

left:-100%;

width:100%;

height:calc(100vh - 80px);

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

backdrop-filter:blur(25px);

transition:.4s;

padding:35px;

overflow-y:auto;

z-index:998;

}

#navbar.active{

left:0;

}

#navbar ul{

display:flex;

flex-direction:column;

gap:18px;

}

#navbar ul li{

width:100%;

}

#navbar ul li a{

display:block;

padding:15px 20px;

border-radius:14px;

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

font-size:1.05rem;

}

.headerButtons{

gap:10px;

}

.loginButton{

padding:10px 18px;

font-size:.9rem;

}

.heroLeft h1{

font-size:2.8rem;

}

.heroButtons{

flex-direction:column;

align-items:center;

}

.heroButtons a{

width:100%;

max-width:320px;

text-align:center;

}

.sectionHeader h2{

font-size:2rem;

}

.footerGrid{

grid-template-columns:1fr;

text-align:center;

}

.footerColumn h3::after{

left:50%;

transform:translateX(-50%);

}

.footerSocial{

justify-content:center;

}

.footerBottom{

flex-direction:column;

text-align:center;

}

}


/*==================================================
65 MOBILE
576px
==================================================*/

@media (max-width:576px){

section{

padding:70px 0;

}

.heroSection{

padding-top:110px;

}

.heroLeft h1{

font-size:2.3rem;

line-height:1.25;

}

#typingText{

font-size:1.1rem;

}

.heroBadge{

font-size:.82rem;

padding:10px 18px;

}

.liveServerCard{

padding:25px;

}

.serverStats{

grid-template-columns:1fr 1fr;

}

.serverStats h3{

font-size:1.5rem;

}

.serverStats span{

font-size:.85rem;

}

.missionGrid,

.whyGrid,

.impactGrid,

.analyticsGrid,

.instituteGrid,

.networkGrid,

.usersGrid,

.transformationGrid,

.commitmentGrid,

.updateGrid,

.exploreGrid,

.siteMapGrid{

grid-template-columns:1fr;

}

.workflow{

gap:25px;

}

.step{

padding:25px;

}

.stepNumber{

width:60px;

height:60px;

font-size:1.2rem;

}

.joinButtons{

flex-direction:column;

}

.joinButtons a{

width:100%;

}

.demoContent{

padding:45px 25px;

}

.joinBox{

padding:45px 25px;

}

}


/*==================================================
66 SMALL MOBILE
480px
==================================================*/

@media (max-width:480px){

.container{

width:calc(100% - 20px);

}

.heroLeft h1{

font-size:2rem;

}

.sectionHeader h2{

font-size:1.7rem;

}

.sectionHeader p{

font-size:.95rem;

}

.liveServerCard{

padding:20px;

}

.serverStats{

grid-template-columns:1fr;

gap:15px;

}

.counter{

font-size:1.8rem;

}

.footerLogo{

width:65px;

}

.footerAbout h2{

font-size:1.5rem;

}

.footerColumn h3{

font-size:1.15rem;

}

.footerColumn ul{

gap:10px;

}

.footerBottom{

font-size:.9rem;

}

.primaryButton,

.secondaryButton,

.glassButton{

width:100%;

justify-content:center;

}

}


/*==================================================
67 EXTRA SMALL
375px
==================================================*/

@media (max-width:375px){

.heroLeft h1{

font-size:1.75rem;

}

.heroBadge{

font-size:.78rem;

}

.sectionHeader h2{

font-size:1.5rem;

}

.sectionHeader span{

font-size:.82rem;

}

.step{

padding:20px;

}

.step h3{

font-size:1.1rem;

}

.updateCard,

.commitmentCard,

.transformCard,

.userCard,

.analyticsCard,

.impactCard,

.whyCard,

.missionCard,

.siteCard,

.exploreCard{

padding:22px;

}

}


/*==================================================
68 MINI DEVICES
320px
==================================================*/

@media (max-width:320px){

.heroLeft h1{

font-size:1.55rem;

}

.heroButtons a{

font-size:.88rem;

padding:12px 16px;

}

.loginButton{

display:none;

}

#themeButton{

width:42px;

height:42px;

}

#menuButton{

width:42px;

height:42px;

}

.footer{

font-size:.9rem;

}

.footerBottom{

font-size:.8rem;

}

}


/*==================================================
69 FLOATING BUTTONS
RESPONSIVE
==================================================*/

@media (max-width:768px){

.floatingButtons{

left:15px;

bottom:15px;

gap:12px;

}

.floatBtn{

width:52px;

height:52px;

font-size:1.15rem;

}

.backToTop{

right:15px;

bottom:15px;

width:52px;

height:52px;

}

}
/*==================================================
70 UTILITY CLASSES
==================================================*/

.textCenter{

text-align:center;

}

.textLeft{

text-align:left;

}

.textRight{

text-align:right;

}

.dFlex{

display:flex;

}

.flexCenter{

display:flex;

align-items:center;

justify-content:center;

}

.flexBetween{

display:flex;

align-items:center;

justify-content:space-between;

}

.grid2{

display:grid;

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

gap:30px;

}

.grid3{

display:grid;

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

gap:30px;

}

.grid4{

display:grid;

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

gap:30px;

}

.w100{

width:100%;

}

.hidden{

display:none !important;

}

.visible{

display:block !important;

}

.mt20{margin-top:20px;}
.mt40{margin-top:40px;}
.mt60{margin-top:60px;}

.mb20{margin-bottom:20px;}
.mb40{margin-bottom:40px;}
.mb60{margin-bottom:60px;}


/*==================================================
71 IMAGE UTILITIES
==================================================*/

img{

max-width:100%;

height:auto;

display:block;

}

.imageCover{

width:100%;

height:100%;

object-fit:cover;

}

.imageContain{

width:100%;

height:100%;

object-fit:contain;

}


/*==================================================
72 FOCUS ACCESSIBILITY
==================================================*/

a:focus,
button:focus,
input:focus,
textarea:focus{

outline:3px solid rgba(37,99,235,.35);

outline-offset:3px;

}


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

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==================================================
74 PRINT STYLE
==================================================*/

@media print{

header,

.footer,

.backToTop,

.floatingButtons,

#loader,

.background,

#progressBar{

display:none !important;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

break-inside:avoid;

}

.heroSection{

padding-top:0;

}

a{

color:#000;

text-decoration:none;

}

}


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

.heroSection,

.missionSection,

.whySection,

.compareSection,

.impactSection,

.analyticsSection,

.institutesSection,

.coverageSection,

.networkSection,

.usersSection,

.workflowSection,

.transformationSection,

.commitmentSection,

.joinSection,

.updatesSection,

.demoSection,

.exploreSection,

.siteMapSection,

.footer{

content-visibility:auto;

contain-intrinsic-size:1000px;

}


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

html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}


/*==================================================
77 SAFE MEDIA
==================================================*/

video,

iframe,

canvas,

svg{

max-width:100%;

height:auto;

}


/*==================================================
78 FINAL SHADOW HELPERS
==================================================*/

.shadowSm{

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

}

.shadowMd{

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

}

.shadowLg{

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

}

.rounded{

border-radius:20px;

}

.roundedLg{

border-radius:35px;

}


/*==================================================
79 GLASS HELPER
==================================================*/

.glass{

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

backdrop-filter:blur(18px);

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

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

}

/*==================================================
BACK TO TOP
==================================================*/

#backToTop{

position:fixed;

right:25px;

bottom:25px;

width:52px;

height:52px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:18px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

box-shadow:0 15px 35px

rgba(0,0,0,.25);

opacity:0;

visibility:hidden;

transform:translateY(30px);

transition:.35s;

z-index:9999;

}

#backToTop.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#backToTop:hover{

transform:translateY(-6px);

}
/*==================================================
RIPPLE EFFECT
==================================================*/

.primaryButton,
.secondaryButton,
.glassButton{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:rippleEffect .6s linear;

pointer-events:none;

}

@keyframes rippleEffect{

to{

transform:scale(4);

opacity:0;

}

}


/*==================================================
PAGE TRANSITION
==================================================*/

body{

opacity:0;

transition:opacity .35s ease;

}

body.pageLoaded{

opacity:1;

}
/*==================================================
SECTION ACTIVE
==================================================*/

section{

transition:

opacity .35s ease,

transform .35s ease;

}

.sectionActive{

opacity:1;

transform:translateY(0);

}


/*==================================================
PROGRESS BAR
==================================================*/

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

z-index:99999;

transition:width .1s linear;

}
/*==================================================
PRINT SUPPORT
==================================================*/

body.printing{

background:#fff;

}

.currentPage{

color:var(--primary)!important;

font-weight:700;

}

.currentPage::after{

width:100%!important;

}
/*==================================================
81 JAVASCRIPT SUPPORT
==================================================*/

.loaded{

opacity:1;

transition:.35s;

}

.pageHidden{

pointer-events:none;

}


/*==================================================
80 END OF FILE
Student Performance System
Official Website
Version : 1.0
Status : Production Ready
==================================================*/
/*==================================================
MISSION PAGE
==================================================*/


/*=================================
MISSION PAGE HERO
=================================*/

.pageHero{

position:relative;

padding:180px 0 120px;

overflow:hidden;

background:

linear-gradient(

135deg,

#eff6ff,

#ffffff 45%,

#dbeafe

);

}


.pageHero::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:

rgba(59,130,246,.12);

filter:blur(20px);

}


.pageHero::after{

content:"";

position:absolute;

left:-140px;

bottom:-140px;

width:340px;

height:340px;

border-radius:50%;

background:

rgba(14,165,233,.10);

filter:blur(15px);

}


.pageHeroGrid{

display:grid;

grid-template-columns:

1.1fr

.9fr;

align-items:center;

gap:70px;

position:relative;

z-index:2;

}


.pageHeroContent h1{

font-size:

clamp(2.8rem,6vw,4.6rem);

font-weight:800;

line-height:1.15;

color:var(--dark);

margin-bottom:25px;

}


.pageHeroContent p{

font-size:1.08rem;

line-height:2;

color:var(--text-light);

margin-bottom:35px;

max-width:650px;

}


.pageHeroBadge{

display:inline-flex;

align-items:center;

gap:18px;

padding:12px 22px;

border-radius:50px;

margin-bottom:25px;

font-size:.95rem;

font-weight:700;

color:var(--primary);

background:

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

backdrop-filter:blur(16px);

border:

1px solid

rgba(255,255,255,.65);

box-shadow:

0 15px 35px

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

}


.pageHeroButtons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}


.pageHeroImage{

display:flex;

justify-content:center;

align-items:center;

}


.pageHeroImage img{

width:100%;

max-width:560px;

animation:

floatImage

6s ease-in-out infinite;

filter:

drop-shadow(

0 30px 60px

rgba(37,99,235,.18)

);

}
/*==================================================
BENEFITS CSS PART-2
BENEFITS DETAILS
==================================================*/

.benefitsDetailsSection{

padding:120px 0;

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

}

.benefitsGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:70px;

}

.benefitCard{

padding:40px 30px;

border-radius:28px;

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

backdrop-filter:blur(18px);

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

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

text-align:center;

transition:.35s;

position:relative;

overflow:hidden;

}

.benefitCard::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
var(--primary),
#06b6d4
);

transform:scaleX(0);

transition:.35s;

transform-origin:left;

}

.benefitCard:hover::before{

transform:scaleX(1);

}

.benefitCard:hover{

transform:translateY(-12px);

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

}

.benefitCard i{

font-size:2.6rem;

margin-bottom:24px;

color:var(--primary);

transition:.35s;

}

.benefitCard:hover i{

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

}

.benefitCard h3{

font-size:1.35rem;

margin-bottom:18px;

color:var(--dark);

}

.benefitCard p{

line-height:1.9;

color:var(--text-light);

}
/*==================================================
BENEFITS CSS PART-3
BENEFIT HIGHLIGHT
==================================================*/

.benefitHighlightSection{

padding:120px 0;

}

.benefitHighlightGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.highlightContent{

width:100%;

}

.highlightImage{

display:flex;

justify-content:center;

align-items:center;

}

.highlightImage img{

width:100%;

max-width:560px;

filter:drop-shadow(0 25px 55px rgba(37,99,235,.18));

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

}

.featureList{

display:grid;

gap:18px;

margin-top:40px;

}

.featureItem{

display:flex;

align-items:flex-start;

gap:15px;

padding:18px 22px;

border-radius:20px;

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

backdrop-filter:blur(18px);

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

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

transition:.35s;

}

.featureItem:hover{

transform:translateX(10px);

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

}

.featureItem i{

font-size:1.25rem;

color:#16a34a;

margin-top:3px;

flex-shrink:0;

}

.featureItem span{

line-height:1.8;

color:var(--text);

}
/*==================================================
BENEFITS CSS PART-4
COMPARISON SECTION
==================================================*/

.comparisonSection{

padding:120px 0;

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

}

.comparisonGrid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.comparisonCard{

padding:40px 35px;

border-radius:30px;

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

backdrop-filter:blur(18px);

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

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

transition:.35s;

}

.comparisonCard:hover{

transform:translateY(-10px);

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

}

.compareTitle{

display:flex;

align-items:center;

gap:15px;

margin-bottom:30px;

}

.compareTitle i{

font-size:2rem;

}

.beforeCard .compareTitle i{

color:#ef4444;

}

.afterCard .compareTitle i{

color:#16a34a;

}

.compareTitle h3{

font-size:1.6rem;

font-weight:700;

color:var(--dark);

}

.comparisonCard ul{

list-style:none;

padding:0;

margin:0;

}

.comparisonCard ul li{

position:relative;

padding-left:30px;

margin-bottom:18px;

line-height:1.9;

color:var(--text-light);

}

.beforeCard ul li::before{

content:"✕";

position:absolute;

left:0;

top:0;

font-weight:700;

color:#ef4444;

}

.afterCard ul li::before{

content:"✓";

position:absolute;

left:0;

top:0;

font-weight:700;

color:#16a34a;

}
/*==================================================
BENEFITS CSS PART-5
WHO BENEFITS
==================================================*/

.whoBenefitsSection{

padding:120px 0;

}

.whoBenefitsGrid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.whoBenefitCard{

padding:45px 35px;

text-align:center;

border-radius:30px;

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

backdrop-filter:blur(18px);

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

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

transition:.35s;

position:relative;

overflow:hidden;

}

.whoBenefitCard::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

var(--primary),

#06b6d4

);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.whoBenefitCard:hover::before{

transform:scaleX(1);

}

.whoBenefitCard:hover{

transform:translateY(-12px);

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

}

.benefitIcon{

width:90px;

height:90px;

margin:0 auto 28px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

color:var(--primary);

font-size:2.2rem;

transition:.35s;

}

.whoBenefitCard:hover .benefitIcon{

transform:rotate(12deg) scale(1.12);

background:var(--primary);

color:#fff;

}

.whoBenefitCard h3{

font-size:1.55rem;

margin-bottom:25px;

color:var(--dark);

font-weight:700;

}

.whoBenefitCard ul{

list-style:none;

padding:0;

margin:0;

text-align:left;

}

.whoBenefitCard ul li{

position:relative;

padding-left:28px;

margin-bottom:16px;

line-height:1.8;

color:var(--text-light);

}

.whoBenefitCard ul li::before{

content:"✓";

position:absolute;

left:0;

top:0;

font-weight:700;

color:#16a34a;

}
/*==================================================
BENEFITS CSS PART-6
PLATFORM ROADMAP
==================================================*/

.roadmapSection{

padding:120px 0;

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

}

.roadmapGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:32px;

margin-top:70px;

}

.roadmapCard{

position:relative;

padding:42px 32px;

border-radius:30px;

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

backdrop-filter:blur(18px);

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

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

overflow:hidden;

transition:.35s;

}

.roadmapCard::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

var(--primary),

#06b6d4

);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.roadmapCard:hover::before{

transform:scaleX(1);

}

.roadmapCard:hover{

transform:translateY(-12px);

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

}

.roadmapCard i{

font-size:2.4rem;

margin-bottom:24px;

color:var(--primary);

transition:.35s;

}

.roadmapCard:hover i{

transform:scale(1.15) rotate(10deg);

}

.roadmapCard h3{

font-size:1.45rem;

margin-bottom:18px;

font-weight:700;

color:var(--dark);

}

.roadmapCard p{

line-height:1.9;

color:var(--text-light);

}
/*==================================================
BENEFITS CSS PART-7
PLATFORM STATISTICS
==================================================*/

.statisticsSection{

padding:120px 0;

}

.statisticsGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:30px;

margin-top:70px;

}

.statCard{

position:relative;

padding:45px 30px;

text-align:center;

border-radius:30px;

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

backdrop-filter:blur(18px);

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

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

overflow:hidden;

transition:.35s;

}

.statCard::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

var(--primary),

#06b6d4

);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.statCard:hover::before{

transform:scaleX(1);

}

.statCard:hover{

transform:translateY(-12px);

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

}

.statCard i{

font-size:2.5rem;

margin-bottom:22px;

color:var(--primary);

transition:.35s;

}

.statCard:hover i{

transform:scale(1.15) rotate(10deg);

}

.statCard h3{

font-size:clamp(2rem,4vw,3rem);

font-weight:800;

margin-bottom:12px;

color:var(--dark);

}

.statCard p{

font-size:1rem;

line-height:1.8;

color:var(--text-light);

}
/*==================================================
BENEFITS CSS PART-8
FINAL CTA
==================================================*/

.finalCtaSection{

padding:120px 0;

}

.finalCtaBox{

position:relative;

padding:80px 50px;

text-align:center;

border-radius:35px;

overflow:hidden;

background:
linear-gradient(
135deg,
#2563eb,
#0ea5e9
);

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

color:#fff;

}

.finalCtaBox::before{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

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

top:-120px;

left:-120px;

}

.finalCtaBox::after{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

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

right:-100px;

bottom:-100px;

}

.finalCtaBox>*{

position:relative;

z-index:2;

}

.ctaBadge{

display:inline-block;

padding:10px 22px;

margin-bottom:25px;

border-radius:50px;

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

backdrop-filter:blur(20px);

font-weight:700;

font-size:.95rem;

}

.finalCtaBox h2{

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

font-weight:800;

line-height:1.25;

margin-bottom:25px;

color:#fff;

}

.finalCtaBox p{

max-width:850px;

margin:0 auto 45px;

font-size:1.08rem;

line-height:2;

opacity:.96;

}

.ctaButtons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.ctaButtons .glassButton{

min-width:210px;

justify-content:center;

}

.primaryGlass{

background:#fff;

color:var(--primary);

font-weight:700;

}

.primaryGlass:hover{

background:#f8fafc;

}
/*==================================================
BENEFITS CSS PART-9
RESPONSIVE
==================================================*/

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

@media(max-width:992px){

.pageHeroGrid,
.benefitHighlightGrid,
.comparisonGrid{

grid-template-columns:1fr;

gap:50px;

}

.pageHero{

padding:130px 0 90px;

}

.pageHeroContent{

text-align:center;

}

.pageHeroContent p{

margin:0 auto 35px;

}

.pageHeroButtons{

justify-content:center;

}

.highlightContent{

order:2;

}

.highlightImage{

order:1;

}

.whoBenefitsGrid{

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

}

.statisticsGrid{

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

}

.roadmapGrid{

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

}

}


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

@media(max-width:768px){

.benefitsDetailsSection,
.benefitHighlightSection,
.comparisonSection,
.whoBenefitsSection,
.roadmapSection,
.statisticsSection,
.finalCtaSection{

padding:90px 0;

}

.benefitsGrid,
.whoBenefitsGrid,
.roadmapGrid,
.statisticsGrid{

grid-template-columns:1fr;

}

.comparisonGrid{

grid-template-columns:1fr;

}

.benefitCard,
.whoBenefitCard,
.roadmapCard,
.statCard{

padding:35px 25px;

}

.finalCtaBox{

padding:55px 25px;

border-radius:28px;

}

.finalCtaBox h2{

font-size:2rem;

}

.finalCtaBox p{

font-size:1rem;

line-height:1.9;

}

.ctaButtons{

flex-direction:column;

align-items:stretch;

}

.ctaButtons .glassButton{

width:100%;

min-width:100%;

}

.pageHeroImage img,
.highlightImage img{

max-width:100%;

}

}


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

@media(max-width:480px){

.pageHero{

padding-top:115px;

}

.pageHeroContent h1{

font-size:2rem;

}

.sectionHeader h2{

font-size:1.8rem;

}

.benefitCard i,
.roadmapCard i,
.statCard i{

font-size:2.1rem;

}

.statCard h3{

font-size:2rem;

}

.compareTitle h3{

font-size:1.3rem;

}

.finalCtaBox{

padding:45px 20px;

}

.ctaBadge{

font-size:.85rem;

padding:8px 18px;

}

}
/*=================================
MISSION DETAILS
=================================*/

.missionDetailsSection{

padding:110px 0;

}


.missionGrid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:35px;

margin-top:60px;

}


.missionInfoCard{

position:relative;

padding:35px;

border-radius:28px;

overflow:hidden;

background:

rgba(255,255,255,.65);

backdrop-filter:blur(20px);

border:

1px solid

rgba(255,255,255,.70);

box-shadow:

0 20px 45px

rgba(15,23,42,.08);

transition:.35s;

}


.missionInfoCard:hover{

transform:

translateY(-10px);

box-shadow:

0 30px 60px

rgba(37,99,235,.14);

}


.missionInfoCard i{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1.7rem;

margin-bottom:22px;

color:#fff;

background:

linear-gradient(

135deg,

#2563eb,

#0ea5e9

);

box-shadow:

0 18px 40px

rgba(37,99,235,.25);

}


.missionInfoCard h3{

font-size:1.45rem;

margin-bottom:18px;

font-weight:700;

color:var(--dark);

}


.missionInfoCard p{

line-height:1.9;

font-size:1rem;

color:var(--text-light);

}
/*==================================================
MISSION CSS PART-2
VISION & OBJECTIVES
==================================================*/


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

.visionSection{

padding:120px 0;

background:

linear-gradient(

180deg,

#ffffff,

#f8fbff

);

}


.visionGrid{

display:grid;

grid-template-columns:

1fr 1fr;

align-items:center;

gap:70px;

}


.visionImage{

display:flex;

justify-content:center;

align-items:center;

}


.visionImage img{

width:100%;

max-width:540px;

filter:

drop-shadow(

0 25px 50px

rgba(37,99,235,.18)

);

animation:

floatImage 6s ease-in-out infinite;

}


.visionContent{

display:flex;

flex-direction:column;

justify-content:center;

}


.visionContent h3{

font-size:2rem;

font-weight:700;

margin-bottom:20px;

color:var(--dark);

}


.visionContent p{

line-height:2;

font-size:1.05rem;

color:var(--text-light);

margin-bottom:20px;

}


.visionList{

display:flex;

flex-direction:column;

gap:18px;

margin-top:20px;

}


.visionItem{

display:flex;

align-items:flex-start;

gap:15px;

padding:18px 22px;

border-radius:18px;

background:

rgba(255,255,255,.70);

backdrop-filter:blur(18px);

border:

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

box-shadow:

0 15px 35px

rgba(0,0,0,.06);

transition:.35s;

}


.visionItem:hover{

transform:

translateX(8px);

}


.visionItem i{

font-size:1.3rem;

color:var(--primary);

margin-top:2px;

}


.visionItem span{

line-height:1.8;

color:var(--text-light);

}



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

.objectiveSection{

padding:120px 0;

}


.objectiveGrid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:60px;

}


.objectiveCard{

position:relative;

padding:40px 30px;

text-align:center;

border-radius:28px;

overflow:hidden;

background:

rgba(255,255,255,.68);

backdrop-filter:blur(18px);

border:

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

box-shadow:

0 18px 40px

rgba(15,23,42,.08);

transition:.35s;

}


.objectiveCard:hover{

transform:

translateY(-12px);

box-shadow:

0 28px 55px

rgba(37,99,235,.15);

}


.objectiveCard i{

width:78px;

height:78px;

margin:auto;

margin-bottom:25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:1.8rem;

color:#fff;

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

box-shadow:

0 18px 35px

rgba(37,99,235,.28);

}


.objectiveCard h3{

font-size:1.4rem;

font-weight:700;

margin-bottom:18px;

color:var(--dark);

}


.objectiveCard p{

font-size:1rem;

line-height:1.9;

color:var(--text-light);

}
/*==================================================
MISSION CSS PART-3
ROADMAP & FUTURE VISION
==================================================*/


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

.roadmapSection{

padding:120px 0;

background:

linear-gradient(

180deg,

#f8fbff,

#ffffff

);

position:relative;

overflow:hidden;

}


.roadmapSection::before{

content:"";

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:4px;

height:100%;

background:

linear-gradient(

180deg,

#2563eb,

#38bdf8,

transparent

);

opacity:.18;

}


.roadmap{

position:relative;

max-width:1000px;

margin:70px auto 0;

}


.roadmapItem{

display:flex;

align-items:center;

gap:35px;

margin-bottom:60px;

position:relative;

}


.roadmapItem:nth-child(even){

flex-direction:row-reverse;

}


.roadmapDot{

width:26px;

height:26px;

border-radius:50%;

background:

linear-gradient(

135deg,

#2563eb,

#0ea5e9

);

border:6px solid #fff;

box-shadow:

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

flex-shrink:0;

z-index:2;

}


.roadmapCard{

flex:1;

padding:35px;

border-radius:28px;

background:

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

backdrop-filter:blur(18px);

border:

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

box-shadow:

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

transition:.35s;

}


.roadmapCard:hover{

transform:translateY(-8px);

box-shadow:

0 28px 60px rgba(37,99,235,.16);

}


.roadmapCard h3{

font-size:1.45rem;

margin-bottom:15px;

color:var(--dark);

}


.roadmapCard p{

line-height:1.9;

color:var(--text-light);

}



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

.futureMissionSection{

padding:120px 0;

}


.futureGrid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:60px;

}


.futureCard{

position:relative;

padding:35px 28px;

text-align:center;

border-radius:30px;

overflow:hidden;

background:

rgba(255,255,255,.68);

backdrop-filter:blur(20px);

border:

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

box-shadow:

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

transition:.35s;

}


.futureCard::before{

content:"";

position:absolute;

top:-40px;

right:-40px;

width:120px;

height:120px;

border-radius:50%;

background:

rgba(59,130,246,.10);

}


.futureCard:hover{

transform:

translateY(-12px);

box-shadow:

0 30px 65px rgba(37,99,235,.15);

}


.futureCard i{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

margin-bottom:22px;

border-radius:50%;

font-size:1.8rem;

color:#fff;

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

box-shadow:

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

}


.futureCard h3{

font-size:1.35rem;

margin-bottom:16px;

font-weight:700;

color:var(--dark);

}


.futureCard p{

line-height:1.9;

color:var(--text-light);

}
/*==================================================
MISSION CSS PART-4
WHY • RELATED • DIGITAL • CTA • RESPONSIVE
==================================================*/


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

.whyMissionSection{

padding:120px 0;

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

}

.whyMissionGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.whyMissionImage{

display:flex;

justify-content:center;

}

.whyMissionImage img{

width:100%;

max-width:560px;

filter:drop-shadow(0 25px 50px rgba(37,99,235,.16));

}

.featureList{

display:grid;

grid-template-columns:1fr;

gap:16px;

margin:35px 0;

}

.featureItem{

display:flex;

align-items:flex-start;

gap:14px;

padding:18px 22px;

border-radius:18px;

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

backdrop-filter:blur(18px);

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

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

transition:.35s;

}

.featureItem:hover{

transform:translateX(8px);

}

.featureItem i{

font-size:1.2rem;

color:#16a34a;

margin-top:3px;

}



/*=================================
RELATED PAGES
=================================*/

.relatedPagesSection{

padding:120px 0;

}

.relatedGrid{

display:grid;

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

gap:28px;

margin-top:60px;

}

.relatedCard{

padding:35px 28px;

text-align:center;

border-radius:28px;

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

backdrop-filter:blur(18px);

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

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

transition:.35s;

}

.relatedCard:hover{

transform:translateY(-10px);

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

}

.relatedCard i{

font-size:2.1rem;

margin-bottom:20px;

color:var(--primary);

}

.relatedCard h3{

margin-bottom:15px;

font-size:1.35rem;

}

.relatedCard p{

line-height:1.8;

margin-bottom:28px;

color:var(--text-light);

}



/*=================================
DIGITAL VISION
=================================*/

.digitalVisionSection{

padding:120px 0;

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

}

.digitalVisionGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.digitalImage{

display:flex;

justify-content:center;

}

.digitalImage img{

width:100%;

max-width:560px;

filter:drop-shadow(0 25px 55px rgba(37,99,235,.18));

}



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

.missionCTASection{

padding:120px 0;

}

.missionCTABox{

padding:70px 50px;

text-align:center;

border-radius:35px;

background:

linear-gradient(

135deg,

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

rgba(14,165,233,.92)

);

color:#fff;

box-shadow:

0 35px 80px rgba(37,99,235,.25);

}

.missionCTABox h2{

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

margin-bottom:22px;

font-weight:800;

color:#fff;

}

.missionCTABox p{

max-width:760px;

margin:0 auto 35px;

line-height:2;

font-size:1.05rem;

opacity:.96;

}



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

@media(max-width:992px){

.pageHeroGrid,

.visionGrid,

.whyMissionGrid,

.digitalVisionGrid{

grid-template-columns:1fr;

gap:50px;

}

.objectiveGrid{

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

}

.futureGrid{

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

}

.relatedGrid{

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

}

.missionGrid{

grid-template-columns:1fr;

}

.roadmapSection::before{

display:none;

}

.roadmapItem,

.roadmapItem:nth-child(even){

flex-direction:column;

text-align:center;

}

}


@media(max-width:768px){

.pageHero{

padding:150px 0 90px;

}

.pageHeroContent{

text-align:center;

}

.pageHeroButtons{

justify-content:center;

}

.objectiveGrid,

.futureGrid,

.relatedGrid{

grid-template-columns:1fr;

}

.missionCTABox{

padding:50px 25px;

}

}


@media(max-width:576px){

.pageHeroBadge{

font-size:.85rem;

padding:10px 18px;

}

.missionInfoCard,

.objectiveCard,

.futureCard,

.relatedCard{

padding:28px 22px;

}

.featureItem{

padding:16px 18px;

}

}

/*==================================================
BEFORE VS AFTER
==================================================*/

.comparisonSection{
    padding:120px 0;
    position:relative;
}

.comparisonGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:60px;
}

.comparisonCard{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    padding:45px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.comparisonCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.beforeCard{
    border-top:5px solid #ef4444;
}

.afterCard{
    border-top:5px solid #10b981;
}

.compareTitle{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:35px;
}

.compareTitle i{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
}

.beforeCard .compareTitle i{
    background:#ef4444;
}

.afterCard .compareTitle i{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
}

.compareTitle h3{
    font-size:28px;
    font-weight:700;
    color:var(--heading);
}

.comparisonCard ul{
    list-style:none;
}

.comparisonCard ul li{
    position:relative;
    padding-left:38px;
    margin-bottom:20px;
    line-height:1.8;
    color:var(--text);
    font-size:16px;
}

.beforeCard ul li::before{
    content:"✖";
    position:absolute;
    left:0;
    top:0;
    color:#ef4444;
    font-weight:700;
}

.afterCard ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:#10b981;
    font-weight:700;
}



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

.whoBenefitsSection{
    padding:120px 0;
    position:relative;
}

.whoBenefitsGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.whoBenefitCard{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    padding:45px 35px;
    text-align:center;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.whoBenefitCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.whoBenefitCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 60%
    );
    opacity:0;
    transition:.4s;
}

.whoBenefitCard:hover::before{
    opacity:1;
}

.benefitIcon{
    width:95px;
    height:95px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:38px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.whoBenefitCard h3{
    margin-bottom:28px;
    font-size:26px;
    color:var(--heading);
}

.whoBenefitCard ul{
    list-style:none;
    text-align:left;
}

.whoBenefitCard ul li{
    position:relative;
    padding-left:34px;
    margin-bottom:18px;
    line-height:1.8;
    color:var(--text);
}

.whoBenefitCard ul li::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
    position:absolute;
    left:0;
    top:10px;
}

.whoBenefitCard:hover .benefitIcon{
    transform:rotate(8deg) scale(1.08);
    transition:.4s;
}



/*==================================================
BENEFITS PART-3 RESPONSIVE
==================================================*/

@media(max-width:992px){

.comparisonGrid{
    grid-template-columns:1fr;
}

.whoBenefitsGrid{
    grid-template-columns:1fr;
}

.comparisonCard{
    padding:35px;
}

.whoBenefitCard{
    padding:35px 28px;
}

.compareTitle h3{
    font-size:24px;
}

}


@media(max-width:768px){

.comparisonSection,
.whoBenefitsSection{
    padding:90px 0;
}

.compareTitle{
    flex-direction:column;
    text-align:center;
}

.compareTitle i{
    width:60px;
    height:60px;
    font-size:24px;
}

.compareTitle h3{
    font-size:22px;
}

.comparisonCard{
    padding:28px;
}

.comparisonCard ul li{
    font-size:15px;
    padding-left:30px;
}

.benefitIcon{
    width:80px;
    height:80px;
    font-size:32px;
}

.whoBenefitCard h3{
    font-size:22px;
}

}


@media(max-width:576px){

.comparisonGrid,
.whoBenefitsGrid{
    gap:25px;
}

.comparisonCard,
.whoBenefitCard{
    border-radius:22px;
}

.comparisonCard{
    padding:24px;
}

.whoBenefitCard{
    padding:28px 22px;
}

.compareTitle{
    margin-bottom:25px;
}

.compareTitle i{
    width:55px;
    height:55px;
    font-size:22px;
}

.benefitIcon{
    width:70px;
    height:70px;
    font-size:28px;
}

.comparisonCard ul li,
.whoBenefitCard ul li{
    font-size:14px;
    line-height:1.7;
}

}
/*==================================================
FUTURE ROADMAP
==================================================*/

.roadmapSection{
    padding:120px 0;
    position:relative;
}

.roadmapGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.roadmapCard{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    padding:40px 30px;
    text-align:center;
    overflow:hidden;
    transition:.4s ease;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.roadmapCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        transparent 65%
    );
    opacity:0;
    transition:.4s;
}

.roadmapCard:hover::before{
    opacity:1;
}

.roadmapCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.roadmapCard i{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:34px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.roadmapCard h3{
    margin-bottom:18px;
    font-size:24px;
    color:var(--heading);
    font-weight:700;
}

.roadmapCard p{
    color:var(--text);
    line-height:1.8;
}

.roadmapCard:hover i{
    transform:scale(1.08) rotate(6deg);
    transition:.4s;
}


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

.ctaSection{
    padding:120px 0;
    position:relative;
}

.ctaBox{
    position:relative;
    max-width:1050px;
    margin:auto;
    text-align:center;
    padding:70px 50px;
    border-radius:35px;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    box-shadow:0 30px 70px rgba(0,0,0,.18);
}

.ctaBox::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    top:-100px;
    left:-100px;
}

.ctaBox::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    right:-70px;
    bottom:-70px;
}

.ctaBox>*{
    position:relative;
    z-index:2;
}

.ctaBox h2{
    font-size:42px;
    margin-bottom:20px;
    color:#fff;
}

.ctaBox p{
    max-width:720px;
    margin:0 auto 40px;
    line-height:1.9;
    font-size:18px;
    opacity:.95;
}

.ctaButtons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.ctaButtons .primaryButton{
    background:#fff;
    color:var(--primary);
}

.ctaButtons .primaryButton:hover{
    transform:translateY(-5px);
}

.ctaButtons .glassButton{
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(15px);
}

.ctaButtons .glassButton:hover{
    background:rgba(255,255,255,.18);
    transform:translateY(-5px);
}


/*==================================================
BENEFITS PART-4 RESPONSIVE
==================================================*/

@media(max-width:992px){

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

.ctaBox{
    padding:60px 35px;
}

.ctaBox h2{
    font-size:34px;
}

}

@media(max-width:768px){

.roadmapSection,
.ctaSection{
    padding:90px 0;
}

.roadmapGrid{
    grid-template-columns:1fr;
    gap:30px;
}

.roadmapCard{
    padding:35px 28px;
}

.roadmapCard i{
    width:75px;
    height:75px;
    font-size:30px;
}

.ctaBox{
    padding:50px 30px;
    border-radius:28px;
}

.ctaBox h2{
    font-size:28px;
}

.ctaBox p{
    font-size:16px;
}

.ctaButtons{
    flex-direction:column;
    align-items:center;
}

.ctaButtons a{
    width:100%;
    max-width:320px;
}

}

@media(max-width:576px){

.roadmapCard{
    border-radius:22px;
    padding:30px 22px;
}

.roadmapCard h3{
    font-size:22px;
}

.roadmapCard p{
    font-size:14px;
}

.ctaBox{
    padding:40px 22px;
    border-radius:22px;
}

.ctaBox h2{
    font-size:24px;
    line-height:1.5;
}

.ctaBox p{
    font-size:15px;
    margin-bottom:30px;
}

}
/*==================================================
LIVE ANALYTICS
==================================================*/

.liveAnalyticsSection{
    padding:120px 0;
    position:relative;
}

.analyticsGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.analyticsCard{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    padding:40px 25px;
    text-align:center;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.analyticsCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        transparent 70%
    );
    opacity:0;
    transition:.4s;
}

.analyticsCard:hover::before{
    opacity:1;
}

.analyticsCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.analyticsIcon{
    width:85px;
    height:85px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:34px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.analyticsCard:hover .analyticsIcon{
    transform:scale(1.08) rotate(6deg);
    transition:.4s;
}

.analyticsCard h3{
    font-size:24px;
    margin-bottom:15px;
    color:var(--heading);
}

.analyticsNumber{
    font-size:34px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:15px;
}

.analyticsCard p{
    color:var(--text);
    line-height:1.8;
}

.status .onlineStatus{
    color:#10b981;
    font-size:26px;
    margin-bottom:12px;
}



/*==================================================
PLATFORM STATISTICS
==================================================*/

.statisticsSection{
    padding:120px 0;
    position:relative;
}

.statisticsGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-top:60px;
}

.statisticsCard{
    position:relative;
    text-align:center;
    padding:45px 30px;
    border-radius:30px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);

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

    transition:.4s;

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

.statisticsCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.statisticsCard i{
    width:90px;
    height:90px;
    margin:0 auto 25px;

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

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;
    font-size:36px;
}

.statisticsCard:hover i{
    transform:rotate(8deg) scale(1.08);
    transition:.4s;
}

.statisticsCard h3{
    font-size:38px;
    color:var(--primary);
    margin-bottom:15px;
    font-weight:700;
}

.statisticsCard p{
    font-size:17px;
    color:var(--text);
}



/*==================================================
ANALYTICS PART-1 RESPONSIVE
==================================================*/

@media(max-width:1200px){

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

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

}

@media(max-width:768px){

.liveAnalyticsSection,
.statisticsSection{
    padding:90px 0;
}

.analyticsGrid,
.statisticsGrid{
    grid-template-columns:1fr;
    gap:25px;
}

.analyticsCard,
.statisticsCard{
    padding:35px 25px;
}

.analyticsIcon{
    width:75px;
    height:75px;
    font-size:30px;
}

.analyticsNumber{
    font-size:30px;
}

.statisticsCard i{
    width:80px;
    height:80px;
    font-size:32px;
}

.statisticsCard h3{
    font-size:32px;
}

}

@media(max-width:576px){

.analyticsCard,
.statisticsCard{
    border-radius:22px;
    padding:30px 20px;
}

.analyticsCard h3{
    font-size:21px;
}

.analyticsNumber{
    font-size:28px;
}

.statisticsCard h3{
    font-size:28px;
}

.statisticsCard p,
.analyticsCard p{
    font-size:14px;
}

}
/*==================================================
PERFORMANCE INSIGHTS
==================================================*/

.insightsSection{
    padding:120px 0;
    position:relative;
}

.insightsGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin-top:60px;
}

.insightCard{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    padding:35px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.insightCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.insightHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.insightHeader h3{
    font-size:24px;
    color:var(--heading);
}

.insightHeader i{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:24px;
}

.chartPlaceholder{
    height:260px;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:20px;
    background:rgba(255,255,255,.05);
}

.chartPlaceholder img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.insightCard p{
    color:var(--text);
    line-height:1.8;
}


/*==================================================
LIVE ACTIVITY
==================================================*/

.activitySection{
    padding:120px 0;
}

.activityTimeline{
    max-width:900px;
    margin:60px auto 0;
    position:relative;
}

.activityTimeline::before{
    content:"";
    position:absolute;
    left:24px;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(var(--primary),var(--secondary));
}

.activityItem{
    position:relative;
    display:flex;
    gap:30px;
    margin-bottom:35px;
}

.activityItem::before{
    content:"";
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--primary);
    position:absolute;
    left:16px;
    top:18px;
    border:4px solid #fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

.activityTime{
    width:110px;
    font-weight:700;
    color:var(--primary);
    padding-left:55px;
    flex-shrink:0;
}

.activityContent{
    flex:1;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    padding:25px 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.activityContent h3{
    margin-bottom:10px;
    color:var(--heading);
    font-size:22px;
}

.activityContent p{
    color:var(--text);
    line-height:1.8;
}


/*==================================================
BANGLADESH COVERAGE
==================================================*/

.coverageSection{
    padding:120px 0;
}

.coverageGrid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:50px;
    align-items:center;
    margin-top:60px;
}

.coverageImage img{
    width:100%;
    display:block;
}

.coverageInfo{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.coverageCard{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:25px;
    padding:35px 25px;
    text-align:center;
    transition:.4s;
}

.coverageCard:hover{
    transform:translateY(-8px);
}

.coverageCard h3{
    font-size:36px;
    color:var(--primary);
    margin-bottom:12px;
}

.coverageCard p{
    color:var(--text);
}


/*==================================================
FUTURE ANALYTICS
==================================================*/

.futureAnalyticsSection{
    padding:120px 0;
}

.futureGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.futureCard{
    text-align:center;
    padding:40px 25px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.futureCard:hover{
    transform:translateY(-10px);
}

.futureCard i{
    width:85px;
    height:85px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:34px;
}

.futureCard h3{
    font-size:24px;
    margin-bottom:15px;
    color:var(--heading);
}

.futureCard p{
    color:var(--text);
    line-height:1.8;
}


/*==================================================
ANALYTICS PART-2 RESPONSIVE
==================================================*/

@media(max-width:1200px){

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

}

@media(max-width:992px){

.insightsGrid,
.coverageGrid{
    grid-template-columns:1fr;
}

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

}

@media(max-width:768px){

.insightsSection,
.activitySection,
.coverageSection,
.futureAnalyticsSection{
    padding:90px 0;
}

.insightsGrid,
.futureGrid,
.coverageInfo{
    grid-template-columns:1fr;
}

.chartPlaceholder{
    height:220px;
}

.activityItem{
    flex-direction:column;
    gap:15px;
}

.activityTimeline::before{
    display:none;
}

.activityItem::before{
    display:none;
}

.activityTime{
    width:auto;
    padding-left:0;
}

.activityContent{
    padding:22px;
}

}

@media(max-width:576px){

.insightCard,
.futureCard,
.coverageCard{
    border-radius:22px;
    padding:28px 20px;
}

.insightHeader h3,
.futureCard h3{
    font-size:20px;
}

.chartPlaceholder{
    height:180px;
}

.coverageCard h3{
    font-size:30px;
}

.activityContent h3{
    font-size:20px;
}

.activityContent p,
.futureCard p,
.insightCard p{
    font-size:14px;
}

}
/*==================================================
GUIDE STEPS
==================================================*/

.guideStepsSection{
    padding:120px 0;
    position:relative;
}

.guideTimeline{
    position:relative;
    max-width:950px;
    margin:70px auto 0;
}

.guideTimeline::before{
    content:"";
    position:absolute;
    left:45px;
    top:0;
    bottom:0;
    width:4px;
    border-radius:20px;
    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );
}

.guideStep{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:35px;
    margin-bottom:45px;
}

.stepNumber{
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;
    font-size:24px;
    font-weight:700;

    flex-shrink:0;

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

    z-index:2;
}

.stepContent{

    flex:1;

    position:relative;

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

    backdrop-filter:blur(20px);

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

    border-radius:28px;

    padding:35px;

    transition:.4s;

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

}

.stepContent:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.stepIcon{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:30px;

    margin-bottom:22px;

}

.stepContent h3{

    font-size:26px;

    color:var(--heading);

    margin-bottom:18px;

}

.stepContent p{

    color:var(--text);

    line-height:1.9;

}



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

.userGuideSection{

    padding:120px 0;

    position:relative;

}

.userGuideGrid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.userGuideCard{

    position:relative;

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:40px 35px;

    transition:.4s;

    overflow:hidden;

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

}

.userGuideCard:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.userGuideCard::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        transparent 70%
    );

    opacity:0;

    transition:.4s;

}

.userGuideCard:hover::before{

    opacity:1;

}

.guideIcon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

}

.userGuideCard h3{

    font-size:28px;

    margin-bottom:25px;

    color:var(--heading);

}

.userGuideCard ul{

    list-style:none;

}

.userGuideCard ul li{

    position:relative;

    padding-left:34px;

    margin-bottom:18px;

    color:var(--text);

    line-height:1.8;

}

.userGuideCard ul li::before{

    content:"✔";

    position:absolute;

    left:0;

    top:0;

    color:#10b981;

    font-weight:700;

}



/*==================================================
GUIDE CSS PART-1 RESPONSIVE
==================================================*/

@media(max-width:992px){

.userGuideGrid{

    grid-template-columns:1fr;

}

.guideTimeline::before{

    left:35px;

}

.stepNumber{

    width:70px;

    height:70px;

    font-size:20px;

}

.stepContent{

    padding:30px;

}

}



@media(max-width:768px){

.guideStepsSection,

.userGuideSection{

    padding:90px 0;

}

.guideTimeline::before{

    display:none;

}

.guideStep{

    flex-direction:column;

    gap:20px;

}

.stepNumber{

    width:65px;

    height:65px;

}

.stepIcon{

    width:65px;

    height:65px;

    font-size:26px;

}

.stepContent h3{

    font-size:22px;

}

.userGuideCard{

    padding:30px;

}

.guideIcon{

    width:75px;

    height:75px;

    font-size:30px;

}

.userGuideCard h3{

    font-size:24px;

}

}



@media(max-width:576px){

.stepContent,

.userGuideCard{

    border-radius:22px;

    padding:25px 20px;

}

.stepContent p,

.userGuideCard ul li{

    font-size:14px;

}

.guideIcon{

    width:65px;

    height:65px;

    font-size:26px;

}

}
/*==================================================
BEST PRACTICES
==================================================*/

.bestPracticeSection{
    padding:120px 0;
    position:relative;
}

.practiceGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.practiceCard{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    padding:40px 35px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.practiceCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.practiceCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 70%
    );
    opacity:0;
    transition:.4s;
}

.practiceCard:hover::before{
    opacity:1;
}

.practiceIcon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:36px;
}

.practiceCard h3{
    text-align:center;
    margin-bottom:25px;
    color:var(--heading);
    font-size:28px;
}

.practiceCard ul{
    list-style:none;
}

.practiceCard ul li{
    position:relative;
    padding-left:34px;
    margin-bottom:18px;
    color:var(--text);
    line-height:1.8;
}

.practiceCard ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:#10b981;
    font-weight:700;
}


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

.faqSection{
    padding:120px 0;
    position:relative;
}

.faqWrapper{
    max-width:900px;
    margin:60px auto 0;
}

.faqItem{
    margin-bottom:20px;
    border-radius:24px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.faqQuestion{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 30px;
    border:none;
    background:none;
    color:var(--heading);
    font-size:20px;
    font-weight:600;
    cursor:pointer;
    text-align:left;
}

.faqQuestion i{
    color:var(--primary);
    transition:.4s;
}

.faqItem.active .faqQuestion i{
    transform:rotate(45deg);
}

.faqAnswer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faqItem.active .faqAnswer{
    max-height:220px;
}

.faqAnswer p{
    padding:0 30px 28px;
    color:var(--text);
    line-height:1.9;
}


/*==================================================
SUPPORT
==================================================*/

.supportSection{
    padding:120px 0;
}

.supportGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.supportCard{
    text-align:center;
    padding:40px 30px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.supportCard:hover{
    transform:translateY(-10px);
}

.supportIcon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:36px;
}

.supportCard h3{
    margin-bottom:18px;
    color:var(--heading);
    font-size:26px;
}

.supportCard p{
    color:var(--text);
    line-height:1.8;
}


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

.guideCtaSection{
    padding:120px 0;
}

.guideCtaBox{
    position:relative;
    overflow:hidden;
    border-radius:35px;
    text-align:center;
    padding:80px 50px;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.guideCtaBox::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right,
    rgba(255,255,255,.25),
    transparent 60%);
}

.guideCtaContent{
    position:relative;
    z-index:2;
}

.guideCtaContent span{
    display:inline-block;
    margin-bottom:18px;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(255,255,255,.18);
    font-weight:600;
}

.guideCtaContent h2{
    font-size:42px;
    margin-bottom:22px;
}

.guideCtaContent p{
    max-width:760px;
    margin:0 auto 35px;
    line-height:1.9;
    font-size:18px;
}

.guideCtaButtons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.guideCtaButtons .glassButton{
    border-color:rgba(255,255,255,.35);
    color:#fff;
}


/*==================================================
GUIDE CSS PART-2 RESPONSIVE
==================================================*/

@media(max-width:992px){

.practiceGrid,
.supportGrid{
    grid-template-columns:1fr;
}

.guideCtaBox{
    padding:60px 35px;
}

.guideCtaContent h2{
    font-size:34px;
}

}

@media(max-width:768px){

.bestPracticeSection,
.faqSection,
.supportSection,
.guideCtaSection{
    padding:90px 0;
}

.practiceCard,
.supportCard{
    padding:35px 28px;
}

.faqQuestion{
    padding:22px;
    font-size:18px;
}

.faqAnswer p{
    padding:0 22px 22px;
}

.guideCtaContent h2{
    font-size:28px;
}

.guideCtaContent p{
    font-size:16px;
}

}

@media(max-width:576px){

.practiceCard,
.supportCard,
.faqItem{
    border-radius:22px;
}

.practiceIcon,
.supportIcon{
    width:75px;
    height:75px;
    font-size:30px;
}

.practiceCard h3,
.supportCard h3{
    font-size:22px;
}

.practiceCard ul li,
.supportCard p,
.faqAnswer p{
    font-size:14px;
}

.guideCtaBox{
    border-radius:24px;
    padding:45px 20px;
}

.guideCtaContent h2{
    font-size:24px;
}

.guideCtaButtons{
    flex-direction:column;
}

.guideCtaButtons a{
    width:100%;
}

}
/*==================================================
CONTACT INFORMATION
==================================================*/

.contactInfoSection{
    padding:120px 0;
    position:relative;
}

.contactInfoGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.contactInfoCard{
    position:relative;
    text-align:center;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    padding:45px 35px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.contactInfoCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

.contactInfoCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 70%
    );
    opacity:0;
    transition:.4s;
}

.contactInfoCard:hover::before{
    opacity:1;
}

.contactInfoIcon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:36px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.contactInfoCard h3{
    margin-bottom:15px;
    font-size:28px;
    color:var(--heading);
}

.contactInfoCard p{
    font-size:17px;
    font-weight:600;
    color:var(--text);
    margin-bottom:12px;
    line-height:1.7;
}

.contactInfoCard span{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.10);
    color:var(--primary);
    font-size:14px;
    font-weight:600;
}



/*==================================================
OFFICE LOCATION
==================================================*/

.officeLocationSection{
    padding:120px 0;
    position:relative;
}

.officeLocationGrid{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:40px;
    margin-top:60px;
}

.officeMap{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    min-height:520px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.mapPlaceholder{
    width:100%;
    height:100%;
    min-height:520px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
}

.mapPlaceholder i{
    font-size:80px;
    margin-bottom:25px;
    color:var(--primary);
}

.mapPlaceholder h3{
    font-size:34px;
    color:var(--heading);
    margin-bottom:18px;
}

.mapPlaceholder p{
    color:var(--text);
    line-height:1.8;
}

.officeDetails{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.officeCard{
    display:flex;
    align-items:center;
    gap:22px;
    padding:28px;
    border-radius:25px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    transition:.35s;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.officeCard:hover{
    transform:translateX(10px);
}

.officeCard i{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:28px;
    flex-shrink:0;
}

.officeCard h3{
    margin-bottom:8px;
    color:var(--heading);
    font-size:22px;
}

.officeCard p{
    color:var(--text);
    line-height:1.7;
}



/*==================================================
CONTACT CSS PART-1 RESPONSIVE
==================================================*/

@media(max-width:992px){

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

.officeLocationGrid{
    grid-template-columns:1fr;
}

.officeMap{
    min-height:450px;
}

.mapPlaceholder{
    min-height:450px;
}

}

@media(max-width:768px){

.contactInfoSection,
.officeLocationSection{
    padding:90px 0;
}

.contactInfoGrid{
    grid-template-columns:1fr;
}

.contactInfoCard{
    padding:35px 30px;
}

.contactInfoIcon{
    width:80px;
    height:80px;
    font-size:32px;
}

.contactInfoCard h3{
    font-size:24px;
}

.officeCard{
    padding:24px;
}

.officeCard i{
    width:60px;
    height:60px;
    font-size:24px;
}

.mapPlaceholder i{
    font-size:60px;
}

.mapPlaceholder h3{
    font-size:28px;
}

}

@media(max-width:576px){

.contactInfoCard,
.officeCard,
.officeMap{
    border-radius:22px;
}

.contactInfoIcon{
    width:70px;
    height:70px;
    font-size:28px;
}

.contactInfoCard h3{
    font-size:22px;
}

.contactInfoCard p,
.officeCard p{
    font-size:15px;
}

.officeCard{
    flex-direction:column;
    text-align:center;
}

.officeCard:hover{
    transform:translateY(-6px);
}

.mapPlaceholder{
    padding:25px;
}

.mapPlaceholder h3{
    font-size:24px;
}

}
/*==================================================
CONTACT FORM
==================================================*/

.contactFormSection{
    padding:120px 0;
    position:relative;
}

.contactFormWrapper{
    max-width:1100px;
    margin:60px auto 0;
}

.contactForm{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:35px;
    padding:50px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
}

.formGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.formGroup{
    display:flex;
    flex-direction:column;
}

.fullWidth{
    margin-top:30px;
}

.formGroup label{
    margin-bottom:10px;
    font-size:15px;
    font-weight:600;
    color:var(--heading);
}

.formGroup label span{
    color:#ef4444;
}

.formGroup input,
.formGroup select,
.formGroup textarea{
    width:100%;
    padding:16px 20px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.08);
    color:var(--heading);
    font-size:16px;
    outline:none;
    transition:.35s;
}

.formGroup textarea{
    resize:vertical;
    min-height:160px;
}

.formGroup input:focus,
.formGroup select:focus,
.formGroup textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

.formGroup input::placeholder,
.formGroup textarea::placeholder{
    color:var(--text);
}

.formCheck{
    margin:35px 0 30px;
}

.formCheck label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    line-height:1.8;
    color:var(--text);
    cursor:pointer;
}

.formCheck input{
    margin-top:4px;
    accent-color:var(--primary);
}

.formButtons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}


/*==================================================
CONTACT WHY
==================================================*/

.contactWhySection{
    padding:120px 0;
}

.contactWhyGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.whyCard{
    text-align:center;
    padding:40px 30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.whyCard:hover{
    transform:translateY(-10px);
}

.whyIcon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:34px;
}

.whyCard h3{
    margin-bottom:18px;
    font-size:26px;
    color:var(--heading);
}

.whyCard p{
    color:var(--text);
    line-height:1.8;
}


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

.contactCtaSection{
    padding:120px 0;
}


/*==================================================
CONTACT CSS PART-2 RESPONSIVE
==================================================*/

@media(max-width:992px){

.formGrid{
    grid-template-columns:1fr;
}

.contactForm{
    padding:40px;
}

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

}

@media(max-width:768px){

.contactFormSection,
.contactWhySection,
.contactCtaSection{
    padding:90px 0;
}

.contactForm{
    padding:30px;
    border-radius:25px;
}

.formButtons{
    flex-direction:column;
}

.formButtons .primaryButton,
.formButtons .glassButton{
    width:100%;
    justify-content:center;
}

.contactWhyGrid{
    grid-template-columns:1fr;
}

.whyCard{
    padding:35px 25px;
}

.whyIcon{
    width:80px;
    height:80px;
    font-size:30px;
}

.whyCard h3{
    font-size:24px;
}

}

@media(max-width:576px){

.contactForm{
    padding:22px;
    border-radius:20px;
}

.formGrid{
    gap:20px;
}

.formGroup input,
.formGroup select,
.formGroup textarea{
    padding:14px 16px;
    font-size:15px;
}

.formCheck label{
    font-size:14px;
}

.whyCard{
    border-radius:22px;
}

.whyIcon{
    width:70px;
    height:70px;
    font-size:28px;
}

.whyCard h3{
    font-size:22px;
}

.whyCard p{
    font-size:14px;
}

}

/*==================================================
CSS PART-10
FINAL CTA ANIMATIONS
==================================================*/


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

.finalCtaSection{

position:relative;

overflow:hidden;

}

.finalCtaSection.active .finalCtaBox{

animation:ctaAppear .9s ease forwards;

}

@keyframes ctaAppear{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


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

.glassButton{

position:relative;

overflow:hidden;

}

.ctaRipple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

pointer-events:none;

animation:rippleEffect .6s linear;

}

@keyframes rippleEffect{

to{

transform:scale(4);

opacity:0;

}

}


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

.pulse{

animation:pulseAnimation 2s infinite;

}

@keyframes pulseAnimation{

0%{

box-shadow:0 0 0 0 rgba(255,255,255,.45);

}

70%{

box-shadow:0 0 0 18px rgba(255,255,255,0);

}

100%{

box-shadow:0 0 0 0 rgba(255,255,255,0);

}

}


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

.finalCtaSection .glassButton{

transition:

transform .35s,

box-shadow .35s,

background .35s;

}

.finalCtaSection .glassButton:hover{

transform:translateY(-6px);

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

}


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

.finalCtaSection .ctaBadge{

animation:badgeFloat 4s ease-in-out infinite;

}

@keyframes badgeFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

/*==================================================
CSS PART-11
PREMIUM UI EFFECTS
==================================================*/


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

.primaryButton,
.secondaryButton,
.glassButton{

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

will-change:transform;

}


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

.heroImage img,
.pageHeroImage img,
.digitalImage img,
.highlightImage img,
.whyMissionImage img{

transition:transform .25s linear;

will-change:transform;

}


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

.glassCard,
.benefitCard,
.statCard,
.relatedCard{

transform-style:preserve-3d;

will-change:transform;

transition:

transform .25s ease,

box-shadow .35s ease;

}


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

@keyframes floatIcon{

0%{

transform:translateY(0);

}

25%{

transform:translateY(-6px);

}

50%{

transform:translateY(0);

}

75%{

transform:translateY(6px);

}

100%{

transform:translateY(0);

}

}


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

body::before{

content:"";

position:fixed;

left:var(--mouse-x);

top:var(--mouse-y);

width:260px;

height:260px;

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

border-radius:50%;

pointer-events:none;

background:

radial-gradient(

circle,

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

transparent 70%

);

z-index:0;

transition:

left .08s linear,

top .08s linear;

}


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

.benefitCard:hover,
.relatedCard:hover,
.statCard:hover{

box-shadow:

0 30px 70px rgba(37,99,235,.18);

}


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

.heroImage img,
.pageHeroImage img,
.digitalImage img,
.highlightImage img,
.whyMissionImage img{

backface-visibility:hidden;

transform:translateZ(0);

}


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

.glassCard,
.benefitCard,
.relatedCard,
.statCard{

contain:layout style;

}

/*==================================================
CSS PART-12
SMART USER EXPERIENCE
SECTION PROGRESS
==================================================*/


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

section{

transition:

opacity .6s ease,

transform .6s ease;

}

.sectionVisible{

opacity:1;

transform:translateY(0);

}


/*=================================
SCROLL PERCENT
=================================*/

#scrollPercent{

position:fixed;

right:22px;

bottom:95px;

width:62px;

height:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(

135deg,

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

rgba(14,165,233,.95)

);

color:#fff;

font-size:.95rem;

font-weight:700;

letter-spacing:.5px;

box-shadow:

0 18px 40px rgba(37,99,235,.28);

backdrop-filter:blur(16px);

z-index:999;

opacity:0;

visibility:hidden;

transform:

translateY(20px)

scale(.8);

transition:

all .35s ease;

user-select:none;

}


/*=================================
SHOW SCROLL PERCENT
=================================*/

#scrollPercent.show{

opacity:1;

visibility:visible;

transform:

translateY(0)

scale(1);

}


/*=================================
SCROLL PERCENT HOVER
=================================*/

#scrollPercent:hover{

transform:

scale(1.08);

box-shadow:

0 22px 50px rgba(37,99,235,.38);

}


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

.sectionVisible{

animation:

fadeSection .7s ease;

}

@keyframes fadeSection{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=================================
AUTO YEAR
=================================*/

.autoYear{

font-weight:700;

color:inherit;

}


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

@media(max-width:768px){

#scrollPercent{

width:54px;

height:54px;

right:16px;

bottom:82px;

font-size:.85rem;

}

}
/*==================================================
CSS PART-13
HERO ENHANCEMENT
SHINE • FLOAT • TITLE ANIMATION
==================================================*/


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

.primaryButton,
.glassButton{

position:relative;

overflow:hidden;

isolation:isolate;

}

.primaryButton::before,
.glassButton::before{

content:"";

position:absolute;

top:0;

left:-130%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transform:skewX(-25deg);

transition:left .8s ease;

pointer-events:none;

z-index:2;

}

.primaryButton.shine::before,
.glassButton.shine::before{

left:150%;

}


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

.sectionHeader h2{

opacity:0;

transform:translateY(35px);

transition:

opacity .8s ease,

transform .8s ease;

}

.sectionHeader h2.titleVisible{

opacity:1;

transform:translateY(0);

}


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

img{

opacity:.92;

transition:

opacity .45s ease,

transform .45s ease,

filter .45s ease;

}

img.loaded{

opacity:1;

filter:none;

}


/*=================================
FLOATING SUPPORT
=================================*/

.floating,

.heroImage img,

.pageHeroImage img{

will-change:transform;

backface-visibility:hidden;

transform:translateZ(0);

}


/*=================================
HERO PARALLAX SUPPORT
=================================*/

.heroSection,

.pageHero{

background-repeat:no-repeat;

background-position:center top;

background-size:cover;

}


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

img[data-preload]{

image-rendering:auto;

}


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

.featureItem i,

.benefitCard i,

.statCard i{

transition:

transform .35s ease,

color .35s ease;

}


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

.featureItem:hover i,

.benefitCard:hover i,

.statCard:hover i{

transform:scale(1.08);

}


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

@media(max-width:768px){

.sectionHeader h2{

transform:translateY(20px);

}

.primaryButton::before,

.glassButton::before{

display:none;

}

}

/*==================================================
CSS PART-14
STATISTICS
COUNTER • CARD • UPTIME
==================================================*/


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

.statCard{

position:relative;

overflow:hidden;

transition:

transform .35s ease,

box-shadow .35s ease,

border-color .35s ease;

will-change:transform;

}


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

.statCard::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

#2563eb,

#06b6d4,

#16a34a

);

transform:scaleX(0);

transform-origin:left;

transition:transform .4s ease;

}

.statCard:hover::before{

transform:scaleX(1);

}


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

.statCard:hover{

box-shadow:

0 28px 60px rgba(37,99,235,.18);

border-color:

rgba(37,99,235,.25);

}


/*=================================
COUNTER
=================================*/

.counter{

font-weight:800;

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

line-height:1;

letter-spacing:.5px;

font-variant-numeric:

tabular-nums;

color:var(--primary);

transition:

color .3s ease,

transform .3s ease;

}

.statCard:hover .counter{

transform:scale(1.05);

}


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

.statCard p{

margin-top:16px;

font-size:1rem;

font-weight:500;

color:var(--text-light);

}


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

.statCard i{

display:inline-flex;

align-items:center;

justify-content:center;

width:74px;

height:74px;

margin-bottom:22px;

border-radius:50%;

background:

rgba(37,99,235,.10);

color:var(--primary);

font-size:2rem;

transition:

all .35s ease;

}

.statCard:hover i{

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

color:#fff;

transform:

rotate(8deg)

scale(1.1);

}


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

.uptimeGlow{

color:#16a34a;

animation:

uptimePulse 2s infinite;

}

@keyframes uptimePulse{

0%{

text-shadow:

0 0 0 rgba(22,163,74,.2);

}

50%{

text-shadow:

0 0 18px rgba(22,163,74,.45);

}

100%{

text-shadow:

0 0 0 rgba(22,163,74,.2);

}

}


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

.statisticsSection.visible .statCard{

animation:

statFade .8s ease both;

}

.statisticsSection.visible .statCard:nth-child(2){

animation-delay:.08s;

}

.statisticsSection.visible .statCard:nth-child(3){

animation-delay:.16s;

}

.statisticsSection.visible .statCard:nth-child(4){

animation-delay:.24s;

}

.statisticsSection.visible .statCard:nth-child(5){

animation-delay:.32s;

}

.statisticsSection.visible .statCard:nth-child(6){

animation-delay:.40s;

}


@keyframes statFade{

from{

opacity:0;

transform:

translateY(40px);

}

to{

opacity:1;

transform:

translateY(0);

}

}


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

@media(max-width:768px){

.statCard{

padding:30px 22px;

}

.statCard i{

width:62px;

height:62px;

font-size:1.7rem;

}

.counter{

font-size:2.2rem;

}

}
/*==================================================
CSS PART-15
TOAST
BUTTON PRESS
RIPPLE EFFECT
==================================================*/


/*=================================
TOAST MESSAGE
=================================*/

.toastMessage{

position:fixed;

top:30px;

right:30px;

min-width:280px;

max-width:360px;

padding:18px 24px;

border-radius:18px;

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

backdrop-filter:blur(20px);

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

box-shadow:

0 20px 50px rgba(15,23,42,.18);

color:var(--dark);

font-weight:600;

z-index:99999;

opacity:0;

transform:

translateX(120px);

transition:

opacity .35s ease,

transform .35s ease;

pointer-events:none;

}


/*=================================
SHOW
=================================*/

.toastMessage.show{

opacity:1;

transform:

translateX(0);

}


/*=================================
SUCCESS
=================================*/

.toastMessage.success{

border-left:5px solid #16a34a;

}


/*=================================
ERROR
=================================*/

.toastMessage.error{

border-left:5px solid #ef4444;

}


/*=================================
WARNING
=================================*/

.toastMessage.warning{

border-left:5px solid #f59e0b;

}


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

.toastMessage.info{

border-left:5px solid #2563eb;

}


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

.primaryButton.pressed,

.secondaryButton.pressed,

.glassButton.pressed{

transform:scale(.96);

transition:

transform .15s ease;

}


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

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

background:

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

animation:

rippleAnimation

.6s linear;

pointer-events:none;

}


/*=================================
RIPPLE KEYFRAME
=================================*/

@keyframes rippleAnimation{

to{

transform:scale(4);

opacity:0;

}

}


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

.primaryButton,

.secondaryButton,

.glassButton{

position:relative;

overflow:hidden;

}


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

@media(max-width:768px){

.toastMessage{

top:20px;

right:15px;

left:15px;

min-width:auto;

max-width:none;

font-size:.95rem;

padding:16px 18px;

}

}
/*==================================================
CSS PART-16
PAGE STATE
SECTION REVEAL
LOADING EFFECT
==================================================*/


/*=================================
PAGE LOADED
=================================*/

body{

opacity:0;

transition:

opacity .45s ease;

}

body.pageLoaded{

opacity:1;

}


/*=================================
PAGE HIDDEN
=================================*/

body.pageHidden{

filter:blur(2px);

opacity:.92;

transition:

all .3s ease;

}


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

section{

transition:

transform .45s ease,

opacity .45s ease;

}

section.sectionActive{

position:relative;

}


/*=================================
SECTION IN VIEW
=================================*/

section.inView{

animation:

sectionFade .8s ease both;

}

@keyframes sectionFade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}


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

img{

opacity:.85;

transition:

opacity .4s ease,

transform .4s ease,

filter .4s ease;

}

img.loaded{

opacity:1;

filter:none;

}


/*=================================
PAGE TRANSITION
=================================*/

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(

circle at center,

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

transparent 70%

);

opacity:0;

transition:opacity .4s ease;

z-index:9998;

}

body.pageLoaded::after{

opacity:1;

}


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

body.reduceMotion *{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}


/*=================================
ACTIVE SECTION BORDER
=================================*/

section.sectionActive::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

opacity:.6;

}


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

html{

scroll-behavior:smooth;

}


/*=================================
PRINT MODE
=================================*/

body.printing{

background:#fff !important;

color:#000 !important;

}

body.printing *{

box-shadow:none !important;

}


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

@media(max-width:768px){

section.inView{

animation-duration:.55s;

}

}
/*==================================================
CSS PART-17
FLOATING
MOUSE GLOW
GLASS EFFECT
==================================================*/


/*=================================
FLOATING OBJECTS
=================================*/

.floating,

.heroImage img,

.pageHeroImage img,

.digitalImage img,

.highlightImage img{

animation:

floatAnimation 7s ease-in-out infinite;

will-change:transform;

}


@keyframes floatAnimation{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


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

body::before{

content:"";

position:fixed;

left:var(--mouse-x,50%);

top:var(--mouse-y,50%);

width:320px;

height:320px;

transform:

translate(-50%,-50%);

background:

radial-gradient(

circle,

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

transparent 70%

);

pointer-events:none;

z-index:-1;

transition:

left .12s linear,

top .12s linear;

filter:blur(20px);

}


/*=================================
GLASS SHINE
=================================*/

.glassCard,

.statCard,

.benefitCard,

.relatedCard,

.featureItem{

position:relative;

overflow:hidden;

}


.glassCard::after,

.statCard::after,

.benefitCard::after,

.relatedCard::after,

.featureItem::after{

content:"";

position:absolute;

top:-120%;

left:-80%;

width:60%;

height:260%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transform:rotate(25deg);

opacity:0;

transition:

all .7s ease;

}


.glassCard:hover::after,

.statCard:hover::after,

.benefitCard:hover::after,

.relatedCard:hover::after,

.featureItem:hover::after{

left:150%;

opacity:1;

}


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

.heroImage img,

.pageHeroImage img,

.digitalImage img,

.highlightImage img{

filter:

drop-shadow(

0 30px 60px

rgba(37,99,235,.18)

);

}


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

.glassCard:hover,

.statCard:hover,

.relatedCard:hover,

.benefitCard:hover{

transform:

translateY(-10px);

}


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

.heroSection,

.pageHero{

position:relative;

overflow:hidden;

}


.heroSection::after,

.pageHero::after{

content:"";

position:absolute;

right:-140px;

top:-140px;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(59,130,246,.12),

transparent 70%

);

pointer-events:none;

}


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

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

.floating,

.heroImage img,

.pageHeroImage img,

.digitalImage img,

.highlightImage img{

animation:none;

}

body::before{

display:none;

}

}


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

@media(max-width:768px){

body::before{

display:none;

}

.heroSection::after,

.pageHero::after{

display:none;

}

}
/*==================================================
CSS PART-18
ACCESSIBILITY
FOCUS
SELECTION
==================================================*/


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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

outline:3px solid rgba(37,99,235,.35);

outline-offset:4px;

border-radius:10px;

}


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

.primaryButton:focus-visible,
.secondaryButton:focus-visible,
.glassButton:focus-visible{

box-shadow:

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

0 10px 30px rgba(37,99,235,.18);

}


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

::selection{

background:#2563eb;

color:#fff;

}

::-moz-selection{

background:#2563eb;

color:#fff;

}


/*=================================
INPUT PLACEHOLDER
=================================*/

input::placeholder,
textarea::placeholder{

color:#94a3b8;

opacity:1;

}


/*=================================
DISABLED
=================================*/

button:disabled,
input:disabled{

opacity:.55;

cursor:not-allowed;

filter:grayscale(.15);

}


/*=================================
CLICKABLE CURSOR
=================================*/

button,
a,
summary{

cursor:pointer;

}


/*=================================
SMOOTH TAP
=================================*/

button,
a{

-webkit-tap-highlight-color:transparent;

}


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

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#eef4fb;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

#2563eb,

#06b6d4

);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(

180deg,

#1d4ed8,

#0891b2

);

}


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

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*=================================
HIGH CONTRAST
=================================*/

@media(prefers-contrast:more){

.glassCard,
.statCard,
.benefitCard,
.relatedCard{

border:2px solid #2563eb;

}

}


/*=================================
PRINT SUPPORT
=================================*/

@media print{

body{

background:#fff !important;

color:#000 !important;

}

a{

text-decoration:none;

color:#000;

}

}
/*==================================================
CSS PART-19
FINAL UTILITIES
PREMIUM EFFECTS
==================================================*/


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

.gradientText{

background:linear-gradient(
135deg,
#2563eb,
#06b6d4
);

-webkit-background-clip:text;

background-clip:text;

-webkit-text-fill-color:transparent;

color:transparent;

}


/*=================================
GLASS UTILITIES
=================================*/

.glass{

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

backdrop-filter:blur(20px);

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

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

box-shadow:

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

}


/*=================================
SHADOW UTILITIES
=================================*/

.shadowSm{

box-shadow:

0 8px 20px rgba(15,23,42,.06);

}

.shadowMd{

box-shadow:

0 18px 40px rgba(15,23,42,.10);

}

.shadowLg{

box-shadow:

0 28px 65px rgba(15,23,42,.16);

}


/*=================================
BORDER RADIUS
=================================*/

.radiusSm{

border-radius:12px;

}

.radiusMd{

border-radius:20px;

}

.radiusLg{

border-radius:32px;

}


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

.fadeIn{

animation:fadeIn .7s ease both;

}

.fadeUp{

animation:fadeUp .8s ease both;

}

.zoomIn{

animation:zoomIn .6s ease both;

}


@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}


@keyframes zoomIn{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}


/*=================================
LOADING STATE
=================================*/

.loading{

pointer-events:none;

opacity:.7;

filter:grayscale(.15);

}


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

.imgFluid{

width:100%;

height:auto;

display:block;

}

.roundImage{

border-radius:50%;

overflow:hidden;

}


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

.textCenter{

text-align:center;

}

.textPrimary{

color:var(--primary);

}

.textMuted{

color:var(--text-light);

}


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

.mt40{

margin-top:40px;

}

.mb40{

margin-bottom:40px;

}

.py120{

padding:120px 0;

}


/*=================================
DARK MODE SUPPORT
=================================*/

body.dark .glass{

background:rgba(30,41,59,.72);

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

}

body.dark .gradientText{

background:linear-gradient(
135deg,
#60a5fa,
#22d3ee
);

-webkit-background-clip:text;

background-clip:text;

-webkit-text-fill-color:transparent;

}


/*=================================
FINAL SMOOTHNESS
=================================*/

*{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}


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

@media(max-width:768px){

.py120{

padding:80px 0;

}

.shadowLg{

box-shadow:

0 20px 40px rgba(15,23,42,.12);

}

}

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

.instituteCard{
    overflow:hidden;
    background-color: #f4f8ff;
}

.instituteCard img{
    display:block;
    width:100%;
    height:220px;      /* প্রয়োজন হলে পরিবর্তন করুন */
    object-fit:cover;  /* পুরো div ভরবে, অনুপাত ঠিক থাকবে */
}

/*======================================================================================================================
                       anotherPage
==============================================================================================================================*/
/*=========================================
THIS PAGE LABEL
=========================================*/
.anotherPage,
.thisPage{

display:flex;

align-items:center;

gap:5px;

padding:8px 12px;

border-radius:8px;

background:none;

color:#b1946b;

font-size:.95rem;

font-weight:700;

cursor:default;

user-select:none;

flex-shrink:0;

}
.anotherPage {
color: #6b5f4e;
}

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

.thisPage i{

font-size:1rem;

color:#776fa4;

animation:arrowMove 1.2s ease-in-out infinite;

}
.anotherPage i
{

font-size:1rem;

color:#ffe066;

animation:arrowMove 1.2s ease-in-out infinite;

}


/*=========================================
REMOVE HOVER LINE
=========================================*/
.anotherPage::after,

.anotherPage::before,
.thisPage::after,

.thisPage::before{

display:none !important;

content:none !important;

}


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

@keyframes arrowMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(8px);

}

100%{

transform:translateX(0);

}

}

/*============================================================================================================================
------------------------------------------------------- INSTITUTE.HTML CSS ALL PART---------------------------------------------
=============================================================================================================================*/

/*==================================================
Part-01
HEADER
==================================================*/

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


/*==================================================
Part-02
HERO SECTION
==================================================*/

/*==================================================
13 HERO SECTION
==================================================*/

.heroSection{

position:relative;

padding:180px 0 100px;

background:
linear-gradient(
135deg,
#eff6ff 0%,
#f8fbff 50%,
#ffffff 100%
);

overflow:hidden;

}


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

.heroSection::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:500px;

height:500px;

border-radius:50%;

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

}

.heroSection::after{

content:"";

position:absolute;

left:-150px;

bottom:-150px;

width:420px;

height:420px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(14,165,233,.10),
transparent 70%
);

}


/*==================================================
15 HERO CONTAINER
==================================================*/

.heroContainer{

position:relative;

z-index:2;

display:grid;

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

align-items:center;

gap:70px;

}


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

.heroContent{

max-width:650px;

}


/*==================================================
17 HERO BADGE
==================================================*/

.heroBadge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

margin-bottom:25px;

border-radius:999px;

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

color:#2563eb;

font-size:.95rem;

font-weight:700;

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

}


/*==================================================
18 HERO TITLE
==================================================*/

.heroContent h1{

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

line-height:1.15;

font-weight:800;

color:var(--dark);

margin-bottom:28px;

}

.heroContent h1 span{

color:var(--primary);

}


/*==================================================
19 HERO DESCRIPTION
==================================================*/

.heroContent p{

font-size:1.1rem;

line-height:1.9;

color:var(--text-light);

margin-bottom:38px;

}


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

.heroButtons{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}


/*==================================================
21 PRIMARY BUTTON
==================================================*/

.primaryButton{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 34px;

border-radius:999px;

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

color:#fff;

font-weight:700;

text-decoration:none;

transition:.35s;

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

}

.primaryButton:hover{

transform:translateY(-4px);

}


/*==================================================
22 SECONDARY BUTTON
==================================================*/

.secondaryButton{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 34px;

border-radius:999px;

border:2px solid #2563eb;

color:#2563eb;

font-weight:700;

text-decoration:none;

transition:.35s;

background:#fff;

}

.secondaryButton:hover{

background:#2563eb;

color:#fff;

}


/*==================================================
23 HERO IMAGE
==================================================*/

.heroImage{

display:flex;

justify-content:center;

align-items:center;

}

.heroImage img{

width:100%;

max-width:560px;

filter:
drop-shadow(
0 35px 70px
rgba(37,99,235,.18)
);

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

}


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

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}


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

@media(max-width:992px){

.heroContainer{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.heroContent{

margin:auto;

}

.heroButtons{

justify-content:center;

}

.heroImage{

order:-1;

}

}

@media(max-width:768px){

.heroSection{

padding:150px 0 70px;

}

.heroContent h1{

font-size:2.3rem;

}

.heroContent p{

font-size:1rem;

}

.heroButtons{

flex-direction:column;

}

.primaryButton,

.secondaryButton{

width:100%;

}

.heroImage img{

max-width:360px;

}

}
/*==================================================
Part-03
INTRODUCTION SECTION
==================================================*/


/*==================================================
26 INTRODUCTION SECTION
==================================================*/

.introductionSection{

padding:100px 0;

background:#ffffff;

}


/*==================================================
27 INTRODUCTION CONTAINER
==================================================*/

.introductionContainer{

display:grid;

grid-template-columns:1fr 420px;

gap:60px;

align-items:center;

}


/*==================================================
28 INTRODUCTION CONTENT
==================================================*/

.introductionContent h2{

font-size:2.3rem;

font-weight:800;

color:var(--dark);

margin-bottom:25px;

line-height:1.3;

}

.introductionContent p{

font-size:1.05rem;

line-height:2;

color:var(--text-light);

margin-bottom:20px;

text-align:justify;

}


/*==================================================
29 INTRODUCTION IMAGE
==================================================*/

.introductionImage{

display:flex;

justify-content:center;

align-items:center;

}

.introductionImage img{

width:100%;

max-width:400px;

border-radius:24px;

box-shadow:

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

transition:.35s;

}

.introductionImage img:hover{

transform:translateY(-8px);

}


/*==================================================
30 INFORMATION BOX
==================================================*/

.infoBox{

margin-top:35px;

padding:28px;

border-radius:22px;

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

backdrop-filter:blur(18px);

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

box-shadow:

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

}

.infoBox h3{

font-size:1.35rem;

margin-bottom:18px;

color:var(--primary);

}

.infoBox p{

margin:0;

}


/*==================================================
31 HIGHLIGHT LIST
==================================================*/

.highlightList{

display:grid;

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

gap:18px;

margin-top:30px;

}

.highlightItem{

display:flex;

align-items:flex-start;

gap:15px;

padding:18px;

border-radius:18px;

background:#f8fbff;

transition:.35s;

}

.highlightItem:hover{

transform:translateY(-6px);

box-shadow:

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

}

.highlightItem i{

font-size:1.5rem;

color:var(--primary);

margin-top:4px;

}

.highlightItem h4{

margin-bottom:8px;

font-size:1.05rem;

}

.highlightItem p{

margin:0;

font-size:.95rem;

line-height:1.8;

}


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

@media(max-width:992px){

.introductionContainer{

grid-template-columns:1fr;

}

.introductionImage{

order:-1;

}

.highlightList{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.introductionSection{

padding:80px 0;

}

.introductionContent h2{

font-size:1.9rem;

text-align:center;

}

.introductionContent p{

font-size:1rem;

}

.infoBox{

padding:22px;

}

}

@media(max-width:480px){

.introductionContent h2{

font-size:1.7rem;

}

.introductionImage img{

max-width:300px;

}

.highlightItem{

padding:16px;

}

}
/*==================================================
Part-04
ANCIENT EDUCATION
==================================================*/


/*==================================================
33 ANCIENT SECTION
==================================================*/

.ancientSection{

padding:100px 0;

background:#f8fbff;

position:relative;

overflow:hidden;

}


/*==================================================
34 TIMELINE
==================================================*/

.ancientTimeline{

position:relative;

max-width:1200px;

margin:60px auto 0;

padding-left:40px;

}

.ancientTimeline::before{

content:"";

position:absolute;

left:18px;

top:0;

bottom:0;

width:4px;

border-radius:50px;

background:linear-gradient(
180deg,
#2563eb,
#38bdf8);

}


/*==================================================
35 TIMELINE ITEM
==================================================*/

.timelineItem{

position:relative;

margin-bottom:45px;

padding-left:45px;

}

.timelineItem:last-child{

margin-bottom:0;

}


/*==================================================
36 TIMELINE DOT
==================================================*/

.timelineItem::before{

content:"";

position:absolute;

left:-2px;

top:28px;

width:18px;

height:18px;

border-radius:50%;

background:#2563eb;

border:4px solid #fff;

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

}


/*==================================================
37 TIMELINE CARD
==================================================*/

.timelineCard{

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

backdrop-filter:blur(18px);

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

padding:32px;

border-radius:24px;

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

box-shadow:

0 12px 35px rgba(15,23,42,.08);

transition:.35s;

}

.timelineCard:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(15,23,42,.12);

}


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

.timelineIcon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

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

color:#fff;

font-size:1.8rem;

margin-bottom:22px;

}


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

.timelineCard h3{

font-size:1.5rem;

font-weight:700;

margin-bottom:16px;

color:var(--dark);

}


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

.timelineCard p{

font-size:1rem;

line-height:2;

color:var(--text-light);

text-align:justify;

margin-bottom:18px;

}


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

.timelineFeatures{

display:grid;

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

gap:14px;

margin-top:18px;

}

.timelineFeatures div{

display:flex;

align-items:center;

gap:10px;

padding:14px 18px;

border-radius:14px;

background:#f7fbff;

font-size:.95rem;

font-weight:600;

color:var(--text);

}

.timelineFeatures i{

color:#2563eb;

}


/*==================================================
42 QUOTE
==================================================*/

.timelineQuote{

margin-top:22px;

padding:18px 22px;

border-left:5px solid #2563eb;

background:#eef6ff;

border-radius:12px;

font-style:italic;

color:#334155;

line-height:1.9;

}


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

@media(max-width:992px){

.timelineFeatures{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.ancientSection{

padding:80px 0;

}

.ancientTimeline{

padding-left:28px;

}

.timelineItem{

padding-left:30px;

}

.timelineCard{

padding:24px;

}

.timelineCard h3{

font-size:1.3rem;

}

.timelineIcon{

width:60px;

height:60px;

font-size:1.5rem;

}

}


@media(max-width:480px){

.timelineCard{

padding:20px;

}

.timelineCard p{

font-size:.95rem;

}

.timelineFeatures div{

padding:12px 14px;

font-size:.9rem;

}

}
/*==================================================
Part-05
MODERN EDUCATION SYSTEM
==================================================*/


/*==================================================
44 MODERN EDUCATION SECTION
==================================================*/

.modernEducationSection{

padding:100px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}


/*==================================================
45 MODERN GRID
==================================================*/

.modernGrid{

display:grid;

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

gap:32px;

margin-top:60px;

}


/*==================================================
46 EDUCATION CARD
==================================================*/

.educationCard{

position:relative;

padding:35px 30px;

border-radius:28px;

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

backdrop-filter:blur(20px);

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

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

box-shadow:

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

transition:.35s;

overflow:hidden;

}

.educationCard:hover{

transform:translateY(-10px);

box-shadow:

0 25px 50px rgba(15,23,42,.12);

}


/*==================================================
47 TOP BORDER
==================================================*/

.educationCard::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:

linear-gradient(

90deg,

#2563eb,

#38bdf8

);

}


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

.educationIcon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:24px;

border-radius:22px;

background:

linear-gradient(

135deg,

#2563eb,

#3b82f6

);

color:#fff;

font-size:2rem;

box-shadow:

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

}


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

.educationCard h3{

font-size:1.45rem;

font-weight:700;

margin-bottom:18px;

color:var(--dark);

}


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

.educationCard p{

font-size:1rem;

line-height:2;

color:var(--text-light);

text-align:justify;

margin-bottom:22px;

}


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

.educationFeatures{

display:flex;

flex-direction:column;

gap:12px;

}

.educationFeatures span{

display:flex;

align-items:center;

gap:10px;

padding:12px 16px;

border-radius:12px;

background:#f8fbff;

font-size:.95rem;

font-weight:600;

color:var(--text);

}

.educationFeatures i{

color:#2563eb;

}


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

.educationCard:hover .educationIcon{

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

transition:.35s;

}


/*==================================================
53 SECTION NOTE
==================================================*/

.educationNote{

margin-top:60px;

padding:35px;

border-radius:24px;

background:

linear-gradient(

135deg,

#eff6ff,

#f8fbff

);

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

box-shadow:

0 15px 35px rgba(15,23,42,.06);

}

.educationNote h3{

margin-bottom:18px;

font-size:1.6rem;

color:#2563eb;

}

.educationNote p{

line-height:2;

font-size:1.05rem;

text-align:justify;

}


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

@media(max-width:1100px){

.modernGrid{

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

}

}


@media(max-width:768px){

.modernEducationSection{

padding:80px 0;

}

.modernGrid{

grid-template-columns:1fr;

gap:24px;

}

.educationCard{

padding:28px 24px;

}

.educationCard h3{

font-size:1.3rem;

}

.educationIcon{

width:68px;

height:68px;

font-size:1.7rem;

}

.educationNote{

padding:25px;

}

}


@media(max-width:480px){

.educationCard{

padding:22px;

}

.educationCard p{

font-size:.95rem;

}

.educationFeatures span{

font-size:.9rem;

padding:10px 14px;

}

.educationNote h3{

font-size:1.35rem;

}

.educationNote p{

font-size:.95rem;

}

}
/*==================================================
Part-06
TEACHER STUDENT RELATIONSHIP
==================================================*/


/*==================================================
55 RELATIONSHIP SECTION
==================================================*/

.relationshipSection{

padding:100px 0;

background:#f8fbff;

position:relative;

overflow:hidden;

}


/*==================================================
56 RELATIONSHIP GRID
==================================================*/

.relationshipGrid{

display:grid;

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

gap:35px;

margin-top:60px;

}


/*==================================================
57 RELATION CARD
==================================================*/

.relationshipCard{

padding:36px 32px;

border-radius:28px;

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

backdrop-filter:blur(18px);

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

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

box-shadow:

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

transition:.35s;

}

.relationshipCard:hover{

transform:translateY(-8px);

box-shadow:

0 22px 50px rgba(15,23,42,.12);

}


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

.relationshipIcon{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

border-radius:22px;

background:

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

color:#fff;

font-size:2rem;

box-shadow:

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

}


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

.relationshipCard h3{

font-size:1.45rem;

font-weight:700;

margin-bottom:18px;

color:var(--dark);

}


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

.relationshipCard p{

font-size:1rem;

line-height:2;

text-align:justify;

color:var(--text-light);

margin-bottom:22px;

}


/*==================================================
61 LIST
==================================================*/

.relationshipList{

display:flex;

flex-direction:column;

gap:14px;

}

.relationshipList li{

list-style:none;

display:flex;

align-items:flex-start;

gap:12px;

padding:14px 18px;

border-radius:14px;

background:#f8fbff;

font-size:.96rem;

line-height:1.8;

}

.relationshipList li i{

color:#2563eb;

margin-top:4px;

}


/*==================================================
62 BOTTOM BOX
==================================================*/

.relationshipNote{

margin-top:60px;

padding:35px;

border-radius:26px;

background:

linear-gradient(
135deg,
#eff6ff,
#ffffff);

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

box-shadow:

0 15px 35px rgba(15,23,42,.06);

}

.relationshipNote h3{

font-size:1.6rem;

margin-bottom:18px;

color:#2563eb;

}

.relationshipNote p{

font-size:1.05rem;

line-height:2;

text-align:justify;

}


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

@media(max-width:992px){

.relationshipGrid{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.relationshipSection{

padding:80px 0;

}

.relationshipCard{

padding:28px 24px;

}

.relationshipIcon{

width:70px;

height:70px;

font-size:1.7rem;

}

.relationshipCard h3{

font-size:1.3rem;

}

.relationshipNote{

padding:25px;

}

.relationshipNote h3{

font-size:1.4rem;

}

}


@media(max-width:480px){

.relationshipCard{

padding:22px;

}

.relationshipCard p{

font-size:.95rem;

}

.relationshipList li{

padding:12px 14px;

font-size:.9rem;

}

.relationshipNote{

padding:22px;

}

.relationshipNote p{

font-size:.95rem;

}

}
/*==================================================
Part-07
STUDENT RELATIONSHIP
==================================================*/


/*==================================================
64 STUDENT RELATIONSHIP SECTION
==================================================*/

.studentRelationshipSection{

padding:100px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}


/*==================================================
65 RELATIONSHIP INTRO
==================================================*/

.studentIntro{

max-width:900px;

margin:0 auto 60px;

text-align:center;

}

.studentIntro h2{

font-size:2.4rem;

font-weight:800;

color:var(--dark);

margin-bottom:22px;

}

.studentIntro p{

font-size:1.08rem;

line-height:2;

color:var(--text-light);

}


/*==================================================
66 RELATIONSHIP GRID
==================================================*/

.studentGrid{

display:grid;

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

gap:30px;

}


/*==================================================
67 RELATIONSHIP CARD
==================================================*/

.studentCard{

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

backdrop-filter:blur(18px);

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

padding:35px;

border-radius:28px;

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

box-shadow:

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

transition:.35s;

}

.studentCard:hover{

transform:translateY(-8px);

box-shadow:

0 22px 50px rgba(15,23,42,.12);

}


/*==================================================
68 CARD ICON
==================================================*/

.studentCardIcon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:24px;

border-radius:22px;

background:

linear-gradient(

135deg,

#2563eb,

#3b82f6

);

color:#fff;

font-size:2rem;

box-shadow:

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

}


/*==================================================
69 CARD TITLE
==================================================*/

.studentCard h3{

font-size:1.4rem;

font-weight:700;

margin-bottom:18px;

color:var(--dark);

}


/*==================================================
70 CARD DESCRIPTION
==================================================*/

.studentCard p{

font-size:1rem;

line-height:2;

text-align:justify;

color:var(--text-light);

}


/*==================================================
71 HIGHLIGHT BOX
==================================================*/

.studentHighlight{

margin-top:60px;

padding:40px;

border-radius:28px;

background:

linear-gradient(

135deg,

#eff6ff,

#ffffff

);

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

box-shadow:

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

}

.studentHighlight h3{

font-size:1.6rem;

margin-bottom:18px;

color:#2563eb;

}

.studentHighlight p{

font-size:1.05rem;

line-height:2;

text-align:justify;

}


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

@media(max-width:992px){

.studentGrid{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.studentRelationshipSection{

padding:80px 0;

}

.studentIntro h2{

font-size:2rem;

}

.studentCard{

padding:28px;

}

.studentCardIcon{

width:68px;

height:68px;

font-size:1.7rem;

}

.studentHighlight{

padding:28px;

}

}


@media(max-width:480px){

.studentIntro h2{

font-size:1.7rem;

}

.studentIntro p{

font-size:.98rem;

}

.studentCard{

padding:22px;

}

.studentCard h3{

font-size:1.2rem;

}

.studentCard p{

font-size:.95rem;

}

.studentHighlight{

padding:22px;

}

.studentHighlight h3{

font-size:1.3rem;

}

.studentHighlight p{

font-size:.95rem;

}

}
/*==================================================
Part-08
EXPECTATION & ACHIEVEMENT
==================================================*/


/*==================================================
73 EXPECTATION SECTION
==================================================*/

.expectationSection{

padding:100px 0;

background:#f8fbff;

position:relative;

overflow:hidden;

}


/*==================================================
74 EXPECTATION GRID
==================================================*/

.expectationGrid{

display:grid;

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

gap:35px;

margin-top:60px;

}


/*==================================================
75 EXPECTATION CARD
==================================================*/

.expectationCard{

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

backdrop-filter:blur(18px);

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

padding:38px 34px;

border-radius:28px;

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

box-shadow:

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

transition:.35s;

}

.expectationCard:hover{

transform:translateY(-8px);

box-shadow:

0 22px 50px rgba(15,23,42,.12);

}


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

.expectationIcon{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

border-radius:22px;

background:

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

color:#fff;

font-size:2rem;

box-shadow:

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

}


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

.expectationCard h3{

font-size:1.5rem;

font-weight:700;

margin-bottom:18px;

color:var(--dark);

}


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

.expectationCard p{

font-size:1rem;

line-height:2;

text-align:justify;

color:var(--text-light);

margin-bottom:22px;

}


/*==================================================
79 LIST
==================================================*/

.expectationList{

display:flex;

flex-direction:column;

gap:14px;

}

.expectationList li{

list-style:none;

display:flex;

align-items:flex-start;

gap:12px;

padding:14px 18px;

border-radius:14px;

background:#f8fbff;

font-size:.96rem;

line-height:1.8;

}

.expectationList li i{

color:#2563eb;

margin-top:4px;

}


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

.expectationCTA{

margin-top:70px;

padding:45px;

border-radius:30px;

text-align:center;

background:

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

color:#ffffff;

box-shadow:

0 20px 50px rgba(37,99,235,.35);

}

.expectationCTA h2{

font-size:2rem;

margin-bottom:20px;

color:#fff;

}

.expectationCTA p{

font-size:1.08rem;

line-height:2;

max-width:850px;

margin:auto;

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

}


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

.expectationCTA .ctaButton{

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:30px;

padding:15px 34px;

border-radius:50px;

background:#ffffff;

color:#2563eb;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.expectationCTA .ctaButton:hover{

transform:translateY(-4px);

box-shadow:

0 14px 35px rgba(255,255,255,.35);

}


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

@media(max-width:992px){

.expectationGrid{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.expectationSection{

padding:80px 0;

}

.expectationCard{

padding:28px 24px;

}

.expectationIcon{

width:68px;

height:68px;

font-size:1.7rem;

}

.expectationCTA{

padding:30px 24px;

}

.expectationCTA h2{

font-size:1.6rem;

}

}


@media(max-width:480px){

.expectationCard{

padding:22px;

}

.expectationCard h3{

font-size:1.25rem;

}

.expectationCard p{

font-size:.95rem;

}

.expectationList li{

padding:12px 14px;

font-size:.90rem;

}

.expectationCTA{

padding:24px 20px;

}

.expectationCTA h2{

font-size:1.35rem;

}

.expectationCTA p{

font-size:.95rem;

}

.expectationCTA .ctaButton{

width:100%;

}

}
/*==================================================
Part-09
STATISTICS
COLOR CARDS
FAQ
==================================================*/


/*==================================================
83 STATISTICS SECTION
==================================================*/

.statisticsSection{

padding:100px 0;

background:#ffffff;

}


/*==================================================
84 STATISTICS GRID
==================================================*/

.statisticsGrid{

display:grid;

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

gap:28px;

margin-top:60px;

}


/*==================================================
85 COLOR CARD
==================================================*/

.colorCard{

padding:38px 25px;

border-radius:26px;

color:#fff;

text-align:center;

transition:.35s;

box-shadow:

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

}

.colorCard:hover{

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

}


/*==================================================
86 CARD COLORS
==================================================*/

.blueCard{

background:

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

}

.greenCard{

background:

linear-gradient(135deg,#059669,#34d399);

}

.orangeCard{

background:

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

}

.purpleCard{

background:

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

}


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

.colorCard i{

font-size:2.4rem;

margin-bottom:18px;

}

.colorCard h2{

font-size:2.4rem;

margin-bottom:10px;

font-weight:800;

color:#fff;

}

.colorCard p{

font-size:1rem;

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

}


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

.faqSection{

margin-top:90px;

}

.faqItem{

background:#ffffff;

border-radius:20px;

padding:26px 28px;

margin-bottom:18px;

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

box-shadow:

0 10px 28px rgba(15,23,42,.06);

transition:.35s;

}

.faqItem:hover{

transform:translateY(-4px);

}

.faqItem h3{

font-size:1.2rem;

margin-bottom:14px;

color:#2563eb;

}

.faqItem p{

line-height:2;

text-align:justify;

}


/*==================================================
89 INFORMATION BANNER
==================================================*/

.infoBanner{

margin-top:70px;

padding:40px;

border-radius:30px;

background:

linear-gradient(

135deg,

#0f172a,

#1e3a8a

);

color:#fff;

text-align:center;

box-shadow:

0 20px 50px rgba(30,58,138,.35);

}

.infoBanner h2{

font-size:2rem;

margin-bottom:20px;

color:#fff;

}

.infoBanner p{

max-width:900px;

margin:auto;

line-height:2;

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

}


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

@media(max-width:992px){

.statisticsGrid{

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

}

}


@media(max-width:768px){

.statisticsSection{

padding:80px 0;

}

.statisticsGrid{

grid-template-columns:1fr;

}

.colorCard{

padding:30px 22px;

}

.infoBanner{

padding:28px 22px;

}

.infoBanner h2{

font-size:1.6rem;

}

}


@media(max-width:480px){

.colorCard h2{

font-size:2rem;

}

.colorCard p{

font-size:.95rem;

}

.faqItem{

padding:22px 20px;

}

.infoBanner{

padding:24px 18px;

}

.infoBanner h2{

font-size:1.35rem;

}

.infoBanner p{

font-size:.95rem;

}

}


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

.footer{

padding:40px 0 25px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b);

color:#e2e8f0;

position:relative;

overflow:hidden;

}


/*==================================================
92 FOOTER GRID
==================================================*/

.footerGrid{

display:grid;

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

gap:45px;

margin-bottom:60px;

}


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

.footerLogo{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

}

.footerLogo img{

width:65px;

height:65px;

object-fit:contain;

}

.footerLogo h2{

font-size:1.5rem;

color:#fff;

font-weight:800;

}

.footerAbout p{

line-height:2;

color:#cbd5e1;

}


/*==================================================
94 FOOTER TITLE
==================================================*/

.footerTitle{

font-size:1.25rem;

font-weight:700;

margin-bottom:22px;

color:#ffffff;

}


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

.footerLinks{

display:flex;

flex-direction:column;

gap:14px;

}

.footerLinks a{

color:#cbd5e1;

text-decoration:none;

transition:.3s;

}

.footerLinks a:hover{

color:#60a5fa;

padding-left:8px;

}


/*==================================================
96 CONTACT
==================================================*/

.footerContact{

display:flex;

flex-direction:column;

gap:15px;

}

.footerContact div{

display:flex;

align-items:flex-start;

gap:12px;

line-height:1.8;

}

.footerContact i{

color:#60a5fa;

margin-top:5px;

}


/*==================================================
97 SOCIAL
==================================================*/

.footerSocial{

display:flex;

gap:15px;

margin-top:22px;

}

.footerSocial a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

color:#fff;

font-size:1.1rem;

transition:.35s;

}

.footerSocial a:hover{

background:#2563eb;

transform:translateY(-4px);

}


/*==================================================
98 COPYRIGHT
==================================================*/

.footerBottom{

padding-top:30px;

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

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.footerBottom p{

color:#94a3b8;

font-size:.95rem;

}


/*==================================================
99 SCROLL TOP
==================================================*/

.scrollTop{

position:fixed;

right:28px;

bottom:28px;

width:55px;

height:55px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:1.2rem;

text-decoration:none;

box-shadow:

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

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.scrollTop.show{

opacity:1;

visibility:visible;

}

.scrollTop:hover{

transform:translateY(-6px);

}


/*==================================================
100 WHATSAPP BUTTON
==================================================*/

.whatsappButton{

position:fixed;

left:28px;

bottom:28px;

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#22c55e;

color:#fff;

font-size:1.5rem;

text-decoration:none;

box-shadow:

0 18px 35px rgba(34,197,94,.35);

transition:.35s;

z-index:999;

}

.whatsappButton:hover{

transform:translateY(-6px);

}


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

@media(max-width:1100px){

.footerGrid{

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

}

}


@media(max-width:768px){

.footer{

padding:70px 0 25px;

}

.footerGrid{

grid-template-columns:1fr;

gap:35px;

}

.footerBottom{

justify-content:center;

text-align:center;

}

.scrollTop{

right:18px;

bottom:18px;

}

.whatsappButton{

left:18px;

bottom:18px;

}

}


@media(max-width:480px){

.footerLogo h2{

font-size:1.25rem;

}

.footerTitle{

font-size:1.1rem;

}

.footerBottom p{

font-size:.9rem;

}

.scrollTop,

.whatsappButton{

width:50px;

height:50px;

font-size:1.2rem;

}

}
/*==================================================
Part-11
FINAL EFFECTS & UTILITIES
==================================================*/


/*==================================================
102 COMMON ANIMATION
==================================================*/

.fadeUp{

opacity:0;

transform:translateY(40px);

transition:

opacity .8s ease,

transform .8s ease;

}

.fadeUp.show{

opacity:1;

transform:translateY(0);

}


/*==================================================
103 ZOOM ANIMATION
==================================================*/

.zoomIn{

opacity:0;

transform:scale(.92);

transition:

opacity .8s ease,

transform .8s ease;

}

.zoomIn.show{

opacity:1;

transform:scale(1);

}


/*==================================================
104 LEFT ANIMATION
==================================================*/

.fadeLeft{

opacity:0;

transform:translateX(-50px);

transition:.8s;

}

.fadeLeft.show{

opacity:1;

transform:translateX(0);

}


/*==================================================
105 RIGHT ANIMATION
==================================================*/

.fadeRight{

opacity:0;

transform:translateX(50px);

transition:.8s;

}

.fadeRight.show{

opacity:1;

transform:translateX(0);

}


/*==================================================
106 HOVER LIFT
==================================================*/

.hoverLift{

transition:.35s;

}

.hoverLift:hover{

transform:

translateY(-8px);

}


/*==================================================
107 GLASS EFFECT
==================================================*/

.glass{

background:

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

backdrop-filter:

blur(18px);

-webkit-backdrop-filter:

blur(18px);

border:

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

}


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

.gradientText{

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}


/*==================================================
109 IMAGE EFFECT
==================================================*/

img{

max-width:100%;

height:auto;

display:block;

}

img:hover{

transition:.35s;

}


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

.sectionTitle{

text-align:center;

margin-bottom:18px;

}

.sectionTitle h2{

font-size:

clamp(

2rem,

4vw,

3rem

);

font-weight:800;

color:var(--dark);

margin-bottom:18px;

}

.sectionTitle p{

max-width:850px;

margin:auto;

line-height:2;

font-size:1.05rem;

color:var(--text-light);

}


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

::selection{

background:#2563eb;

color:#ffffff;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#1d4ed8;

}


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

a:focus,

button:focus{

outline:3px solid

rgba(37,99,235,.25);

outline-offset:4px;

}


/*==================================================
114 PRINT
==================================================*/

@media print{

header,

footer,

.scrollTop,

.whatsappButton,

.sectionNav,

#themeButton,

.loginButton{

display:none!important;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

page-break-inside:avoid;

}

}


/*==================================================
115 DARK MODE SUPPORT
==================================================*/

body.dark{

background:#0f172a;

color:#e2e8f0;

}

body.dark section{

background:#0f172a;

}

body.dark .glass,

body.dark .timelineCard,

body.dark .educationCard,

body.dark .relationshipCard,

body.dark .studentCard,

body.dark .expectationCard,

body.dark .faqItem{

background:#1e293b;

color:#e2e8f0;

border-color:

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

}

body.dark h1,

body.dark h2,

body.dark h3{

color:#ffffff;

}

body.dark p{

color:#cbd5e1;

}


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

html{

scroll-behavior:smooth;

}


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

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

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}


/*==================================================
118 FINAL RESPONSIVE
==================================================*/

@media(max-width:992px){

.container{

width:min(94%,1000px);

}

}


@media(max-width:768px){

.container{

width:92%;

}

section{

padding:80px 0;

}

.sectionTitle h2{

font-size:2rem;

}

.sectionTitle p{

font-size:1rem;

}

}


@media(max-width:480px){

.container{

width:94%;

}

.sectionTitle h2{

font-size:1.7rem;

}

.sectionTitle p{

font-size:.95rem;

}

}

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

/*==================================================
HEADER
PART-1
==================================================*/

#header{

position:sticky;

top:0;

left:0;

width:100%;

background:#fff;

z-index:999;

box-shadow:0 2px 10px rgba(0,0,0,.05);

padding:10px 0;

transition:.3s;

}

#header.scrolled{

box-shadow:0 8px 22px rgba(0,0,0,.08);

}

#header .container{

display:grid;

grid-template-columns:

auto
1fr
auto;

align-items:start;

column-gap:18px;

}

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

.logo{

display:flex;

align-items:center;

}

.logo img{

height:54px;

width:auto;

display:block;

}

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

.headerRight{

display:flex;

flex-direction:column;

justify-content:center;

min-width:0;

}

/*=========================
MAIN NAV
=========================*/

.mainNav{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-bottom:10px;

}

.mainNav a{

text-decoration:none;

font-size:.96rem;

font-weight:700;

color:#374151;

transition:.25s;

padding:2px 0;

white-space:nowrap;

}

.mainNav a:hover,

.mainNav a.active{

color:#2563eb;

}

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

.anotherPage,

.thisPage{

display:flex;

align-items:center;

gap:6px;

font-size:.92rem;

font-weight:700;

color:#9a7b47;

margin-right:10px;

flex-shrink:0;

}

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

.sectionNav{

display:flex;

align-items:center;

gap:16px;

flex-wrap:wrap;

}

.sectionNav a{

text-decoration:none;

font-size:.88rem;

font-weight:600;

color:#555;

transition:.25s;

white-space:nowrap;

}

.sectionNav a:hover{

color:#2563eb;

}

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

.headerButtons{

display:flex;

align-items:center;

gap:10px;

}

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

#menuButton{

display:none;

width:42px;

height:42px;

border:none;

background:none;

cursor:pointer;

font-size:1.45rem;

color:#374151;

}

/*=========================
THEME
=========================*/

#themeButton{

width:42px;

height:42px;

border:none;

border-radius:50%;

cursor:pointer;

background:#f3f4f6;

font-size:1rem;

}

/*=========================
LOGIN
=========================*/

.loginButton{

display:flex;

align-items:center;

justify-content:center;

padding:10px 18px;

border-radius:30px;

text-decoration:none;

font-size:.9rem;

font-weight:700;

background:#2563eb;

color:#fff;

transition:.25s;

}

.loginButton:hover{

transform:translateY(-2px);

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

}

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

@media (max-width:768px){

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

#header{

padding:10px 0;

}

#header .container{

display:grid;

grid-template-columns:

auto
1fr
auto;

grid-template-areas:

"logo topnav buttons"

"bottomnav bottomnav bottomnav";

align-items:center;

row-gap:10px;

column-gap:10px;

}

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

.logo{

grid-area:logo;

}

.logo img{

height:42px;

}

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

.mainNav{

grid-area:topnav;

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:4px;

margin:0;

}

.mainNav .anotherPage{

display:none;

}

.mainNav a{

text-align:center;

font-size:.82rem;

font-weight:700;

padding:4px 2px;

white-space:nowrap;

}

/*=========================
BOTTOM NAV
=========================*/

.mainNav a:nth-child(5),

.mainNav a:nth-child(6),

.mainNav a:nth-child(7),

.mainNav a:nth-child(8){

margin-top:2px;

}

.mainNav{

grid-template-areas:

"a1 a2 a3"

"a4 a5 a6"

"a7 . .";

}

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

.headerButtons{

grid-area:buttons;

justify-self:end;

display:flex;

align-items:center;

}

/* শুধু Menu Button */

#menuButton{

display:flex;

align-items:center;

justify-content:center;

width:38px;

height:38px;

border:none;

background:none;

font-size:1.35rem;

cursor:pointer;

}

/* মোবাইলে Hide */

#themeButton,

.loginButton{

display:none;

}

/*=========================
THIS PAGE
=========================*/

.sectionNav{

display:none;

}

}
/*==================================================
HEADER
PART-2
MOBILE RESPONSIVE
==================================================*/

@media (max-width:768px){

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

#header{

padding:8px 0;

}

#header .container{

display:grid;

grid-template-columns:

auto
1fr
auto;

align-items:start;

column-gap:10px;

row-gap:6px;

}

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

.logo{

align-self:flex-start;

}

.logo img{

height:42px;

}

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

.headerRight{

width:100%;

}

/*=========================
SECTION NAV HIDE
=========================*/

.sectionNav,

.anotherPage,

.thisPage{

display:none !important;

}

/*=========================
MAIN NAV
=========================*/

.mainNav{

display:grid;

grid-template-columns:

repeat(4,1fr);

grid-template-rows:

auto auto;

column-gap:8px;

row-gap:4px;

margin:0;

}

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

.mainNav a:nth-child(2){

grid-column:1;

}

.mainNav a:nth-child(3){

grid-column:2;

}

.mainNav a:nth-child(4){

grid-column:3;

}

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

.mainNav a:nth-child(5){

grid-column:1;

}

.mainNav a:nth-child(6){

grid-column:2;

}

.mainNav a:nth-child(7){

grid-column:3;

}

.mainNav a:nth-child(8){

grid-column:4;

}

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

.mainNav a{

display:flex;

justify-content:center;

align-items:center;

font-size:.80rem;

font-weight:700;

padding:2px;

line-height:1.1;

white-space:nowrap;

}

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

.headerButtons{

justify-content:flex-end;

align-items:flex-start;

}

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

#menuButton{

display:flex;

align-items:center;

justify-content:center;

width:40px;

height:40px;

font-size:1.45rem;

}

/*=========================
DESKTOP ONLY
=========================*/

.desktopOnly,

#themeButton,

.loginButton{

display:none !important;

}

}
/*==================================================
PART-3
DRAWER MENU
==================================================*/

@media (max-width:768px){

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

#menuOverlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

backdrop-filter:blur(2px);

opacity:0;
visibility:hidden;

transition:.30s;

z-index:9998;

}

#menuOverlay.show{

opacity:1;
visibility:visible;

}

/*=========================
DRAWER
=========================*/

#mobileMenu{

position:fixed;

top:0;
left:-320px;

width:150px;
max-width:40vw;
height:100vh;

background:transparent;

overflow-y:auto;



transition:left .35s ease;

z-index:9999;

padding:20px 16px;

display:flex;
flex-direction:column;

}

#mobileMenu.show{

left:0;

}

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

.mobileTitle{

font-size:1.15rem;

font-weight:700;

margin-bottom:18px;

color:#f3e5ab;

}

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

.mobileGroup{

margin-bottom:20px;

}

.mobileGroup h4{

display:flex;

align-items:center;

gap:8px;

font-size:.95rem;

font-weight:700;

margin-bottom:12px;

padding-bottom:12px;

border-bottom:1px solid #ececec;

color:#480607;

}

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

.mobileGroup a{

display:block;

padding:8px 10px;

margin-bottom:5px;

border-radius:8px;

font-size:.92rem;

font-weight:600;

text-decoration:none;

color:#f0f8ff;

transition:.25s;

}

.mobileGroup a:hover{

background:transparent;

color:#2563eb;

padding-left:16px;

}

.mobileGroup a.active{

background:transparent;

color:#fff;

}

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

.mobileDivider{

height:1px;

background:transparent;

margin:18px 0;

}

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

.mobileExtra{

margin-top:18px;

padding-top:18px;

border-top:none;

display:flex;

flex-direction:column;

gap:10px;

}

.mobileExtra button,

.mobileExtra a{

height:44px;

display:flex;

align-items:center;

justify-content:center;

border:none;

border-radius:10px;

font-size:.90rem;

font-weight:700;

text-decoration:none;

cursor:pointer;

}

.mobileExtra button{

background:transparent;

color:#111827;

}

.mobileExtra a{

background:transparent;

color:#fff;

}

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

#closeMobileMenu{

margin-top:auto;

padding:18px;

border:none;

border-radius:10px;

background:transparent;

color:#fff;

font-size:.95rem;

font-weight:700;

cursor:pointer;

transition:.25s;

}

#closeMobileMenu:hover{

background:transparent;

}

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

#mobileMenu::-webkit-scrollbar{

width:-0px;

}

#mobileMenu::-webkit-scrollbar-thumb{

background:transparent;

border-radius:20px;
display: none;
}

}





/*=========================================
DESKTOP HIDE MOBILE DRAWER
=========================================*/

@media (min-width: 769px){

    #mobileMenu,
    #menuOverlay{
        display: none !important;
    }

}

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



HEADER COMPACT (DESKTOP)
==================================================*/

@media (min-width:769px){

/*--------------------------------
HEADER
--------------------------------*/

#header{
    padding:4px 0;
    background: none;
}

/*--------------------------------
CONTAINER
--------------------------------*/

#header .container{
    row-gap:2px;
    background: none;
}

/*--------------------------------
LOGO
--------------------------------*/

.logo img{
    height:46px;
}

/*--------------------------------
HEADER RIGHT
--------------------------------*/

.headerRight{
    display:flex;
    flex-direction:column;
    gap:2px;
}

/*--------------------------------
FIRST ROW
--------------------------------*/

.mainNav{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    line-height:1;
}

/*--------------------------------
SECOND ROW
--------------------------------*/

.sectionNav{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0;
    line-height:1;
}

/*--------------------------------
LINK
--------------------------------*/

.mainNav a,
.sectionNav a{

    padding:2px 0;

    line-height:1;

    font-size:.95rem;

}

/*--------------------------------
LABEL
--------------------------------*/

.anotherPage,
.thisPage{

    margin-right:10px;

    line-height:1;

}

.anotherPage{
    color: #330066;
}

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

.headerButtons{
    align-items:center;
}

.loginButton{
    padding:7px 14px;
}

#themeButton{
    width:34px;
    height:34px;
}

}

/*=========================================
STUDENT GUIDE IMAGE
=========================================*/

.studentGuideImage{

width:100%;

margin:60px auto 0;

text-align:center;

}

.studentGuideImage img{

width:100%;

max-width:1200px;

height:auto;

display:block;

margin:auto;

border-radius:20px;

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

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

}

/*==============================
Mobile
==============================*/

@media(max-width:768px){

.studentGuideImage{

margin-top:35px;

padding:0 10px;

}

.studentGuideImage img{

width:100%;

border-radius:12px;

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

}

}
/*=====================================================
-------------------MOSSION HERO 3 PICTURE---------------
========================================================/*
/*=========================================
MISSION IMAGE GALLERY
=========================================*/
/*
.heroImageGallery{

    display:grid;

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

    gap:30px;

    width:100%;

    align-items:center;

    justify-items:center;

    margin-top:40px;

}

.heroImage{

    width:100%;

}

.heroImage img{

    width:100%;

    height:360px;

    object-fit:cover;

    display:block;

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

    border-radius:22px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25),
        0 0 20px rgba(255,255,255,.25);

    transition:.4s;

}

.heroImage img:hover{

    transform:translateY(-8px) scale(1.03);

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

}

/*=========================
TABLET
=========================*/
/*
@media(max-width:992px){

.heroImageGallery{

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

    gap:20px;

}

.heroImage img{

    height:260px;

}

}

/*=========================
MOBILE
=========================*/
/*
@media(max-width:768px){

.heroImageGallery{

    grid-template-columns:1fr;

    gap:18px;

}

.heroImage img{

    width:90%;

    height:220px;

    margin:auto;

    border-radius:18px;

}

}

*/

.nav,
.mainNav,
navbar,
.thisPage,
.anotherPage
{
 font-family:var(--font-adorsho);

}
.nav{



font-family:var(--font-adorsho);



}
.anotherPage{
     font-family:var(--font-adorsho);

}
/*
----------------------------sytem loin of-----------0f-

*/

.loginWrapper{

position:relative;

display:inline-block;

}

.loginMessage{

position:absolute;

top:110%;

left:50%;

transform:translateX(-50%);

background:#222;

color:#fff;

padding:10px 16px;

border-radius:8px;

font-size:15px;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:1000;

box-shadow:0 10px 20px rgba(0,0,0,.2);

}

.loginMessage::before{

content:"";

position:absolute;

top:-8px;

left:50%;

transform:translateX(-50%);

border:8px solid transparent;

border-bottom-color:#222;

}

.loginMessage.show{

opacity:1;

visibility:visible;

}

/*
--------------------------------------------------sytem loin of- header----

*/
/*=========================
HEADER LOGIN BUTTON
=========================*/

.headerLoginWrapper{

position:relative;

display:inline-block;

}

.headerLoginWrapper .secondaryButton{

display:inline-block;

padding:12px 28px;

background:#0d6efd;

color:#fff;

text-decoration:none;

font-weight:600;

border-radius:10px;

transition:.3s;

}

/* Hover করলে মেরুন হবে */

.headerLoginWrapper .secondaryButton:hover{

background:#800020;

color:#fff;

}

/* Popup */

.headerLoginMessage{

position:absolute;

top:110%;

left:50%;

transform:translateX(-50%);

background:linear-gradient(135deg,#ff9800,#ff5722);

color:#fff;

padding:10px 18px;

border-radius:10px;

font-size:15px;

font-weight:600;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

box-shadow:0 12px 25px rgba(255,87,34,.35);

}

.headerLoginMessage::before{

content:"";

position:absolute;

top:-8px;

left:50%;

transform:translateX(-50%);

border:8px solid transparent;

border-bottom-color:#ff9800;

}


.headerLoginMessage.show{

opacity:1;

visibility:visible;

}
/*=====================================
Hide Header System Login on Mobile
=====================================*/

@media (max-width:768px){

.headerLoginWrapper{

display:none;

}

}
/*==================================================
FOOTER MOBILE FOLLOW TEXT
==================================================*/

.footerFollowText{

margin:6px 0 0;

padding:0;

color:#00ffff;

line-height:1.45;

}

.footerFollowLine1,
.footerFollowLine2{

display:inline;

}

@media(max-width:575px){

.footerFollowText{

margin:4px 0 2px;

padding:0;

line-height:1.35;

}

.footerFollowLine1,
.footerFollowLine2{

display:block;

}

.footerFollowLine2{

margin-top:1px;

}

}

/* =========================================================
   FINAL FIX — CTA 5 BUTTONS + NEWSLETTER
   Desktop: পাঁচটি CTA বাটন এক সারিতে
   Mobile: প্রথম সারিতে ২টি, দ্বিতীয় সারিতে ৩টি
   ========================================================= */
.finalCtaSection .finalCtaBox .ctaButtons{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:stretch;
  gap:10px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.finalCtaSection .finalCtaBox .ctaButtons > .glassButton{
  box-sizing:border-box;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  text-align:center;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

/* Newsletter: desktop-এ সমান উচ্চতা ও প্রস্থ */
#newsletter .newsletterForm{
  display:flex;
  align-items:stretch;
  gap:2px;
  width:100%;
}
#newsletter .newsletterForm input,
#newsletter .newsletterForm button{
  box-sizing:border-box;
  flex:1 1 0;
  width:0;
  min-width:0;
  height:50px;
  min-height:50px;
  margin:0;
}
#newsletter .newsletterForm input{
  text-align:center;
  border-radius:10px;
}
#newsletter .newsletterForm button{
  white-space:nowrap;
}

@media (max-width:576px){
  .finalCtaSection .container,
  .finalCtaSection .finalCtaBox{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
  }
  .finalCtaSection .finalCtaBox .ctaButtons{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
  }
  .finalCtaSection .finalCtaBox .ctaButtons > .glassButton{
    grid-column:auto !important;
    padding:10px 5px !important;
    min-height:48px;
    font-size:11px;
    line-height:1.25;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  .finalCtaSection .finalCtaBox .ctaButtons > .glassButton:nth-child(1),
  .finalCtaSection .finalCtaBox .ctaButtons > .glassButton:nth-child(2){
    grid-column:span 3 !important;
  }
  .finalCtaSection .finalCtaBox .ctaButtons > .glassButton:nth-child(3),
  .finalCtaSection .finalCtaBox .ctaButtons > .glassButton:nth-child(4),
  .finalCtaSection .finalCtaBox .ctaButtons > .glassButton:nth-child(5){
    grid-column:span 2 !important;
  }
  #newsletter .newsletterForm{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    width:100%;
  }
  #newsletter .newsletterForm input,
  #newsletter .newsletterForm button{
    display:block;
    flex:none;
    width:100%;
    max-width:100%;
    height:48px;
    min-height:48px;
    margin:0;
  }
  #newsletter .newsletterForm input{
    text-align:center;
    border-radius:10px;
  }
}