/* =========================================================
   SkillWell — Futuristic Glass UI
   Presentation layer only. Existing PHP routes/workflows
   are intentionally untouched.
   ========================================================= */
:root{
  --sw-ink:#0b0b10;
  --sw-muted:#737783;
  --sw-line:rgba(20,20,30,.09);
  --sw-surface:rgba(255,255,255,.72);
  --sw-purple:#7657ff;
  --sw-purple-2:#a98cff;
  --sw-blue:#6ea8ff;
  --sw-shadow:0 24px 70px rgba(21,17,42,.10);
  --sw-radius:24px;
}
html{scroll-behavior:smooth}
body.gray-bg{
  background:
    radial-gradient(circle at 10% 10%,rgba(118,87,255,.055),transparent 28%),
    radial-gradient(circle at 90% 25%,rgba(110,168,255,.05),transparent 25%),
    #f7f7fa !important;
  color:var(--sw-ink);
  -webkit-font-smoothing:antialiased;
}
body.gray-bg .container-xl,body.gray-bg .container-lg{max-width:1240px}
.sw-navbar{
  position:relative;z-index:1000;
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid rgba(20,20,30,.07);
  box-shadow:0 8px 35px rgba(20,20,30,.04);
}
.sw-navbar .navbar{min-height:76px}
.sw-navbar .navbar-brand img{object-fit:contain;max-width:145px}
.sw-navbar .search-box{
  background:rgba(245,245,250,.85)!important;
  border:1px solid rgba(20,20,30,.07)!important;
  border-radius:14px!important;
  box-shadow:none!important;
  overflow:hidden;
}
.sw-navbar .search-box .form-control{
  background:transparent!important;border:0!important;height:44px;
}
.sw-navbar .search-box button{background:transparent!important}
.sw-navbar .btn-sign-up{
  border:0!important;border-radius:12px!important;
  color:#fff!important;background:linear-gradient(135deg,#6d4cff,#8e6bff)!important;
  box-shadow:0 10px 24px rgba(111,76,255,.22);
}
.sw-navbar .btn-sign-in{border:0!important;background:transparent!important}
.sw-navbar .menu-icon-box a,.sw-navbar .main-nav-wrap a{transition:.2s ease}
.sw-navbar .menu-icon-box a:hover{transform:translateY(-1px)}
.sw-navbar .main-nav-wrap>ul>li>a{font-weight:600}

.sw-hero{
  position:relative;min-height:690px;display:flex;align-items:center;
  overflow:hidden;background:#07070b;color:#fff;
}
.sw-hero-media,.sw-hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.sw-hero-media{opacity:.62;filter:saturate(.82) contrast(1.08)}
.sw-hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,5,9,.98) 0%,rgba(5,5,9,.83) 38%,rgba(5,5,9,.28) 74%,rgba(5,5,9,.52) 100%);
}
.sw-hero-grid{
  position:absolute;inset:0;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}
