/* =========================================================
VCEC PREMIUM HERO
FINAL VERSION
\========================================================= */
/* =========================================================
HERO MAIN
\========================================================= */
.vcec-hero{
position:relative;
overflow:hidden;
min-height:720px;
display:flex;
align-items:center;
padding:75px 0 70px;
background:
radial-gradient(
circle at 80% 30%,
rgba(38,135,255,.45),
transparent 28%
),
linear-gradient(
135deg,
#061936 0%,
#073d83 55%,
#0878d8 100%
);
color:#fff;
}
/* Container */
.vcec-hero .container{
position:relative;
z-index:50;
}
/* Left content */
.vcec-hero-content{
position:relative;
z-index:50;
}
/* =========================================================
BACKGROUND SHAPES
\========================================================= */
.vcec-hero-shape{
position:absolute;
border-radius:50%;
pointer-events:none;
filter:blur(1px);
}
.shape-one{
width:500px;
height:500px;
top:-320px;
left:-180px;
background:
rgba(34,116,237,.25);
}
.shape-two{
width:500px;
height:500px;
bottom:-400px;
right:-180px;
background:
rgba(38,137,255,.22);
}
/* =========================================================
BACKGROUND DOTS
\========================================================= */
.vcec-dots{
position:absolute;
width:100px;
height:100px;
opacity:.25;
pointer-events:none;
background-image:
radial-gradient(
#fff 2px,
transparent 2px
);
background-size:18px 18px;
}
.dots-one{
top:70px;
right:40px;
}
.dots-two{
bottom:60px;
left:45%;
}
/* =========================================================
BADGE
\========================================================= */
.vcec-badge{
display:inline-flex;
align-items:center;
gap:12px;
padding:8px 18px 8px 8px;
border:
1px solid
rgba(255,255,255,.35);
border-radius:50px;
color:#fff;
font-size:16px;
font-weight:600;
background:
rgba(255,255,255,.06);
backdrop-filter:blur(8px);
margin-bottom:25px;
}
.vcec-badge span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:80px;
padding:9px 17px;
border-radius:40px;
background:#ffc928;
color:#071a35;
font-size:19px;
font-weight:900;
}
.vcec-badge b{
font-weight:600;
}
/* =========================================================
HERO HEADING
\========================================================= */
.vcec-hero h1{
margin:0;
color:#fff;
font-size:65px;
line-height:1.05;
font-weight:900;
letter-spacing:-2px;
}
.vcec-hero h1 strong{
color:#ffc928;
}
/* =========================================================
HERO DESCRIPTION
\========================================================= */
.vcec-hero-text{
max-width:700px;
margin:28px 0 30px;
color:
rgba(255,255,255,.88);
font-size:18px;
line-height:1.7;
}
/* =========================================================
BUTTONS
\========================================================= */
.vcec-hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.vcec-btn{
min-height:58px;
padding:0 27px;
border-radius:50px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
font-size:16px;
font-weight:800;
transition:
.3s ease;
}
.vcec-btn i{
font-size:17px;
}
.vcec-btn .btn-arrow{
font-size:23px;
line-height:0;
font-weight:700;
}
/* Yellow button */
.vcec-btn-yellow{
background:#ffc928;
color:#071a35!important;
box-shadow:
0 12px 30px
rgba(255,201,40,.25);
}
.vcec-btn-yellow:hover{
transform:
translateY(-4px);
color:#071a35!important;
box-shadow:
0 18px 35px
rgba(255,201,40,.35);
}
/* White button */
.vcec-btn-white{
background:#fff;
color:#10213c!important;
border:
3px solid
#18d58a;
box-shadow:
0 12px 30px
rgba(0,0,0,.12);
}
.vcec-btn-white:hover{
transform:
translateY(-4px);
color:#10213c!important;
}
/* =========================================================
FEATURES
\========================================================= */
.vcec-features{
display:flex;
align-items:center;
gap:28px;
margin-top:35px;
flex-wrap:wrap;
}
.vcec-feature{
display:flex;
align-items:center;
gap:10px;
color:#fff;
font-size:14px;
font-weight:600;
line-height:1.35;
}
.feature-icon{
width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:18px;
flex-shrink:0;
}
.feature-icon.blue{
background:#0875ed;
}
.feature-icon.purple{
background:#6845d9;
}
.feature-icon.green{
background:#13a866;
}
.feature-icon.orange{
background:#ef9915;
}
/* =========================================================
STATS
\========================================================= */
.vcec-stats{
display:flex;
align-items:center;
gap:0;
margin-top:35px;
padding-top:25px;
border-top:
1px solid
rgba(255,255,255,.22);
max-width:680px;
}
.vcec-stat{
display:flex;
align-items:center;
gap:12px;
padding:0 25px;
border-right:
1px solid
rgba(255,255,255,.25);
}
.vcec-stat:first-child{
padding-left:0;
}
.vcec-stat:last-child{
border-right:0;
}
.vcec-stat>i{
font-size:28px;
color:#fff;
}
.vcec-stat div{
display:flex;
flex-direction:column;
}
.vcec-stat strong{
color:#ffc928;
font-size:25px;
line-height:1.1;
font-weight:900;
}
.vcec-stat small{
color:#fff;
font-size:14px;
margin-top:4px;
}
/* =========================================================
RIGHT VISUAL
\========================================================= */
.vcec-hero-visual{
position:relative;
min-height:570px;
display:flex;
align-items:center;
justify-content:center;
}
/* =========================================================
ORBIT
\========================================================= */
.vcec-orbit{
position:absolute;
width:550px;
height:550px;
border:
2px dashed
rgba(255,255,255,.38);
border-radius:50%;
z-index:3;
pointer-events:none;
animation:
vcecOrbitRotate
22s
linear
infinite;
}
/* Inner orbit */
.vcec-orbit::before{
content:"";
position:absolute;
inset:15px;
border:
1px solid
rgba(83,185,255,.35);
border-radius:50%;
}
/* Outer orbit */
.vcec-orbit::after{
content:"";
position:absolute;
inset:-8px;
border:
1px solid
rgba(255,255,255,.12);
border-radius:50%;
}
/* =========================================================
ORBIT DOTS
\========================================================= */
.vcec-orbit .orbit-dot{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
z-index:20;
opacity:.35;
transform:scale(.7);
animation:
vcecLightGlow
3.6s
ease-in-out
infinite;
}
/* Dot positions */
.dot-1{
top:-5px;
left:50%;
background:#ff3d81;
color:#ff3d81;
}
.dot-2{
top:7%;
right:22%;
background:#16c7ff;
color:#16c7ff;
}
.dot-3{
top:23%;
right:4%;
background:#ffd32a;
color:#ffd32a;
}
.dot-4{
top:49%;
right:-5px;
background:#14e58c;
color:#14e58c;
}
.dot-5{
bottom:21%;
right:8%;
background:#ff3d81;
color:#ff3d81;
}
.dot-6{
bottom:4%;
right:29%;
background:#16c7ff;
color:#16c7ff;
}
.dot-7{
bottom:-5px;
left:50%;
background:#ffd32a;
color:#ffd32a;
}
.dot-8{
bottom:8%;
left:23%;
background:#ff3d81;
color:#ff3d81;
}
.dot-9{
bottom:25%;
left:3%;
background:#16c7ff;
color:#16c7ff;
}
.dot-10{
top:50%;
left:-5px;
background:#ff3d81;
color:#ff3d81;
}
.dot-11{
top:24%;
left:4%;
background:#16c7ff;
color:#16c7ff;
}
.dot-12{
top:7%;
left:22%;
background:#ffd32a;
color:#ffd32a;
}
/* Sequential Glow */
.dot-1{
animation-delay:0s;
}
.dot-2{
animation-delay:.3s;
}
.dot-3{
animation-delay:.6s;
}
.dot-4{
animation-delay:.9s;
}
.dot-5{
animation-delay:1.2s;
}
.dot-6{
animation-delay:1.5s;
}
.dot-7{
animation-delay:1.8s;
}
.dot-8{
animation-delay:2.1s;
}
.dot-9{
animation-delay:2.4s;
}
.dot-10{
animation-delay:2.7s;
}
.dot-11{
animation-delay:3s;
}
.dot-12{
animation-delay:3.3s;
}
/* =========================================================
ORBIT GLOW ANIMATION
\========================================================= */
@keyframes vcecLightGlow{
0%{
opacity:.20;
transform:scale(.65);
box-shadow:
0 0 3px currentColor;
}
10%{
opacity:1;
transform:scale(1.5);
box-shadow:
0 0 6px currentColor,
0 0 14px currentColor,
0 0 28px currentColor,
0 0 45px currentColor;
}
20%{
opacity:1;
transform:scale(1.15);
box-shadow:
0 0 8px currentColor,
0 0 18px currentColor,
0 0 35px currentColor;
}
35%{
opacity:.45;
transform:scale(.85);
box-shadow:
0 0 5px currentColor,
0 0 12px currentColor;
}
55%,
100%{
opacity:.20;
transform:scale(.65);
box-shadow:
0 0 3px currentColor;
}
}
/* =========================================================
ORBIT ROTATION
\========================================================= */
@keyframes vcecOrbitRotate{
from{
transform:
rotate(0deg);
}
to{
transform:
rotate(360deg);
}
}
/* =========================================================
MAIN CIRCLE
\========================================================= */
.vcec-main-circle{
position:relative;
width:475px;
height:475px;
border-radius:50%;
padding:14px;
background:
linear-gradient(
#fff,
#fff
) padding-box,
linear-gradient(
135deg,
#1d73f5,
#fff,
#18d58a
) border-box;
border:10px solid transparent;
z-index:10;
box-shadow:
0 0 0 18px
rgba(255,255,255,.10),
0 0 0 35px
rgba(255,255,255,.05),
0 30px 70px
rgba(0,0,0,.25);
}
/* Dashed rotating circle */
.vcec-main-circle::before{
content:"";
position:absolute;
inset:-38px;
border:
2px dashed
rgba(255,255,255,.55);
border-radius:50%;
animation:
vcecRotate
25s
linear
infinite;
pointer-events:none;
}
/* =========================================================
INNER IMAGE CIRCLE
\========================================================= */
.vcec-circle-inner{
width:100%;
height:100%;
overflow:hidden;
border-radius:50%;
background:
linear-gradient(
135deg,
#fff5aa,
#ffd72f
);
position:relative;
}
.vcec-circle-inner::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent 55%,
rgba(4,35,76,.12)
);
pointer-events:none;
z-index:3;
}
.vcec-circle-inner img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
position:relative;
z-index:2;
transform:scale(1.08);
}
/* =========================================================
FLOATING ICONS
\========================================================= */
.floating-icon{
position:absolute;
width:72px;
height:72px;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
box-shadow:
0 15px 35px
rgba(0,0,0,.18);
z-index:25;
animation:
vcecFloat
4s
ease-in-out
infinite;
}
.icon-top{
top:25px;
left:20px;
color:#075bd5;
}
.icon-right{
top:105px;
right:0;
color:#ef476f;
animation-delay:1s;
}
.icon-book{
right:-20px;
top:275px;
color:#16a34a;
animation-delay:2s;
}
/* =========================================================
COURSE COUNT
\========================================================= */
.vcec-course-count{
position:absolute;
right:-35px;
bottom:75px;
z-index:30;
min-width:285px;
padding:15px 22px;
display:flex;
align-items:center;
gap:15px;
background:#fff;
color:#071a35;
border-radius:55px;
box-shadow:
0 18px 45px
rgba(0,0,0,.22);
}
.course-count-icon{
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#075bd5;
color:#fff;
font-size:22px;
flex-shrink:0;
}
.vcec-course-count div:last-child{
display:flex;
flex-direction:column;
}
.vcec-course-count strong{
font-size:30px;
line-height:1;
font-weight:900;
}
.vcec-course-count span{
font-size:14px;
margin-top:5px;
color:#34445b;
font-weight:600;
}
/* =========================================================
FLOAT ANIMATION
\========================================================= */
@keyframes vcecFloat{
0%,
100%{
transform:
translateY(0);
}
50%{
transform:
translateY(-12px);
}
}
/* =========================================================
MAIN CIRCLE ROTATION
\========================================================= */
@keyframes vcecRotate{
from{
transform:
rotate(0deg);
}
to{
transform:
rotate(360deg);
}
}
/* =========================================================
WHATSAPP
\========================================================= */
.vcec-whatsapp{
right:25px;
bottom:25px;
width:68px;
height:68px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#25D366;
color:#fff!important;
font-size:38px;
z-index:99999;
border:4px solid #fff;
text-decoration:none!important;
box-shadow:
0 10px 30px
rgba(37,211,102,.40),
0 0 0 5px
rgba(37,211,102,.12);
transition:
.3s ease;
}
/* =========================================================
HERO MESSENGER + WHATSAPP
FIXED INSIDE HERO VISUAL BOX
\========================================================= */
.vcec-hero-visual{
position:relative;
}
/* ================= MESSENGER ================= */
.vcec-messenger{
position:absolute;
left:5px;
top:250px;
width:62px;
height:62px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#ffffff;
color:#0084ff !important;
font-size:32px;
text-decoration:none !important;
z-index:100;
box-shadow:
0 12px 30px rgba(0,0,0,.22),
0 0 0 5px rgba(255,255,255,.15);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.vcec-messenger i{
color:#0084ff;
line-height:1;
}
.vcec-messenger:hover{
transform:scale(1.10);
color:#0084ff !important;
box-shadow:
0 16px 35px rgba(0,0,0,.25),
0 0 0 7px rgba(0,132,255,.10);
}
/* ================= WHATSAPP ================= */
.vcec-whatsapp{
position:absolute;
right:-5px;
top:365px;
width:68px;
height:68px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#25D366;
color:#ffffff !important;
font-size:37px;
text-decoration:none !important;
z-index:100;
border:4px solid #ffffff;
box-shadow:
0 10px 30px rgba(37,211,102,.40),
0 0 0 5px rgba(37,211,102,.12);
transition:
transform .25s ease,
background .25s ease;
}
.vcec-whatsapp i{
color:#ffffff;
line-height:1;
}
.vcec-whatsapp:hover{
transform:scale(1.10);
background:#20bd5b;
color:#ffffff !important;
}
/* WhatsApp glowing ring */
.vcec-whatsapp::before{
content:"";
position:absolute;
inset:-7px;
border-radius:50%;
border:
2px solid
rgba(37,211,102,.65);
animation:
vcecWhatsappRing
2s ease-out infinite;
}
@keyframes vcecWhatsappRing{
0%{
transform:scale(.85);
opacity:1;
}
70%{
transform:scale(1.35);
opacity:0;
}
100%{
transform:scale(1.35);
opacity:0;
}
}
/* =========================================================
TABLET
\========================================================= */
@media(max-width:991px){
.vcec-messenger{
left:0;
top:210px;
width:58px;
height:58px;
font-size:29px;
}
.vcec-whatsapp{
right:0;
top:330px;
width:62px;
height:62px;
font-size:33px;
}
}
/* =========================================================
MOBILE
\========================================================= */
@media(max-width:767px){
.vcec-messenger{
left:0;
top:165px;
width:52px;
height:52px;
font-size:26px;
}
.vcec-whatsapp{
right:0;
top:285px;
width:56px;
height:56px;
font-size:30px;
}
}
/* =========================================================
SMALL MOBILE
\========================================================= */
@media(max-width:480px){
.vcec-messenger{
left:0;
top:135px;
width:48px;
height:48px;
font-size:24px;
}
.vcec-whatsapp{
right:0;
top:245px;
width:52px;
height:52px;
font-size:28px;
}
}
/* WhatsApp icon */
.vcec-whatsapp i{
color:#fff;
line-height:1;
}
/* WhatsApp hover */
.vcec-whatsapp:hover{
transform:
scale(1.12);
color:#fff!important;
background:#20bd5b;
}
/* WhatsApp pulse */
.vcec-whatsapp::before{
content:"";
position:absolute;
inset:-7px;
border-radius:50%;
border:
2px solid
rgba(37,211,102,.65);
animation:
vcecWhatsappRing
2s
ease-out
infinite;
}
@keyframes vcecWhatsappRing{
0%{
transform:
scale(.85);
opacity:1;
}
70%{
transform:
scale(1.35);
opacity:0;
}
100%{
transform:
scale(1.35);
opacity:0;
}
}
/* =========================================================
MESSENGER
\========================================================= */
.vcec-messenger{
right:25px;
bottom:108px;
width:58px;
height:58px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
color:#0084ff!important;
font-size:31px;
z-index:99998;
text-decoration:none!important;
box-shadow:
0 10px 28px
rgba(0,0,0,.20),
0 0 0 4px
rgba(255,255,255,.18);
animation:
vcecMessengerFloat
3.5s
ease-in-out
infinite;
transition:
.3s ease;
}
/* Messenger icon */
.vcec-messenger i{
color:#0084ff;
line-height:1;
}
/* Messenger hover */
.vcec-messenger:hover{
transform:
scale(1.12);
color:#0084ff!important;
box-shadow:
0 14px 35px
rgba(0,0,0,.24),
0 0 0 7px
rgba(0,132,255,.10);
}
/* Messenger floating */
@keyframes vcecMessengerFloat{
0%,
100%{
transform:
translateY(0);
}
50%{
transform:
translateY(-8px);
}
}
/* =========================================================
RESPONSIVE 1199
\========================================================= */
@media(max-width:1199px){
.vcec-hero h1{
font-size:54px;
}
.vcec-main-circle{
width:410px;
height:410px;
}
.vcec-orbit{
width:485px;
height:485px;
}
.vcec-course-count{
right:-10px;
}
.vcec-features{
gap:18px;
}
}
/* =========================================================
RESPONSIVE 991
\========================================================= */
@media(max-width:991px){
.vcec-hero{
padding:
75px
0
100px;
}
.vcec-hero h1{
font-size:48px;
}
.vcec-hero-visual{
margin-top:80px;
min-height:520px;
}
.vcec-main-circle{
width:400px;
height:400px;
}
.vcec-orbit{
width:505px;
height:505px;
}
.vcec-course-count{
right:0;
}
}
/* =========================================================
RESPONSIVE 767
\========================================================= */
@media(max-width:767px){
.vcec-hero{
padding:
60px
0
90px;
min-height:auto;
}
.vcec-badge{
font-size:12px;
gap:8px;
padding:
6px
12px
6px
6px;
}
.vcec-badge span{
min-width:65px;
font-size:15px;
padding:
7px
12px;
}
.vcec-hero h1{
font-size:38px;
letter-spacing:-1px;
}
.vcec-hero-text{
font-size:15px;
line-height:1.7;
}
.vcec-hero-buttons{
gap:10px;
}
.vcec-btn{
width:100%;
}
.vcec-features{
display:grid;
grid-template-columns:
1fr 1fr;
gap:
18px
10px;
}
.vcec-stats{
display:grid;
grid-template-columns:
1fr 1fr 1fr;
}
.vcec-stat{
padding:
0 10px;
gap:7px;
border-right:
1px solid
rgba(255,255,255,.2);
}
.vcec-stat>i{
font-size:19px;
}
.vcec-stat strong{
font-size:18px;
}
.vcec-stat small{
font-size:11px;
}
/* Right visual */
.vcec-hero-visual{
margin-top:65px;
min-height:400px;
}
.vcec-main-circle{
width:300px;
height:300px;
padding:9px;
border-width:7px;
}
.vcec-main-circle::before{
inset:-25px;
}
.vcec-orbit{
width:355px;
height:355px;
border-width:1.5px;
}
.vcec-orbit::before{
inset:10px;
}
.vcec-orbit::after{
inset:-6px;
}
.vcec-orbit .orbit-dot{
width:8px;
height:8px;
}
/* Floating icons */
.floating-icon{
width:54px;
height:54px;
font-size:21px;
}
.icon-top{
top:15px;
left:10px;
}
.icon-right{
top:70px;
right:0;
}
.icon-book{
right:-10px;
top:210px;
}
/* Course card */
.vcec-course-count{
right:50%;
bottom:5px;
transform:
translateX(50%);
min-width:245px;
padding:
10px
15px;
}
.course-count-icon{
width:45px;
height:45px;
font-size:18px;
}
.vcec-course-count strong{
font-size:24px;
}
.vcec-course-count span{
font-size:12px;
}
/* WhatsApp */
.vcec-whatsapp{
right:16px;
bottom:16px;
width:60px;
height:60px;
font-size:32px;
border-width:3px;
}
/* Messenger */
.vcec-messenger{
right:20px;
bottom:88px;
width:52px;
height:52px;
font-size:27px;
}
}
/* =========================================================
RESPONSIVE 480
\========================================================= */
@media(max-width:480px){
.vcec-hero{
padding-top:45px;
}
.vcec-hero h1{
font-size:34px;
}
.vcec-badge{
max-width:100%;
}
.vcec-badge b{
font-size:11px;
}
.vcec-features{
gap:
15px
8px;
}
.vcec-feature{
font-size:12px;
}
.feature-icon{
width:42px;
height:42px;
font-size:16px;
}
.vcec-stats{
gap:0;
}
.vcec-stat{
padding:
0 5px;
gap:5px;
}
.vcec-stat>i{
font-size:16px;
}
.vcec-stat strong{
font-size:15px;
}
.vcec-stat small{
font-size:9px;
}
.vcec-hero-visual{
min-height:345px;
margin-top:55px;
}
.vcec-main-circle{
width:255px;
height:255px;
}
.vcec-orbit{
width:310px;
height:310px;
}
.floating-icon{
width:48px;
height:48px;
font-size:19px;
}
.icon-top{
top:5px;
left:3px;
}
.icon-right{
top:55px;
right:-2px;
}
.icon-book{
right:-8px;
top:180px;
}
.vcec-course-count{
min-width:225px;
bottom:0;
}
.course-count-icon{
width:40px;
height:40px;
font-size:16px;
}
.vcec-course-count strong{
font-size:21px;
}
.vcec-course-count span{
font-size:11px;
}
.vcec-whatsapp{
width:56px;
height:56px;
right:13px;
bottom:13px;
font-size:29px;
}
.vcec-messenger{
width:48px;
height:48px;
right:17px;
bottom:78px;
font-size:24px;
}
}
/* =========================================================
VCEC PREMIUM HERO - FINAL CLEAN OVERRIDES
No duplicate social rules / no fixed social buttons / no floating Messenger
========================================================= */
.vcec-hero{
position:relative;
overflow:hidden;
min-height:760px;
display:flex;
align-items:center;
padding:75px 0 70px;
}
.vcec-hero-visual{
position:relative;
overflow:visible;
min-height:600px;
display:flex;
align-items:center;
justify-content:center;
}
.vcec-main-circle{
width:500px;
height:500px;
padding:14px;
}
.vcec-orbit{
width:590px;
height:590px;
}
.vcec-orbit .orbit-dot{
width:11px;
height:11px;
}
.vcec-messenger{
position:absolute!important;
left:5px!important;
top:270px!important;
right:auto!important;
bottom:auto!important;
width:64px!important;
height:64px!important;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fff!important;
color:#0084ff!important;
font-size:33px!important;
line-height:1;
z-index:100;
text-decoration:none!important;
border:3px solid rgba(255,255,255,.95);
box-shadow:0 10px 28px rgba(0,0,0,.20),0 0 0 5px rgba(0,132,255,.08),0 0 18px rgba(0,132,255,.22);
animation:vcecMessengerGlow 2.8s ease-in-out infinite!important;
transition:transform .3s ease,box-shadow .3s ease;
}
.vcec-messenger i{
color:#0084ff!important;
line-height:1;
}
.vcec-messenger:hover{
transform:scale(1.1)!important;
color:#0084ff!important;
box-shadow:0 15px 35px rgba(0,0,0,.24),0 0 0 7px rgba(0,132,255,.12),0 0 30px rgba(0,132,255,.45);
}
@keyframes vcecMessengerGlow{
0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.20),0 0 0 4px rgba(0,132,255,.06),0 0 12px rgba(0,132,255,.15);opacity:.92;}
50%{box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 0 7px rgba(0,132,255,.10),0 0 28px rgba(0,132,255,.42);opacity:1;}
}
.vcec-whatsapp{
position:absolute!important;
right:-5px!important;
top:385px!important;
left:auto!important;
bottom:auto!important;
width:70px!important;
height:70px!important;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#25D366!important;
color:#fff!important;
font-size:38px!important;
line-height:1;
z-index:100;
text-decoration:none!important;
border:4px solid #fff;
box-shadow:0 10px 30px rgba(37,211,102,.42),0 0 0 5px rgba(37,211,102,.12),0 0 25px rgba(37,211,102,.35);
animation:vcecWhatsappGlow 2s ease-in-out infinite!important;
transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.vcec-whatsapp i{
color:#fff!important;
line-height:1;
}
.vcec-whatsapp:hover{
transform:scale(1.1)!important;
background:#20bd5b!important;
color:#fff!important;
box-shadow:0 15px 40px rgba(37,211,102,.55),0 0 0 8px rgba(37,211,102,.14),0 0 35px rgba(37,211,102,.65);
}
.vcec-whatsapp::before{
content:"";
position:absolute;
inset:-7px;
border-radius:50%;
border:2px solid rgba(37,211,102,.75);
animation:vcecWhatsappRing 2s ease-out infinite;
pointer-events:none;
}
@keyframes vcecWhatsappGlow{
0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.38),0 0 0 4px rgba(37,211,102,.10),0 0 16px rgba(37,211,102,.25);filter:brightness(1);}
50%{box-shadow:0 12px 35px rgba(37,211,102,.55),0 0 0 8px rgba(37,211,102,.15),0 0 38px rgba(37,211,102,.65);filter:brightness(1.08);}
}
@keyframes vcecWhatsappRing{
0%{transform:scale(.82);opacity:.95;}
65%{transform:scale(1.38);opacity:0;}
100%{transform:scale(1.42);opacity:0;}
}
@media(max-width:1199px){
.vcec-main-circle{width:430px;height:430px;}
.vcec-orbit{width:525px;height:525px;}
.vcec-hero-visual{min-height:560px;}
.vcec-messenger{left:0!important;top:250px!important;width:60px!important;height:60px!important;font-size:30px!important;}
.vcec-whatsapp{right:0!important;top:355px!important;width:66px!important;height:66px!important;font-size:35px!important;}
}
@media(max-width:991px){
.vcec-hero{padding:75px 0 100px;}
.vcec-hero-visual{margin-top:80px;min-height:540px;}
.vcec-main-circle{width:410px;height:410px;}
.vcec-orbit{width:510px;height:510px;}
.vcec-messenger{left:0!important;top:215px!important;width:58px!important;height:58px!important;font-size:29px!important;}
.vcec-whatsapp{right:0!important;top:340px!important;width:64px!important;height:64px!important;font-size:33px!important;}
}
@media(max-width:767px){
.vcec-hero{padding:60px 0 90px;min-height:auto;}
.vcec-hero-visual{margin-top:65px;min-height:420px;}
.vcec-main-circle{width:315px;height:315px;padding:9px;border-width:7px;}
.vcec-main-circle::before{inset:-25px;}
.vcec-orbit{width:375px;height:375px;border-width:1.5px;}
.vcec-orbit::before{inset:10px;}
.vcec-orbit::after{inset:-6px;}
.vcec-orbit .orbit-dot{width:8px;height:8px;}
.vcec-messenger{left:0!important;top:170px!important;width:53px!important;height:53px!important;font-size:26px!important;}
.vcec-whatsapp{right:0!important;top:295px!important;width:58px!important;height:58px!important;font-size:30px!important;}
}
@media(max-width:480px){
.vcec-hero{padding-top:45px;}
.vcec-hero-visual{min-height:360px;margin-top:55px;}
.vcec-main-circle{width:270px;height:270px;}
.vcec-orbit{width:325px;height:325px;}
.vcec-messenger{left:0!important;top:140px!important;width:49px!important;height:49px!important;font-size:24px!important;}
.vcec-whatsapp{right:0!important;top:250px!important;width:53px!important;height:53px!important;font-size:28px!important;}
}
@media(prefers-reduced-motion:reduce){
.vcec-orbit,.vcec-main-circle::before,.vcec-orbit .orbit-dot,.vcec-messenger,.vcec-whatsapp,.vcec-whatsapp::before{animation:none!important;}
}

