.categories{
    padding:65px 0;
    background:#fff;
}

.categories .container{
    max-width:1320px;
    margin:auto;
    padding:0 15px;
}

/* HEADER */

.categories-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:20px;
    width:100%;
}

.categories-title{
    flex:1;
}

.view-all{
    margin-left:auto;
    white-space:nowrap;
    text-decoration:none;
    color:#5b45ff;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:6px;
}

.categories-title h2{
    font-size:32px;
    font-weight:800;
    color:#18244D;
    margin:0;
    line-height:1.1;
}
.categories-title h2 span{
    color: #5f45ff !important;
}

.categories-title p{
     font-size:15px;
    margin-top:5px;
    color:#6f7893;
}



.view-all i{
    margin-left:6px;
}

/* GRID */

.categories-grid{

    display:grid;

    grid-template-columns:repeat(8,145px);
justify-content:space-between;
gap:14px;

}

/* CARD */

.category-card{

    background:#fff;

    border-radius:14px;

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

    text-align:center;

    padding:18px 10px 16px;
height:155px;

    transition:.3s;

}

.category-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 30px rgba(98,70,255,.15);

}

/* ICON */

.cat-icon{

    width:44px;

    height:44px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 12px;

    color:#fff;

    font-size:18px;

}

.category-card h4{

    font-size:16px;

    line-height:1.2;

    color:#17244d;

    margin:0;

    font-weight:700;

}

.category-card span{

    display:block;


    color:#7d869b;

    font-size:13px;
margin-top:8px;

}
.categories-grid{
    display:grid;
    grid-template-columns:repeat(8,145px);
    gap:14px;
    justify-content:space-between;
}

/* COLORS */

