:root{

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

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

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:var(--body-font);

background:#05070d;

color:#fff;

overflow-x:hidden;

font-size:16px;

letter-spacing:-0.2px;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6{

font-family:var(--heading-font);

letter-spacing:-2px;

font-weight:800;

line-height:1.05;
}



.container{
max-width:1300px;
margin:auto;
padding:0 20px;
}

img{
max-width:100%;
height:auto;
display:block;
}


/* =========================================================
   PREMIUM SHOWCASE SECTION
========================================================= */
.container{
max-width:1300px;
margin:auto;
padding:0 20px;
}

img{
max-width:100%;
height:auto;
display:block;
}

/* =========================================================
   CINEMATIC CHARACTER HERO
========================================================= */

#page-banner{

position:relative;

min-height:85vh;

display:flex;

align-items:center;

padding:140px 20px;

overflow:hidden;

background-size:cover;

background-position:center;

background-repeat:no-repeat;
}

.courses-main-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.95) 0%,
rgba(3,7,18,.88) 45%,
rgba(3,7,18,.45) 100%
),

url('../images/course/courses-main-banner.jpg');

}

.course-hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

padding:140px 20px;

overflow:hidden;

background-size:cover;

background-position:center center;

background-repeat:no-repeat;
}

/* =========================================
3D Environment DESIGN
========================================= */

.environment-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/advanced-character-banner.png');

background-size:cover;

background-position:center center;

background-repeat:no-repeat;
}

/* =========================================
3D Character DESIGN
========================================= */

.character-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/advanced-character-banner.png');

background-size:cover;

background-position:center center;

background-repeat:no-repeat;
}
/* =========================================
UI-UX Design
========================================= */

.uiux-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/uiux-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
3D Game Design 
========================================= */
.game-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/game-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}

/* =========================================
3D ENVIRONMENT DESIGN
========================================= */

.environment-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/environment-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
3D ANIMATION & RIGGING
========================================= */

.animation-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/animation-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
INTERIOR & EXTERIOR DESIGN
========================================= */

.interior-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/interior-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
VFX & CINEMATIC FILMMAKING
========================================= */

.vfx-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/vfx-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
CONCEPT ART
========================================= */

.concept-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/concept-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
2D ANIMATION
========================================= */

.twod-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/2d-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
MOTION GRAPHICS
========================================= */

.motion-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/motion-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
SOCIAL MEDIA
========================================= */

.social-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/social-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
CINEMATOGRAPHY
========================================= */

.cinema-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/cinema-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
GRAPHIC DESIGN
========================================= */

.graphic-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/graphic-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


/* =========================================
DRAWING & SKETCHING
========================================= */

.drawing-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/drawing-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;
}


/* =========================================
PAINTING & CLAY SCULPTING
========================================= */

.painting-hero{

background:

linear-gradient(
90deg,
rgba(3,7,18,.98) 0%,
rgba(3,7,18,.96) 22%,
rgba(3,7,18,.86) 45%,
rgba(3,7,18,.42) 68%,
rgba(3,7,18,.10) 100%
),

url('../images/course/painting-banner.jpg');
background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}

/* DARK OVERLAY */

.course-overlay{

position:absolute;
inset:0;

background:

radial-gradient(
circle at top left,
rgba(124,58,237,.22),
transparent 34%
),

radial-gradient(
circle at bottom right,
rgba(59,130,246,.16),
transparent 40%
),

linear-gradient(
180deg,
rgba(0,0,0,.08),
rgba(0,0,0,.58)
);

z-index:1;
}

/* FILM GRAIN */

.hero-noise{

position:absolute;
inset:0;

background-image:
radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);

background-size:4px 4px;

opacity:.05;

mix-blend-mode:overlay;

z-index:2;
}

/* HERO CONTENT */

.course-hero-content{

position:relative;

z-index:5;

max-width:760px;
}

/* MINI TAG */

.hero-mini-title{

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

padding:12px 24px;

border-radius:100px;

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

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

backdrop-filter:blur(18px);

font-size:12px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

color:#c4b5fd;

margin-bottom:34px;
}

/* MAIN TITLE */