/* =========================================================
   VCEC HERO - FINAL SIZE & POSITION FIX
========================================================= */

.vcec-hero{
    min-height:430px !important;
    padding:35px 0 35px !important;
}

.vcec-hero .container{
    max-width:1200px;
}

.vcec-hero-visual{
    min-height:390px !important;
    justify-content:center !important;
    transform:translateX(45px);
}

.vcec-main-circle{
    width:340px !important;
    height:340px !important;
    padding:10px !important;
    border-width:8px !important;
}

.vcec-orbit{
    width:410px !important;
    height:410px !important;
}

.vcec-orbit .orbit-dot{
    width:9px !important;
    height:9px !important;
}

.vcec-main-circle::before{
    inset:-28px !important;
}

.vcec-hero-content{
    padding-right:35px;
}

.vcec-hero h1{
    font-size:48px !important;
    line-height:1.08 !important;
}

.vcec-hero-text{
    max-width:560px;
    margin:18px 0 20px;
    font-size:15px;
    line-height:1.5;
}

.vcec-badge{
    margin-bottom:15px;
}

.vcec-features{
    margin-top:20px;
    gap:18px;
}

.vcec-stats{
    margin-top:20px;
    padding-top:15px;
}


/* COURSE COUNT */

.vcec-course-count{
    right:-25px !important;
    bottom:35px !important;
    min-width:220px;
    padding:10px 15px;
}