.sw-hero-glow{position:absolute;border-radius:999px;filter:blur(80px);z-index:1;pointer-events:none}
.sw-hero-glow-one{width:360px;height:360px;right:10%;top:10%;background:rgba(112,77,255,.28)}
.sw-hero-glow-two{width:260px;height:260px;left:38%;bottom:-100px;background:rgba(67,137,255,.2)}
.sw-hero-content{position:relative;z-index:3}
.sw-hero-copy{max-width:650px;padding:88px 0}
.sw-eyebrow,.sw-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.16em;
  color:#b9aaff;
}
.sw-pulse{width:7px;height:7px;border-radius:50%;background:#9a80ff;box-shadow:0 0 18px #8c6cff}
.sw-hero h1{font-size:clamp(56px,7vw,96px);line-height:.93;letter-spacing:-.065em;margin:22px 0 25px;font-weight:800}
.sw-hero h1 span{
  background:linear-gradient(100deg,#fff 5%,#b79fff 48%,#72a9ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sw-hero-copy>p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.68);max-width:560px;margin-bottom:26px}
.sw-hero-search{
  display:flex;align-items:center;max-width:610px;padding:7px 7px 7px 18px;
  border:1px solid rgba(255,255,255,.15);border-radius:17px;
  background:rgba(255,255,255,.09);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.sw-hero-search>i{color:rgba(255,255,255,.55)}
.sw-hero-search input{
  flex:1;border:0!important;outline:0!important;background:transparent!important;
  color:#fff!important;padding:11px 14px;font-size:15px;
}
.sw-hero-search input::placeholder{color:rgba(255,255,255,.48)}
.sw-hero-search button{
  border:0;border-radius:12px;padding:12px 18px;font-weight:700;color:#fff;
  background:#fff;color:#17131f;white-space:nowrap;
}
.sw-hero-actions{display:flex;gap:12px;margin-top:16px}
.sw-btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 19px;border-radius:13px;
  font-weight:700;text-decoration:none!important;transition:.25s ease;
}
.sw-btn-primary{background:linear-gradient(135deg,#7352ff,#9b79ff);color:#fff!important;box-shadow:0 14px 35px rgba(111,76,255,.3)}
.sw-btn-ghost{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff!important;backdrop-filter:blur(12px)}
.sw-btn:hover{transform:translateY(-2px)}
.sw-hero-trust{display:flex;gap:30px;margin-top:34px}
.sw-hero-trust div{padding-right:28px;border-right:1px solid rgba(255,255,255,.13)}
.sw-hero-trust div:last-child{border:0}
.sw-hero-trust strong{display:block;font-size:21px;letter-spacing:-.03em}
.sw-hero-trust strong span{font-size:12px;color:#a99bff}
.sw-hero-trust small{display:block;color:rgba(255,255,255,.46);margin-top:4px}
.sw-hero-float{
  position:absolute;z-index:4;right:6%;bottom:16%;display:flex;align-items:center;gap:13px;
  padding:12px 17px 12px 12px;border:1px solid rgba(255,255,255,.14);
  border-radius:17px;background:rgba(12,12,18,.58);backdrop-filter:blur(20px);
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}
.sw-hero-float b,.sw-hero-float small{display:block}
.sw-hero-float b{font-size:13px}.sw-hero-float small{color:rgba(255,255,255,.48);font-size:11px;margin-top:3px}
.sw-play{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#fff;color:#14121a;font-size:12px}
.sw-scroll-cue{position:absolute;z-index:4;right:28px;bottom:24px;color:rgba(255,255,255,.4);font-size:10px;letter-spacing:.12em;text-transform:uppercase;writing-mode:vertical-rl}
.sw-scroll-cue span{display:block;width:1px;height:38px;background:rgba(255,255,255,.3);margin-bottom:8px}

/* ==========================================================
   SKILLWELL FUTURISTIC HERO
   ========================================================== */

.sw-hero {
    position: relative;
    min-height: 690px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #08080c;
    color: #ffffff;
}

/* Hero Image */

.sw-hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sw-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    filter: saturate(.92) contrast(1.04);
}

/* Dark gradient */

.sw-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,9,.97) 0%,
            rgba(5,5,9,.88) 32%,
            rgba(5,5,9,.48) 60%,
            rgba(5,5,9,.28) 100%
        );

    z-index: 1;
}

/* Futuristic grid */

.sw-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 2;

    opacity: .08;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    pointer-events: none;
}

/* Purple glow */

.sw-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 2;
}

.sw-hero-glow-one {
    width: 360px;
    height: 360px;

    right: 8%;
    top: 5%;

    background: rgba(115, 75, 255, .28);
}

.sw-hero-glow-two {
    width: 280px;
    height: 280px;

    left: 38%;
    bottom: -130px;

    background: rgba(65, 130, 255, .18);
}

/* Content */

.sw-hero-content {
    position: relative;
    z-index: 5;
}

.sw-hero-copy {
    max-width: 650px;
    padding: 90px 0;
}

/* Eyebrow */

.sw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;

    color: #b7a4ff;
}

.sw-pulse {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #9275ff;

    box-shadow:
        0 0 8px #9275ff,
        0 0 20px #9275ff;
}

/* Heading */

.sw-hero h1 {
    margin: 22px 0 24px;

    font-size: clamp(58px, 7vw, 96px);

    line-height: .93;

    letter-spacing: -.065em;

    font-weight: 800;
}