.course-hero-content h1{

font-size:92px;

line-height:.90;

font-weight:900;

letter-spacing:-5px;

margin-bottom:34px;

max-width:850px;

color:#fff;
padding-top: 40px;
}

/* GRADIENT TEXT */

.course-hero-content h1 span{

background:
linear-gradient(
90deg,
#a855f7,
#60a5fa
);

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

/* DESCRIPTION */

.course-hero-content p{

font-size:20px;

line-height:1.9;

max-width:700px;

color:#d1d5db;

font-weight:300;

margin-bottom:46px;
}

/* STATS */

.hero-stats{

display:flex;

flex-wrap:wrap;

gap:16px;

margin-bottom:52px;
}

.hero-stats span{

padding:14px 22px;

border-radius:100px;

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

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

backdrop-filter:blur(14px);

font-size:14px;

font-weight:500;

color:#f3f4f6;
}

/* BUTTONS */

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;
}

/* BUTTON */

.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

border-radius:100px;

font-size:16px;

font-weight:600;

text-decoration:none;

transition:.45s ease;

background:
linear-gradient(
90deg,
#7c3aed,
#2563eb
);

color:#fff;

box-shadow:
0 14px 40px rgba(124,58,237,.35);
}

.hero-btn:hover{

transform:
translateY(-6px);

box-shadow:
0 24px 55px rgba(124,58,237,.50);
}

/* SECONDARY BUTTON */

.secondary-btn{

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

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

backdrop-filter:blur(14px);
}

.secondary-btn:hover{

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

/* CINEMATIC LIGHT */

.character-hero::before{

content:'';

position:absolute;

width:720px;
height:720px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(124,58,237,.20),
transparent 70%
);

top:-280px;
right:-120px;

z-index:1;
}

/* DEPTH SHADOW */

.character-hero::after{

content:'';

position:absolute;

left:0;
bottom:0;

width:100%;
height:240px;

background:
linear-gradient(
180deg,
transparent,
#05070d
);

z-index:2;
}

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

@media(max-width:991px){

.course-hero-content h1{
font-size:68px;
}

}

@media(max-width:768px){

.character-hero{

background-position:72% center;

min-height:auto;
}

.course-hero-content{

padding:40px 0;
}

.course-hero-content h1{

font-size:48px;

line-height:1.02;

letter-spacing:-2px;
}

.course-hero-content p{

font-size:16px;

line-height:1.8;
}

.hero-buttons{

flex-direction:column;
}

.hero-btn{
width:100%;
}

.hero-mini-title{

font-size:11px;

line-height:1.6;
}

.hero-stats span{

font-size:12px;
}

}

/* =========================================================
   PREMIUM SHOWCASE SECTION
========================================================= */

.student-showcase{

position:relative;

padding:140px 20px;

background:
linear-gradient(
180deg,
#05070d,
#07111d
);

overflow:hidden;
}

/* BLUR */

.showcase-blur{
position:absolute;
border-radius:50%;
filter:blur(140px);
}

.blur-left{
width:420px;
height:420px;

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

left:-120px;
top:100px;
}

.blur-right{
width:450px;
height:450px;

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

right:-120px;
bottom:0;
}

/* GRID */

.video-grid{

display:grid;

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

gap:40px;

position:relative;
z-index:2;
}

/* CARD */
.video-card{

position:relative;

display:flex;

flex-direction:column;

height:100%;

text-decoration:none;

color:#fff;

border-radius:34px;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.03)
);

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

backdrop-filter:blur(24px);

transition:
.55s cubic-bezier(.22,1,.36,1);

box-shadow:
0 15px 50px rgba(0,0,0,.35);
}

/* TOP GLOW */

.video-card::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:
linear-gradient(
90deg,
transparent,
#35e0ff,
transparent
);

opacity:.75;

z-index:2;
}

/* HOVER */

.video-card:hover{

transform:
translateY(-16px)
scale(1.02);

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

box-shadow:
0 35px 90px rgba(0,0,0,.48);
}

/* IMAGE */

.video-thumbnail{

position:relative;

overflow:hidden;

width:100%;

line-height:0;
}