.course-count-icon{
    width:45px;
    height:45px;
    font-size:18px;
}

.vcec-course-count strong{
    font-size:24px;
}

.vcec-course-count span{
    font-size:12px;
}


/* ICONS */

.icon-top{
    top:15px;
    left:5px;
}

.icon-right{
    top:65px;
    right:-5px;
}

.icon-book{
    right:-15px;
    top:205px;
}


/* MESSENGER */

.vcec-messenger{
    left:-5px !important;
    top:180px !important;
}


/* WHATSAPP */

.vcec-whatsapp{
    right:-10px !important;
    top:255px !important;
}


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

@media(max-width:991px){

    .vcec-hero{
        min-height:auto !important;
        padding:45px 0 55px !important;
    }

    .vcec-hero-visual{
        margin-top:35px !important;
        min-height:390px !important;
        transform:none;
    }

    .vcec-main-circle{
        width:350px !important;
        height:350px !important;
    }

    .vcec-orbit{
        width:425px !important;
        height:425px !important;
    }

}


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

@media(max-width:767px){

    .vcec-hero{
        padding:40px 0 50px !important;
    }

    .vcec-hero h1{
        font-size:36px !important;
    }

    .vcec-hero-visual{
        min-height:340px !important;
        margin-top:30px !important;
    }

    .vcec-main-circle{
        width:270px !important;
        height:270px !important;
    }

    .vcec-orbit{
        width:325px !important;
        height:325px !important;
    }

    .vcec-messenger{
        left:0 !important;
        top:145px !important;
    }

    .vcec-whatsapp{
        right:0 !important;
        top:235px !important;
    }
    
}
/* =========================================================
   VCEC HERO - FINAL COMPACT BANNER
   SOCIAL BUTTONS LEFT + RIGHT BOTTOM
========================================================= */