.purple{background:linear-gradient(135deg,#a855f7,#7c3aed);}
.blue{background:linear-gradient(135deg,#33a6ff,#006eff);}
.orange{background:linear-gradient(135deg,#ff8743,#ff5f3a);}
.violet{background:linear-gradient(135deg,#d946ef,#9333ea);}
.red{background:linear-gradient(135deg,#ff5f7b,#ff4444);}
.yellow{background:linear-gradient(135deg,#ffbf32,#ff8a00);}
.sky{background:linear-gradient(135deg,#5fa8ff,#3867ff);}
.green{background:linear-gradient(135deg,#34d399,#22c55e);}
.cyan{
    background:linear-gradient(135deg,#06b6d4,#2563eb);
}

.pink{
    background:linear-gradient(135deg,#ff5ea8,#ec4899);
}

.dark{
    background:linear-gradient(135deg,#0f172a,#334155);
}

/* ==========================
   Responsive
========================== */

/* Laptop */
@media (max-width:1200px){

    .categories-grid{
        grid-template-columns:repeat(5,1fr);
        gap:18px;
    }

}

/* Tablet */
@media (max-width:992px){

    .categories-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .view-all{
        margin-left:0;
    }

    .categories-title h2{
        font-size:34px;
    }

    .categories-grid{
        grid-template-columns:repeat(4,1fr);
        gap:16px;
    }

}

/* Small Tablet */
@media (max-width:768px){

    .categories{
        padding:55px 0;
    }

    .categories-title h2{
        font-size:30px;
    }

    .categories-title p{
        font-size:15px;
    }

    .categories-grid{
        grid-template-columns:repeat(3,1fr);
        gap:15px;
    }

    .category-card{
        padding:18px 12px;
    }

    .category-card h4{
        font-size:17px;
    }

}

/* Mobile */
@media (max-width:576px){

    .categories{
        padding:45px 0;
    }

    .categories-header{
        text-align:center;
        align-items:center;
    }

    .categories-title h2{
        font-size:26px;
    }

    .categories-title p{
        font-size:14px;
    }

    .view-all{
        margin-top:10px;
        justify-content:center;
    }

    .categories-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .category-card{
        padding:16px 10px;
        border-radius:14px;
    }

    .cat-icon{
        width:42px;
        height:42px;
        font-size:17px;
    }

    .category-card h4{
        font-size:16px;
    }

    .category-card span{
        font-size:13px;
    }

}



/*=========================================
 FEATURED COURSES
=========================================*/

.featured-courses{
    padding: 52px 0 !IMPORTANT;
    background:#fff;
}

.fc-container{
    width:92%;
    max-width:1400px;
    margin:auto;
}


/*=========================================
 TOP BAR
=========================================*/

.fc-top{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    margin-bottom:40px;
}
.fc-bottom{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.fc-heading h2{
    font-size:32px;
    font-weight:800;
    color:#121b49;
    line-height:1;
    margin:0;
}
.fc-heading h2 span{
	color: #5f45ff !important;
}


/*=========================================
 FILTER TABS
=========================================*/

.fc-tabs{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.fc-tabs button{

    border:none;
    background:transparent;

    padding:10px 18px;

    border-radius:50px;

    font-size:15px;
    font-weight:600;

    color:#555;

    cursor:pointer;

    transition:.35s;
}

.fc-tabs button:hover{

    color:#5f43ff;

}

.fc-tabs button.active{

    background:#6C4DFF;

    color:#fff;

    box-shadow:
    0 10px 25px rgba(108,77,255,.25);

}


/*=========================================
 VIEW ALL
=========================================*/

.view-all{

    text-decoration:none;

    color:#5f43ff;

    font-size:16px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.view-all:hover{

    gap:16px;

}


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

.course-grid{

    display:grid;

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

    gap:22px;

}


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

.course-card{

    position:relative;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #edf0f8;

    transition:.35s;

}

.course-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 50px rgba(17,24,39,.10);

}


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

.course-image{

    height:170px;

    overflow:hidden;

    position:relative;

}

.course-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.course-card:hover img{

    transform:scale(1.08);

}


/*=========================================
 BADGES
=========================================*/

.course-badge{

    position:absolute;

    top:12px;

    left:12px;

    z-index:5;

    padding:6px 14px;

    border-radius:40px;

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.3px;

}

.course-badge.bestseller{

    background:#ff7f27;

}

.course-badge.trending{

    background:#6c4dff;

}

.course-badge.new{

    background:#26c281;

}

.course-badge.popular{

    background:#ffbf00;

    color:#111;

}

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

.course-content{
    padding:18px;
}


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

.course-content h3{

    font-size:18px;
    font-weight:700;
    line-height:1.4;

    color:#111827;

    margin:0 0 16px;

    /*min-height:62px;*/

    transition:.3s;

}

.course-card:hover h3{

    color:#5f43ff;

}


/*=========================================
 AUTHOR + RATING
=========================================*/

.course-author{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    /*margin-bottom:18px;*/

}






/*=========================================
 RATING
=========================================*/

.rating{

    display:flex;

    align-items:center;

    gap:4px;

    white-space:nowrap;

}

.rating i{

    color:#ffb400;

    font-size:15px;

}

.rating span{

    font-size:15px;

    font-weight:700;

    color:#111827;

}

.rating small{

    color:#8b93a7;

    font-size:13px;

}


/*=========================================
 PRICE
=========================================*/

.price-row{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.new-price{

    color:#e91e63;

    font-size:22px;

    font-weight:800;

}

.old-price{

    color:#9ca3af;

    text-decoration:line-through;

    font-size:18px;

    font-weight:600;

}


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

.course-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    padding-top:16px;

    border-top:1px solid #edf0f8;

}

.course-footer span{

    display:flex;

    align-items:center;

    gap:7px;

    color:#6b7280;

    font-size:14px;

    font-weight:600;

}

.course-footer i{

    color:#5f43ff;

    font-size:14px;

}


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

.course-card{

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

}

.course-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 55px rgba(0,0,0,.08);

}

.course-card:hover .course-image img{

    transform:scale(1.08);

}


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

.course-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        transparent 60%
    );

    opacity:0;

    transition:.4s;

}

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

    opacity:1;

}


/*=========================================
 TRANSITIONS
=========================================*/

.course-card *,
.course-card img{

    transition:.35s;

}

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

/* ---------- Large Laptop ---------- */

@media (max-width:1300px){

    .course-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


/* ---------- Tablet ---------- */

@media (max-width:992px){

    .featured-courses{
        padding:70px 0;
    }

    .fc-top{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .fc-heading h2{
        font-size:36px;
    }

    .course-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

}


/* ---------- Mobile ---------- */

@media (max-width:768px){

    .featured-courses{
        padding:50px 0;
    }

    .fc-container{
        width:94%;
    }

    /* Heading */

    .fc-top{
        gap:16px;
        margin-bottom:25px;
    }

    .fc-heading h2{
        font-size:30px;
    }

    /* Tabs */

.fc-tabs{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    width:100%;
    overflow:visible;
}

    .fc-tabs::-webkit-scrollbar{
        display:none;
    }

 .fc-tabs button{
    width:100%;
	 background: #C1C0C0;
    color: #fff;
    box-shadow: 0 10px 25px rgb(202 202 202 / 25%);
}

    .view-all{

        font-size:15px;

    }

    /* Cards */

    .course-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .course-card{

        border-radius:18px;

    }

    .course-image{

        height:210px;

    }

    .course-content{

        padding:18px;

    }

    .course-content h3{

        font-size:20px;

        min-height:auto;

        margin-bottom:14px;

    }



    .rating span{

        font-size:14px;

    }

    .rating small{

        font-size:12px;

    }

    .new-price{

        font-size:24px;

    }

    .old-price{

        font-size:15px;

    }

    .course-footer{

        flex-wrap:wrap;

        gap:10px;

    }

    .course-footer span{

        font-size:13px;

    }

}


/* ---------- Small Mobile ---------- */

.featuredSwiper{
    width:100%;
    padding:10px 0 50px;
}

.featuredSwiper .swiper-slide{
    height:auto;
}

.featuredSwiper .course-card{
    width:100%;
}

.swiper-button-next,
.swiper-button-prev{
    color:#5b43f3;
}

.swiper-pagination-bullet-active{
    background:#5b43f3;
}

/* =========================================
   FEATURED COURSES - SWIPER ARROWS FIX
   ========================================= */

.featuredSwiper {
    position: relative;
}

/* Common Arrow */
.featuredSwiper .swiper-button-prev,
.featuredSwiper .swiper-button-next {
    width: 42px;
    height: 42px;

    background: #ffffff;
    border: 1px solid #e8e8f2;
    border-radius: 50%;

    box-shadow: 0 6px 20px rgba(20, 20, 60, 0.12);

    color: #6246ff;

    top: 50%;
    margin-top: 0;

    transform: translateY(-50%);

    z-index: 20;
}

/* Arrow Icon */
.featuredSwiper .swiper-button-prev::after,
.featuredSwiper .swiper-button-next::after {
    font-size: 17px;
    font-weight: 800;
}

/* Left Arrow */
.featuredSwiper .swiper-button-prev {
    left: 8px;
}

/* Right Arrow */
.featuredSwiper .swiper-button-next {
    right: 8px;
}

/* Hover */
.featuredSwiper .swiper-button-prev:hover,
.featuredSwiper .swiper-button-next:hover {
    background: #6246ff;
    color: #ffffff;
    border-color: #6246ff;
}


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

@media (max-width: 768px) {

    .featuredSwiper .swiper-button-prev,
    .featuredSwiper .swiper-button-next {
        width: 36px;
        height: 36px;
    }

    .featuredSwiper .swiper-button-prev::after,
    .featuredSwiper .swiper-button-next::after {
        font-size: 14px;
    }

    .featuredSwiper .swiper-button-prev {
        left: 5px;
    }

    .featuredSwiper .swiper-button-next {
        right: 5px;
    }
}

/* =========================================
   FEATURED COURSES
   EQUAL CARD HEIGHT & ALIGNMENT
   ========================================= */

.featuredSwiper .swiper-slide {
    height: auto;
    display: flex;
}

.featuredSwiper .course-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Course content fills equal height */
.featuredSwiper .course-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Same title area for every card */
.featuredSwiper .course-content h3 {
    min-height: 52px;
}

/* Author stays at same position */
.featuredSwiper .course-author {
    min-height: 42px;
}

/* Price stays aligned */
.featuredSwiper .price-row {
    min-height: 48px;
}

/* Footer always at bottom */
.featuredSwiper .course-footer {
    margin-top: auto;
}


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

@media (max-width: 768px) {

    .featuredSwiper .course-content h3 {
        min-height: auto;
    }

    .featuredSwiper .course-author {
        min-height: auto;
    }

    .featuredSwiper .price-row {
        min-height: auto;
    }

}

/* =========================================
   POPULAR CAREER LEARNING PATHS
========================================= */

.career-paths{
    padding: 28px 0 34px !important;
    background:#fff;
}

.career-paths-container{
    max-width:1320px;
    margin:auto;
    padding:0 15px;
}


/* HEADER */

.career-paths-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:16px;
}

.career-paths-title h2{    
    font-size:32px;
    font-weight:800;
    color:#18244D;
    margin:0;
    line-height:1.1;
}
.career-paths-title h2 span{    
    color: #5f45ff !important;
}

.career-paths-title p{
   font-size: 15px;
    margin-top: 5px;
    color: #6f7893;
}


.career-view-all{
    text-decoration: none;
    color: #5f43ff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: .3s;
}

.career-view-all i{
    margin-left: 6px;
}


/* GRID */

.career-paths-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}


/* CARD */

.career-path-card{
    min-height:190px;
    padding:12px 13px 9px;
    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #fbfaff 100%
    );
    border:1px solid #e8e8f1;
    border-radius:9px;
    box-shadow:0 4px 16px rgba(25,25,70,.045);
    display:flex;
    flex-direction:column;
    transition:.3s ease;
}

.career-path-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(91,69,255,.10);
}


/* CARD TITLE */

.career-path-content h3{
    margin:0 0 3px;
    color:#17213f;
    font-size:18px;
    font-weight:800;
    line-height:1.3;
}

.career-path-content p{
    margin:0;
    color:#778097;
    font-size:12px;
    font-weight:500;
}


/* ICONS */

.career-path-icons{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:13px;
}

.career-path-icons span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(20, 20, 60, .08);
    font-size: 22px;
}


/* BRAND ICON COLORS */

.career-path-icons span:nth-child(1){
    color:#ff5722;
}

.career-path-icons span:nth-child(2){
    color:#f7df1e;
}

.career-path-icons span:nth-child(3){
    color:#61dafb;
}

.career-path-icons span:nth-child(4){
    color:#6cc24a;
}

.career-path-icons span:nth-child(5){
    color:#ff9900;
}


/* DIGITAL MARKETING */

.career-path-card:nth-child(2)
.career-path-icons span:nth-child(1){
    color:#e1306c;
}

.career-path-card:nth-child(2)
.career-path-icons span:nth-child(2){
    color:#1877f2;
}

.career-path-card:nth-child(2)
.career-path-icons span:nth-child(3){
    color:#25d366;
}

.career-path-card:nth-child(2)
.career-path-icons span:nth-child(4){
    color:#4285f4;
}


/* DATA SCIENCE */

.career-path-card:nth-child(3)
.career-path-icons span:nth-child(1){
    color:#3776ab;
}

.career-path-card:nth-child(3)
.career-path-icons span:nth-child(2){
    color:#2563eb;
}

.career-path-card:nth-child(3)
.career-path-icons span:nth-child(3){
    color:#7c3aed;
}

.career-path-card:nth-child(3)
.career-path-icons span:nth-child(4){
    color:#111827;
}


/* UI UX */

.career-path-card:nth-child(4)
.career-path-icons span:nth-child(1){
    color:#f24e1e;
}

.career-path-card:nth-child(4)
.career-path-icons span:nth-child(2){
    color:#fa0f00;
}

.career-path-card:nth-child(4)
.career-path-icons span:nth-child(3){
    color:#ffb000;
}

.career-path-card:nth-child(4)
.career-path-icons span:nth-child(4){
    color:#ec4899;
}


/* FOOTER */

.career-path-footer{
    margin-top:auto;
    padding-top:9px;
    border-top:1px solid #eeeeF4;
    display:flex;
    align-items:center;
    justify-content:space-between;
}


/* VIEW PATH */

.career-view-btn{
    height:20px;
    padding:20px 28px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    border:1px solid #d8d1ff;
    border-radius:14px;
    background:#fff;
    color:#5b45ff;
    font-size:16px;
    text-decoration:none;
}

.career-view-btn i {
    font-size: 13px;
    margin-left: 6px;
}

.career-view-btn:hover{
    background:#5b45ff;
    color:#fff;
}


/* RIGHT ARROW */

.career-small-arrow{
    color:#344054;
    font-size:8px;
}

.course-author .enroll-btn{

	height:42px !important;
	box-shadow: 0 2px 14px rgb(91 61 245 / 25%);
}
.course-author .enroll-btn:hover {
    box-shadow: 0 10px 35px rgba(91, 61, 245, .35);
}


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

@media(max-width:992px){

    .career-paths-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

}


@media(max-width:576px){

    .career-paths{
        padding:25px 0 30px;
    }

    .career-paths-header{
        align-items:flex-start;
    }

    .career-paths-title h2{
        font-size:19px;
    }

    .career-paths-title p{
        font-size:10px;
    }

    .career-view-all{
        font-size:9px;
    }

    .career-paths-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .career-path-card{
        min-height:138px;
    }

}