.video-thumbnail img{

width:100%;

height:320px;

object-fit:cover;

display:block;

border:none;

vertical-align:middle;
}

.video-card:hover img{
transform:scale(1.08);
}

/* DARK OVERLAY */

.video-thumbnail::after{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
180deg,
transparent,
rgba(0,0,0,.35)
);
}

/* =========================================
   PREMIUM PLAY BUTTON
========================================= */

.play-button{

position:absolute;

top:50%;
left:50%;

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

width:82px;
height:82px;

border-radius:50%;

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

z-index:5;

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

backdrop-filter:blur(12px);

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

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

transition:.45s ease;
}

/* ICON */

.play-button i{

font-size:28px;

color:#ff315c;

transition:.45s ease;
}

/* HOVER */

.video-card:hover .play-button{

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

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

box-shadow:
0 20px 40px rgba(0,0,0,.45);
}

.video-card:hover .play-button i{

transform:scale(1.1);

color:#ff4d6d;
}


/* CONTENT */

.video-content{
padding:34px;
position:relative;
z-index:2;
}

/* TAG */

.platform-tag{

display:inline-flex;

align-items:center;

padding:10px 20px;

border-radius:50px;

margin-bottom:24px;

font-size:11px;

font-weight:700;

letter-spacing:1.4px;

text-transform:uppercase;

background:
linear-gradient(
135deg,
rgba(53,224,255,.12),
rgba(255,255,255,.04)
);

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

color:#dffbff;

backdrop-filter:blur(10px);

box-shadow:
0 8px 24px rgba(0,0,0,.22);
}

/* TITLE */

.video-content h3{

font-size:34px;

line-height:1.1;

font-weight:800;

letter-spacing:-1px;

margin-bottom:18px;
}

/* TEXT */

.video-content p{

font-size:17px;

line-height:2;

color:#cfcfcf;
}


.video-card{
min-height:620px;
}


/* RESPONSIVE */

@media(max-width:768px){

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

.video-content{
padding:28px;
}

.video-content h3{
font-size:28px;
}

.play-button{
width:78px;
height:78px;
font-size:28px;
}

}
/* PREMIUM SECTION */

.premium-course-wrapper{
position:relative;
padding:120px 20px;
background:#05070d;
overflow:hidden;
}

.premium-blur{
position:absolute;
border-radius:50%;
filter:blur(140px);
}

.blur-one{
width:500px;
height:500px;
background:rgba(0,255,255,.10);
right:-150px;
top:-120px;
}

.blur-two{
width:450px;
height:450px;
background:rgba(255,0,120,.08);
left:-120px;
bottom:-100px;
}

.glass-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);
box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.premium-intro-card{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
align-items:center;
padding:60px;
border-radius:40px;
margin-bottom:120px;
}

.intro-left h2{
font-size:64px;
line-height:1;
font-weight:800;
margin-bottom:30px;
}

.intro-left p{
font-size:20px;
line-height:2;
color:#d5d5d5;
margin-bottom:40px;
}

.intro-right img{
border-radius:30px;
}

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

.stat-box{
padding:24px 28px;
border-radius:24px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.stat-box h3{
font-size:24px;
margin-bottom:8px;
}

.stat-box span{
font-size:14px;
color:#bdbdbd;
}

/* HEADINGS */

.premium-heading{
text-align:center;
margin-bottom:60px;
}

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

.premium-heading h2{
font-size:58px;
font-weight:800;
margin-bottom:18px;
color:#35e0ff;
}

.premium-heading p{
font-size:18px;
line-height:1.9;
max-width:850px;
margin:auto;
color:#cfcfcf;
}

/* =========================================================
   PREMIUM AAA CARDS
========================================================= */

.skills-grid,
.tools-grid,
.career-grid{

display:grid;

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

gap:38px;

margin-bottom:140px;

position:relative;
z-index:2;
}

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

.skill-card,
.tool-card,
.career-card{

position:relative;

padding:48px 40px;

border-radius:34px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.07),
rgba(255,255,255,.03)
);

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

backdrop-filter:blur(24px);

overflow:hidden;

transition:
.55s cubic-bezier(.22,1,.36,1);

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

min-height:360px;
}

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