/* ---------- HERO HEIGHT ---------- */

.vcec-hero{
    min-height:560px !important;
    height:auto !important;
    padding:35px 0 45px !important;
    overflow:hidden !important;
}

/* Container */
.vcec-hero .container{
    position:relative !important;
    z-index:50 !important;
}

/* ---------- LEFT CONTENT ----------
   Size ko unnecessarily small nahi karna
------------------------------------ */

.vcec-hero-content{
    position:relative !important;
    z-index:50 !important;
}

.vcec-hero h1{
    font-size:52px !important;
    line-height:1.05 !important;
}

.vcec-hero-text{
    font-size:16px !important;
    line-height:1.55 !important;
    margin:18px 0 22px !important;
}

.vcec-features{
    margin-top:24px !important;
    gap:22px !important;
}

.vcec-stats{
    margin-top:24px !important;
    padding-top:18px !important;
}

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

.vcec-hero-visual{
    position:relative !important;
    min-height:500px !important;
    height:500px !important;
    transform:none !important;
    overflow:visible !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* =========================================================
   MAIN ROBOT CIRCLE
   BIG - DON'T MAKE SMALL
========================================================= */

.vcec-main-circle{
    width:450px !important;
    height:450px !important;
    padding:12px !important;
    border-width:9px !important;
    z-index:10 !important;
}

/* =========================================================
   BIG ORBIT
========================================================= */

.vcec-orbit{
    width:540px !important;
    height:540px !important;
    z-index:3 !important;
}

.vcec-orbit .orbit-dot{
    width:10px !important;
    height:10px !important;
}

.vcec-main-circle::before{
    inset:-32px !important;
}

/* =========================================================
   COURSE COUNT
========================================================= */

.vcec-course-count{
    right:-20px !important;
    bottom:25px !important;
    z-index:40 !important;
}

/* =========================================================
   MESSENGER
   LEFT BOTTOM CORNER OF HERO
========================================================= */

.vcec-messenger{
    position:absolute !important;

    left:20px !important;
    right:auto !important;

    bottom:20px !important;
    top:auto !important;

    width:62px !important;
    height:62px !important;

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

    border-radius:50% !important;

    background:#fff !important;
    color:#0084ff !important;

    font-size:32px !important;
    line-height:1 !important;

    z-index:999 !important;

    border:3px solid #fff !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.22),
        0 0 0 4px rgba(0,132,255,.10) !important;

    text-decoration:none !important;

    animation:vcecMessengerFloat 3.5s ease-in-out infinite !important;
}

.vcec-messenger i{
    color:#0084ff !important;
    line-height:1 !important;
}

.vcec-messenger:hover{
    transform:scale(1.1) !important;
    color:#0084ff !important;
}

/* =========================================================
   WHATSAPP
   RIGHT BOTTOM CORNER OF HERO
========================================================= */

.vcec-whatsapp{
    position:absolute !important;

    right:20px !important;
    left:auto !important;

    bottom:20px !important;
    top:auto !important;

    width:66px !important;
    height:66px !important;

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

    border-radius:50% !important;

    background:#25D366 !important;
    color:#fff !important;

    font-size:35px !important;
    line-height:1 !important;

    z-index:999 !important;

    border:3px solid #fff !important;

    box-shadow:
        0 10px 30px rgba(37,211,102,.42),
        0 0 0 5px rgba(37,211,102,.12) !important;

    text-decoration:none !important;

    animation:vcecWhatsappGlow 2s ease-in-out infinite !important;
}

.vcec-whatsapp i{
    color:#fff !important;
    line-height:1 !important;
}

.vcec-whatsapp:hover{
    transform:scale(1.1) !important;
    background:#20bd5b !important;
    color:#fff !important;
}

/* WhatsApp ring */
.vcec-whatsapp::before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.65);
    animation:vcecWhatsappRing 2s ease-out infinite;
    pointer-events:none;
}

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

