/*=================================================
        SCPM PREMIUM COURSE SECTION
==================================================*/

:root{

--primary:#E1600F;
--primary-dark:#B94B07;
--accent:#FFB347;
--bg:#FFF9F5;
--white:#ffffff;
--text:#1F2937;
--text-light:#64748B;
--border:#F5D8C3;

}

.course-section{

padding:90px 0;

background:linear-gradient(180deg,#FFFDFB,#FFF8F2);

}

.course-container{

width:min(1320px,92%);

margin:auto;

}

.course-grid{

display:grid;

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

gap:30px;

align-items:stretch;

}

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

.course-hub-card{

position:relative;

display:flex;

flex-direction:column;

padding:30px;

background:#fff;

border-radius:22px;

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

overflow:hidden;

transition:.45s;

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

height:100%;

}

/* Top Border */

.course-hub-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

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

}

/* Glow Circle */

.course-hub-card::after{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:rgba(225,96,15,.06);

top:-120px;

right:-120px;

transition:.5s;

}

.course-hub-card:hover{

transform:translateY(-12px);

box-shadow:

0 25px 55px rgba(225,96,15,.18),

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

}

.course-hub-card:hover::after{

transform:scale(1.5);

}

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

.card-icon-box{

width:70px;

height:70px;

border-radius:18px;

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

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:#fff;

margin-bottom:22px;

transition:.4s;

}

.course-hub-card:hover .card-icon-box{

transform:rotate(-8deg) scale(1.08);

}

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

.course-hub-card h3{

font-size:27px;

font-weight:700;

color:var(--text);

margin-bottom:12px;

transition:.35s;

}

.course-hub-card:hover h3{

color:var(--primary);

}

/*==========================
META
==========================*/

.meta-text{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:40px;

background:#FFF2E8;

color:var(--primary);

font-weight:600;

font-size:14px;

margin-bottom:18px;

}

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

.course-desc{

color:var(--text-light);

font-size:15px;

line-height:1.8;

margin-bottom:20px;

flex-grow:1;

min-height:75px;

}

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

.course-fee{

display:flex;

justify-content:space-between;

align-items:center;

background:#FFF8F3;

border:1px dashed #f2c9a6;

padding:15px 18px;

border-radius:15px;

margin-bottom:20px;

}

.course-fee span{

font-size:14px;

color:#666;

}

.course-fee strong{

font-size:24px;

color:var(--primary);

font-weight:700;

} 
/*=================================================
        SCPM PREMIUM BUTTONS
==================================================*/

.course-btn,
.btn-syllabus{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

width:100%;

height:52px;

border-radius:14px;

font-size:15px;

font-weight:600;

text-decoration:none;

transition:.35s;

margin-top:12px;

position:relative;

overflow:hidden;

}

/*==============================
VIEW DETAILS
==============================*/