.skill-card::before,
.tool-card::before,
.career-card::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:
linear-gradient(
90deg,
transparent,
#35e0ff,
transparent
);

opacity:.75;
}

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

.skill-card::after,
.tool-card::after,
.career-card::after{

content:'';

position:absolute;

width:260px;
height:260px;

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

border-radius:50%;

filter:blur(100px);

top:-120px;
right:-100px;

opacity:0;

transition:.5s ease;
}

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

.skill-card:hover,
.tool-card:hover,
.career-card:hover{

transform:
translateY(-16px)
scale(1.02);

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

box-shadow:
0 35px 90px rgba(0,0,0,.48);
}

.skill-card:hover::after,
.tool-card:hover::after,
.career-card:hover::after{
opacity:1;
}

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

.skill-card i{

font-size:62px;

margin-bottom:30px;

color:#35e0ff;

text-shadow:
0 0 25px rgba(53,224,255,.45);

transition:.4s ease;
}

.skill-card:hover i{
transform:scale(1.08);
}

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

.skill-card h3,
.tool-card h3,
.career-card h3{

font-size:38px;

line-height:1.1;

font-weight:800;

letter-spacing:-1px;

margin-bottom:24px;

color:#fff;
}

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

.skill-card p,
.tool-card p,
.career-card p{

font-size:17px;

line-height:2;

color:#d0d0d0;
}

/* =========================================================
   TOOL CARD SPECIAL
========================================================= */

.tool-card{

background:
linear-gradient(
135deg,
rgba(0,255,255,.04),
rgba(255,255,255,.03)
);
}

/* =========================================================
   CAREER CARD SPECIAL
========================================================= */

.career-card{

background:
linear-gradient(
135deg,
rgba(255,0,120,.04),
rgba(255,255,255,.03)
);
}

/* =========================================================
   PREMIUM HEADING
========================================================= */

.premium-heading{
text-align:center;
margin-bottom:70px;
position:relative;
z-index:2;
}