@media(min-width:1200px){

    .vcec-hero{
        min-height:560px !important;
    }

    .vcec-hero-visual{
        min-height:500px !important;
        height:500px !important;
    }

    .vcec-main-circle{
        width:450px !important;
        height:450px !important;
    }

    .vcec-orbit{
        width:540px !important;
        height:540px !important;
    }

}

/* =========================================================
   1199
========================================================= */

@media(max-width:1199px){

    .vcec-hero{
        min-height:550px !important;
    }

    .vcec-hero h1{
        font-size:48px !important;
    }

    .vcec-main-circle{
        width:420px !important;
        height:420px !important;
    }

    .vcec-orbit{
        width:505px !important;
        height:505px !important;
    }

    .vcec-hero-visual{
        min-height:470px !important;
        height:470px !important;
    }

}

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

@media(max-width:991px){

    .vcec-hero{
        min-height:auto !important;
        padding:45px 0 70px !important;
    }

    .vcec-hero-visual{
        margin-top:45px !important;
        min-height:500px !important;
        height:500px !important;
    }

    .vcec-main-circle{
        width:410px !important;
        height:410px !important;
    }

    .vcec-orbit{
        width:500px !important;
        height:500px !important;
    }

    .vcec-messenger{
        left:15px !important;
        bottom:15px !important;
    }

    .vcec-whatsapp{
        right:15px !important;
        bottom:15px !important;
    }

}

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