.sw-hero h1 span {
    background:
        linear-gradient(
            100deg,
            #ffffff 5%,
            #b99cff 48%,
            #70a7ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

/* Subtitle */

.sw-hero-copy > p {
    max-width: 560px;

    margin-bottom: 26px;

    font-size: 18px;

    line-height: 1.65;

    color: rgba(255,255,255,.68);
}

/* Search */

.sw-hero-search {
    display: flex;
    align-items: center;

    max-width: 610px;

    padding: 7px 7px 7px 18px;

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

    border-radius: 17px;

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

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

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

.sw-hero-search > i {
    color: rgba(255,255,255,.55);
}

.sw-hero-search input {
    flex: 1;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #fff !important;

    padding: 11px 14px;

    font-size: 15px;
}

.sw-hero-search input::placeholder {
    color: rgba(255,255,255,.45);
}

.sw-hero-search button {
    border: 0;

    border-radius: 12px;

    padding: 12px 18px;

    font-weight: 700;

    background: #ffffff;

    color: #17131f;

    white-space: nowrap;

    transition: .25s ease;
}

.sw-hero-search button:hover {
    transform: translateY(-1px);
}

/* Buttons */

.sw-hero-actions {
    display: flex;

    gap: 12px;

    margin-top: 16px;
}

.sw-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 19px;

    border-radius: 13px;

    font-weight: 700;

    text-decoration: none !important;

    transition: .25s ease;
}

.sw-btn:hover {
    transform: translateY(-2px);
}

.sw-btn-primary {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #7352ff,
            #9b79ff
        );

    box-shadow:
        0 14px 35px
        rgba(111,76,255,.30);
}

.sw-btn-ghost {
    color: #ffffff !important;

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

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

    backdrop-filter: blur(12px);
}

/* Statistics */

.sw-hero-trust {
    display: flex;

    gap: 28px;

    margin-top: 34px;
}

.sw-hero-trust div {
    padding-right: 25px;

    border-right:
        1px solid
        rgba(255,255,255,.13);
}

.sw-hero-trust div:last-child {
    border-right: 0;
}

.sw-hero-trust strong {
    display: block;

    font-size: 21px;

    letter-spacing: -.03em;
}

.sw-hero-trust strong span {
    font-size: 12px;

    color: #a99bff;
}

.sw-hero-trust small {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.46);
}

/* Floating Card */

.sw-hero-float {
    position: absolute;

    z-index: 6;

    right: 6%;
    bottom: 14%;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 12px 17px 12px 12px;

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

    border-radius: 17px;

    background:
        rgba(12,12,18,.60);

    backdrop-filter: blur(20px);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.28);
}

.sw-play {
    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 13px;

    background: #fff;

    color: #14121a;

    font-size: 12px;
}

.sw-hero-float b,
.sw-hero-float small {
    display: block;
}

.sw-hero-float b {
    font-size: 13px;
}

.sw-hero-float small {
    margin-top: 3px;

    font-size: 11px;

    color: rgba(255,255,255,.48);
}

/* ==========================================================
   SKILLWELL HERO — MOVE CONTENT LEFT
   ========================================================== */

.sw-hero {
    position: relative;
    overflow: hidden;
}


/* Main hero content */

.sw-hero-content {
    position: relative;
    z-index: 5;

    /* Move complete content group toward the left */
    transform: translateX(-105px);
}


/* Search bar */

.sw-hero-content .sw-hero-search {
    width: 555px;
}


/* Buttons */

.sw-hero-content .sw-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* Stats */

.sw-hero-content .sw-hero-stats {
    margin-top: 28px;
}


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

@media (min-width: 1400px) {

    .sw-hero-content {
        transform: translateX(-200px);
    }

}


/* ==========================================================
   LAPTOP
   ========================================================== */

@media (max-width: 1399px) {

    .sw-hero-content {
        transform: translateX(-80px);
    }

}


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

@media (max-width: 991px) {

    .sw-hero-content {
        transform: none;
    }

    .sw-hero-content .sw-hero-search {
        width: 100%;
        max-width: 550px;
    }

}


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

@media (max-width: 767px) {

    .sw-hero-content {
        transform: none;
    }

    .sw-hero-content .sw-hero-search {
        width: 100%;
    }

}