.premium-heading h2{

font-size:84px;

font-weight:900;

line-height:.95;

letter-spacing:-4px;

margin-bottom:24px;

background:
linear-gradient(
90deg,
#ffffff,
#35e0ff
);

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

.premium-heading p{

font-size:20px;

line-height:2;

max-width:900px;

margin:auto;

color:#cfcfcf;
}

/* =========================================================
   PREMIUM HEADING LINE
========================================================= */

.premium-heading::after{

content:'';

width:140px;
height:4px;

display:block;

margin:28px auto 0;

border-radius:50px;

background:
linear-gradient(
90deg,
#35e0ff,
#ff2d55
);

box-shadow:
0 0 25px rgba(53,224,255,.45);
}

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

@media(max-width:991px){

.skills-grid,
.tools-grid,
.career-grid{

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

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

.skill-card h3,
.tool-card h3,
.career-card h3{
font-size:30px;
}
}

@media(max-width:768px){

.premium-heading h2{
font-size:38px;
line-height:1.1;
}

.skill-card,
.tool-card,
.career-card{

padding:38px 30px;

min-height:auto;
}

.skill-card h3,
.tool-card h3,
.career-card h3{
font-size:28px;
}

.skill-card i{
font-size:52px;
}
}

/* ELITE SECTION */

.elite-section{
padding:60px;
border-radius:40px;
margin-bottom:120px;
}

.elite-section p{
font-size:20px;
line-height:2;
color:#d7d7d7;
margin-bottom:25px;
}

/* PIPELINE */

.pipeline-wrapper{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:20px;
padding:60px;
border-radius:40px;
margin-bottom:120px;
}

.pipeline-item{
text-align:center;
}

.pipeline-item span{
display:flex;
align-items:center;
justify-content:center;
width:90px;
height:90px;
border-radius:50%;
margin:auto auto 18px;
background:linear-gradient(135deg,#00e0ff,#007cf0);
font-size:28px;
font-weight:700;
}

.pipeline-item h4{
font-size:20px;
}

.pipeline-line{
width:80px;
height:2px;
background:linear-gradient(to right,#00e0ff,transparent);
}

/* CTA */

.premium-cta{
padding:70px;
border-radius:40px;
text-align:center;
}

.premium-cta h2{
font-size:58px;
font-weight:800;
margin-bottom:25px;
}

.premium-cta p{
font-size:20px;
line-height:2;
max-width:850px;
margin:auto auto 45px;
color:#d5d5d5;
}

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

.cta-buttons a{
padding:18px 36px;
border-radius:60px;
text-decoration:none;
font-weight:600;
background:linear-gradient(135deg,#ff7b00,#ff2d55);
color:#fff;
}

/* RESPONSIVE */

@media(max-width:991px){

.course-hero-content h1{
font-size:70px;
}

.premium-intro-card{
grid-template-columns:1fr;
}

.intro-left h2,
.section-heading h2,
.premium-heading h2,
.premium-cta h2{
font-size:42px;
}

.pipeline-wrapper{
flex-direction:column;
}

.pipeline-line{
width:2px;
height:60px;
}
}

@media(max-width:768px){

.course-hero-content h1{
font-size:48px;
}

.course-hero-content p,
.intro-left p,
.elite-section p,
.premium-cta p{
font-size:18px;
}

.section-heading h2,
.premium-heading h2,
.premium-cta h2{
font-size:34px;
}

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

.premium-intro-card,
.elite-section,
.pipeline-wrapper,
.premium-cta{
padding:40px 25px;
}

.skill-card,
.tool-card,
.career-card{
padding:30px;
}
}

.video-thumbnail img{
width:100%;
height:280px;
object-fit:cover;
display:block;
transition:.7s ease;
}

/* HIDE BROKEN IMAGES */

img[src=""],
img:not([src]){
display:none !important;
}

/* REMOVE BROKEN IMAGE ICON */

img{
font-size:0;
color:transparent;
}

/* =========================================
   FIREFOX BROKEN IMAGE FIX
========================================= */

img{
max-width:100%;
height:auto;
display:block;
}

/* HIDE BROKEN IMAGE ICON */

img[src=""],
img:not([src]){
display:none !important;
}

/* FIREFOX FIX */

img:-moz-broken{
opacity:0;
}

/* REMOVE INLINE IMAGE GAPS */

.video-thumbnail{
font-size:0;
line-height:0;
}


.video-card{
isolation:isolate;
}

/* =========================================
   PREMIUM PLAY BUTTON
========================================= */

.play-button{

position:absolute;

top:50%;
left:50%;

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

width:82px;
height:82px;

border-radius:50%;

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

z-index:5;

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

backdrop-filter:blur(12px);

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

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

transition:.45s ease;
}

/* ICON */

.play-button i{

font-size:34px;

color:#ff2d55;

transition:.45s ease;
}

/* HOVER */

.video-card:hover .play-button{

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

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

box-shadow:
0 20px 40px rgba(0,0,0,.45);
}

.video-card:hover .play-button i{

transform:scale(1.1);

color:#ff4d6d;
}


/* CONTENT */

.video-content{
padding:34px;
}


/* TITLE */

.video-content h3{

font-size:34px;

line-height:1.1;

font-weight:800;

letter-spacing:-1px;

margin-bottom:18px;
}

/* TEXT */

.video-content p{

font-size:17px;

line-height:2;

color:#cfcfcf;
}


.video-card{
min-height:620px;
}


/* RESPONSIVE */

@media(max-width:768px){

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

.video-content{
padding:28px;
}

.video-content h3{
font-size:28px;
}

.play-button{
width:78px;
height:78px;
font-size:28px;
}

}
/* PREMIUM SECTION */

.premium-course-wrapper{
position:relative;
padding:120px 20px;
background:#05070d;
overflow:hidden;
}

.premium-blur{
position:absolute;
border-radius:50%;
filter:blur(140px);
}

.blur-one{
width:500px;
height:500px;
background:rgba(0,255,255,.10);
right:-150px;
top:-120px;
}

.blur-two{
width:450px;
height:450px;
background:rgba(255,0,120,.08);
left:-120px;
bottom:-100px;
}

.glass-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);
box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.premium-intro-card{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
align-items:center;
padding:60px;
border-radius:40px;
margin-bottom:120px;
}

.intro-left h2{
font-size:64px;
line-height:1;
font-weight:800;
margin-bottom:30px;
}

.intro-left p{
font-size:20px;
line-height:2;
color:#d5d5d5;
margin-bottom:40px;
}

.intro-right img{
border-radius:30px;
}

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

.stat-box{
padding:24px 28px;
border-radius:24px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.stat-box h3{
font-size:24px;
margin-bottom:8px;
}

.stat-box span{
font-size:14px;
color:#bdbdbd;
}

/* HEADINGS */

.premium-heading{
text-align:center;
margin-bottom:60px;
}

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

.premium-heading h2{
font-size:58px;
font-weight:800;
margin-bottom:18px;
color:#35e0ff;
}

.premium-heading p{
font-size:18px;
line-height:1.9;
max-width:850px;
margin:auto;
color:#cfcfcf;
}

/* =========================================================
   PREMIUM AAA CARDS
========================================================= */

.skills-grid,
.tools-grid,
.career-grid{

display:grid;

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

gap:38px;

margin-bottom:140px;

position:relative;
z-index:2;
}

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

.skill-card,
.tool-card,
.career-card{

position:relative;

padding:48px 40px;

border-radius:34px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.07),
rgba(255,255,255,.03)
);

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

backdrop-filter:blur(24px);

overflow:hidden;

transition:
.55s cubic-bezier(.22,1,.36,1);

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

min-height:360px;
}

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

.skill-card::before,
.tool-card::before,
.career-card::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:
linear-gradient(
90deg,
transparent,
#35e0ff,
transparent
);

opacity:.75;
}

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

.skill-card::after,
.tool-card::after,
.career-card::after{

content:'';

position:absolute;

width:260px;
height:260px;

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

border-radius:50%;

filter:blur(100px);

top:-120px;
right:-100px;

opacity:0;

transition:.5s ease;
}

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

.skill-card:hover,
.tool-card:hover,
.career-card:hover{

transform:
translateY(-16px)
scale(1.02);

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

box-shadow:
0 35px 90px rgba(0,0,0,.48);
}

.skill-card:hover::after,
.tool-card:hover::after,
.career-card:hover::after{
opacity:1;
}

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

.skill-card i{

font-size:62px;

margin-bottom:30px;

color:#35e0ff;

text-shadow:
0 0 25px rgba(53,224,255,.45);

transition:.4s ease;
}

.skill-card:hover i{
transform:scale(1.08);
}

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

.skill-card h3,
.tool-card h3,
.career-card h3{

font-size:38px;

line-height:1.1;

font-weight:800;

letter-spacing:-1px;

margin-bottom:24px;

color:#fff;
}

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

.skill-card p,
.tool-card p,
.career-card p{

font-size:17px;

line-height:2;

color:#d0d0d0;
}

/* =========================================================
   TOOL CARD SPECIAL
========================================================= */

.tool-card{

background:
linear-gradient(
135deg,
rgba(0,255,255,.04),
rgba(255,255,255,.03)
);
}

/* =========================================================
   CAREER CARD SPECIAL
========================================================= */

.career-card{

background:
linear-gradient(
135deg,
rgba(255,0,120,.04),
rgba(255,255,255,.03)
);
}

/* =========================================================
   PREMIUM HEADING
========================================================= */

.premium-heading{
text-align:center;
margin-bottom:70px;
position:relative;
z-index:2;
}

.premium-heading h2{

font-size:76px;

font-weight:800;

line-height:1;

letter-spacing:-3px;

margin-bottom:22px;

background:
linear-gradient(
90deg,
#35e0ff,
#ffffff
);

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

.premium-heading p{

font-size:20px;

line-height:2;

max-width:900px;

margin:auto;

color:#cfcfcf;
}

/* =========================================================
   PREMIUM HEADING LINE
========================================================= */

.premium-heading::after{

content:'';

width:140px;
height:4px;

display:block;

margin:28px auto 0;

border-radius:50px;

background:
linear-gradient(
90deg,
#35e0ff,
#ff2d55
);

box-shadow:
0 0 25px rgba(53,224,255,.45);
}

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

@media(max-width:991px){

.skills-grid,
.tools-grid,
.career-grid{

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

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

.skill-card h3,
.tool-card h3,
.career-card h3{
font-size:30px;
}
}

@media(max-width:768px){

.premium-heading h2{
font-size:38px;
line-height:1.1;
}

.skill-card,
.tool-card,
.career-card{

padding:38px 30px;

min-height:auto;
}

.skill-card h3,
.tool-card h3,
.career-card h3{
font-size:28px;
}

.skill-card i{
font-size:52px;
}
}

/* ELITE SECTION */

.elite-section{
padding:60px;
border-radius:40px;
margin-bottom:120px;
}

.elite-section p{
font-size:20px;
line-height:2;
color:#d7d7d7;
margin-bottom:25px;
}

/* PIPELINE */

.pipeline-wrapper{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:20px;
padding:60px;
border-radius:40px;
margin-bottom:120px;
}

.pipeline-item{
text-align:center;
}

.pipeline-item span{
display:flex;
align-items:center;
justify-content:center;
width:90px;
height:90px;
border-radius:50%;
margin:auto auto 18px;
background:linear-gradient(135deg,#00e0ff,#007cf0);
font-size:28px;
font-weight:700;
}

.pipeline-item h4{
font-size:20px;
}

.pipeline-line{
width:80px;
height:2px;
background:linear-gradient(to right,#00e0ff,transparent);
}

/* CTA */

.premium-cta{
padding:70px;
border-radius:40px;
text-align:center;
}

.premium-cta h2{
font-size:58px;
font-weight:800;
margin-bottom:25px;
}

.premium-cta p{
font-size:20px;
line-height:2;
max-width:850px;
margin:auto auto 45px;
color:#d5d5d5;
}

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

.cta-buttons a{
padding:18px 36px;
border-radius:60px;
text-decoration:none;
font-weight:600;
background:linear-gradient(135deg,#ff7b00,#ff2d55);
color:#fff;
}

/* RESPONSIVE */

@media(max-width:991px){

.course-hero-content h1{
font-size:70px;
}

.premium-intro-card{
grid-template-columns:1fr;
}

.intro-left h2,
.section-heading h2,
.premium-heading h2,
.premium-cta h2{
font-size:42px;
}

.pipeline-wrapper{
flex-direction:column;
}

.pipeline-line{
width:2px;
height:60px;
}
}

@media(max-width:768px){

.course-hero-content h1{
font-size:48px;
}

.course-hero-content p,
.intro-left p,
.elite-section p,
.premium-cta p{
font-size:18px;
}

.section-heading h2,
.premium-heading h2,
.premium-cta h2{
font-size:34px;
}

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

.premium-intro-card,
.elite-section,
.pipeline-wrapper,
.premium-cta{
padding:40px 25px;
}

.skill-card,
.tool-card,
.career-card{
padding:30px;
}
}

.video-thumbnail img{
width:100%;
height:280px;
object-fit:cover;
display:block;
transition:.7s ease;
}

/* HIDE BROKEN IMAGES */

img[src=""],
img:not([src]){
display:none !important;
}

/* REMOVE BROKEN IMAGE ICON */

img{
font-size:0;
color:transparent;
}

/* =========================================
   FIREFOX BROKEN IMAGE FIX
========================================= */

img{
max-width:100%;
height:auto;
display:block;
}

/* HIDE BROKEN IMAGE ICON */

img[src=""],
img:not([src]){
display:none !important;
}

/* FIREFOX FIX */

img:-moz-broken{
opacity:0;
}

/* REMOVE INLINE IMAGE GAPS */

.video-thumbnail{
font-size:0;
line-height:0;
}


.video-card{
isolation:isolate;
}


@media(max-width:768px){

body{
font-size:15px;
}

.course-hero-content h1{

font-size:58px;

line-height:.95;

letter-spacing:-3px;

max-width:100%;
}

.premium-heading h2{

font-size:40px;

line-height:1.05;

letter-spacing:-2px;
}

.video-content h3{

font-size:26px;

line-height:1.2;
}

.course-hero-content p,
.premium-heading p,
.video-content p,
.intro-left p,
.elite-section p{

font-size:16px;
line-height:1.8;
}
}