@media(max-width:767px){

    .vcec-hero{
        min-height:auto !important;
        padding:40px 0 60px !important;
    }

    .vcec-hero h1{
        font-size:38px !important;
    }

    .vcec-hero-visual{
        margin-top:35px !important;
        min-height:400px !important;
        height:400px !important;
    }

    .vcec-main-circle{
        width:315px !important;
        height:315px !important;
    }

    .vcec-orbit{
        width:375px !important;
        height:375px !important;
    }

    .vcec-messenger{
        left:10px !important;
        bottom:10px !important;
        width:54px !important;
        height:54px !important;
        font-size:27px !important;
    }

    .vcec-whatsapp{
        right:10px !important;
        bottom:10px !important;
        width:58px !important;
        height:58px !important;
        font-size:30px !important;
    }

}

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

@media(max-width:480px){

    .vcec-hero{
        padding:35px 0 50px !important;
    }

    .vcec-hero h1{
        font-size:34px !important;
    }

    .vcec-hero-visual{
        min-height:350px !important;
        height:350px !important;
    }

    .vcec-main-circle{
        width:275px !important;
        height:275px !important;
    }

    .vcec-orbit{
        width:325px !important;
        height:325px !important;
    }

    .vcec-messenger{
        left:8px !important;
        bottom:8px !important;
        width:48px !important;
        height:48px !important;
        font-size:24px !important;
    }

    .vcec-whatsapp{
        right:8px !important;
        bottom:8px !important;
        width:52px !important;
        height:52px !important;
        font-size:27px !important;
    }

}
/* =========================================================
   HERO TOP GAP - NAVBAR SE CLEARANCE
========================================================= */

.vcec-hero{
    margin-top:35px !important;
    position:relative !important;
    z-index:1 !important;
}

.vcec-hero-visual{
    margin-top:0 !important;
}

/* Desktop */
@media(min-width:992px){
    .vcec-hero{
        padding-top:55px !important;
    }
}

/* Mobile */
@media(max-width:991px){
    .vcec-hero{
        margin-top:20px !important;
    }
}

/* =========================================================
   VCEC - WHY STUDENTS CHOOSE US
========================================================= */

.vcec-why-section{
    position:relative;
    padding:90px 0 80px;
    background:
        radial-gradient(circle at 10% 20%,rgba(7,91,213,.07),transparent 28%),
        radial-gradient(circle at 90% 80%,rgba(108,99,255,.07),transparent 28%),
        #f7faff;
    overflow:hidden;
}

.vcec-why-bg{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    opacity:.5;
}

.vcec-why-bg-1{
    width:280px;
    height:280px;
    left:-150px;
    top:120px;
    border:45px solid rgba(7,91,213,.035);
}

.vcec-why-bg-2{
    width:350px;
    height:350px;
    right:-190px;
    bottom:-120px;
    border:55px solid rgba(108,99,255,.035);
}


/* Heading */

.vcec-why-heading{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:800px;
    margin:0 auto 48px;
}

.vcec-why-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#075bd5;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.vcec-why-eyebrow span{
    width:35px;
    height:2px;
    display:block;
    background:linear-gradient(90deg,#075bd5,#6c63ff);
    border-radius:10px;
}

.vcec-why-heading h2{
    margin:0;
    color:#14213d;
    font-size:44px;
    line-height:1.15;
    font-weight:800;
}

.vcec-why-heading h2 strong{
    color:#075bd5;
}

.vcec-why-heading p{
    max-width:680px;
    margin:15px auto 0;
    color:#667085;
    font-size:16px;
    line-height:1.75;
}


/* Grid */

.vcec-why-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}


/* Card */

.vcec-why-card{
    position:relative;
    min-height:270px;
    padding:28px 23px 24px;
    background:rgba(255,255,255,.96);
    border:1px solid #e6edf7;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(20,55,95,.055);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.vcec-why-card:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        #075bd5,
        #6c63ff,
        #00b894
    );
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease;
}

.vcec-why-card:after{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    right:-45px;
    bottom:-45px;
    border-radius:50%;
    background:rgba(7,91,213,.035);
    transition:.4s ease;
}

.vcec-why-card:hover{
    transform:translateY(-9px);
    border-color:#d3e1f5;
    box-shadow:0 22px 55px rgba(20,55,95,.12);
}

.vcec-why-card:hover:before{
    transform:scaleX(1);
}

.vcec-why-card:hover:after{
    transform:scale(1.5);
}


/* Number */

.vcec-number{
    position:absolute;
    top:18px;
    right:20px;
    font-size:13px;
    font-weight:800;
    color:#dbe5f2;
}


/* Icon */

.vcec-feature-icon{
    position:relative;
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:21px;
    border-radius:17px;
    color:#fff;
    font-size:25px;
    box-shadow:0 10px 25px rgba(7,91,213,.16);
    transition:.35s ease;
}

.vcec-why-card:hover .vcec-feature-icon{
    transform:rotate(-5deg) scale(1.08);
}