.home-fact-area{
  position:relative;z-index:5;margin:-48px auto 0;max-width:1120px;padding:0 15px;background:transparent;
}
.home-fact-area .container-lg{padding:0}
.home-fact-area .row{
  border:1px solid rgba(20,20,30,.08);border-radius:22px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(20px);
  box-shadow:0 25px 70px rgba(27,22,55,.09);padding:10px 0;
}
.home-fact-box{padding:20px 22px!important;align-items:center}
.home-fact-box>i{color:#7759ff!important;font-size:21px!important;margin-right:15px!important}
.home-fact-box h4{font-size:14px!important;font-weight:750!important;margin-bottom:5px!important}
.home-fact-box p{font-size:12px!important;color:#858894!important;margin:0!important}

.sw-category-section{padding:88px 0 34px}
.sw-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}
.sw-section-head h2{font-size:36px;letter-spacing:-.045em;margin:7px 0 4px;font-weight:800}
.sw-section-head p{color:#81838c;margin:0}
.sw-section-head>a{font-weight:700;color:#6246e8;text-decoration:none}
.sw-category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sw-category-card{
  position:relative;min-height:145px;padding:20px;border-radius:20px;
  border:1px solid var(--sw-line);background:rgba(255,255,255,.7);
  box-shadow:0 10px 35px rgba(20,18,35,.045);transition:.25s ease;overflow:hidden;
}
.sw-category-card:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle,rgba(118,87,255,.13),transparent 58%);opacity:0;transition:.3s}
.sw-category-card:hover{transform:translateY(-5px);box-shadow:var(--sw-shadow);border-color:rgba(118,87,255,.18)}
.sw-category-card:hover:before{opacity:1}
.sw-category-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#f0edff;color:#7657ff;font-size:17px;margin-bottom:18px}
.sw-category-name{display:block;font-size:14px;font-weight:750;color:#181821}
.sw-category-count{display:block;font-size:11px;color:#9899a2;margin-top:4px}
.sw-category-arrow{position:absolute;right:16px;bottom:16px;color:#aaa;font-size:11px}

.course-carousel-area{padding:58px 0 20px}
.course-carousel-title{font-size:30px!important;font-weight:800!important;letter-spacing:-.04em}
.course-box-wrap{padding:7px!important}
/* ==========================================================
   TOP COURSE IMAGE — LARGER PORTRAIT FORMAT
   ========================================================== */

.course-image {
    width: 100% !important;

    /* Increased height */
    height: 330px !important;

    overflow: hidden !important;

    display: flex !important;

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

    background: #f4f4f7 !important;
}


.course-image img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    /*
     * Show the complete photograph.
     * Nothing will be cropped.
     */
    object-fit: contain !important;

    object-position: center center !important;

    transition: transform 0.4s ease !important;
}


/* Subtle hover */

.course-box:hover .course-image img {
    transform: scale(1.02);
}
.course-box:hover .course-image img{transform:scale(1.035)}
.course-details{padding:17px!important}
.course-details .title{font-size:15px!important;line-height:1.35!important;font-weight:750!important}
.course-details .rating i{font-size:11px!important}
.course-details .price{font-size:18px!important;font-weight:800!important;color:#17151c!important}
.course-details .price small{font-size:11px!important;color:#a2a3aa!important;text-decoration:line-through;margin-right:5px}
.badge-sub-warning{border-radius:999px!important;background:#f0edff!important;color:#7256ef!important;padding:6px 9px!important}

/* /* ==========================================================
   SKILLWELL TOP COURSES — FULL IMAGE
   ========================================================== */

.sw-course-card {
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(20, 20, 30, 0.07);
    box-shadow: 0 15px 45px rgba(25, 20, 50, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sw-course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 65px rgba(25, 20, 50, 0.11);
}


/* Course image container */

.sw-course-card .sw-course-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2f2f5;
}


/* Actual image */

.sw-course-card .sw-course-image img {
    width: 100%;
    height: 100%;
    display: block;

    /*
     * IMPORTANT:
     * contain prevents the instructor's head
     * from being cropped.
     */
    object-fit: contain;

    object-position: center center;

    background: #f2f2f5;

    transition: transform 0.4s ease;
}


/* Subtle zoom on hover */

.sw-course-card:hover .sw-course-image img {
    transform: scale(1.02);
}


/* Course information */

.sw-course-card .sw-course-content {
    padding: 18px 18px 15px;
}


/* Course title */

.sw-course-card .sw-course-title {
    margin: 0 0 14px;

    font-size: 16px;
    line-height: 1.35;
    font-weight: 750;

    color: #17151d;
}


/* Rating */

.sw-course-rating {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    font-size: 13px;
}

.sw-course-rating .stars {
    color: #ffb52b;
    letter-spacing: 1px;
}

.sw-course-rating .rating-number {
    color: #292933;
    font-weight: 600;
}

.sw-course-rating .reviews {
    color: #8c8d96;
}


/* Course information row */

.sw-course-info {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 15px;

    color: #777984;

    font-size: 12px;
}

.sw-course-info span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sw-course-info i {
    color: #383942;
}


/* Level */

.sw-course-level {
    display: inline-flex;

    padding: 6px 11px;

    border-radius: 999px;

    background: #f0ebff;

    color: #7657ff;

    font-size: 11px;
    font-weight: 700;
}


/* Bottom price area */

.sw-course-card .sw-course-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 58px;

    padding: 0 18px;

    border-top: 1px solid rgba(20, 20, 30, 0.07);
}


/* Instructor */

.sw-course-instructor {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.sw-course-instructor img {
    width: 34px !important;
    height: 34px !important;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    object-fit: cover !important;

    background: #eeeeee;
}

.sw-course-instructor span {
    max-width: 100px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #53545d;

    font-size: 11px;
    font-weight: 600;
}


/* Price */

.sw-course-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.sw-course-price del {
    color: #a5a6ad;
    font-size: 10px;
}

.sw-course-price strong {
    color: #17151d;

    font-size: 19px;
    font-weight: 800;
}


/* Desktop */

@media (min-width: 1200px) {

    .sw-course-grid {
        display: grid;

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

        gap: 18px;
    }

}


/* Tablet */

@media (max-width: 1199px) {

    .sw-course-grid {
        display: grid;

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

        gap: 18px;
    }

}


/* Small tablet */

@media (max-width: 991px) {

    .sw-course-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* Mobile */

@media (max-width: 575px) {

    .sw-course-grid {
        grid-template-columns: 1fr;
    }

    .sw-course-card .sw-course-content {
        padding: 16px;
    }

}
.footer-area{
  margin-top:90px!important;background:#0b0b10!important;color:#fff!important;
  border-top:1px solid rgba(255,255,255,.07);padding-top:62px!important;
}
.footer-area .text-muted,.footer-area .link-secondary{color:rgba(255,255,255,.48)!important}
.footer-area h5{color:#fff!important;font-size:12px!important;letter-spacing:.1em;text-transform:uppercase}
.footer-area a:hover{color:#fff!important}
.footer-area .border-top{border-color:rgba(255,255,255,.08)!important}

.modal-content{border:1px solid rgba(20,20,30,.08)!important;border-radius:20px!important;box-shadow:0 30px 90px rgba(20,15,40,.2)!important;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,#6e4dff,#9675ff)!important;border:0!important;border-radius:11px!important;box-shadow:0 10px 24px rgba(110,77,255,.18)}
.form-control{border-radius:12px!important;border-color:rgba(20,20,30,.1)!important}
.form-control:focus{border-color:#8a70ff!important;box-shadow:0 0 0 4px rgba(118,87,255,.1)!important}

@media(max-width:991px){
  .sw-hero{min-height:640px}.sw-hero-copy{padding:72px 25px}.sw-hero-float{right:4%;bottom:7%}
  .sw-category-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .sw-hero{min-height:720px}.sw-hero:after{background:linear-gradient(90deg,rgba(5,5,9,.96),rgba(5,5,9,.72))}
  .sw-hero-copy{padding:55px 10px}.sw-hero h1{font-size:58px}
  .sw-hero-copy>p{font-size:15px}.sw-hero-search{max-width:100%}.sw-hero-search button{padding:11px 12px}
  .sw-hero-trust{gap:14px}.sw-hero-trust div{padding-right:14px}.sw-hero-trust strong{font-size:17px}
  .sw-hero-float{display:none}.sw-scroll-cue{display:none}
  .home-fact-area{margin:-28px 10px 0}.home-fact-area .row{padding:6px 5px}
  .home-fact-box{padding:13px 10px!important}.home-fact-box>i{font-size:17px!important}
  .sw-section-head{display:block}.sw-section-head>a{display:inline-block;margin-top:12px}
  .sw-section-head h2{font-size:30px}.sw-category-grid{grid-template-columns:repeat(2,1fr)}
  .sw-category-card{min-height:128px}.course-carousel-area{padding-top:42px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.sw-category-card,.course-box,.sw-btn{transition:none!important}
}

/* ---- Inner-page polish: course discovery, course detail, auth, profile, cart ---- */
.category-header-area,.course-header-area{
  position:relative!important;overflow:hidden!important;
  background:linear-gradient(135deg,#0b0a12,#17142b)!important;
  color:#fff!important;border:0!important;
}
.category-header-area:after,.course-header-area:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 30%,rgba(125,94,255,.28),transparent 34%),
             radial-gradient(circle at 20% 90%,rgba(75,142,255,.12),transparent 32%);
}
.category-header-area .container,.category-header-area .container-lg,
.course-header-area .container,.course-header-area .container-lg{position:relative;z-index:2}
.category-header-area{padding:58px 0!important;min-height:190px}
.category-header-area .breadcrumb{background:transparent!important}
.category-header-area .breadcrumb a{color:rgba(255,255,255,.62)!important}
.category-header-area .breadcrumb-item.active{color:#fff!important}

.category-course-list-area,.cart-list-area,.user-dashboard-area{padding:65px 0!important}
.filter-area .card,.filter-area .card-body,.user-dashboard-sidebar,.user-dashboard-area form{
  border:1px solid rgba(20,20,30,.08)!important;border-radius:20px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:0 18px 55px rgba(24,20,45,.055)!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.filter-area .card{padding:5px!important}
.filter_type{border-bottom:1px solid rgba(20,20,30,.06);padding-bottom:18px}
.filter_type:last-child{border-bottom:0}
.filter_type h5{font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
.course-header-area{padding:90px 0 125px!important}
.course-header-area .title{font-size:clamp(34px,4vw,58px)!important;line-height:1.02!important;letter-spacing:-.05em!important;font-weight:800!important}
.course-header-area .subtitle{font-size:17px!important;color:rgba(255,255,255,.62)!important;line-height:1.65!important}
.course-header-area .rating-row{color:rgba(255,255,255,.72)}
.course-header-area .created-row a{color:#b9a5ff!important}
.course-header-area .course-badge{border-radius:999px!important;padding:7px 11px!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.12)}
.course-header-area + .course-content-area .card,
.course-header-area + .course-content-area .course-content{
  border-radius:20px!important;border:1px solid rgba(20,20,30,.08)!important;
}
.course-header-area .course-preview-box{
  border-radius:22px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.28)!important;
}
.course-header-area .course-preview-box img{display:block}

.sign-up-form{
  padding:30px!important;border-radius:24px!important;
  border:1px solid rgba(20,20,30,.08)!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:0 22px 70px rgba(24,20,45,.08)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.category-course-list-area h1{letter-spacing:-.045em!important;font-weight:800!important}
.category-course-list-area .input-group-text{
  border:1px solid rgba(20,20,30,.08)!important;border-right:0!important;
  border-radius:12px 0 0 12px!important;background:#fff!important;
}
.category-course-list-area .input-group .form-control{border-left:0!important;border-radius:0 12px 12px 0!important}
.sign-up-form .btn.red{background:linear-gradient(135deg,#7355ff,#9274ff)!important;border:0!important;border-radius:12px!important;box-shadow:0 12px 28px rgba(115,85,255,.2)!important}

.user-dashboard-sidebar{overflow:hidden}
.user-dashboard-sidebar .user-box{padding:25px!important;background:linear-gradient(145deg,#0d0c13,#211b3e)!important;color:#fff!important}
.user-dashboard-sidebar .user-box img{border:3px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.user-dashboard-menu{padding:12px!important}
.user-dashboard-menu li a{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:11px;color:#70717a!important;text-decoration:none}
.user-dashboard-menu li.active a,.user-dashboard-menu li a:hover{background:#f0edff;color:#6246e8!important}
.user-dashboard-area form h4{font-weight:800!important;letter-spacing:-.03em}
.user-dashboard-area hr{border-color:rgba(20,20,30,.07)!important}

.cart-list-area .cart-box,.cart-list-area .card{
  border:1px solid rgba(20,20,30,.08)!important;border-radius:20px!important;
  background:rgba(255,255,255,.82)!important;box-shadow:0 18px 55px rgba(24,20,45,.06)!important;
}
.cart-list-area .btn{border-radius:11px!important}
.cart-list-area .category-header-area{margin-bottom:20px}

.course-carousel-area .slick-arrow{
  border-radius:50%!important;border:1px solid rgba(20,20,30,.08)!important;
  background:rgba(255,255,255,.9)!important;box-shadow:0 10px 25px rgba(20,20,30,.08)!important;
}
.course-carousel-area .slick-arrow:hover{background:#f0edff!important;color:#6246e8!important}
.course-popover-content,.webui-popover{border-radius:18px!important;border:1px solid rgba(20,20,30,.08)!important;box-shadow:0 25px 75px rgba(20,15,40,.14)!important}

@media(max-width:767px){
  .category-course-list-area,.cart-list-area,.user-dashboard-area{padding:40px 0!important}
  .course-header-area{padding:55px 0 90px!important}
  .course-header-area .title{font-size:37px!important}
  .sign-up-form{padding:20px!important}
}

/* ==========================================================
   COURSE BUNDLES — ONE CONSISTENT DESIGN
   ========================================================== */

.sw-bundles-section {
    padding: 60px 0 30px;
}

.sw-bundle-grid {
    display: grid;

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

    gap: 18px;
}


/* Every bundle has EXACTLY the same shape */

.sw-bundle-card {
    border:
        1px solid
        rgba(20,20,30,.08);

    border-radius: 22px !important;

    overflow: hidden;

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

    box-shadow:
        0 15px 50px
        rgba(24,20,45,.065);

    transition: .25s ease;
}

.sw-bundle-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 65px
        rgba(24,20,45,.11);
}


/* Bundle heading */

.sw-bundle-top {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 22px;

    text-decoration: none !important;

    background:
        linear-gradient(
            135deg,
            #f0edff,
            #faf9ff
        );

    border-bottom:
        1px solid
        rgba(20,20,30,.07);
}

.sw-bundle-label {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

    color: #7657ff;
}

.sw-bundle-top h3 {
    margin: 7px 0 5px;

    color: #17151d;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;
}

.sw-bundle-top p {
    margin: 0;

    color: #858690;

    font-size: 12px;
}


/* Arrow */

.sw-bundle-arrow {
    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    flex: none;

    border-radius: 12px;

    background: #ffffff;

    color: #7657ff;

    box-shadow:
        0 8px 20px
        rgba(40,30,80,.08);
}


/* Courses inside bundle */

.sw-bundle-courses {
    padding: 14px;
}

.sw-bundle-course {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 9px;

    margin-bottom: 8px;

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

    border-radius: 13px;

    background: #ffffff;

    text-decoration: none !important;
}

.sw-bundle-course img {
    width: 52px;
    height: 52px;

    flex: none;

    object-fit: cover;

    border-radius: 10px;
}

.sw-bundle-course-name {
    flex: 1;

    color: #62646d;

    font-size: 12px;

    line-height: 1.35;
}

.sw-bundle-course strong {
    color: #17151d;

    font-size: 12px;

    white-space: nowrap;
}


/* Bottom section */

.sw-bundle-bottom {
    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 12px;

    padding: 15px 16px;

    border-top:
        1px solid
        rgba(20,20,30,.07);
}


/* Stars */

.sw-stars {
    font-size: 12px;

    color: #d6d8de;
}

.sw-stars .filled {
    color: #ffb21c;
}

.sw-stars span {
    margin-left: 4px;

    color: #9698a0;
}


/* Price */

.sw-bundle-price {
    margin-top: 6px;
}

.sw-bundle-price del {
    margin-right: 5px;

    color: #a1a2a9;

    font-size: 11px;
}

.sw-bundle-price strong {
    font-size: 20px;
}


/* Buttons */

.sw-bundle-actions {
    display: flex;

    gap: 7px;
}

.sw-bundle-btn {
    padding: 9px 12px;

    border-radius: 10px;

    font-size: 11px;

    font-weight: 750;

    text-decoration: none !important;
}

.sw-bundle-btn-light {
    color: #5f616b;

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

    background: #ffffff;
}

.sw-bundle-btn-primary {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #7355ff,
            #9274ff
        );

    box-shadow:
        0 9px 20px
        rgba(115,85,255,.18);
}


/* Responsive */

@media(max-width:991px) {

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

}

@media(max-width:767px) {

    .sw-bundle-grid {
        grid-template-columns: 1fr;
    }

    .sw-bundle-bottom {
        display: block;
    }

    .sw-bundle-actions {
        margin-top: 12px;
    }

}
/* ==========================================================
   COURSE PAGE HERO
   ========================================================== */

.course-header-area {
    position: relative;

    padding: 80px 0 110px !important;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0f1020 0%,
            #18142e 40%,
            #261f48 100%
        ) !important;
}

.course-header-area::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(124, 91, 255, 0.28),
            transparent 45%
        );

    pointer-events: none;
}

.course-header-wrap {
    position: relative;

    z-index: 2;
}

/* Title */

.course-header-wrap h1 {
    color: #ffffff !important;

    font-size: 52px !important;

    line-height: 1.1 !important;

    font-weight: 800 !important;

    letter-spacing: -0.04em !important;

    max-width: 700px;
}

/* Description */

.course-header-wrap p {
    color: rgba(255, 255, 255, 0.82) !important;

    max-width: 650px;

    font-size: 17px !important;

    line-height: 1.8 !important;
}

/* Meta information */

.course-header-wrap ul,
.course-header-wrap .course-badge,
.course-header-wrap .created-row {
    color: rgba(255, 255, 255, 0.9) !important;
}

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

.course-sidebar.natural {
    position: sticky !important;

    top: 100px !important;

    border-radius: 28px !important;

    overflow: hidden !important;

    background:
        rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(20px);

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

    border:
        1px solid rgba(117, 87, 255, 0.18) !important;

    box-shadow:
        0 25px 70px rgba(24, 20, 45, 0.15) !important;
}

/* Preview image */

.preview-video-box {
    overflow: hidden !important;
}

.preview-video-box img,
.preview-video-box video {
    width: 100% !important;

    border-radius: 0 !important;
}

/* Price */

.course-sidebar .price {
    font-size: 38px !important;

    font-weight: 800 !important;

    color: #17151d !important;
}

.course-sidebar .price small {
    color: #9a9ba5 !important;

    font-size: 16px !important;
}

/* Buy button */

.course-sidebar .btn-buy-now,
.course-sidebar .big-cart-button,
.course-sidebar .btn-primary {
    width: 100% !important;

    border: none !important;

    border-radius: 14px !important;

    padding: 15px !important;

    background:
        linear-gradient(
            135deg,
            #7355ff,
            #9478ff
        ) !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    box-shadow:
        0 14px 35px rgba(115, 85, 255, 0.3) !important;
}

/* Wishlist */

.course-sidebar .wishlist-btn,
.course-sidebar .add-to-wishlist {
    border-radius: 14px !important;
}

/* Includes section */

.course-sidebar-text-box {
    padding: 24px !important;
}

/* ==========================================================
   WHAT YOU'LL LEARN
   ========================================================== */

.what-you-get-box ul {
    display: grid !important;

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

    gap: 14px !important;
}

.what-you-get-box li {
    padding: 16px !important;

    border-radius: 16px !important;

    background:
        rgba(255, 255, 255, 0.88);

    border:
        1px solid rgba(20, 20, 30, 0.07);
}

@media (max-width: 768px) {
    .what-you-get-box ul {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   CURRICULUM
   ========================================================== */

.course-curriculum-box {
    margin-top: 40px;
}

.course-curriculum-box .lecture-group-wrapper {
    margin-bottom: 18px !important;

    overflow: hidden;

    border-radius: 20px !important;

    background: rgba(255, 255, 255, 0.92) !important;

    border: 1px solid rgba(117, 87, 255, 0.12) !important;

    box-shadow:
        0 10px 35px rgba(24, 20, 45, 0.06) !important;
}

.course-curriculum-box .lecture-group-title {
    padding: 22px 26px !important;

    background:
        linear-gradient(
            135deg,
            rgba(117, 87, 255, 0.08),
            rgba(255, 255, 255, 0.95)
        ) !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    cursor: pointer;
}

.course-curriculum-box .lecture-list {
    padding: 0 !important;
}

.course-curriculum-box .lecture-list li {
    padding: 16px 26px !important;

    border-bottom:
        1px solid rgba(20, 20, 30, 0.06) !important;

    transition: 0.2s ease;
}

.course-curriculum-box .lecture-list li:hover {
    background: rgba(117, 87, 255, 0.05) !important;
}

.course-curriculum-box .lecture-list li:last-child {
    border-bottom: none !important;
}

.course-curriculum-box .preview-label {
    padding: 4px 10px !important;

    border-radius: 999px !important;

    background: rgba(117, 87, 255, 0.12) !important;

    color: #7355ff !important;

    font-size: 11px !important;

    font-weight: 700 !important;
}

/* ==========================================================
   INSTRUCTOR
   ========================================================== */

.created-row {
    padding: 35px !important;

    border-radius: 24px !important;

    background: rgba(255, 255, 255, 0.92) !important;

    border: 1px solid rgba(117, 87, 255, 0.12) !important;

    box-shadow:
        0 15px 45px rgba(24, 20, 45, 0.06) !important;
}

.created-row img {
    width: 110px !important;

    height: 110px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 4px solid rgba(117, 87, 255, 0.12) !important;
}

.created-row h4,
.created-row h5 {
    font-size: 28px !important;

    font-weight: 800 !important;

    color: #17151d !important;
}

.created-row .instructor-stats {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 20px;
}

.created-row .instructor-stats span {
    padding: 10px 16px;

    border-radius: 999px;

    background: rgba(117, 87, 255, 0.08);

    color: #7355ff;

    font-weight: 600;
}

/* ==========================================================
   REVIEWS
   ========================================================== */

.student-feedback-box {
    padding: 40px !important;

    border-radius: 28px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.95),
            rgba(248, 247, 255, 0.92)
        ) !important;

    border: 1px solid rgba(117, 87, 255, 0.12) !important;

    box-shadow:
        0 18px 55px rgba(24, 20, 45, 0.08) !important;
}

/* Overall rating */

.student-feedback-box .average-rating {
    font-size: 72px !important;

    font-weight: 800 !important;

    color: #17151d !important;
}

.student-feedback-box .filled {
    color: #ffb41f !important;
}

/* Review cards */

.student-feedback-box .review {
    padding: 24px !important;

    margin-bottom: 18px !important;

    border-radius: 20px !important;

    background: rgba(255, 255, 255, 0.96) !important;

    border: 1px solid rgba(20, 20, 30, 0.06) !important;

    transition: 0.25s ease;
}

.student-feedback-box .review:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(24, 20, 45, 0.08);
}

/* Student image */

.student-feedback-box .review img {
    width: 55px !important;

    height: 55px !important;

    border-radius: 50% !important;

    object-fit: cover !important;
}

/* Review text */

.student-feedback-box .review p {
    line-height: 1.8 !important;

    color: #5a5c67 !important;
}