.course-btn{

background:linear-gradient(135deg,#E1600F,#FF9A2A);

color:#fff;

box-shadow:0 12px 30px rgba(225,96,15,.25);

}

.course-btn:hover{

transform:translateY(-5px);

color:#fff;

box-shadow:0 18px 40px rgba(225,96,15,.35);

}

/* Shine */

.course-btn::before{

content:"";

position:absolute;

top:-60px;

left:-80px;

width:45px;

height:220%;

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

transform:rotate(25deg);

transition:.8s;

}

.course-btn:hover::before{

left:140%;

}

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

.btn-syllabus{

background:#fff;

border:2px solid #E1600F;

color:#E1600F;

}

.btn-syllabus:hover{

background:#E1600F;

color:#fff;

transform:translateY(-5px);

}

/*==============================
ICONS
==============================*/

.course-btn i,
.btn-syllabus i{

transition:.35s;

}

.course-btn:hover i{

transform:translateX(6px);

}

.btn-syllabus:hover i{

transform:rotate(-15deg);

}

/*==============================
PREMIUM RIBBON
==============================*/

.course-ribbon{

position:absolute;

top:18px;

right:-48px;

width:170px;

padding:8px 0;

background:linear-gradient(135deg,#FFB347,#E1600F);

text-align:center;

font-size:12px;

font-weight:700;

letter-spacing:.5px;

color:#fff;

transform:rotate(45deg);

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

}

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

.course-badge{

position:absolute;

left:18px;

top:18px;

background:#FFF2E8;

border:1px solid #F5C7A2;

padding:6px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

color:#E1600F;

}

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

.course-hub-card{

transition:
transform .35s,
box-shadow .35s,
border-color .35s;

}

.course-hub-card:hover{

border-color:#E1600F;

}

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

.card-icon-box{

position:relative;

overflow:hidden;

}

.card-icon-box::after{

content:"";

position:absolute;

width:180px;

height:180px;

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

top:-160px;

left:-160px;

transform:rotate(35deg);

transition:.8s;

}

.course-hub-card:hover .card-icon-box::after{

left:140%;

top:140%;

}

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

.course-hub-card h3{

transition:.35s;

}

.course-hub-card:hover h3{

letter-spacing:.4px;

}

/*==============================
META
==============================*/

.meta-text{

transition:.35s;

}

.course-hub-card:hover .meta-text{

background:#E1600F;

color:#fff;

}

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

.course-hub-card:hover .course-desc{

color:#444;

}

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

.course-btn:active,
.btn-syllabus:active{

transform:scale(.97);

}

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

.btn-syllabus i{

font-size:16px;

}

/*==============================
CARD FOOTER GAP
==============================*/

.course-btn{

margin-top:auto;

}

.btn-syllabus{

margin-top:10px;

}

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

@media(max-width:768px){

.course-btn,
.btn-syllabus{

height:48px;

font-size:14px;

}

.course-ribbon{

display:none;

}

}
/*=================================================
        SCPM PREMIUM EFFECTS
==================================================*/

/* Floating Animation */

.course-hub-card{

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

}

.course-hub-card:nth-child(even){

animation-delay:.5s;

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

/* Hover Lift */

.course-hub-card:hover{

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

}

/* Background Blur */

.course-hub-card{

backdrop-filter:blur(12px);

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

}

/* Shine */

.course-hub-card::before{

background:

linear-gradient(

90deg,

#E1600F,

#FF9933,

#FFD59E

);

}

/* Glow */

.course-hub-card::after{

filter:blur(30px);

opacity:.5;

}

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

.card-icon-box{

box-shadow:

0 10px 25px rgba(225,96,15,.25);

}

.course-hub-card:hover .card-icon-box{

box-shadow:

0 18px 35px rgba(225,96,15,.35);

}

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

.course-hub-card h3{

line-height:1.3;

}

.course-hub-card:hover h3{

text-shadow:

0 8px 15px rgba(225,96,15,.18);

}

/*==================================
META
==================================*/

.meta-text{

justify-content:center;

width:fit-content;

}

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

.course-desc{

display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

overflow:hidden;

}

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

.course-fee{

transition:.35s;

}

.course-hub-card:hover .course-fee{

background:#FFF2E8;

}

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

.course-btn,

.btn-syllabus{

letter-spacing:.4px;

}

.course-btn:hover{

background:

linear-gradient(

135deg,

#B94B07,

#E1600F

);

}

.btn-syllabus:hover{

border-color:#B94B07;

}

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

.course-image{

overflow:hidden;

border-radius:18px;

margin-bottom:20px;

}

.course-image img{

width:100%;

display:block;

transition:.5s;

}

.course-hub-card:hover img{

transform:scale(1.08);

}

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

.course-hub-card{

opacity:0;

animation:

fadeCard .8s forwards,

cardFloat 5s ease-in-out infinite;

}

.course-hub-card:nth-child(1){animation-delay:.1s;}
.course-hub-card:nth-child(2){animation-delay:.2s;}
.course-hub-card:nth-child(3){animation-delay:.3s;}
.course-hub-card:nth-child(4){animation-delay:.4s;}
.course-hub-card:nth-child(5){animation-delay:.5s;}
.course-hub-card:nth-child(6){animation-delay:.6s;}
.course-hub-card:nth-child(7){animation-delay:.7s;}
.course-hub-card:nth-child(8){animation-delay:.8s;}
.course-hub-card:nth-child(9){animation-delay:.9s;}

@keyframes fadeCard{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

.course-grid{

align-items:stretch;

}

.course-hub-card{

display:flex;

flex-direction:column;

}

.course-desc{

flex-grow:1;

}

.course-btn{

margin-top:auto;

}

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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#E1600F;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#FFF4EA;

}

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

@media(max-width:992px){

.course-grid{

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

gap:24px;

}

}

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

@media(max-width:768px){

.course-grid{

grid-template-columns:1fr;

}

.course-hub-card{

padding:24px;

}

.card-icon-box{

width:60px;

height:60px;

font-size:24px;

}

.course-hub-card h3{

font-size:24px;

}

.meta-text{

font-size:13px;

}

.course-desc{

font-size:14px;

min-height:auto;

}

.course-fee strong{

font-size:20px;

}

.course-btn,

.btn-syllabus{

height:48px;

font-size:14px;

}

}

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

@media(max-width:480px){

.course-section{

padding:60px 0;

}

.course-hub-card{

border-radius:18px;

padding:20px;

}

.card-icon-box{

width:55px;

height:55px;

font-size:22px;

}

.course-hub-card h3{

font-size:22px;

}

}