.vcec-feature-icon.blue{
    background:linear-gradient(135deg,#075bd5,#4b8df8);
}

.vcec-feature-icon.purple{
    background:linear-gradient(135deg,#6546d7,#9b72ff);
}

.vcec-feature-icon.green{
    background:linear-gradient(135deg,#00a878,#2acb9d);
}

.vcec-feature-icon.orange{
    background:linear-gradient(135deg,#ef7d18,#ffb347);
}

.vcec-feature-icon.red{
    background:linear-gradient(135deg,#e53935,#ff6b6b);
}

.vcec-feature-icon.gold{
    background:linear-gradient(135deg,#d99b00,#ffc83d);
}

.vcec-feature-icon.cyan{
    background:linear-gradient(135deg,#008fb3,#24c9e8);
}

.vcec-feature-icon.dark{
    background:linear-gradient(135deg,#243b64,#536d9d);
}


/* Content */

.vcec-feature-content{
    position:relative;
    z-index:2;
}

.vcec-feature-content h3{
    margin:0 0 10px;
    color:#172b4d;
    font-size:18px;
    line-height:1.35;
    font-weight:800;
}

.vcec-feature-content p{
    margin:0;
    color:#697586;
    font-size:13.5px;
    line-height:1.7;
}


/* Arrow */

.vcec-card-arrow{
    position:absolute;
    right:21px;
    bottom:20px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f0f5fc;
    color:#075bd5;
    font-size:12px;
    transition:.35s ease;
}

.vcec-why-card:hover .vcec-card-arrow{
    background:#075bd5;
    color:#fff;
    transform:translateX(4px);
}


/* Trust Strip */

.vcec-trust-strip{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px;
    margin-top:38px;
    padding:22px 30px;
    background:#fff;
    border:1px solid #e3ebf5;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(20,55,95,.07);
}

.vcec-trust-item{
    display:flex;
    align-items:center;
    gap:12px;
}

.vcec-trust-item > i{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#edf4ff;
    color:#075bd5;
    font-size:17px;
}

.vcec-trust-item strong{
    display:block;
    color:#172b4d;
    font-size:17px;
    font-weight:800;
    line-height:1.2;
}

.vcec-trust-item span{
    display:block;
    margin-top:3px;
    color:#7a8699;
    font-size:12px;
}

.vcec-trust-line{
    width:1px;
    height:38px;
    background:#e5ebf3;
}


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

@media(max-width:1199px){

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

}


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

@media(max-width:767px){

    .vcec-why-section{
        padding:60px 0 60px;
    }

    .vcec-why-heading{
        margin-bottom:32px;
    }

    .vcec-why-heading h2{
        font-size:32px;
    }

    .vcec-why-heading p{
        font-size:14px;
        line-height:1.65;
    }

    .vcec-why-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .vcec-why-card{
        min-height:220px;
        padding:24px 20px;
    }

    .vcec-feature-icon{
        width:55px;
        height:55px;
        margin-bottom:17px;
        font-size:21px;
    }

    .vcec-feature-content h3{
        font-size:17px;
    }

    .vcec-feature-content p{
        font-size:13px;
    }

    .vcec-trust-strip{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px 12px;
        margin-top:25px;
        padding:20px 16px;
    }

    .vcec-trust-line{
        display:none;
    }

    .vcec-trust-item{
        gap:9px;
    }

    .vcec-trust-item > i{
        width:38px;
        height:38px;
        font-size:15px;
    }

    .vcec-trust-item strong{
        font-size:14px;
    }

    .vcec-trust-item span{
        font-size:11px;
    }

}


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

@media(max-width:480px){

    .vcec-why-heading h2{
        font-size:28px;
    }

    .vcec-why-eyebrow{
        font-size:10px;
        letter-spacing:1.5px;
    }

    .vcec-why-card{
        border-radius:16px;
    }

}
/* =========================================================
   VCEC PREMIUM WHY CHOOSE US
========================================================= */

.vcec-why-premium{
    position:relative;
    padding:95px 0 85px;
    overflow:hidden;
    background:
        radial-gradient(circle at 8% 50%,rgba(7,91,213,.07),transparent 25%),
        radial-gradient(circle at 92% 20%,rgba(108,99,255,.07),transparent 25%),
        #f8fbff;
}

.vcec-why-premium .container-lg{
    position:relative;
    z-index:2;
}


/* Background Orbs */

.vcec-why-orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    border:1px solid rgba(7,91,213,.08);
}

.vcec-why-orb:after{
    content:"";
    position:absolute;
    inset:25px;
    border-radius:50%;
    border:1px dashed rgba(7,91,213,.08);
}

.orb-left{
    width:360px;
    height:360px;
    left:-230px;
    top:160px;
}

.orb-right{
    width:420px;
    height:420px;
    right:-270px;
    bottom:-100px;
}


/* Heading */

.vcec-premium-heading{
    text-align:center;
    max-width:780px;
    margin:0 auto 55px;
}

.vcec-premium-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#075bd5;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:13px;
}

.vcec-premium-label span{
    width:35px;
    height:2px;
    border-radius:20px;
    background:linear-gradient(90deg,#075bd5,#6c63ff);
}

.vcec-premium-heading h2{
    margin:0;
    color:#15233d;
    font-size:45px;
    line-height:1.15;
    font-weight:800;
}

.vcec-premium-heading h2 strong{
    color:#075bd5;
}

.vcec-premium-heading p{
    max-width:680px;
    margin:16px auto 0;
    color:#697586;
    font-size:16px;
    line-height:1.75;
}


/* Main Area */

.vcec-advantage-area{
    display:grid;
    grid-template-columns:1fr 420px 1fr;
    align-items:center;
    gap:45px;
}


/* Feature Columns */

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

.left-column{
    text-align:right;
}

.right-column{
    text-align:left;
}


/* Feature */

.vcec-premium-feature{
    position:relative;
    display:flex;
    align-items:center;
    gap:17px;
    padding:21px;
    background:rgba(255,255,255,.94);
    border:1px solid #e4ebf5;
    border-radius:18px;
    box-shadow:0 8px 30px rgba(20,55,95,.055);
    transition:all .35s ease;
}

.left-column .vcec-premium-feature{
    flex-direction:row-reverse;
}

.vcec-premium-feature:hover{
    transform:translateY(-6px);
    border-color:#cbdcf3;
    box-shadow:0 18px 45px rgba(20,55,95,.12);
}


/* Feature Icon */

.vcec-feature-icon{
    flex:0 0 58px;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:#fff;
    font-size:22px;
    box-shadow:0 10px 24px rgba(7,91,213,.16);
    transition:.35s ease;
}

.vcec-premium-feature:hover .vcec-feature-icon{
    transform:scale(1.08) rotate(-5deg);
}

.vcec-feature-icon.blue{
    background:linear-gradient(135deg,#075bd5,#4c8ef8);
}

.vcec-feature-icon.purple{
    background:linear-gradient(135deg,#6747d8,#9d75ff);
}

.vcec-feature-icon.green{
    background:linear-gradient(135deg,#00a879,#2bcfa0);
}

.vcec-feature-icon.orange{
    background:linear-gradient(135deg,#ee7918,#ffb044);
}

.vcec-feature-icon.red{
    background:linear-gradient(135deg,#e53935,#ff6d6d);
}

.vcec-feature-icon.cyan{
    background:linear-gradient(135deg,#008eae,#24c8e6);
}


/* Feature Text */

.vcec-premium-feature h3{
    margin:0 0 6px;
    color:#172b4d;
    font-size:17px;
    line-height:1.3;
    font-weight:800;
}

.vcec-premium-feature p{
    margin:0;
    color:#718096;
    font-size:13px;
    line-height:1.6;
}

.vcec-premium-feature span{
    display:block;
    margin-bottom:3px;
    color:#075bd5;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}


/* Center Visual */

.vcec-student-visual{
    position:relative;
    width:420px;
    height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
}

.vcec-visual-glow{
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(7,91,213,.20),
        rgba(7,91,213,.06) 45%,
        transparent 70%
    );
    filter:blur(8px);
}


/* Rings */

.vcec-visual-ring{
    position:absolute;
    border-radius:50%;
    border:2px dashed rgba(7,91,213,.25);
}

.ring-one{
    width:385px;
    height:385px;
    animation:vcecRotate 28s linear infinite;
}

.ring-two{
    width:330px;
    height:330px;
    border-style:solid;
    border-color:rgba(108,99,255,.16);
    animation:vcecRotateReverse 22s linear infinite;
}

@keyframes vcecRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes vcecRotateReverse{
    from{
        transform:rotate(360deg);
    }
    to{
        transform:rotate(0deg);
    }
}


/* Dots */

.vcec-visual-dots{
    position:absolute;
    width:405px;
    height:405px;
    animation:vcecRotate 35s linear infinite;
}

.vcec-visual-dots span{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#075bd5;
    box-shadow:0 0 0 5px rgba(7,91,213,.08);
}

.vcec-visual-dots span:nth-child(1){
    top:5%;
    left:48%;
}

.vcec-visual-dots span:nth-child(2){
    top:18%;
    right:10%;
}

.vcec-visual-dots span:nth-child(3){
    top:50%;
    right:0;
}

.vcec-visual-dots span:nth-child(4){
    bottom:13%;
    right:15%;
}

.vcec-visual-dots span:nth-child(5){
    bottom:3%;
    left:48%;
}

.vcec-visual-dots span:nth-child(6){
    bottom:18%;
    left:10%;
}

.vcec-visual-dots span:nth-child(7){
    top:48%;
    left:0;
}

.vcec-visual-dots span:nth-child(8){
    top:18%;
    left:10%;
}


/* Student Circle */

.vcec-student-circle{
    position:relative;
    z-index:3;
    width:285px;
    height:285px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(145deg,#fff,#edf5ff);
    border:9px solid #fff;
    box-shadow:
        0 20px 55px rgba(7,91,213,.18),
        inset 0 0 35px rgba(7,91,213,.05);
    overflow:hidden;
}

.vcec-student-circle:before{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:50%;
    border:2px solid rgba(7,91,213,.12);
}

.vcec-student-circle img{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    transform:scale(1.04);
}


/* Floating Badge */

.vcec-floating-badge{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    background:#fff;
    border:1px solid #e1e9f3;
    border-radius:13px;
    box-shadow:0 12px 30px rgba(20,55,95,.12);
}

.vcec-floating-badge i{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#edf4ff;
    color:#075bd5;
}

.vcec-floating-badge strong{
    display:block;
    color:#172b4d;
    font-size:12px;
    line-height:1.2;
}

.vcec-floating-badge span{
    display:block;
    color:#7a8699;
    font-size:10px;
    margin-top:2px;
}

.badge-top{
    top:42px;
    right:-5px;
    animation:vcecFloat 4s ease-in-out infinite;
}

.badge-bottom{
    left:-5px;
    bottom:45px;
    animation:vcecFloat 4s ease-in-out 1s infinite;
}

@keyframes vcecFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}


/* Bottom Stats */

.vcec-premium-stats{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px;
    margin-top:48px;
    padding:22px 28px;
    background:#fff;
    border:1px solid #e2eaf4;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(20,55,95,.07);
}

.vcec-stat-box{
    display:flex;
    align-items:center;
    gap:12px;
}

.vcec-stat-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#edf4ff;
    color:#075bd5;
}

.vcec-stat-box strong{
    display:block;
    color:#172b4d;
    font-size:17px;
    font-weight:800;
    line-height:1.2;
}

.vcec-stat-box span{
    display:block;
    margin-top:3px;
    color:#7a8699;
    font-size:11px;
}

.vcec-stat-divider{
    width:1px;
    height:40px;
    background:#e4eaf2;
}


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

@media(max-width:1199px){

    .vcec-advantage-area{
        grid-template-columns:1fr 340px 1fr;
        gap:25px;
    }

    .vcec-student-visual{
        width:340px;
        height:340px;
    }

    .ring-one{
        width:320px;
        height:320px;
    }

    .ring-two{
        width:275px;
        height:275px;
    }

    .vcec-visual-dots{
        width:335px;
        height:335px;
    }

    .vcec-student-circle{
        width:230px;
        height:230px;
    }

    .vcec-premium-feature{
        padding:17px;
        gap:12px;
    }

    .vcec-feature-icon{
        flex-basis:50px;
        width:50px;
        height:50px;
        font-size:19px;
    }

}


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

@media(max-width:991px){

    .vcec-why-premium{
        padding:70px 0;
    }

    .vcec-premium-heading h2{
        font-size:38px;
    }

    .vcec-advantage-area{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .vcec-student-visual{
        order:1;
        width:360px;
        height:360px;
    }

    .left-column{
        order:2;
    }

    .right-column{
        order:3;
    }

    .vcec-feature-column{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px;
    }

    .left-column,
    .right-column{
        text-align:left;
    }

    .left-column .vcec-premium-feature{
        flex-direction:row;
    }

    .vcec-premium-stats{
        flex-wrap:wrap;
    }

}


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

@media(max-width:767px){

    .vcec-why-premium{
        padding:60px 0;
    }

    .vcec-premium-heading{
        margin-bottom:35px;
    }

    .vcec-premium-label{
        font-size:10px;
        letter-spacing:1.5px;
    }

    .vcec-premium-heading h2{
        font-size:31px;
    }

    .vcec-premium-heading p{
        font-size:14px;
    }

    .vcec-student-visual{
        width:300px;
        height:300px;
    }

    .ring-one{
        width:285px;
        height:285px;
    }

    .ring-two{
        width:245px;
        height:245px;
    }

    .vcec-visual-dots{
        width:295px;
        height:295px;
    }

    .vcec-student-circle{
        width:205px;
        height:205px;
        border-width:7px;
    }

    .vcec-floating-badge{
        padding:8px 10px;
    }

    .badge-top{
        right:-8px;
        top:30px;
    }

    .badge-bottom{
        left:-8px;
        bottom:25px;
    }

    .vcec-feature-column{
        grid-template-columns:1fr;
    }

    .vcec-premium-feature{
        padding:18px;
    }

    .vcec-premium-stats{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px;
        padding:20px 16px;
    }

    .vcec-stat-divider{
        display:none;
    }

}


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

@media(max-width:480px){

    .vcec-premium-heading h2{
        font-size:27px;
    }

    .vcec-student-visual{
        width:270px;
        height:270px;
    }

    .ring-one{
        width:255px;
        height:255px;
    }

    .ring-two{
        width:220px;
        height:220px;
    }

    .vcec-visual-dots{
        width:265px;
        height:265px;
    }

    .vcec-student-circle{
        width:185px;
        height:185px;
    }

    .vcec-floating-badge{
        transform:scale(.88);
    }

    .vcec-feature-content h3{
        font-size:16px;
    }

    .vcec-feature-content p{
        font-size:12.5px;
    }

}
.how-it-work-content.v1 .middle-img img{
    width:70%!important;
    height:70%!important;
    object-fit:contain!important;
    margin:auto!important;
}

.how-it-work-content.v1 .middle-img{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

/* =========================================
   VCEC INSTITUTE + MANAGING DIRECTOR
========================================= */

.register-now-section .institute-content{
    position:relative;
    overflow:hidden;
}

.managing-director-float{
    position:absolute;
    top:15px;
    right:20px;
    width:120px;
    text-align:center;
    z-index:5;
}

.director-photo{
    width:105px;
    height:105px;
    margin:0 auto 5px;
    padding:3px;
    border-radius:50%;
    background:linear-gradient(135deg,#075bd5,#20b957);
    box-shadow:0 5px 15px rgba(7,91,213,.15);
}

.director-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
    background:#fff;
}

.director-name{
    margin:0 0 1px !important;
    color:#075bd5 !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.2;
}

.director-designation{
    margin:0 !important;
    color:#555 !important;
    font-size:10px !important;
    font-weight:500 !important;
    line-height:1.2;
}

.institute-description{
    color:#555;
    font-size:16px;
    line-height:1.8;
    text-align:justify;
    margin-bottom:0;
}

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

@media(max-width:767px){

    .managing-director-float{
        position:relative;
        top:auto;
        right:auto;
        width:100%;
        margin:0 auto 20px;
        text-align:center;
    }

    .director-photo{
        width:105px;
        height:105px;
    }

    .director-name{
        font-size:14px !important;
    }

    .director-designation{
        font-size:10px !important;
    }

    .institute-description{
        font-size:15px;
        line-height:1.75;
        text-align:justify;
    }
}