/* =========================================================
   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);
}



/* ==========================================================
   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:after{
    background:linear-gradient(
        180deg,
        rgba(5,5,9,.35) 0%,
        rgba(5,5,9,.55) 55%,
        rgba(5,5,9,.82) 100%
    );
}
  .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;
    }

}

/* ==========================================================
   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
   ========================================================== */

/* Small instructor section */

.created-row {
    margin-top: 20px !important;
    padding: 20px 24px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.created-row img {
    display: none !important;
}

.created-row h4,
.created-row h5,
.created-row p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
}

.created-row a {
    color: #a78bfa !important;
    font-weight: 700 !important;
}

.course-header-area .course-badge {
    padding: 8px 20px !important;

    min-width: auto !important;

    border-radius: 30px !important;

    background: rgba(115, 85, 255, 0.18) !important;

    border: 1px solid rgba(115, 85, 255, 0.6) !important;

    color: #b89cff !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    backdrop-filter: blur(10px) !important;
}

/* ==========================================================
   SKILLWELL — COURSE REVIEWS v2
   Compact / Premium / Isolated
   ========================================================== */

.course-content-area .reviews {
    margin-top: 42px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Reviews heading */
.course-content-area .reviews > h3 {
    margin: 0 0 22px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px;
    color: #181720 !important;
}

/* ==========================================================
   REVIEW LIST
   ========================================================== */

.course-content-area .reviews #myList {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual review card */
.course-content-area .reviews #myList > li {
    margin: 0 0 14px !important;
    padding: 20px 22px !important;

    background: #ffffff !important;

    border: 1px solid rgba(35, 30, 60, 0.075) !important;
    border-radius: 18px !important;

    box-shadow: 0 8px 28px rgba(35, 25, 75, 0.035);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/* Hover */
.course-content-area .reviews #myList > li:hover {
    border-color: rgba(119, 89, 255, 0.22) !important;
    box-shadow: 0 14px 38px rgba(80, 60, 150, 0.075);
    transform: translateY(-1px);
}

/* Bootstrap row */
.course-content-area .reviews #myList > li > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: flex-start !important;
}

/* ==========================================================
   AVATAR
   ========================================================== */

.course-content-area .reviews #myList .col-md-1 {
    padding-left: 0 !important;
    padding-right: 16px !important;
}

.course-content-area .reviews #myList .reviewer-img {
    width: 50px !important;
    height: 50px !important;

    overflow: hidden;

    border-radius: 50% !important;

    border: 2px solid #e7e0ff !important;

    background: #f1eff8;
}

.course-content-area .reviews #myList .reviewer-img img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    display: block;
}

/* ==========================================================
   REVIEW CONTENT
   ========================================================== */

.course-content-area .reviews #myList .col-md-11 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.course-content-area .reviews #myList .review-time {
    margin-bottom: 5px !important;
}

.course-content-area .reviews #myList .reviewer-name {
    margin: 0 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;

    font-weight: 750 !important;

    color: #1b1922 !important;
}

/* Stars */
.course-content-area .reviews #myList .review-details .rating {
    margin-top: 7px !important;
    line-height: 1 !important;
}

.course-content-area .reviews #myList .review-details .rating i {
    font-size: 14px !important;
    margin-right: 3px !important;
}

.course-content-area .reviews #myList .review-details .rating i.filled {
    color: #f5c451 !important;
}

.course-content-area .reviews #myList .review-details .rating i:not(.filled) {
    color: #d9dce4 !important;
}

/* Review text */
.course-content-area .reviews #myList .review-text {
    margin-top: 12px !important;

    font-size: 13px !important;
    line-height: 1.7 !important;

    color: #777985 !important;
}

/* ==========================================================
   LOAD MORE / SHOW LESS
   ========================================================== */

.course-content-area .reviews #loadMore,
.course-content-area .reviews #showLess {

    display: block !important;

    width: auto !important;
    min-width: 150px !important;

    margin: 18px auto 0 !important;
    padding: 11px 24px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #7759ff !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    box-shadow: 0 8px 22px rgba(119, 89, 255, 0.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.course-content-area .reviews #loadMore:hover,
.course-content-area .reviews #showLess:hover {
    background: #6748ef !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(119, 89, 255, 0.28);
}

/* Remove the old <br> spacing */
.course-content-area .reviews #loadMore + br {
    display: none !important;
}

/* Show less sits closer to Load more */
.course-content-area .reviews #showLess {
    margin-top: 8px !important;
}

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

@media (max-width: 767px) {

    .course-content-area .reviews {
        margin-top: 32px !important;
    }

    .course-content-area .reviews > h3 {
        font-size: 21px !important;
        margin-bottom: 18px !important;
    }

    .course-content-area .reviews #myList > li {
        padding: 17px !important;
        border-radius: 16px !important;
    }

    .course-content-area .reviews #myList .col-md-1 {
        width: 58px !important;
        flex: 0 0 58px !important;
        padding-right: 10px !important;
    }

    .course-content-area .reviews #myList .col-md-11 {
        width: calc(100% - 58px) !important;
        flex: 0 0 calc(100% - 58px) !important;
    }

    .course-content-area .reviews #myList .reviewer-img {
        width: 44px !important;
        height: 44px !important;
    }

    .course-content-area .reviews #myList .reviewer-name {
        font-size: 14px !important;
    }

    .course-content-area .reviews #myList .review-text {
        font-size: 12.5px !important;
    }

    .course-content-area .reviews #loadMore,
    .course-content-area .reviews #showLess {
        min-width: 135px !important;
        padding: 10px 20px !important;
    }
}

/* ==========================================================
   SKILLWELL REVIEWS — FINAL COMPACT OVERRIDES
   ========================================================== */

/* Make cards naturally sized */
.course-content-area .reviews #myList > li {
    padding: 18px 20px !important;
    margin-bottom: 12px !important;
    min-height: 0 !important;
}

/* Tighten the internal row */
.course-content-area .reviews #myList > li > .row {
    min-height: 0 !important;
}

/* Avatar column */
.course-content-area .reviews #myList .col-md-1 {
    padding-right: 14px !important;
}

/* Avatar slightly smaller */
.course-content-area .reviews #myList .reviewer-img {
    width: 46px !important;
    height: 46px !important;
}

/* Name */
.course-content-area .reviews #myList .reviewer-name {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

/* Stars closer to name */
.course-content-area .reviews #myList .review-details .rating {
    margin-top: 5px !important;
}

/* Review text closer to stars */
.course-content-area .reviews #myList .review-text {
    margin-top: 9px !important;
    line-height: 1.55 !important;
}

/* Empty reviews should be especially compact */
.course-content-area .reviews #myList .review-details .review-text:empty {
    display: none !important;
}

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

.course-content-area .reviews #loadMore {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

.course-content-area .reviews #showLess {
    margin-top: 7px !important;

    background: transparent !important;
    color: #7759ff !important;

    border: 1px solid rgba(119, 89, 255, 0.25) !important;

    box-shadow: none !important;
}

.course-content-area .reviews #showLess:hover {
    background: rgba(119, 89, 255, 0.06) !important;
    box-shadow: none !important;
}

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

@media (max-width: 767px) {

    .course-content-area .reviews #myList > li {
        padding: 15px !important;
        margin-bottom: 10px !important;
    }

    .course-content-area .reviews #myList .reviewer-img {
        width: 42px !important;
        height: 42px !important;
    }

    .course-content-area .reviews #myList .col-md-1 {
        padding-right: 10px !important;
    }

    .course-content-area .reviews #myList .review-details .rating {
        margin-top: 4px !important;
    }

    .course-content-area .reviews #myList .review-text {
        margin-top: 8px !important;
    }
}

/* ==========================================================
   SKILLWELL — STUDENT FEEDBACK / RATING SUMMARY
   Uses the ACTUAL course_page.php structure
   ========================================================== */

.student-feedback-box {
    margin-top: 42px !important;
    padding: 0 0 12px !important;
}

/* Student feedback heading */
.student-feedback-title {
    margin-bottom: 22px !important;

    font-size: 25px !important;
    line-height: 1.2 !important;

    font-weight: 800 !important;
    letter-spacing: -0.5px;

    color: #181720 !important;
}


/* ==========================================================
   MAIN RATING AREA
   ========================================================== */

.student-feedback-box > .row {
    display: flex !important;
    align-items: center !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

.student-feedback-box > .row > .col-md-12 {
    display: flex !important;
    align-items: center !important;

    width: 100%;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   OVERALL RATING CARD
   ========================================================== */

.student-feedback-box .average-rating {
    float: none !important;

    flex: 0 0 190px !important;

    width: 190px !important;
    min-height: 150px;

    margin: 0 38px 0 0 !important;
    padding: 22px 18px !important;

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

    text-align: center;

    background: #ffffff;

    border: 1px solid rgba(35, 30, 60, 0.10);

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(40, 30, 80, 0.045);
}


/* Big rating number */
.student-feedback-box .average-rating .num {
    margin: 0 !important;

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

    font-weight: 800 !important;

    letter-spacing: -1.5px;

    color: #17151f !important;
}


/* Overall stars */
.student-feedback-box .average-rating .rating {
    position: relative;

    margin: 10px 0 7px !important;

    line-height: 1 !important;
    white-space: nowrap;
}

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

    margin: 0 1px !important;

    color: #f5c451 !important;
}


/* Review count */
.student-feedback-box .average-rating .title {
    margin: 3px 0 0 !important;

    font-size: 13px !important;
    line-height: 1.3 !important;

    font-weight: 700 !important;

    color: #555761 !important;
}


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

.student-feedback-box .individual-rating {
    flex: 1 !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

.student-feedback-box .individual-rating ul {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.student-feedback-box .individual-rating li {
    display: flex !important;
    align-items: center !important;

    width: 100%;

    margin: 0 0 9px !important;
    padding: 0 !important;
}

.student-feedback-box .individual-rating li:last-child {
    margin-bottom: 0 !important;
}


/* Stars on left */
.student-feedback-box .individual-rating li > div:first-child {
    flex: 0 0 78px;

    width: 78px;
}

.student-feedback-box .individual-rating .rating {
    display: block;

    white-space: nowrap;

    line-height: 1 !important;
}

.student-feedback-box .individual-rating .rating i {
    font-size: 11px !important;

    margin: 0 1px 0 0 !important;

    color: #d9dce4 !important;
}

.student-feedback-box .individual-rating .rating i.filled {
    color: #f5c451 !important;
}


/* ==========================================================
   PROGRESS BARS
   ========================================================== */

.student-feedback-box .individual-rating .progress {
    flex: 1 !important;

    height: 7px !important;

    margin: 0 13px !important;

    overflow: hidden;

    border-radius: 999px !important;

    background: #eeeef3 !important;

    box-shadow: none !important;
}

.student-feedback-box .individual-rating .progress-bar {
    height: 100% !important;

    border-radius: 999px !important;

    background: linear-gradient(
        90deg,
        #7759ff,
        #947dff
    ) !important;
}


/* Rating count */
.student-feedback-box .individual-rating li > span {
    flex: 0 0 42px;

    width: 42px;

    padding: 0 !important;

    text-align: right;

    font-size: 12px !important;

    font-weight: 600 !important;

    color: #9698a3 !important;
}


/* ==========================================================
   SUBTLE PURPLE ACCENT
   ========================================================== */

.student-feedback-box .average-rating:hover {
    border-color: rgba(119, 89, 255, 0.20);

    box-shadow: 0 14px 35px rgba(119, 89, 255, 0.08);
}


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

@media (max-width: 991px) {

    .student-feedback-box > .row > .col-md-12 {
        display: block !important;
    }

    .student-feedback-box .average-rating {
        margin: 0 0 25px !important;
    }

    .student-feedback-box .individual-rating {
        width: 100% !important;
    }
}


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

@media (max-width: 767px) {

    .student-feedback-box {
        margin-top: 32px !important;
    }

    .student-feedback-title {
        font-size: 21px !important;
        margin-bottom: 18px !important;
    }

    .student-feedback-box .average-rating {
        width: 180px !important;
        min-height: 145px;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 20px 15px !important;
    }

    .student-feedback-box .average-rating .num {
        font-size: 42px !important;
    }

    .student-feedback-box .average-rating .rating i {
        font-size: 16px !important;
    }

    .student-feedback-box .individual-rating li > div:first-child {
        flex: 0 0 70px;
        width: 70px;
    }

    .student-feedback-box .individual-rating .progress {
        margin-left: 9px !important;
        margin-right: 9px !important;
    }

    .student-feedback-box .individual-rating li > span {
        flex: 0 0 36px;
        width: 36px;
        font-size: 11px !important;
    }
}


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

@media (max-width: 480px) {

    .student-feedback-box .average-rating {
        width: 165px !important;
        min-height: 138px;
    }

    .student-feedback-box .average-rating .num {
        font-size: 38px !important;
    }

    .student-feedback-box .average-rating .rating i {
        font-size: 14px !important;
    }

    .student-feedback-box .individual-rating li > div:first-child {
        flex: 0 0 66px;
        width: 66px;
    }

    .student-feedback-box .individual-rating .rating i {
        font-size: 9px !important;
    }

    .student-feedback-box .individual-rating .progress {
        height: 6px !important;
        margin-left: 7px !important;
        margin-right: 7px !important;
    }
}

/* ==========================================================
   SKILLWELL — ABOUT INSTRUCTOR
   FINAL COMPACT VERSION
   ========================================================== */

.about-instructor-box {
    margin-top: 34px !important;
    margin-bottom: 34px !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}


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

.about-instructor-box .about-instructor-title {
    grid-column: 1 / -1;

    margin: 0 0 4px !important;

    font-size: 25px !important;
    line-height: 1.2 !important;

    font-weight: 800 !important;
    letter-spacing: -0.6px;

    color: #181720 !important;
}


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

.about-instructor-box > .row.justify-content-center {
    grid-column: auto !important;

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

    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;

    margin: 0 !important;
    padding: 15px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid rgba(119, 89, 255, 0.12) !important;

    border-radius: 18px !important;

    box-shadow:
        0 8px 25px rgba(35, 25, 75, 0.045) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Hover */
.about-instructor-box > .row.justify-content-center:hover {
    transform: translateY(-2px);

    border-color: rgba(119, 89, 255, 0.22) !important;

    box-shadow:
        0 14px 32px rgba(80, 60, 150, 0.08) !important;
}


/* ==========================================================
   REMOVE OLD HR
   ========================================================== */

.about-instructor-box > hr {
    display: none !important;
}


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

.about-instructor-box .top-instructor-img {
    flex: 0 0 100px !important;

    width: 100px !important;
    max-width: 100px !important;

    padding: 0 !important;
    margin: 0 15px 0 0 !important;
}


.about-instructor-box .top-instructor-img img {
    display: block !important;

    width: 100px !important;
    height: 100px !important;

    object-fit: cover !important;

    border-radius: 15px !important;

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

    background: #f2f2f5;
}


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

.about-instructor-box .top-instructor-details {
    flex: 1 !important;

    width: auto !important;
    max-width: none !important;

    padding: 0 !important;

    text-align: left !important;

    min-width: 0 !important;
}


/* Instructor name */
.about-instructor-box .top-instructor-details h4 {
    margin: 0 0 5px !important;

    font-size: 17px !important;
    line-height: 1.25 !important;

    font-weight: 750 !important;

    letter-spacing: -0.25px;
}


.about-instructor-box .top-instructor-details h4 a {
    color: #181720 !important;

    text-decoration: none !important;
}


.about-instructor-box .top-instructor-details h4 a:hover {
    color: #7759ff !important;
}


/* Instructor title */
.about-instructor-box .top-instructor-details > p {
    margin: 0 0 7px !important;

    font-size: 11px !important;
    line-height: 1.35 !important;

    font-weight: 600 !important;

    color: #858690 !important;

    /* Prevent long titles from making the card taller */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================
   STATS
   ========================================================== */

.about-instructor-box .top-instructor-details .rating {
    margin: 0 0 7px !important;

    line-height: 1.2 !important;
}


.about-instructor-box .top-instructor-details .rating > div {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    gap: 5px !important;

    white-space: nowrap !important;
}


.about-instructor-box .top-instructor-details .rating span {
    margin: 0 !important;

    font-size: 10px !important;
    line-height: 1.2 !important;

    font-weight: 700 !important;

    color: #777985 !important;
}


/* ==========================================================
   SKILLS
   ========================================================== */

/*
   The screenshot shows a tiny empty-looking badge on the
   instructor cards. Since this section is now compact,
   hide the skill badges rather than allowing empty badges
   to create visual noise.
*/

.about-instructor-box .badge-sub-warning {
    display: none !important;
}


/* ==========================================================
   BIOGRAPHY
   ========================================================== */

.about-instructor-box .top-instructor-details .description {
    margin-top: 5px !important;

    font-size: 10.5px !important;
    line-height: 1.45 !important;

    color: #777985 !important;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


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

.about-instructor-box > .row.justify-content-center:only-of-type {
    grid-column: 1 / -1 !important;
}


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

@media (max-width: 991px) {

    .about-instructor-box {
        grid-template-columns: 1fr !important;
    }

    .about-instructor-box .about-instructor-title {
        grid-column: 1 !important;
    }

    .about-instructor-box > .row.justify-content-center {
        grid-column: 1 !important;
    }
}


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

@media (max-width: 767px) {

    .about-instructor-box {
        margin-top: 28px !important;
        margin-bottom: 28px !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    .about-instructor-box .about-instructor-title {
        font-size: 21px !important;

        margin-bottom: 3px !important;
    }

    .about-instructor-box > .row.justify-content-center {
        height: 150px !important;
        min-height: 150px !important;

        padding: 12px !important;

        border-radius: 16px !important;
    }

    .about-instructor-box .top-instructor-img {
        flex: 0 0 78px !important;

        width: 78px !important;
        max-width: 78px !important;

        margin-right: 12px !important;
    }

    .about-instructor-box .top-instructor-img img {
        width: 78px !important;
        height: 78px !important;

        border-radius: 13px !important;
    }

    .about-instructor-box .top-instructor-details h4 {
        font-size: 15px !important;
    }

    .about-instructor-box .top-instructor-details > p {
        font-size: 10px !important;
    }

    .about-instructor-box .top-instructor-details .description {
        font-size: 10px !important;

        -webkit-line-clamp: 2;
    }
}


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

@media (max-width: 480px) {

    .about-instructor-box > .row.justify-content-center {
        height: 135px !important;
        min-height: 135px !important;
    }

    .about-instructor-box .top-instructor-img {
        flex: 0 0 68px !important;

        width: 68px !important;
        max-width: 68px !important;
    }

    .about-instructor-box .top-instructor-img img {
        width: 68px !important;
        height: 68px !important;
    }
}

/* ==========================================================
   ABOUT INSTRUCTOR — COMPACT FINAL
   ========================================================== */

.about-instructor-box {
    margin-top: 28px !important;
    margin-bottom: 24px !important;
    gap: 14px !important;
}


/* Section title */
.about-instructor-box .about-instructor-title {
    margin: 0 0 2px !important;

    font-size: 24px !important;
    line-height: 1.2 !important;

    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}


/* ==========================================================
   COMPACT CARDS
   ========================================================== */

.about-instructor-box > .row.justify-content-center {
    height: 150px !important;
    min-height: 150px !important;

    padding: 13px !important;

    border-radius: 18px !important;

    box-shadow:
        0 6px 22px rgba(35, 25, 75, 0.035) !important;
}


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

.about-instructor-box .top-instructor-img {
    flex: 0 0 90px !important;

    width: 90px !important;
    max-width: 90px !important;

    margin-right: 14px !important;
}


.about-instructor-box .top-instructor-img img {
    width: 90px !important;
    height: 90px !important;

    border-radius: 14px !important;
}


/* ==========================================================
   NAME
   ========================================================== */

.about-instructor-box .top-instructor-details h4 {
    margin: 0 0 4px !important;

    font-size: 16px !important;
    line-height: 1.25 !important;

    font-weight: 750 !important;
}


/* ==========================================================
   SHORT INTRO
   ========================================================== */

.about-instructor-box .top-instructor-details > p {
    margin: 0 0 6px !important;

    font-size: 10.5px !important;
    line-height: 1.4 !important;

    font-weight: 600 !important;

    color: #858690 !important;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ==========================================================
   STATS
   ========================================================== */

.about-instructor-box .top-instructor-details .rating {
    margin: 0 !important;
}

.about-instructor-box .top-instructor-details .rating > div {
    gap: 4px !important;
}

.about-instructor-box .top-instructor-details .rating span {
    font-size: 9.5px !important;
}


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

.about-instructor-box .top-instructor-details .description {
    margin-top: 6px !important;

    font-size: 10px !important;
    line-height: 1.4 !important;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ==========================================================
   REMOVE EMPTY SKILL PILLS
   ========================================================== */

.about-instructor-box .badge-sub-warning {
    display: none !important;
}


/* ==========================================================
   STUDENT FEEDBACK — BRING IT CLOSER
   ========================================================== */

.about-instructor-box + .student-feedback-box {
    margin-top: 18px !important;
}


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

@media (max-width: 991px) {

    .about-instructor-box {
        gap: 12px !important;
    }

    .about-instructor-box > .row.justify-content-center {
        height: 145px !important;
        min-height: 145px !important;
    }
}


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

@media (max-width: 767px) {

    .about-instructor-box {
        margin-top: 25px !important;
        margin-bottom: 20px !important;

        gap: 10px !important;
    }

    .about-instructor-box .about-instructor-title {
        font-size: 21px !important;
    }

    .about-instructor-box > .row.justify-content-center {
        height: 125px !important;
        min-height: 125px !important;

        padding: 11px !important;

        border-radius: 15px !important;
    }

    .about-instructor-box .top-instructor-img {
        flex: 0 0 72px !important;

        width: 72px !important;
        max-width: 72px !important;

        margin-right: 11px !important;
    }

    .about-instructor-box .top-instructor-img img {
        width: 72px !important;
        height: 72px !important;

        border-radius: 12px !important;
    }

    .about-instructor-box .top-instructor-details h4 {
        font-size: 14px !important;
    }

    .about-instructor-box .top-instructor-details > p {
        font-size: 9.5px !important;
    }

    .about-instructor-box .top-instructor-details .description {
        font-size: 9.5px !important;
    }
}

/* ==========================================================
   SKILLWELL — COMBO COURSES
   ISOLATED HORIZONTAL DESIGN
   ========================================================== */

.sw-course-combos {
    width: 100% !important;

    margin-top: 42px !important;
    margin-bottom: 42px !important;
}


/* Heading */

.sw-course-combos-heading {
    margin-bottom: 18px !important;
}

.sw-course-combos-heading h2 {
    margin: 0 !important;

    color: #181720 !important;

    font-size: 25px !important;
    line-height: 1.2 !important;

    font-weight: 800 !important;

    letter-spacing: -0.6px !important;
}


/* ==========================================================
   MAIN COMBO CARD
   ========================================================== */

.sw-course-combo {
    position: relative !important;

    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;

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

    margin-bottom: 12px !important;
    padding: 10px 14px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid rgba(119,89,255,.12) !important;

    border-radius: 17px !important;

    text-decoration: none !important;

    overflow: hidden !important;

    box-shadow:
        0 7px 24px rgba(35,25,75,.045) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}


.sw-course-combo:hover {
    transform: translateY(-2px) !important;

    border-color: rgba(119,89,255,.25) !important;

    box-shadow:
        0 13px 32px rgba(60,45,120,.08) !important;
}


/* ==========================================================
   THUMBNAIL
   ========================================================== */

.sw-course-combo-image {
    width: 86px !important;
    height: 84px !important;

    min-width: 86px !important;
    max-width: 86px !important;

    flex: 0 0 86px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 12px !important;

    background: #f1effa !important;
}


/* VERY IMPORTANT:
   Override any global image rules */
.sw-course-combo-image img {
    width: 86px !important;
    height: 84px !important;

    min-width: 86px !important;
    min-height: 84px !important;

    max-width: 86px !important;
    max-height: 84px !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 12px !important;

    transform: none !important;
}


.sw-course-combo-placeholder {
    width: 86px !important;
    height: 84px !important;

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

    color: #7759ff !important;

    font-size: 21px !important;
}


/* ==========================================================
   INFORMATION
   ========================================================== */

.sw-course-combo-info {
    min-width: 0 !important;

    flex: 1 1 auto !important;

    padding: 0 18px !important;
}


.sw-course-combo-info h3 {
    margin: 0 0 5px !important;

    color: #181720 !important;

    font-size: 16px !important;
    line-height: 1.25 !important;

    font-weight: 800 !important;

    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


.sw-course-combo-meta {
    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    margin-bottom: 4px !important;

    color: #858690 !important;

    font-size: 10.5px !important;
    font-weight: 650 !important;
}


.sw-course-combo-meta i {
    color: #7759ff !important;

    margin-right: 3px !important;
}


.sw-combo-divider {
    color: #d3d3d9 !important;
}


.sw-course-combo-rating i {
    color: #f5bd38 !important;
}


.sw-course-combo-info p {
    margin: 0 !important;

    color: #92939b !important;

    font-size: 10px !important;
    line-height: 1.35 !important;

    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


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

.sw-course-combo-price {
    flex: 0 0 auto !important;

    min-width: 105px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-end !important;

    justify-content: center !important;
}


.sw-course-combo-price del {
    margin-bottom: 2px !important;

    color: #a5a5ad !important;

    font-size: 10px !important;
}


.sw-course-combo-price strong {
    color: #181720 !important;

    font-size: 17px !important;

    font-weight: 800 !important;
}


/* ==========================================================
   ARROW
   ========================================================== */

.sw-course-combo-arrow {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;

    margin-left: 12px !important;

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

    border-radius: 10px !important;

    background: #f0edff !important;

    color: #7759ff !important;

    font-size: 10px !important;
}


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

@media (max-width: 767px) {

    .sw-course-combos {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .sw-course-combos-heading h2 {
        font-size: 21px !important;
    }

    .sw-course-combo {
        height: 92px !important;
        min-height: 92px !important;

        padding: 8px 10px !important;

        border-radius: 14px !important;
    }

    .sw-course-combo-image {
        width: 68px !important;
        height: 72px !important;

        min-width: 68px !important;
        max-width: 68px !important;
    }

    .sw-course-combo-image img {
        width: 68px !important;
        height: 72px !important;

        min-width: 68px !important;
        min-height: 72px !important;

        max-width: 68px !important;
        max-height: 72px !important;
    }

    .sw-course-combo-placeholder {
        width: 68px !important;
        height: 72px !important;
    }

    .sw-course-combo-info {
        padding: 0 9px !important;
    }

    .sw-course-combo-info h3 {
        font-size: 13px !important;
    }

    .sw-course-combo-meta {
        font-size: 9px !important;
    }

    .sw-course-combo-info p {
        font-size: 9px !important;
    }

    .sw-course-combo-price {
        min-width: 65px !important;
    }

    .sw-course-combo-price strong {
        font-size: 14px !important;
    }

    .sw-course-combo-price del {
        font-size: 8px !important;
    }

    .sw-course-combo-arrow {
        display: none !important;
    }
}

/* ==========================================================
   HOME PAGE — BUNDLE COURSES TITLE FIX
   ========================================================== */

.sw-bundles-section .sw-section-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 25px !important;
}

.sw-bundles-section .sw-section-head h2 {
    margin: 7px 0 4px !important;
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em !important;
    font-weight: 800 !important;
    color: #181821 !important;
}

.sw-bundles-section .sw-section-head p {
    margin: 0 !important;
    color: #81838c !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.sw-bundles-section .sw-section-head > a {
    font-weight: 700 !important;
    color: #6246e8 !important;
    text-decoration: none !important;
}

/* Combo Courses main section heading */
.sw-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 25px;
}

.sw-section-heading > div {
    display: block;
}

.sw-section-heading h2 {
    margin: 7px 0 4px;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: #181821;
}

.sw-section-heading p {
    margin: 0;
    color: #81838c;
    font-size: 14px;
}

.sw-section-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #7657ff;
}

/* ==========================================================
   RESTORE HOME PAGE EXPLORE SECTION
   ========================================================== */

.sw-category-section .sw-section-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;

    margin-bottom: 25px !important;
}

.sw-category-section .sw-section-head h2 {
    margin: 7px 0 4px !important;

    font-size: 36px !important;
    line-height: 1.1 !important;

    font-weight: 800 !important;
    letter-spacing: -0.045em !important;

    color: #181821 !important;
}

.sw-category-section .sw-section-head p {
    margin: 0 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;

    color: #81838c !important;
}

.sw-category-section .sw-section-head .sw-kicker {
    display: inline-flex !important;

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

    font-weight: 800 !important;
    letter-spacing: .16em !important;

    color: #b9aaff !important;
}

.sw-category-section .sw-section-head > a {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    color: #6246e8 !important;

    text-decoration: none !important;
}


/* Restore category cards */

.sw-category-section .sw-category-grid {
    display: grid !important;

    grid-template-columns: repeat(6, 1fr) !important;

    gap: 12px !important;

    width: 100% !important;
}

.sw-category-section .sw-category-card {
    position: relative !important;

    min-height: 145px !important;

    padding: 20px !important;

    border-radius: 20px !important;

    border: 1px solid var(--sw-line) !important;

    background: rgba(255,255,255,.7) !important;

    box-shadow: 0 10px 35px rgba(20,18,35,.045) !important;

    overflow: hidden !important;
}


/* Smaller screens */

@media (max-width: 991px) {

    .sw-category-section .sw-category-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {

    .sw-category-section .sw-section-head {
        display: block !important;
    }

    .sw-category-section .sw-section-head > a {
        display: inline-flex !important;

        margin-top: 12px !important;
    }

    .sw-category-section .sw-section-head h2 {
        font-size: 30px !important;
    }

    .sw-category-section .sw-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sw-category-section .sw-category-card {
        min-height: 128px !important;
    }
}

/* ==========================================================
   HOME HERO — FLOATING BENEFITS CARD
   ========================================================== */

.home-fact-area {
    position: relative !important;
    z-index: 20 !important;

    margin-top: -58px !important;
    margin-bottom: 20px !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.home-fact-area .row {
    margin: 0 auto !important;

    padding: 24px 30px !important;

    max-width: 1040px;

    border-radius: 24px !important;

    background: rgba(28, 27, 42, 0.88) !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.home-fact-box {
    display: flex !important;
    align-items: center !important;

    min-height: 60px;

    padding: 4px 22px !important;

    color: #ffffff !important;

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

.home-fact-box:last-child {
    border-right: 0;
}

.home-fact-box > i {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    margin-right: 13px !important;

    border-radius: 50%;

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

    color: #8b68ff !important;

    font-size: 18px !important;
}

.home-fact-box h5 {
    margin: 0 0 3px !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

.home-fact-box p {
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.55) !important;

    font-size: 11px !important;
}

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

@media (max-width: 767px) {

    .home-fact-area {
        margin-top: -35px !important;
        padding: 0 14px !important;
    }

    .home-fact-area .row {
        display: block !important;

        padding: 10px 16px !important;

        border-radius: 20px !important;
    }

    .home-fact-box {
        min-height: 58px;

        padding: 10px 4px !important;

        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .home-fact-box:last-child {
        border-bottom: 0;
    }

    .home-fact-box > i {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        margin-right: 12px !important;
    }

    .home-fact-box h5 {
        font-size: 13px !important;
    }

    .home-fact-box p {
        font-size: 10px !important;
    }
}

/* ==========================================================
   HOME — SPACE AFTER FLOATING HERO BENEFITS
   ========================================================== */

.home-fact-area {
    margin-bottom: 65px !important;
}

/* =========================================================
   HOME FACT CARD
   MOBILE — SCALE DESKTOP LAYOUT DOWN
   ========================================================= */

@media (max-width: 767px) {

    /* Main card */
    .home-fact-area {
        width: calc(100% - 32px) !important;
        margin: -28px auto 55px !important;
        padding: 16px 10px !important;

        box-sizing: border-box !important;

        height: auto !important;
        min-height: 0 !important;
    }


    /* Keep all 3 columns in ONE ROW */
    .home-fact-area .container-lg {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .home-fact-area .row {
        display: flex !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        margin: 0 !important;
    }


    /* Each column = exactly 1/3 */
    .home-fact-area .row > .col-md-4 {
        flex: 0 0 33.333333% !important;
        width: 33.333333% !important;
        max-width: 33.333333% !important;

        padding: 0 5px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* Individual benefit */
    .home-fact-area .home-fact-box {
        width: 100% !important;

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

        margin: 0 !important;
        padding: 6px 2px !important;

        box-sizing: border-box !important;

        min-height: 55px !important;
        height: auto !important;
    }


    /* Icon */
    .home-fact-area .home-fact-box > i {
        float: none !important;

        flex: 0 0 24px !important;

        width: 24px !important;
        height: 24px !important;

        margin: 0 6px 0 0 !important;
        padding: 0 !important;

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

        font-size: 12px !important;

        box-sizing: border-box !important;
    }


    /* Text container */
    .home-fact-area .home-fact-box .text-box {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    /* Heading */
    .home-fact-area .home-fact-box .text-box h4 {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        white-space: normal !important;
    }


    /* Description */
    .home-fact-area .home-fact-box .text-box p {
        margin: 2px 0 0 !important;
        padding: 0 !important;

        font-size: 7px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .home-fact-area {
        width: calc(100% - 20px) !important;
        padding: 12px 6px !important;
    }

    .home-fact-area .row > .col-md-4 {
        padding: 0 3px !important;
    }

    .home-fact-area .home-fact-box > i {
        flex-basis: 21px !important;
        width: 21px !important;
        height: 21px !important;

        margin-right: 4px !important;

        font-size: 10px !important;
    }

    .home-fact-area .home-fact-box .text-box h4 {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    .home-fact-area .home-fact-box .text-box p {
        font-size: 6.5px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 767px) {

    /* Hide benefit descriptions on mobile */
    .home-fact-area .home-fact-box .text-box p {
        display: none !important;
    }

    /* Keep titles clean and centered vertically */
    .home-fact-area .home-fact-box .text-box h4 {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

}

/* ==========================================================
   DISABLE COURSE HOVER POPUP
   ========================================================== */

.course-popover-content,
.webui-popover {
    display: none !important;
}

/* ==========================================================
   CATEGORIES MENU — FIX DROPDOWN CLIPPING / STACKING
   ========================================================== */

/* Keep navigation above the hero */
.sw-navbar {
    position: relative !important;
    z-index: 99999 !important;
}

/* Navigation wrapper must allow the menu to extend */
.sw-navbar .main-nav-wrap {
    position: relative !important;
    z-index: 100000 !important;
    overflow: visible !important;
}

/* The category menu itself */
.sw-navbar .main-nav-wrap .category {
    position: absolute !important;
    z-index: 100001 !important;
    overflow: visible !important;
}

/* Category sub-menus */
.sw-navbar .main-nav-wrap .category .sub-category {
    position: absolute !important;
    z-index: 100002 !important;
}

/* Make sure the navigation's parents don't clip the menu */
.sw-navbar,
.sw-navbar .container-xl,
.sw-navbar nav,
.sw-navbar .main-nav-wrap,
.sw-navbar .mobile-main-nav {
    overflow: visible !important;
}


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

@media (min-width: 992px) {

    .sw-navbar .main-nav-wrap .category {
        z-index: 100001 !important;
    }

}


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

@media (max-width: 991px) {

    .sw-navbar .main-nav-wrap {
        z-index: 100000 !important;
    }

    .sw-navbar .main-nav-wrap .mobile-main-nav {
        position: relative !important;
        z-index: 100000 !important;
    }

    .sw-navbar .main-nav-wrap .category {
        z-index: 100001 !important;
    }

    .sw-navbar .main-nav-wrap .category .sub-category {
        z-index: 100002 !important;
    }

}

/* ==========================================================
   MOBILE MENU — OVERLAY HERO WITHOUT MOVING IT
   ========================================================== */

@media (max-width: 767px) {

    .sw-navbar {
        position: relative !important;
        z-index: 999999 !important;
    }

    .sw-navbar .main-nav-wrap {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;

        background: transparent !important;
        background-color: transparent !important;
    }

    .sw-navbar .main-nav-wrap .mobile-main-nav {
        position: relative !important;
        z-index: 999999 !important;
    }

}

    /* Categories dropdown */
    .sw-navbar .main-nav-wrap .mobile-main-nav .category {
        position: absolute !important;
        z-index: 1000000 !important;
    }

    /* Sub-category dropdown */
    .sw-navbar .main-nav-wrap .mobile-main-nav .sub-category {
        position: absolute !important;
        z-index: 1000001 !important;
    }

}

/* =========================================================
   SKILLWELL HERO — DESKTOP ALIGNMENT FIX
   ========================================================= */

/* Main hero container */
.sw-hero,
.sw-home-hero,
.hero-section {
    position: relative;
    overflow: hidden;
}

/* Move hero content further to the left */
.sw-hero .container,
.sw-home-hero .container,
.hero-section .container {
    padding-left: 5% !important;
    padding-right: 4% !important;
}

/* Hero text/search/buttons */
.sw-hero-content,
.sw-hero-copy,
.sw-hero-left,
.hero-content {
    margin-left: 0 !important;
    transform: translateX(-2%) !important;
}

/* Give the hero image more breathing room at the top */
.sw-hero-image,
.sw-hero-bg,
.sw-hero-media,
.hero-image,
.hero-bg {
    background-position: center top !important;
}

/* If the hero uses an IMG element */
.sw-hero img,
.sw-home-hero img,
.hero-section img {
    object-position: center top !important;
}


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

@media (min-width: 992px) {

    .sw-hero .container,
    .sw-home-hero .container,
    .hero-section .container {
        max-width: 1400px !important;
        padding-left: 3.5% !important;
        padding-right: 5% !important;
    }

    .sw-hero-content,
    .sw-hero-copy,
    .sw-hero-left,
    .hero-content {
        margin-left: 0 !important;
        transform: translateX(-3%) !important;
    }

    .sw-hero-image,
    .sw-hero-bg,
    .sw-hero-media,
    .hero-image,
    .hero-bg {
        background-position: center top !important;
    }

    .sw-hero img,
    .sw-home-hero img,
    .hero-section img {
        object-position: center top !important;
    }
}


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

@media (min-width: 1400px) {

    .sw-hero .container,
    .sw-home-hero .container,
    .hero-section .container {
        padding-left: 2.5% !important;
        padding-right: 4% !important;
    }

    .sw-hero-content,
    .sw-hero-copy,
    .sw-hero-left,
    .hero-content {
        transform: translateX(-4%) !important;
    }
}


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

@media (min-width: 768px) and (max-width: 991px) {

    .sw-hero .container,
    .sw-home-hero .container,
    .hero-section .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .sw-hero-content,
    .sw-hero-copy,
    .sw-hero-left,
    .hero-content {
        transform: none !important;
    }

    .sw-hero-image,
    .sw-hero-bg,
    .sw-hero-media,
    .hero-image,
    .hero-bg {
        background-position: center top !important;
    }
}


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

@media (max-width: 767px) {

    .sw-hero .container,
    .sw-home-hero .container,
    .hero-section .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .sw-hero-content,
    .sw-hero-copy,
    .sw-hero-left,
    .hero-content {
        margin-left: 0 !important;
        transform: none !important;
    }

    .sw-hero-image,
    .sw-hero-bg,
    .sw-hero-media,
    .hero-image,
    .hero-bg {
        background-position: center top !important;
    }

    .sw-hero img,
    .sw-home-hero img,
    .hero-section img {
        object-position: center top !important;
    }
}

/* =========================================================
   HERO CONTENT — FINAL LEFT ALIGNMENT
   Keep image positioning unchanged
   ========================================================= */

@media (min-width: 992px) {

    /* Bring the complete hero content back into view */
    .sw-hero .container,
    .sw-home-hero .container,
    .hero-section .container {
        padding-left: 7% !important;
        padding-right: 4% !important;
    }

    /* Remove the previous negative movement */
    .sw-hero-content,
    .sw-hero-copy,
    .sw-hero-left,
    .hero-content {
        margin-left: 0 !important;
        transform: none !important;
    }

}

/* =========================================================
   SKILLWELL FOOTER SOCIAL BUTTONS
   ========================================================= */

ul.footer-social-link li a {
    background: linear-gradient(135deg, #6d3cff 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(109, 60, 255, 0.35) !important;
    transition: all 0.25s ease !important;
}

/* Icons */
ul.footer-social-link li a i {
    color: #ffffff !important;
}

/* Hover */
ul.footer-social-link li a:hover {
    background: linear-gradient(135deg, #7c4dff 0%, #a06cff 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(109, 60, 255, 0.5) !important;
}

/* Keep the buttons circular */
ul.footer-social-link li a {
    border-radius: 50% !important;
}

/* =========================================================
   SKILLWELL SHOPPING CART — THEME REDESIGN
   ========================================================= */

/* ---------- PAGE BACKGROUND ---------- */

.cart-list-area {
    background: #f6f6fb !important;
    padding: 55px 0 70px !important;
}


/* ---------- CART PAGE HEADER ---------- */

/* Make the default breadcrumb/banner much shorter */
.cart-list-area
~ * {
    box-sizing: border-box;
}


/* Common breadcrumb/header area */
.category-header-area:has(+ .cart-list-area) {
    min-height: 220px !important;
    height: 220px !important;
    padding: 0 !important;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(124, 77, 255, .22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #10101d 0%,
            #17152c 48%,
            #27204d 100%
        ) !important;
}

.category-header-area:has(+ .cart-list-area) .breadcrumb-container {
    padding-top: 75px !important;
}

.category-header-area:has(+ .cart-list-area) .breadcrumb {
    background: transparent !important;
    border: 0 !important;
}

.category-header-area:has(+ .cart-list-area) .breadcrumb-item,
.category-header-area:has(+ .cart-list-area) .breadcrumb-item a {
    color: #fff !important;
}

.category-header-area:has(+ .cart-list-area) .breadcrumb-item:first-child {
    opacity: .55;
}


/* ---------- MAIN CART LAYOUT ---------- */

.cart-list-area .container {
    max-width: 1180px !important;
}

.cart-list-area .row {
    align-items: flex-start;
}


/* ---------- CART ITEM CARD ---------- */

.cart-list-area .cart-item,
.cart-list-area .course-box-wrap,
.cart-list-area .cart-course,
.cart-list-area .cart-list,
.cart-list-area .card {
    border: 1px solid rgba(119, 89, 255, .10) !important;
    border-radius: 20px !important;

    background: rgba(255, 255, 255, .92) !important;

    box-shadow:
        0 12px 40px rgba(36, 25, 80, .055) !important;

    overflow: hidden !important;
}


/* ---------- COURSE THUMBNAIL ---------- */

.cart-list-area img {
    border-radius: 14px !important;
}


/* ---------- COURSE TITLE ---------- */

.cart-list-area h5,
.cart-list-area h4,
.cart-list-area .course-title {
    color: #191720 !important;
    font-weight: 750 !important;
}


/* ---------- DESCRIPTION ---------- */

.cart-list-area p {
    color: #76747e;
}


/* ---------- PRICE ---------- */

.cart-list-area .current-price,
.cart-list-area .total-price {
    color: #6d3cff !important;
    font-weight: 800 !important;
}

.cart-list-area .original-price {
    color: #aaa7b1 !important;
}


/* ---------- REMOVE ---------- */

.cart-list-area .remove,
.cart-list-area .remove-item,
.cart-list-area a[href*="remove"],
.cart-list-area button.remove {
    color: #8b8792 !important;
    transition: color .2s ease !important;
}

.cart-list-area .remove:hover,
.cart-list-area .remove-item:hover,
.cart-list-area a[href*="remove"]:hover,
.cart-list-area button.remove:hover {
    color: #ef4444 !important;
}


/* ---------- TOTAL / SUMMARY BOX ---------- */

.cart-list-area .cart-total,
.cart-list-area .total-box,
.cart-list-area .cart-summary,
.cart-list-area .order-summary {
    background: rgba(255,255,255,.96) !important;

    border: 1px solid rgba(119,89,255,.12) !important;

    border-radius: 22px !important;

    padding: 24px !important;

    box-shadow:
        0 15px 50px rgba(35,25,75,.07) !important;
}


/* ---------- TOTAL HEADING ---------- */

.cart-list-area .cart-total h5,
.cart-list-area .cart-total h4,
.cart-list-area .total-box h5,
.cart-list-area .total-box h4,
.cart-list-area .cart-summary h5,
.cart-list-area .cart-summary h4,
.cart-list-area .order-summary h5,
.cart-list-area .order-summary h4 {
    color: #191720 !important;
    font-weight: 800 !important;
}


/* ---------- GRAND TOTAL ---------- */

.cart-list-area .cart-total .total,
.cart-list-area .total-box .total,
.cart-list-area .cart-summary .total,
.cart-list-area .order-summary .total {
    color: #6d3cff !important;
    font-weight: 850 !important;
}


/* ---------- COUPON INPUT ---------- */

.cart-list-area input.form-control {
    min-height: 48px !important;

    border:
        1px solid rgba(119,89,255,.15) !important;

    border-radius: 12px !important;

    background: #fff !important;

    box-shadow: none !important;
}

.cart-list-area input.form-control:focus {
    border-color: #7954ff !important;

    box-shadow:
        0 0 0 4px rgba(109,60,255,.09) !important;
}


/* ---------- APPLY BUTTON ---------- */

.cart-list-area .apply-coupon,
.cart-list-area button[type="submit"].btn,
.cart-list-area .coupon button {
    background:
        #eee9ff !important;

    color:
        #6946ec !important;

    border:
        0 !important;

    border-radius:
        11px !important;

    font-weight:
        750 !important;
}


/* ---------- BUY BUTTON ---------- */

.cart-list-area .btn-buy,
.cart-list-area .buy-btn,
.cart-list-area button.btn,
.cart-list-area a.btn {
    border: 0 !important;

    border-radius: 12px !important;

    min-height: 50px !important;

    font-weight: 800 !important;
}


/* Primary purchase CTA */
.cart-list-area .btn-buy,
.cart-list-area .buy-btn,
.cart-list-area .btn-primary,
.cart-list-area button.btn-danger {
    background:
        linear-gradient(
            135deg,
            #6d3cff,
            #8b5cf6
        ) !important;

    color: #fff !important;

    box-shadow:
        0 10px 25px rgba(109,60,255,.24) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

.cart-list-area .btn-buy:hover,
.cart-list-area .buy-btn:hover,
.cart-list-area .btn-primary:hover,
.cart-list-area button.btn-danger:hover {
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(109,60,255,.34) !important;
}


/* ---------- CART ITEM SPACING ---------- */

.cart-list-area .cart-item + .cart-item,
.cart-list-area .course-box-wrap + .course-box-wrap {
    margin-top: 14px !important;
}


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

@media (max-width: 991px) {

    .category-header-area:has(+ .cart-list-area) {
        min-height: 190px !important;
        height: 190px !important;
    }

    .category-header-area:has(+ .cart-list-area) .breadcrumb-container {
        padding-top: 60px !important;
    }

    .cart-list-area {
        padding: 40px 0 55px !important;
    }

}


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

@media (max-width: 767px) {

    .category-header-area:has(+ .cart-list-area) {
        min-height: 150px !important;
        height: 150px !important;
    }

    .category-header-area:has(+ .cart-list-area) .breadcrumb-container {
        padding-top: 45px !important;
    }

    .cart-list-area {
        padding: 28px 0 45px !important;
    }

    .cart-list-area .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .cart-list-area .cart-total,
    .cart-list-area .total-box,
    .cart-list-area .cart-summary,
    .cart-list-area .order-summary {
        margin-top: 18px !important;
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .cart-list-area img {
        border-radius: 12px !important;
    }

    .cart-list-area .btn-buy,
    .cart-list-area .buy-btn,
    .cart-list-area .btn-primary {
        width: 100% !important;
    }

}

/* =========================================================
   CART PAGE — FORCE SKILLWELL PURPLE CTA
   ========================================================= */

/* Apply / coupon buttons */
body:has(.cart-list-area) .btn-danger,
body:has(.cart-list-area) .btn.red,
body:has(.cart-list-area) .coupon-btn,
body:has(.cart-list-area) button[class*="danger"],
body:has(.cart-list-area) input[class*="danger"] {
    background: linear-gradient(135deg, #6d3cff 0%, #8b5cf6 100%) !important;
    background-color: #6d3cff !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(109, 60, 255, 0.22) !important;
}


/* Main BUY button */
body:has(.cart-list-area) .btn-buy,
body:has(.cart-list-area) .buy-btn,
body:has(.cart-list-area) .buy-now,
body:has(.cart-list-area) .btn-danger,
body:has(.cart-list-area) button[onclick*="buy"],
body:has(.cart-list-area) a[onclick*="buy"] {
    background: linear-gradient(135deg, #6d3cff 0%, #8b5cf6 100%) !important;
    background-color: #6d3cff !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(109, 60, 255, 0.25) !important;
}


/* Hover */
body:has(.cart-list-area) .btn-danger:hover,
body:has(.cart-list-area) .btn.red:hover,
body:has(.cart-list-area) .btn-buy:hover,
body:has(.cart-list-area) .buy-btn:hover,
body:has(.cart-list-area) .buy-now:hover {
    background: linear-gradient(135deg, #7c4dff 0%, #9b6cff 100%) !important;
    background-color: #7c4dff !important;
    color: #ffffff !important;
}

/* =========================================================
   CART — COUPON APPLY BUTTON
   ========================================================= */

.cart-list-area .input-group-append .btn {
    background: linear-gradient(135deg, #6d3cff 0%, #8b5cf6 100%) !important;
    background-color: #6d3cff !important;
    color: #ffffff !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 11px !important;
    min-height: 48px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(109, 60, 255, 0.20) !important;
}

/* Hover */
.cart-list-area .input-group-append .btn:hover {
    background: linear-gradient(135deg, #7c4dff 0%, #9b6cff 100%) !important;
    background-color: #7c4dff !important;
    color: #ffffff !important;
    border: 0 !important;
    transform: translateY(-1px);
}

/* =========================================================
   CART HEADER — REMOVE "HOME /"
   ========================================================= */

body:has(.cart-list-area) .category-header-area .breadcrumb-item:first-child {
    display: none !important;
}

body:has(.cart-list-area) .category-header-area .breadcrumb-item:nth-child(2) {
    padding-left: 0 !important;
}

body:has(.cart-list-area) .category-header-area .breadcrumb-item:nth-child(2)::before {
    display: none !important;
}

/* =========================================================
   SKILLWELL AUTH — SIGN UP + SIGN IN
   ========================================================= */

.sw-auth-page {
    min-height: calc(100vh - 80px);
    padding: 55px 30px;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(119, 89, 255, 0.08),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f7f7fd 0%,
            #f3f2fa 100%
        );
}

.sw-auth-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 520px;

    min-height: 720px;

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

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

    border-radius: 30px;

    overflow: hidden;

    box-shadow:
        0 30px 90px rgba(31,25,65,.09);
}


/* =========================================================
   LEFT VISUAL
   ========================================================= */

.sw-auth-visual {
    position: relative;

    padding: 55px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(139,92,246,.35),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(99,102,241,.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0b0915 0%,
            #131028 55%,
            #241b49 100%
        );
}

.sw-auth-visual::before {
    content: "";
    position: absolute;
    inset: 0;

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

    background-size: 42px 42px;

    opacity: .35;
}

.sw-auth-visual::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -130px;
    bottom: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,77,255,.35),
            transparent 65%
        );

    filter: blur(25px);
}


/* Brand */

.sw-auth-brand {
    position: relative;
    z-index: 2;

    font-size: 24px;
    font-weight: 800;

    color: #ffffff;
}


/* Content */

.sw-auth-visual-content {
    position: relative;
    z-index: 2;

    max-width: 520px;
}

.sw-auth-eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    color: #b8a6ff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .18em;
}

.sw-auth-visual-content h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 72px);

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 850;
}

.sw-auth-visual-content h1 span {
    background:
        linear-gradient(
            135deg,
            #ffffff 10%,
            #a98aff 80%
        );

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

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

.sw-auth-visual-content p {
    margin-top: 28px;

    max-width: 430px;

    color: rgba(255,255,255,.62);

    font-size: 17px;

    line-height: 1.65;
}


/* Music symbols */

.sw-auth-music-symbols {
    display: flex;

    gap: 14px;

    margin-top: 38px;
}

.sw-auth-music-symbols span {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 16px;

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

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

    color: #9c7cff;

    font-size: 25px;

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


/* =========================================================
   RIGHT FORM
   ========================================================= */

.sw-auth-form-area {
    display: flex;
    align-items: center;

    padding: 35px;

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

.sw-auth-form-card {
    width: 100%;
    max-width: 450px;

    margin: auto;

    padding: 35px 38px;

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

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

    border-radius: 24px;

    box-shadow:
        0 18px 55px rgba(24,20,45,.065);
}


/* Heading */

.sw-auth-form-heading {
    margin-bottom: 24px;
}

.sw-auth-mini-label {
    display: block;

    margin-bottom: 8px;

    color: #7657ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;
}

.sw-auth-form-heading h2 {
    margin: 0;

    font-size: 34px;

    line-height: 1;

    letter-spacing: -.04em;

    font-weight: 850;

    color: #17151d;
}

.sw-auth-form-heading p {
    margin: 10px 0 0;

    color: #888995;

    font-size: 14px;
}


/* Divider */

.sw-auth-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 22px 0;

    color: #999aa4;

    font-size: 12px;
}

.sw-auth-divider::before,
.sw-auth-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: rgba(20,20,30,.09);
}


/* Fields */

.sw-auth-field {
    margin-bottom: 17px;
}

.sw-auth-field label {
    display: block;

    margin-bottom: 7px;

    color: #34333c;

    font-size: 13px;

    font-weight: 700;
}

.sw-auth-input {
    display: flex;
    align-items: center;

    height: 50px;

    padding: 0 15px;

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

    border-radius: 13px;

    background: #ffffff;

    transition: .2s ease;
}

.sw-auth-input:focus-within {
    border-color: #7954ff;

    box-shadow:
        0 0 0 4px rgba(109,60,255,.08);
}

.sw-auth-input i {
    width: 22px;

    margin-right: 10px;

    color: #9696a0;

    font-size: 14px;
}

.sw-auth-input input {
    width: 100%;

    height: 100%;

    padding: 0;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    color: #17151d;

    font-size: 14px;
}

.sw-auth-input input::placeholder {
    color: #aaaab2;
}


/* Forgot password */

.sw-auth-forgot {
    display: block;

    margin-top: 8px;

    text-align: right;

    color: #817f89 !important;

    font-size: 12px;
}

.sw-auth-forgot:hover {
    color: #6d3cff !important;
}


/* Submit */

.sw-auth-submit {
    width: 100%;

    min-height: 52px;

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

    gap: 10px;

    margin-top: 8px;

    border: 0;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #6d3cff,
            #8b5cf6
        );

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 12px 25px rgba(109,60,255,.24);

    transition: .2s ease;
}

.sw-auth-submit:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 17px 32px rgba(109,60,255,.32);
}


/* Bottom text */

.sw-auth-bottom-text {
    margin-top: 20px;

    text-align: center;

    color: #858691;

    font-size: 13px;
}

.sw-auth-bottom-text a {
    color: #6d3cff !important;

    font-weight: 800;
}


/* Recaptcha */

.sw-auth-recaptcha {
    margin: 17px 0;
}


/* =========================================================
   SOCIAL LOGIN
   ========================================================= */

.sw-auth-form-card .btn,
.sw-auth-form-card .facebook-login-button,
.sw-auth-form-card .google-login-button {
    border-radius: 12px !important;
}


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

@media (max-width: 991px) {

    .sw-auth-page {
        padding: 25px 16px 40px;
    }

    .sw-auth-shell {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .sw-auth-visual {
        min-height: 350px;

        padding: 35px;
    }

    .sw-auth-visual-content h1 {
        font-size: 48px;
    }

    .sw-auth-form-area {
        padding: 24px 16px;
    }

    .sw-auth-form-card {
        max-width: 560px;
    }
}


@media (max-width: 600px) {

    .sw-auth-page {
        padding: 12px;
    }

    .sw-auth-shell {
        border-radius: 20px;
    }

    .sw-auth-visual {
        min-height: 300px;

        padding: 28px 24px;
    }

    .sw-auth-brand {
        font-size: 20px;
    }

    .sw-auth-visual-content h1 {
        font-size: 39px;
    }

    .sw-auth-visual-content p {
        font-size: 14px;
    }

    .sw-auth-form-area {
        padding: 15px;
    }

    .sw-auth-form-card {
        padding: 25px 20px;

        border-radius: 18px;
    }

    .sw-auth-form-heading h2 {
        font-size: 30px;
    }
}

/* =========================================================
   SKILLWELL GLOBAL DARK MODE
   ========================================================= */

/* ---------- THEME VARIABLES ---------- */

:root {
    --sw-bg: #f6f6fb;
    --sw-surface: #ffffff;
    --sw-surface-soft: #fafaff;
    --sw-card: rgba(255,255,255,.92);

    --sw-text: #17151d;
    --sw-text-soft: #4f505a;
    --sw-muted: #858690;

    --sw-border: rgba(20,20,30,.08);

    --sw-purple: #6d3cff;
    --sw-purple-2: #8b5cf6;
    --sw-purple-soft: #f0edff;

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


/* =========================================================
   DARK THEME VARIABLES
   ========================================================= */

html[data-theme="dark"] {

    --sw-bg: #0b0a12;
    --sw-surface: #11101a;
    --sw-surface-soft: #151326;
    --sw-card: rgba(22,20,35,.92);

    --sw-text: #f7f7fb;
    --sw-text-soft: #d0cfda;
    --sw-muted: #9b99aa;

    --sw-border: rgba(255,255,255,.09);

    --sw-purple: #8b5cf6;
    --sw-purple-2: #a06cff;
    --sw-purple-soft: rgba(139,92,246,.14);

    --sw-shadow:
        0 20px 60px rgba(0,0,0,.35);
}


/* =========================================================
   GLOBAL PAGE
   ========================================================= */

html[data-theme="dark"] body.gray-bg,
html[data-theme="dark"] body {
    background: var(--sw-bg) !important;
    color: var(--sw-text) !important;
}


/* Text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] li {
    border-color: var(--sw-border);
}


/* Generic links */
html[data-theme="dark"] a {
    color: inherit;
}


/* =========================================================
   NAVBAR
   ========================================================= */

html[data-theme="dark"] .sw-navbar,
html[data-theme="dark"] .sw-navbar nav,
html[data-theme="dark"] .sw-navbar .navbar {
    background: #0e0d16 !important;
    color: #fff !important;
    border-color: var(--sw-border) !important;
}

html[data-theme="dark"] .sw-navbar .navbar-brand img {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .sw-navbar .nav-link,
html[data-theme="dark"] .sw-navbar .menu-text,
html[data-theme="dark"] .sw-navbar .icon a {
    color: #f4f3f8 !important;
}

html[data-theme="dark"] .sw-navbar .search-box,
html[data-theme="dark"] .sw-navbar .search-box input {
    background: #171522 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.1) !important;
}

html[data-theme="dark"] .sw-navbar .search-box input::placeholder {
    color: #888697 !important;
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.sw-theme-toggle {
    position: relative;

    width: 42px;
    height: 42px;

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

    margin: 0 8px;

    padding: 0;

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

    border-radius: 50%;

    background: #f5f3ff;

    color: #6d3cff;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .2s ease;
}

.sw-theme-toggle:hover {
    transform: translateY(-1px);

    background: #ece7ff;
}

.sw-theme-icon {
    position: absolute;

    font-size: 18px;

    line-height: 1;
}

.sw-theme-moon {
    display: none;
}

html[data-theme="dark"] .sw-theme-toggle {
    background: #211b35;

    border-color: rgba(255,255,255,.1);

    color: #b89cff;
}

html[data-theme="dark"] .sw-theme-sun {
    display: none;
}

html[data-theme="dark"] .sw-theme-moon {
    display: block;
}


/* =========================================================
   COMMON CARDS
   ========================================================= */

html[data-theme="dark"] .card,
html[data-theme="dark"] .course-box,
html[data-theme="dark"] .course-box-wrap,
html[data-theme="dark"] .sw-bundle-card,
html[data-theme="dark"] .cart-sidebar,
html[data-theme="dark"] .cart-list-area .card,
html[data-theme="dark"] .sign-up-form {
    background: var(--sw-card) !important;

    color: var(--sw-text) !important;

    border-color: var(--sw-border) !important;

    box-shadow: var(--sw-shadow) !important;
}


/* =========================================================
   COURSE BUNDLES
   ========================================================= */

html[data-theme="dark"] .sw-bundle-top {
    background:
        linear-gradient(
            135deg,
            #19152c,
            #12111b
        ) !important;

    border-color: var(--sw-border) !important;
}

html[data-theme="dark"] .sw-bundle-top h3,
html[data-theme="dark"] .sw-bundle-course strong {
    color: #fff !important;
}

html[data-theme="dark"] .sw-bundle-top p,
html[data-theme="dark"] .sw-bundle-course-name {
    color: #aaa7b8 !important;
}

html[data-theme="dark"] .sw-bundle-course {
    background: #181622 !important;

    border-color: var(--sw-border) !important;
}

html[data-theme="dark"] .sw-bundle-arrow {
    background: #211b35 !important;
    color: #a487ff !important;
}


/* =========================================================
   CATEGORY CARDS
   ========================================================= */

html[data-theme="dark"] .sw-category-section {
    background: var(--sw-bg) !important;
}

html[data-theme="dark"] .sw-category-card {
    background: #151421 !important;

    border-color: var(--sw-border) !important;

    color: #fff !important;

    box-shadow: var(--sw-shadow) !important;
}

html[data-theme="dark"] .sw-category-name,
html[data-theme="dark"] .sw-category-card .sw-category-name {
    color: #fff !important;
}

html[data-theme="dark"] .sw-category-count {
    color: #9b99aa !important;
}


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

html[data-theme="dark"] .category-course-list-area,
html[data-theme="dark"] .course-content-area {
    background: var(--sw-bg) !important;
}

html[data-theme="dark"] .category-course-list-area .card,
html[data-theme="dark"] .filter-area .card {
    background: #14131f !important;
}

html[data-theme="dark"] .filter_type,
html[data-theme="dark"] .filter_type h5,
html[data-theme="dark"] .filter_type label {
    color: #eee !important;
}

html[data-theme="dark"] .course-title,
html[data-theme="dark"] .course-box h4,
html[data-theme="dark"] .course-box h5 {
    color: #fff !important;
}


/* =========================================================
   CART
   ========================================================= */

html[data-theme="dark"] .cart-list-area {
    background: var(--sw-bg) !important;
}

html[data-theme="dark"] .cart-list-area .cart-item,
html[data-theme="dark"] .cart-list-area .cart-summary,
html[data-theme="dark"] .cart-list-area .cart-sidebar,
html[data-theme="dark"] .cart-sidebar {
    background: #151421 !important;

    border-color: var(--sw-border) !important;
}

html[data-theme="dark"] .cart-list-area input,
html[data-theme="dark"] .cart-list-area .form-control {
    background: #1c1a28 !important;

    color: #fff !important;

    border-color: rgba(255,255,255,.1) !important;
}

html[data-theme="dark"] .cart-list-area input::placeholder {
    color: #9290a1 !important;
}


/* =========================================================
   AUTH PAGES
   ========================================================= */

html[data-theme="dark"] .sw-auth-page {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(139,92,246,.12),
            transparent 35%
        ),
        #0b0a12 !important;
}

html[data-theme="dark"] .sw-auth-form-area {
    background: rgba(16,15,25,.9) !important;
}

html[data-theme="dark"] .sw-auth-form-card {
    background: #151421 !important;

    border-color: var(--sw-border) !important;
}

html[data-theme="dark"] .sw-auth-form-heading h2,
html[data-theme="dark"] .sw-auth-field label {
    color: #fff !important;
}

html[data-theme="dark"] .sw-auth-form-heading p,
html[data-theme="dark"] .sw-auth-bottom-text {
    color: #aaa7b6 !important;
}

html[data-theme="dark"] .sw-auth-input {
    background: #1c1a28 !important;

    border-color: rgba(255,255,255,.1) !important;
}

html[data-theme="dark"] .sw-auth-input input {
    color: #fff !important;
}

html[data-theme="dark"] .sw-auth-input input::placeholder {
    color: #858292 !important;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: #fff;
}

html[data-theme="dark"] .form-control {
    background: #171621 !important;

    color: #fff !important;

    border-color: rgba(255,255,255,.1) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #858292 !important;
}


/* =========================================================
   DROPDOWNS / MENUS
   ========================================================= */

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .user-dropdown,
html[data-theme="dark"] .sub-category,
html[data-theme="dark"] .mobile-main-nav {
    background: #161421 !important;

    border-color: rgba(255,255,255,.09) !important;

    color: #fff !important;

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

html[data-theme="dark"] .dropdown-menu a,
html[data-theme="dark"] .user-dropdown a {
    color: #eee !important;
}

html[data-theme="dark"] .dropdown-menu a:hover,
html[data-theme="dark"] .user-dropdown a:hover {
    background: #211b35 !important;

    color: #b69bff !important;
}


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

html[data-theme="dark"] footer {
    background: #08080d !important;

    color: #fff !important;
}

html[data-theme="dark"] footer a {
    color: #a8a5b2 !important;
}

html[data-theme="dark"] footer h4,
html[data-theme="dark"] footer h5,
html[data-theme="dark"] footer span {
    color: #fff !important;
}


/* =========================================================
   SMOOTH THEME TRANSITION
   ========================================================= */

html[data-theme="dark"] body,
html[data-theme="dark"] .sw-navbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .course-box,
html[data-theme="dark"] .sw-bundle-card,
html[data-theme="dark"] .sw-category-card,
html[data-theme="dark"] .sign-up-form {
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


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

@media (max-width: 767px) {

    .sw-theme-toggle {
        width: 38px;
        height: 38px;

        margin: 0 5px;
    }

}

/* =========================================================
   COURSE CARD IMAGES — FILL THE ENTIRE IMAGE BOX
   ========================================================= */

.course-image {
    overflow: hidden !important;
    background: #11101a !important;
}

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

    /* Fill the card completely */
    object-fit: cover !important;
    object-position: center center !important;
}

/* =========================================================
   DARK MODE — COURSE CARD METADATA VISIBILITY
   ========================================================= */

html[data-theme="dark"] .course-details .title {
    color: #ffffff !important;
}

html[data-theme="dark"] .course-details .rating,
html[data-theme="dark"] .course-details .rating span,
html[data-theme="dark"] .course-details .rating-number,
html[data-theme="dark"] .course-details .reviews {
    color: #a9a6b7 !important;
}

/* Rating stars stay bright */
html[data-theme="dark"] .course-details .rating i {
    color: #f5c451 !important;
}

/* Course duration + lecture count */
html[data-theme="dark"] .course-details .course-meta,
html[data-theme="dark"] .course-details .course-meta span,
html[data-theme="dark"] .course-details .course-meta i,
html[data-theme="dark"] .course-details .lecture-count,
html[data-theme="dark"] .course-details .duration {
    color: #9f9cab !important;
}

/* Price */
html[data-theme="dark"] .course-details .price {
    color: #a98aff !important;
}

html[data-theme="dark"] .course-details .price small {
    color: #777483 !important;
}

/* Instructor / bottom row */
html[data-theme="dark"] .course-details .instructor-name,
html[data-theme="dark"] .course-details .instructor-name a {
    color: #aaa7b6 !important;
}

/* =========================================================
   DARK MODE — COURSE DURATION / LECTURES
   ========================================================= */

html[data-theme="dark"] .course-details .d-flex.text-dark {
    color: #b7b3c5 !important;
}

html[data-theme="dark"] .course-details .d-flex.text-dark > div {
    color: #b7b3c5 !important;
}

/* Clock + lecture icons */
html[data-theme="dark"] .course-details .d-flex.text-dark i {
    color: #9b7cff !important;
    opacity: 1 !important;
}

/* Hours / Lectures text */
html[data-theme="dark"] .course-details .d-flex.text-dark .text-muted {
    color: #b7b3c5 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* =========================================================
   DARK MODE — SECTION HEADINGS
   ========================================================= */

/* Home: Find your next obsession */
html[data-theme="dark"] .sw-section-head h2 {
    color: #ffffff !important;
}


/* Bundle section: Bundle courses */
html[data-theme="dark"] .sw-section-heading h2 {
    color: #ffffff !important;
}


/* Top courses heading */
html[data-theme="dark"] .course-carousel-title {
    color: #ffffff !important;
}


/* Combo Courses heading, where used */
html[data-theme="dark"] .sw-course-combos-heading h2 {
    color: #ffffff !important;
}


/* Section descriptions */
html[data-theme="dark"] .sw-section-head p,
html[data-theme="dark"] .sw-section-heading p {
    color: #a9a6b7 !important;
}


/* Small purple section labels */
html[data-theme="dark"] .sw-kicker,
html[data-theme="dark"] .sw-section-eyebrow {
    color: #a98aff !important;
}

/* =========================================================
   DARK MODE — CATEGORIES HEADER CLEANUP
   ========================================================= */

html[data-theme="dark"] .sw-navbar .mobile-main-nav > li.has-children > a {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;

    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .sw-navbar .mobile-main-nav > li.has-children {
    background: transparent !important;
}

html[data-theme="dark"] .sw-navbar .mobile-main-nav > li.has-children > a:hover {
    background: rgba(139, 92, 246, 0.10) !important;
    color: #ffffff !important;
}

/* =========================================================
   DARK MODE — REMOVE CATEGORIES OUTER WHITE BOX
   ========================================================= */

html[data-theme="dark"] .sw-navbar .main-nav-wrap {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Remove any lighter background from the direct menu wrapper */
html[data-theme="dark"] .sw-navbar .main-nav-wrap > ul {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* =========================================================
   REMOVE HEADER SEARCH BAR
   Applies to both Light + Dark mode
   ========================================================= */

.sw-navbar nav > form.inline-form {
    display: none !important;
}

/* =========================================================
   HEADER — KEEP RIGHT-SIDE ACTIONS ON THE RIGHT
   ========================================================= */

@media (min-width: 992px) {

    /* Push cart and everything after it toward the right */
    .sw-navbar .cart-box {
        margin-left: auto !important;
    }

    /* Keep the theme switch beside the cart */
    .sw-navbar .sw-theme-toggle {
        flex-shrink: 0 !important;
    }

    /* Keep login/signup controls together */
    .sw-navbar .signin-box-move-desktop-helper,
    .sw-navbar .sign-in-box {
        flex-shrink: 0 !important;
    }

}

//* =========================================================
   HERO STATS — FINAL FIX
   ========================================================= */

.sw-hero .sw-hero-trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 680px !important;
    max-width: 680px !important;

    gap: 0 !important;
    margin-top: 34px !important;

    overflow: visible !important;
}

.sw-hero .sw-hero-trust > div {
    position: relative !important;

    display: block !important;

    flex: 0 0 25% !important;
    width: 25% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    padding: 0 22px !important;

    border-right: 1px solid rgba(255,255,255,.16) !important;
}

.sw-hero .sw-hero-trust > div:first-child {
    padding-left: 0 !important;
}

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


/* NUMBER */
.sw-hero .sw-hero-trust > div > strong {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 28px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* /5 and + */
.sw-hero .sw-hero-trust > div > strong span {
    display: inline !important;

    color: #a99bff !important;
    font-size: 16px !important;
}


/* LABEL */
.sw-hero .sw-hero-trust > div > small {
    display: block !important;

    width: 100% !important;

    margin: 9px 0 0 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,.65) !important;

    font-size: 13px !important;
    line-height: 1.3 !important;

    white-space: normal !important;
}


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

@media (max-width: 1399px) and (min-width: 992px) {

    .sw-hero .sw-hero-trust {
        width: 600px !important;
        max-width: 600px !important;
    }

    .sw-hero .sw-hero-trust > div {
        padding: 0 16px !important;
    }

    .sw-hero .sw-hero-trust > div > strong {
        font-size: 24px !important;
    }

    .sw-hero .sw-hero-trust > div > small {
        font-size: 12px !important;
    }
}


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

@media (max-width: 991px) {

    .sw-hero .sw-hero-trust {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sw-hero .sw-hero-trust > div {
        padding: 0 9px !important;
    }

    .sw-hero .sw-hero-trust > div > strong {
        font-size: 18px !important;
    }

    .sw-hero .sw-hero-trust > div > small {
        font-size: 10px !important;
    }
}

/* =========================================================
   HOME FACT BOX — REMOVE SUBTITLES ONLY
   ========================================================= */

.home-fact-box .text-box p {
    display: none !important;
}

/* Keep the existing icon + heading horizontal layout */
.home-fact-box {
    display: flex !important;
    align-items: center !important;
}

.home-fact-box > i {
    float: left !important;
    margin-right: 15px !important;
}

.home-fact-box .text-box {
    text-align: left !important;
}

.home-fact-box .text-box h4 {
    margin-bottom: 0 !important;
}

/* =========================================================
   DARK MODE — BUNDLE BUTTONS
   ========================================================= */

/* Details button */
html[data-theme="dark"] .sw-bundle-btn-light {
    background: rgba(255, 255, 255, 0.08) !important;

    color: #ffffff !important;

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

    box-shadow: none !important;
}

/* Details hover */
html[data-theme="dark"] .sw-bundle-btn-light:hover {
    background: rgba(139, 92, 246, 0.16) !important;

    color: #ffffff !important;

    border-color: rgba(139, 92, 246, 0.55) !important;
}


/* Buy button — keep the existing purple theme */
html[data-theme="dark"] .sw-bundle-btn-primary {
    background: linear-gradient(
        135deg,
        #6d3cff 0%,
        #8b5cf6 100%
    ) !important;

    color: #ffffff !important;

    border: 0 !important;

    box-shadow:
        0 10px 25px rgba(109, 60, 255, 0.28) !important;
}


/* Buy hover */
html[data-theme="dark"] .sw-bundle-btn-primary:hover {
    background: linear-gradient(
        135deg,
        #7c4dff 0%,
        #9b6cff 100%
    ) !important;

    color: #ffffff !important;
}

/* =========================================================
   FOOTER — REMOVE LANGUAGE SELECTOR
   ========================================================= */

footer select,
footer .language-selector,
footer .lang-selector,
footer .language-switcher,
footer .footer-language,
footer [class*="language"] {
    display: none !important;
}

/* ==========================================================
   HERO CONTENT — MOVE 20% TO THE RIGHT
   ========================================================== */

@media (min-width: 992px) {
    .sw-hero-content {
        transform: translateX(10%) !important;
    }
}

@media (max-width: 991px) {
    .sw-hero-content {
        transform: none !important;
    }
}

/* =========================================================
   DARK MODE — COURSE PAGE CONTINUOUS DESIGN
   ========================================================= */

html[data-theme="dark"] .course-content-area {
    background: #0b0a12 !important;
    color: #d7d4e2 !important;
}


/* Main course content surface */
html[data-theme="dark"] .course-header-area + .course-content-area {
    background: #0b0a12 !important;
}


/* Remove the bright white main card */
html[data-theme="dark"]
.course-header-area + .course-content-area .card,
html[data-theme="dark"]
.course-header-area + .course-content-area .course-content {
    background: #151421 !important;
    color: #d7d4e2 !important;

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

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


/* All normal text */
html[data-theme="dark"] .course-content-area p {
    color: #b9b5c5 !important;
}


/* Main section headings */
html[data-theme="dark"] .course-content-area h1,
html[data-theme="dark"] .course-content-area h2,
html[data-theme="dark"] .course-content-area h3,
html[data-theme="dark"] .course-content-area h4,
html[data-theme="dark"] .course-content-area h5,
html[data-theme="dark"] .course-content-area h6 {
    color: #ffffff !important;
}


/* Links */
html[data-theme="dark"] .course-content-area a {
    color: #a88cff !important;
}


/* =========================================================
   WHAT WILL I LEARN
   ========================================================= */

html[data-theme="dark"] .course-content-area .what-will-learn,
html[data-theme="dark"] .course-content-area .what-will-learn-box {
    background: #181723 !important;

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

    border-radius: 14px !important;
}

html[data-theme="dark"] .course-content-area .what-will-learn li {
    color: #c7c3d0 !important;
}


/* =========================================================
   COURSE HIGHLIGHTS
   ========================================================= */

html[data-theme="dark"] .course-content-area .course-highlights,
html[data-theme="dark"] .course-content-area .course-highlights-box {
    background: #181723 !important;

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

    border-radius: 14px !important;
}


/* =========================================================
   REQUIREMENTS
   ========================================================= */

html[data-theme="dark"] .course-content-area .requirements-box {
    background: #181723 !important;

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

    border-radius: 14px !important;
}

html[data-theme="dark"] .course-content-area .requirements-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .course-content-area .requirements-content,
html[data-theme="dark"] .course-content-area .requirements-content li {
    color: #c7c3d0 !important;
}


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

html[data-theme="dark"] .course-content-area .course-curriculum-box {
    background: transparent !important;
}

html[data-theme="dark"] .course-content-area .course-curriculum-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .course-content-area .course-curriculum-title .title {
    color: #ffffff !important;
}

html[data-theme="dark"] .course-content-area .course-curriculum-title .total-lectures,
html[data-theme="dark"] .course-content-area .course-curriculum-title .total-time {
    color: #aaa6b7 !important;
}


/* Curriculum section headers */
html[data-theme="dark"] .course-content-area .lecture-group-title {
    background: #181723 !important;

    color: #ffffff !important;

    border-color: rgba(255,255,255,.08) !important;
}


/* Lecture list */
html[data-theme="dark"] .course-content-area .lecture-list {
    background: #11101a !important;

    border-color: rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .course-content-area .lecture {
    color: #bdb9c8 !important;

    border-color: rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .course-content-area .lecture-title {
    color: #c8c4d2 !important;
}

html[data-theme="dark"] .course-content-area .lecture-time,
html[data-theme="dark"] .course-content-area .total-lectures,
html[data-theme="dark"] .course-content-area .total-time {
    color: #918d9d !important;
}


/* =========================================================
   COURSE HIGHLIGHT VIDEOS
   ========================================================= */

html[data-theme="dark"] .course-content-area .course-highlight-box,
html[data-theme="dark"] .course-content-area .course-highlights .row {
    background: transparent !important;
}


/* =========================================================
   REMOVE RANDOM WHITE SURFACES
   ========================================================= */

html[data-theme="dark"] .course-content-area .bg-white,
html[data-theme="dark"] .course-content-area .bg-light {
    background: #181723 !important;
    color: #d7d4e2 !important;
}


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

@media (max-width: 767px) {

    html[data-theme="dark"]
    .course-header-area + .course-content-area .card,
    html[data-theme="dark"]
    .course-header-area + .course-content-area .course-content {
        border-radius: 16px !important;
    }

}

/* =========================================================
   COURSE OVERVIEW — FIX FULL DESCRIPTION FLOW
   ========================================================= */

html[data-theme="dark"] .course-content-area .description-box {
    position: static !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}


/* Description wrapper must grow naturally */
html[data-theme="dark"] .course-content-area .description-content-wrap {
    position: static !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


/* Actual description */
html[data-theme="dark"] .course-content-area .description-content {
    position: static !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    margin: 0 !important;
}


/* Make the next section start AFTER the full description */
html[data-theme="dark"] .course-content-area .description-box + h4 {
    position: static !important;

    display: block !important;

    clear: both !important;

    margin-top: 36px !important;
    margin-bottom: 18px !important;
}

/* =========================================================
   DARK MODE — WHAT YOU WILL LEARN BOX
   ========================================================= */

html[data-theme="dark"] .course-content-area .what-you-get-box {
    background: #181723 !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    border-radius: 14px !important;

    color: #ffffff !important;

    box-shadow: none !important;
}


/* Learning points */
html[data-theme="dark"] .course-content-area .what-you-get-box li {
    color: #ffffff !important;
}


/* Check marks */
html[data-theme="dark"] .course-content-area .what-you-get-box li::before {
    color: #ff5757 !important;
}


/* Any text/spans inside */
html[data-theme="dark"] .course-content-area .what-you-get-box span {
    color: #ffffff !important;
}

/* =========================================================
   DARK MODE — REQUIREMENTS SECTION
   ========================================================= */

html[data-theme="dark"] .course-content-area .requirements-box {
    margin-top: 30px !important;
    margin-bottom: 34px !important;

    padding: 22px 28px !important;

    background: #181723 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 16px !important;

    box-shadow: none !important;

    color: #ffffff !important;
}


/* Heading */
html[data-theme="dark"] .course-content-area .requirements-box .requirements-title {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}


/* List */
html[data-theme="dark"] .course-content-area .requirements-box .requirements__list {
    margin: 0 !important;
    padding-left: 22px !important;
}


/* Individual requirements */
html[data-theme="dark"] .course-content-area .requirements-box .requirements__list li {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    color: #d8d4e2 !important;

    font-size: 16px !important;
    line-height: 1.5 !important;
}


/* Remove extra space after final item */
html[data-theme="dark"] .course-content-area .requirements-box .requirements__list li:last-child {
    margin-bottom: 0 !important;
}


/* Bullet color */
html[data-theme="dark"] .course-content-area .requirements-box .requirements__list li::marker {
    color: #a98aff !important;
}

/* =========================================================
   DARK MODE — CURRICULUM CLEAN FINAL VERSION
   ========================================================= */


/* =========================================================
   SECTION HEADER
   ========================================================= */

html[data-theme="dark"] .course-curriculum-box .lecture-group-title {
    position: relative !important;

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

    min-height: 58px !important;
    padding: 12px 20px !important;

    background: #181723 !important;

    border-bottom: 1px solid rgba(255,255,255,.08) !important;

    box-sizing: border-box !important;
}


/* Remove any old accordion pseudo icon */
html[data-theme="dark"] .course-curriculum-box .lecture-group-title::before,
html[data-theme="dark"] .course-curriculum-box .lecture-group-title::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SECTION TITLE + SINGLE TOGGLE ICON
   ========================================================= */

html[data-theme="dark"] .course-curriculum-box .lecture-group-title .title {
    float: none !important;

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

    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* Our ONE toggle icon */
html[data-theme="dark"]
.course-curriculum-box
.lecture-group-title
.title::before {
    content: "+" !important;

    position: static !important;

    display: inline-flex !important;

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

    flex: 0 0 24px !important;

    width: 24px !important;
    height: 24px !important;

    margin-right: 10px !important;

    color: #9b82ff !important;

    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
}


/* Open section */
html[data-theme="dark"]
.course-curriculum-box
.lecture-group-title[aria-expanded="true"]
.title::before {
    content: "−" !important;
}


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

html[data-theme="dark"]
.course-curriculum-box
.lecture-group-title > .float-end {
    float: none !important;

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

    flex: 0 0 auto !important;

    gap: 20px !important;

    margin: 0 0 0 20px !important;

    white-space: nowrap !important;
}

html[data-theme="dark"]
.course-curriculum-box
.lecture-group-title
.total-lectures,
html[data-theme="dark"]
.course-curriculum-box
.lecture-group-title
.total-time {
    color: #aaa6b7 !important;

    white-space: nowrap !important;
}


/* =========================================================
   LESSON ROW
   ========================================================= */

html[data-theme="dark"]
.course-curriculum-box
.lecture-list li {
    position: relative !important;

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

    min-height: 54px !important;

    padding: 12px 20px !important;

    box-sizing: border-box !important;

    background: #111019 !important;

    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}


/* Remove any old play pseudo positioning */
html[data-theme="dark"]
.course-curriculum-box
.lecture-list li::before,
html[data-theme="dark"]
.course-curriculum-box
.lecture-list li::after {
    position: static !important;
}


/* ONE play icon as a proper flex item */
html[data-theme="dark"]
.course-curriculum-box
.lecture-list li::before {
    content: "\f144" !important;

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

    flex: 0 0 20px !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;

    color: #8368ff !important;

    font-size: 15px !important;

    line-height: 1 !important;

    pointer-events: none !important;
}


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

html[data-theme="dark"]
.course-curriculum-box
.lecture-list li
.lecture-title {
    position: static !important;

    display: block !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #d8d4e2 !important;

    font-size: 15px !important;
    line-height: 1.4 !important;
}


/* Free lessons */
html[data-theme="dark"]
.course-curriculum-box
.lecture-list li
.lecture-title.text-primary {
    color: #a88cff !important;
}


/* =========================================================
   PREVIEW + DURATION
   ========================================================= */

html[data-theme="dark"]
.course-curriculum-box
.lecture-list li
.lecture-info {
    float: none !important;

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

    flex: 0 0 auto !important;

    margin-left: auto !important;
    padding-left: 20px !important;

    gap: 12px !important;

    white-space: nowrap !important;
}


html[data-theme="dark"]
.course-curriculum-box
.lecture-preview {
    color: #c5c0d0 !important;

    white-space: nowrap !important;
}

html[data-theme="dark"]
.course-curriculum-box
.lecture-preview i {
    color: #c5c0d0 !important;

    margin-right: 5px !important;
}

html[data-theme="dark"]
.course-curriculum-box
.lecture-time {
    color: #9691a2 !important;

    white-space: nowrap !important;
}


/* =========================================================
   SECTION BOX
   ========================================================= */

html[data-theme="dark"]
.course-curriculum-box
.lecture-group-wrapper {
    margin-bottom: 12px !important;

    overflow: hidden !important;

    border-radius: 18px !important;

    background: #111019 !important;

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

    box-shadow: none !important;
}


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

@media (max-width: 767px) {

    html[data-theme="dark"]
    .course-curriculum-box
    .lecture-group-title {
        min-height: 54px !important;
        padding: 11px 15px !important;
    }

    html[data-theme="dark"]
    .course-curriculum-box
    .lecture-group-title
    .title {
        font-size: 15px !important;
    }

    html[data-theme="dark"]
    .course-curriculum-box
    .lecture-group-title
    .title::before {
        flex-basis: 22px !important;
        width: 22px !important;
        height: 22px !important;

        margin-right: 8px !important;

        font-size: 20px !important;
    }

    html[data-theme="dark"]
    .course-curriculum-box
    .lecture-list li {
        min-height: 50px !important;
        padding: 11px 15px !important;
    }

    html[data-theme="dark"]
    .course-curriculum-box
    .lecture-list li
    .lecture-info {
        padding-left: 10px !important;
        gap: 8px !important;
    }
}

/* =========================================================
   BRIGHT MODE — CURRICULUM CLEAN VERSION
   ========================================================= */


/* =========================================================
   SECTION HEADER
   ========================================================= */

html[data-theme="light"] .course-curriculum-box .lecture-group-title {
    position: relative !important;

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

    min-height: 58px !important;
    padding: 12px 20px !important;

    background: #ffffff !important;

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

    box-sizing: border-box !important;
}


/* Remove old accordion pseudo icons */
html[data-theme="light"] .course-curriculum-box .lecture-group-title::before,
html[data-theme="light"] .course-curriculum-box .lecture-group-title::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SECTION TITLE + TOGGLE
   ========================================================= */

html[data-theme="light"]
.course-curriculum-box
.lecture-group-title
.title {
    float: none !important;

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

    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #1b1922 !important;

    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* Single + / − icon */
html[data-theme="light"]
.course-curriculum-box
.lecture-group-title
.title::before {
    content: "+" !important;

    position: static !important;

    display: inline-flex !important;

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

    flex: 0 0 24px !important;

    width: 24px !important;
    height: 24px !important;

    margin-right: 10px !important;

    color: #7355ff !important;

    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
}


html[data-theme="light"]
.course-curriculum-box
.lecture-group-title[aria-expanded="true"]
.title::before {
    content: "−" !important;
}


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

html[data-theme="light"]
.course-curriculum-box
.lecture-group-title
> .float-end {
    float: none !important;

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

    flex: 0 0 auto !important;

    gap: 20px !important;

    margin: 0 0 0 20px !important;

    white-space: nowrap !important;
}


html[data-theme="light"]
.course-curriculum-box
.lecture-group-title
.total-lectures,
html[data-theme="light"]
.course-curriculum-box
.lecture-group-title
.total-time {
    color: #777381 !important;

    white-space: nowrap !important;
}


/* =========================================================
   LESSON ROW
   ========================================================= */

html[data-theme="light"]
.course-curriculum-box
.lecture-list li {
    position: relative !important;

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

    min-height: 54px !important;

    padding: 12px 20px !important;

    box-sizing: border-box !important;

    background: #faf9fd !important;

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


/* Remove old pseudo-element positioning */
html[data-theme="light"]
.course-curriculum-box
.lecture-list li::before,
html[data-theme="light"]
.course-curriculum-box
.lecture-list li::after {
    position: static !important;
}


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

html[data-theme="light"]
.course-curriculum-box
.lecture-list li::before {
    content: "\f144" !important;

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

    flex: 0 0 20px !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;

    color: #7355ff !important;

    font-size: 15px !important;

    line-height: 1 !important;

    pointer-events: none !important;
}


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

html[data-theme="light"]
.course-curriculum-box
.lecture-list li
.lecture-title {
    position: static !important;

    display: block !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #44414d !important;

    font-size: 15px !important;
    line-height: 1.4 !important;
}


html[data-theme="light"]
.course-curriculum-box
.lecture-list li
.lecture-title.text-primary {
    color: #7355ff !important;
}


/* =========================================================
   PREVIEW + DURATION
   ========================================================= */

html[data-theme="light"]
.course-curriculum-box
.lecture-list li
.lecture-info {
    float: none !important;

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

    flex: 0 0 auto !important;

    margin-left: auto !important;
    padding-left: 20px !important;

    gap: 12px !important;

    white-space: nowrap !important;
}


html[data-theme="light"]
.course-curriculum-box
.lecture-preview {
    color: #6f6b77 !important;

    white-space: nowrap !important;
}


html[data-theme="light"]
.course-curriculum-box
.lecture-preview i {
    color: #6f6b77 !important;

    margin-right: 5px !important;
}


html[data-theme="light"]
.course-curriculum-box
.lecture-time {
    color: #87838f !important;

    white-space: nowrap !important;
}


/* =========================================================
   SECTION BOX
   ========================================================= */

html[data-theme="light"]
.course-curriculum-box
.lecture-group-wrapper {
    margin-bottom: 12px !important;

    overflow: hidden !important;

    border-radius: 18px !important;

    background: #ffffff !important;

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

    box-shadow: 0 8px 24px rgba(30,25,60,.04) !important;
}


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

@media (max-width: 767px) {

    html[data-theme="light"]
    .course-curriculum-box
    .lecture-group-title {
        min-height: 54px !important;
        padding: 11px 15px !important;
    }

    html[data-theme="light"]
    .course-curriculum-box
    .lecture-group-title
    .title {
        font-size: 15px !important;
    }

    html[data-theme="light"]
    .course-curriculum-box
    .lecture-group-title
    .title::before {
        flex-basis: 22px !important;
        width: 22px !important;
        height: 22px !important;

        margin-right: 8px !important;

        font-size: 20px !important;
    }

    html[data-theme="light"]
    .course-curriculum-box
    .lecture-list li {
        min-height: 50px !important;
        padding: 11px 15px !important;
    }

    html[data-theme="light"]
    .course-curriculum-box
    .lecture-list li
    .lecture-info {
        padding-left: 10px !important;
        gap: 8px !important;
    }
}

/* =========================================================
   CURRICULUM — REMOVE OUTER BORDER
   BOTH LIGHT + DARK MODE
   ========================================================= */

.course-curriculum-box {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Remove any border from the accordion wrapper itself */
.course-curriculum-box .course-curriculum-accordion {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* =========================================================
   COURSE REVIEW CARDS
   ========================================================= */

html[data-theme="dark"]
.course-content-area .reviews #myList > li {
    background: #181723 !important;

    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"]
.course-content-area .reviews #myList .reviewer-name {
    color: #ffffff !important;
}

html[data-theme="dark"]
.course-content-area .reviews #myList .review-text {
    color: #c4bfce !important;
}

html[data-theme="dark"]
.course-content-area .reviews #myList .review-time {
    color: #9d98a8 !important;
}


/* =========================================================
   GENERAL SECONDARY TEXT IN THESE SECTIONS
   ========================================================= */

html[data-theme="dark"] .sw-course-combos small,
html[data-theme="dark"] .sw-course-combos .text-muted,
html[data-theme="dark"] .about-instructor-box .text-muted,
html[data-theme="dark"] .student-feedback-box .text-muted {
    color: #c4bfce !important;
}

/* =========================================================
   COMBO COURSES — DARKER TEXT
   ========================================================= */

/* 3 Courses / 2 Courses / rating / New */
.sw-course-combo .sw-course-combo-meta {
    color: #24242c !important;
    font-weight: 700 !important;
}

.sw-course-combo .sw-course-combo-meta span {
    color: #24242c !important;
}


/* Complete learning bundle with X courses */
.sw-course-combo .sw-course-combo-info p {
    color: #4b4a54 !important;
    font-weight: 600 !important;
}


/* Keep purple icon */
.sw-course-combo .sw-course-combo-meta i.fa-layer-group {
    color: #7759ff !important;
}


/* Keep yellow star */
.sw-course-combo .sw-course-combo-rating i {
    color: #f5bd38 !important;
}


/* Keep divider subtle */
.sw-course-combo .sw-combo-divider {
    color: #b5b3bb !important;
}

/* =========================================================
   SHOPPING CART — DARK MODE
   TARGET ACTUAL CART STRUCTURE
   ========================================================= */

html[data-theme="dark"] .cart-list-area .in-cart-box,
html[data-theme="dark"] .cart-list-area .cart-course-list,
html[data-theme="dark"] .cart-list-area .cart-course-list > li,
html[data-theme="dark"] .cart-list-area .cart-course-wrapper,
html[data-theme="dark"] .cart-list-area .cart-course-wrapper .details,
html[data-theme="dark"] .cart-list-area .cart-course-wrapper .price,
html[data-theme="dark"] .cart-list-area .cart-course-wrapper .move-remove {
    background: #151421 !important;
    background-color: #151421 !important;
    color: #e8e5ef !important;
}


/* Cart item border */
html[data-theme="dark"]
.cart-list-area
.cart-course-list > li {
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}


/* Course title */
html[data-theme="dark"]
.cart-list-area
.cart-course-wrapper .details h5,
html[data-theme="dark"]
.cart-list-area
.cart-course-wrapper .details h4,
html[data-theme="dark"]
.cart-list-area
.cart-course-wrapper .details a {
    color: #ffffff !important;
}


/* Course description */
html[data-theme="dark"]
.cart-list-area
.cart-course-wrapper .details p {
    color: #aaa6b6 !important;
}


/* Remove */
html[data-theme="dark"]
.cart-list-area
.cart-course-wrapper .move-remove {
    color: #aaa6b6 !important;
}


/* Current price */
html[data-theme="dark"]
.cart-list-area
.cart-course-wrapper .price {
    color: #a98aff !important;
    font-weight: 800 !important;
}


/* Original price */
html[data-theme="dark"]
.cart-list-area
.cart-course-wrapper .price del {
    color: #817d8d !important;
}


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

html[data-theme="dark"]
.cart-list-area
.cart-sidebar {
    background: #151421 !important;
    background-color: #151421 !important;

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

    border-radius: 18px !important;

    color: #e8e5ef !important;
}


/* Total */
html[data-theme="dark"]
.cart-list-area
.cart-sidebar .total-price,
html[data-theme="dark"]
.cart-list-area
.cart-sidebar .price {
    color: #8d6aff !important;
}


/* Coupon */
html[data-theme="dark"]
.cart-list-area
#coupon-code {
    background: #1c1a27 !important;
    color: #ffffff !important;

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


/* Apply */
html[data-theme="dark"]
.cart-list-area
.input-group-append .btn {
    background: #7759ff !important;
    color: #ffffff !important;
    border: 0 !important;
}


/* Buy */
html[data-theme="dark"]
.cart-list-area
button.btn.red {
    background: linear-gradient(
        135deg,
        #7759ff,
        #9475ff
    ) !important;

    color: #ffffff !important;
    border: 0 !important;
}

html[data-theme="dark"] .cart-list-area .in-cart-box > div:first-child {
    color: #ffffff !important;
}

/* Dark mode — cart course title and remove text */
html[data-theme="dark"] .cart-list-area .in-cart-box > div:nth-child(2) {
    color: #ffffff !important;
}

html[data-theme="dark"] .cart-list-area .cart-course-wrapper .details,
html[data-theme="dark"] .cart-list-area .cart-course-wrapper .details * {
    color: #ffffff !important;
}

html[data-theme="dark"] .cart-list-area .cart-course-wrapper .move-remove,
html[data-theme="dark"] .cart-list-area .cart-course-wrapper .move-remove * {
    color: #ffffff !important;
}

/* =========================================================
   BUNDLE DETAILS — DARK MODE
   ========================================================= */

/* Detect dark mode from the existing html theme state */
html[data-theme="dark"] body.bundle-details-page {
    background: #0b0a12 !important;
    color: #e8e5ef !important;
}


/* Hero */
html[data-theme="dark"] body.bundle-details-page
.course-header-area.bundle-bg-image {
    background-color: #0b0a12 !important;
    color: #ffffff !important;
}


/* Hero text */
html[data-theme="dark"] body.bundle-details-page
.course-bundle-details-header .title {
    color: #ffffff !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-bundle-details-header .created-by {
    color: #bcb7c8 !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-bundle-details-header .by-name {
    color: #a98aff !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-bundle-details-header .last-updated-date {
    color: #aaa6b6 !important;
}


/* Rating / included courses */
html[data-theme="dark"] body.bundle-details-page
.course-header-area .rating-row {
    color: #f5c451 !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-header-area .enrolled-num {
    color: #c5c0cf !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-header-area p.w-100 {
    color: #c5c0cf !important;
}


/* Main area */
html[data-theme="dark"] body.bundle-details-page
.course-content-area {
    background: #0b0a12 !important;
    color: #e8e5ef !important;
}


/* Included courses heading */
html[data-theme="dark"] body.bundle-details-page
.course-content-area h3 {
    color: #ffffff !important;
}


/* Course cards */
html[data-theme="dark"] body.bundle-details-page
.course-box.course-bundle-box {
    background: #151421 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.25) !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-box.course-bundle-box .course-details {
    background: #151421 !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-box.course-bundle-box .title {
    color: #ffffff !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-box.course-bundle-box small {
    color: #aaa6b6 !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-box.course-bundle-box .price {
    color: #a98aff !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-box.course-bundle-box .price small {
    color: #817c8c !important;
}

html[data-theme="dark"] body.bundle-details-page
.course-box.course-bundle-box .course-meta small {
    color: #aaa6b6 !important;
}


/* Description */
html[data-theme="dark"] body.bundle-details-page
.description-box {
    background: #151421 !important;
    color: #c9c4d3 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
}

html[data-theme="dark"] body.bundle-details-page
.description-box h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] body.bundle-details-page
.description-content {
    color: #c9c4d3 !important;
}

html[data-theme="dark"] body.bundle-details-page
.description-content * {
    color: #c9c4d3 !important;
}


/* View more */
html[data-theme="dark"] body.bundle-details-page
.description-box .view-more {
    color: #a98aff !important;
}


/* Buy button */
html[data-theme="dark"] body.bundle-details-page
.bundle-buy-button .btn {
    background: linear-gradient(135deg,#7759ff,#9475ff) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 11px !important;
}

/* =========================================================
   BUNDLE DETAILS PAGE - DARK MODE OVERRIDES
   ========================================================= */

html[data-theme="dark"] body.bundle-details-page .sw-bundle-page {
    background: #0b0a12 !important;
    color: #f5f3fa !important;
}

/* Hero */
html[data-theme="dark"] body.bundle-details-page .sw-bundle-hero {
    background: transparent !important;
    color: #ffffff !important;
}

html[data-theme="dark"] body.bundle-details-page .sw-bundle-hero * {
    color: inherit;
}

/* Main content section */
html[data-theme="dark"] body.bundle-details-page .sw-bundle-content {
    background: #0b0a12 !important;
    color: #f5f3fa !important;
}

/* Included courses white container */
html[data-theme="dark"] body.bundle-details-page .sw-bundle-content > .container-xl,
html[data-theme="dark"] body.bundle-details-page .sw-bundle-content .sw-bundle-courses-wrap {
    background: #151421 !important;
    color: #f5f3fa !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* Course cards */
html[data-theme="dark"] body.bundle-details-page .sw-bundle-course {
    background: #171622 !important;
    border-color: rgba(255,255,255,.09) !important;
    color: #f5f3fa !important;
}

html[data-theme="dark"] body.bundle-details-page .sw-bundle-course-name {
    color: #f5f3fa !important;
}

html[data-theme="dark"] body.bundle-details-page .sw-bundle-course strong {
    color: #ffffff !important;
}

html[data-theme="dark"] body.bundle-details-page .sw-bundle-course-info,
html[data-theme="dark"] body.bundle-details-page .sw-bundle-course-meta {
    color: #aaa5b6 !important;
}

/* Headings */
html[data-theme="dark"] body.bundle-details-page .sw-bundle-content h2,
html[data-theme="dark"] body.bundle-details-page .sw-bundle-content h3,
html[data-theme="dark"] body.bundle-details-page .sw-bundle-content h4 {
    color: #ffffff !important;
}

/* Description */
html[data-theme="dark"] body.bundle-details-page .description-box,
html[data-theme="dark"] body.bundle-details-page .sw-description-box {
    background: #151421 !important;
    color: #d6d1df !important;
    border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] body.bundle-details-page .description-box *,
html[data-theme="dark"] body.bundle-details-page .sw-description-box * {
    color: #d6d1df !important;
}

html[data-theme="dark"] body.bundle-details-page .description-box h3,
html[data-theme="dark"] body.bundle-details-page .sw-description-box h3 {
    color: #ffffff !important;
}

/* Buttons / price area */
html[data-theme="dark"] body.bundle-details-page .sw-bundle-btn-light {
    background: #1b1928 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] body.bundle-details-page .sw-bundle-btn-primary {
    color: #ffffff !important;
}

/* Prevent Bootstrap white cards/backgrounds from leaking through */
html[data-theme="dark"] body.bundle-details-page .card,
html[data-theme="dark"] body.bundle-details-page .card-body,
html[data-theme="dark"] body.bundle-details-page .card-header {
    background-color: transparent !important;
    color: inherit !important;
}

/* =========================================================
   COMBO / BUNDLE PAGE — HERO TITLE
   ========================================================= */

body.bundle-details-page .sw-bundle-title {
    font-size: 50px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    font-weight: 800 !important;
}


/* Large desktop */
@media (min-width: 1400px) {
    body.bundle-details-page .sw-bundle-title {
        font-size: 60px !important;
    }
}


/* Tablet */
@media (max-width: 991px) {
    body.bundle-details-page .sw-bundle-title {
        font-size: 44px !important;
    }
}


/* Mobile */
@media (max-width: 767px) {
    body.bundle-details-page .sw-bundle-title {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }
}

/* ==========================================================
   SKILLWELL — ABOUT US PAGE
   ========================================================== */

.sw-about-page {
    background: #f7f6fb;
    color: #181720;
    overflow: hidden;
}


/* ==========================================================
   HERO
   ========================================================== */

.sw-about-hero {
    position: relative;
    min-height: 610px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(119,89,255,.26),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0a0910 0%,
            #111021 55%,
            #24185a 100%
        );

    color: #ffffff;
    overflow: hidden;
}

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

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

    background-size: 70px 70px;
    opacity: .32;

    pointer-events: none;
}

.sw-about-hero-inner {
    position: relative;
    z-index: 2;

    padding: 120px 0;
}

.sw-about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;

    color: #b6a7ff;
}

.sw-about-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #8e70ff;

    box-shadow:
        0 0 18px rgba(142,112,255,.8);
}

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

    max-width: 850px;

    font-size: clamp(58px, 8vw, 108px);
    line-height: .93;

    font-weight: 850;
    letter-spacing: -0.065em;
}

.sw-about-hero h1 span {
    color: #9c83ff;
}

.sw-about-hero p {
    max-width: 650px;

    margin-bottom: 35px;

    font-size: 20px;
    line-height: 1.65;

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


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

.sw-about-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 15px 23px;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #7759ff,
        #9779ff
    );

    color: #ffffff !important;

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

    text-decoration: none !important;

    box-shadow:
        0 14px 35px rgba(119,89,255,.26);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

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

    box-shadow:
        0 18px 40px rgba(119,89,255,.35);
}


/* ==========================================================
   COMMON SECTION
   ========================================================== */

.sw-about-story,
.sw-about-beliefs,
.sw-about-founders,
.sw-about-why {
    padding: 105px 0;
}

.sw-about-section-heading span {
    display: block;

    margin-bottom: 12px;

    color: #7759ff;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .18em;
}

.sw-about-section-heading h2 {
    max-width: 820px;

    margin: 0;

    color: #181720;

    font-size: clamp(36px, 5vw, 62px);
    line-height: 1;

    font-weight: 850;
    letter-spacing: -.055em;
}

.sw-about-section-heading.centered {
    text-align: center;
}

.sw-about-section-heading.centered h2 {
    margin-left: auto;
    margin-right: auto;
}

.sw-about-section-heading.centered p {
    max-width: 650px;

    margin: 20px auto 0;

    color: #777985;

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


/* ==========================================================
   STORY
   ========================================================== */

.sw-about-story {
    background: #f7f6fb;
}

.sw-about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(0, 1.2fr);

    gap: 100px;

    margin-top: 70px;
}

.sw-about-story-lead p {
    margin: 0;

    color: #181720;

    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.1;

    font-weight: 800;
    letter-spacing: -.045em;
}

.sw-about-story-content {
    max-width: 730px;
}

.sw-about-story-content p {
    margin: 0 0 22px;

    color: #666875;

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

.sw-about-story-content .sw-about-story-final {
    margin-top: 35px;

    color: #181720;

    font-size: 21px;
    font-weight: 750;
}


/* ==========================================================
   BELIEFS
   ========================================================== */

.sw-about-beliefs {
    background: #ffffff;
}

.sw-about-belief-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 55px;
}

.sw-about-belief-card {
    padding: 34px;

    background: #f8f7fc;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 22px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

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

    box-shadow:
        0 22px 55px rgba(35,25,70,.09);
}

.sw-about-belief-icon {
    display: grid;

    place-items: center;

    width: 52px;
    height: 52px;

    margin-bottom: 25px;

    border-radius: 16px;

    background: #ebe6ff;

    color: #7759ff;

    font-size: 18px;
}

.sw-about-belief-card h3 {
    margin: 0 0 10px;

    color: #181720;

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

.sw-about-belief-card p {
    margin: 0;

    color: #777985;

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   FOUNDERS
   ========================================================== */

.sw-about-founders {
    background:
        linear-gradient(
            180deg,
            #f7f6fb 0%,
            #efedf7 100%
        );
}

.sw-about-founder-grid {
    display: grid;

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

    gap: 22px;

    margin-top: 60px;
}

.sw-about-founder-card {
    position: relative;
}

.sw-about-founder-image {
    position: relative;

    height: 520px;

    overflow: hidden;

    border-radius: 24px;

    background: #151421;

    box-shadow:
        0 25px 60px rgba(30,25,55,.12);
}

.sw-about-founder-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4,4,9,.88) 0%,
            rgba(4,4,9,.30) 30%,
            transparent 65%
        );

    pointer-events: none;
}

.sw-about-founder-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .5s ease;
}

.sw-about-founder-card:hover img {
    transform: scale(1.035);
}

.sw-about-founder-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 32px;
}

.sw-about-founder-overlay h3 {
    margin: 0;

    color: #ffffff;

    font-size: 27px;
    line-height: 1.1;

    font-weight: 800;
}


/* ==========================================================
   WHY SKILLWELL
   ========================================================== */

.sw-about-why {
    background: #0b0a12;

    color: #ffffff;
}

.sw-about-why
.sw-about-section-heading h2 {
    color: #ffffff;
}

.sw-about-why-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 60px;

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

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

    border-radius: 20px;

    overflow: hidden;
}

.sw-about-why-item {
    min-height: 180px;

    padding: 30px;

    background: #101018;
}

.sw-about-why-item strong {
    display: block;

    margin-bottom: 13px;

    color: #ffffff;

    font-size: 21px;
}

.sw-about-why-item span {
    display: block;

    color: rgba(255,255,255,.54);

    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   CTA
   ========================================================== */

.sw-about-cta {
    padding: 105px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(119,89,255,.16),
            transparent 40%
        ),
        #0b0a12;

    color: #ffffff;
}

.sw-about-cta-inner {
    text-align: center;
}

.sw-about-cta-inner > span {
    display: block;

    margin-bottom: 18px;

    color: #a995ff;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .18em;
}

.sw-about-cta h2 {
    margin: 0;

    font-size: clamp(48px, 7vw, 88px);
    line-height: .95;

    font-weight: 850;
    letter-spacing: -.06em;
}

.sw-about-cta p {
    max-width: 560px;

    margin: 24px auto 30px;

    color: rgba(255,255,255,.55);

    font-size: 17px;
    line-height: 1.65;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .sw-about-page {
    background: #0b0a12;
    color: #e9e6f2;
}

html[data-theme="dark"] .sw-about-story {
    background: #0b0a12;
}

html[data-theme="dark"] .sw-about-section-heading h2,
html[data-theme="dark"] .sw-about-story-lead p,
html[data-theme="dark"] .sw-about-story-content .sw-about-story-final {
    color: #ffffff;
}

html[data-theme="dark"] .sw-about-story-content p {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-about-beliefs {
    background: #101018;
}

html[data-theme="dark"] .sw-about-belief-card {
    background: #151421;

    border-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-about-belief-card h3 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-about-belief-card p {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-about-founders {
    background:
        linear-gradient(
            180deg,
            #101018 0%,
            #0b0a12 100%
        );
}


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

@media (max-width: 991px) {

    .sw-about-story-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

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

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

    .sw-about-founder-image {
        height: 500px;
    }

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

}

@media (max-width: 767px) {

    .sw-about-hero-inner {
        padding: 85px 20px;
    }

    .sw-about-hero {
        min-height: 550px;
    }

    .sw-about-story,
    .sw-about-beliefs,
    .sw-about-founders,
    .sw-about-why,
    .sw-about-cta {
        padding: 75px 0;
    }

    .sw-about-story-lead p {
        font-size: 34px;
    }

    .sw-about-founder-image {
        height: 470px;
        border-radius: 20px;
    }

    .sw-about-founder-overlay {
        padding: 24px;
    }

    .sw-about-founder-overlay h3 {
        font-size: 24px;
    }

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

}

/* ==========================================================
   SKILLWELL — CONTACT US
   ========================================================== */

.sw-contact-page {
    background: #f7f6fb;
    color: #181720;
}


/* HERO */

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

    min-height: 510px;

    display: flex;
    align-items: center;

    color: #fff;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(119,89,255,.28),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0a0910 0%,
            #111021 55%,
            #281a61 100%
        );
}

.sw-contact-hero::after {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 70px 70px;

    opacity: .35;
}

.sw-contact-hero-inner {
    position: relative;
    z-index: 2;

    padding: 95px 0;
}

.sw-contact-kicker,
.sw-contact-label,
.sw-contact-form-heading > span,
.sw-contact-bottom-inner > span {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .18em;
}

.sw-contact-kicker {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #b6a7ff;
}

.sw-contact-kicker span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #9475ff;

    box-shadow: 0 0 18px rgba(148,117,255,.8);
}

.sw-contact-hero h1 {
    margin: 20px 0;

    max-width: 900px;

    font-size: clamp(56px, 7vw, 96px);
    line-height: .96;

    font-weight: 850;
    letter-spacing: -.06em;
}

.sw-contact-hero h1 span {
    color: #a38cff;
}

.sw-contact-hero p {
    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 18px;
    line-height: 1.7;
}


/* MAIN */

.sw-contact-main {
    padding: 100px 0;
}

.sw-contact-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, .78fr)
        minmax(0, 1.22fr);

    gap: 70px;

    align-items: start;
}


/* LEFT */

.sw-contact-info {
    padding-top: 25px;
}

.sw-contact-label {
    display: block;

    margin-bottom: 15px;

    color: #7759ff;
}

.sw-contact-info h2 {
    max-width: 520px;

    margin: 0 0 20px;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1;

    font-weight: 850;
    letter-spacing: -.055em;
}

.sw-contact-info > p {
    max-width: 540px;

    margin: 0;

    color: #757783;

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

.sw-contact-email {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 40px;
}

.sw-contact-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    border-radius: 16px;

    background: #ece8ff;

    color: #7759ff;
}

.sw-contact-email small {
    display: block;

    margin-bottom: 5px;

    color: #9495a0;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.sw-contact-email a {
    color: #181720;

    font-size: 16px;
    font-weight: 750;

    text-decoration: none;
}


/* FORM CARD */

.sw-contact-form-card {
    padding: 38px;

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

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 28px 70px rgba(28,22,60,.08);
}

.sw-contact-form-heading > span {
    color: #7759ff;
}

.sw-contact-form-heading h3 {
    margin: 8px 0 28px;

    color: #181720;

    font-size: 32px;
    line-height: 1.1;

    font-weight: 800;
}


/* FORM */

.sw-contact-form-row {
    display: grid;

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

    gap: 16px;
}

.sw-contact-field {
    margin-bottom: 18px;
}

.sw-contact-field label {
    display: block;

    margin-bottom: 8px;

    color: #34323c;

    font-size: 13px;
    font-weight: 750;
}

.sw-contact-field input,
.sw-contact-field textarea {
    width: 100%;

    padding: 14px 15px;

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

    border-radius: 12px;

    outline: none;

    background: #fbfbfd;

    color: #181720;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.sw-contact-field input {
    height: 50px;
}

.sw-contact-field textarea {
    resize: vertical;
    min-height: 145px;
}

.sw-contact-field input::placeholder,
.sw-contact-field textarea::placeholder {
    color: #9b9ca7;
}

.sw-contact-field input:focus,
.sw-contact-field textarea:focus {
    border-color: #8a70ff;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(119,89,255,.09);
}


.sw-contact-submit,
.sw-contact-course-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    border: 0;

    padding: 14px 22px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #7759ff,
            #9675ff
        );

    color: #fff !important;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none !important;

    box-shadow:
        0 12px 27px rgba(119,89,255,.22);

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.sw-contact-submit:hover,
.sw-contact-course-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 34px rgba(119,89,255,.3);
}


/* BOTTOM */

.sw-contact-bottom {
    padding: 105px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(119,89,255,.17),
            transparent 40%
        ),
        #0b0a12;

    color: #fff;
}

.sw-contact-bottom-inner {
    text-align: center;
}

.sw-contact-bottom-inner > span {
    display: block;

    margin-bottom: 17px;

    color: #a895ff;
}

.sw-contact-bottom-inner h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 82px);
    line-height: .95;

    font-weight: 850;
    letter-spacing: -.06em;
}

.sw-contact-course-btn {
    margin-top: 30px;
}


/* DARK MODE */

html[data-theme="dark"] .sw-contact-page {
    background: #0b0a12;
    color: #e9e6f2;
}

html[data-theme="dark"] .sw-contact-main {
    background: #0b0a12;
}

html[data-theme="dark"] .sw-contact-info h2,
html[data-theme="dark"] .sw-contact-email a {
    color: #ffffff;
}

html[data-theme="dark"] .sw-contact-info > p {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-contact-icon {
    background: rgba(119,89,255,.14);
}

html[data-theme="dark"] .sw-contact-form-card {
    background: #151421;

    border-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 25px 70px rgba(0,0,0,.22);
}

html[data-theme="dark"] .sw-contact-form-heading h3,
html[data-theme="dark"] .sw-contact-field label {
    color: #ffffff;
}

html[data-theme="dark"] .sw-contact-field input,
html[data-theme="dark"] .sw-contact-field textarea {
    background: #101018;

    border-color:
        rgba(255,255,255,.10);

    color: #ffffff;
}

html[data-theme="dark"] .sw-contact-field input:focus,
html[data-theme="dark"] .sw-contact-field textarea:focus {
    background: #12111b;

    border-color: #8a70ff;
}

html[data-theme="dark"] .sw-contact-field input::placeholder,
html[data-theme="dark"] .sw-contact-field textarea::placeholder {
    color: #777483;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .sw-contact-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sw-contact-info {
        padding-top: 0;
    }

}

@media (max-width: 767px) {

    .sw-contact-hero-inner {
        padding: 78px 20px;
    }

    .sw-contact-hero {
        min-height: 480px;
    }

    .sw-contact-main,
    .sw-contact-bottom {
        padding: 75px 0;
    }

    .sw-contact-form-card {
        padding: 25px 20px;
        border-radius: 20px;
    }

    .sw-contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}

/* ==========================================================
   COURSE BUNDLES — FULL PAGE
   ========================================================== */

.sw-bundles-page {
    background: #f7f6fb;
    color: #181720;
}


/* HERO */

/* ==========================================================
   COURSE BUNDLES — HERO
   ========================================================== */

.sw-bundles-page-hero {
    position: relative;
    overflow: hidden;

    padding: 88px 0 115px;

    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(119,89,255,.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 70%,
            rgba(70,90,180,.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0b0a12 0%,
            #111021 55%,
            #161326 100%
        );

    color: #ffffff;
}


/* Soft fade into the bundle section */
.sw-bundles-page-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 150px;

    background:
        linear-gradient(
            to bottom,
            rgba(22,19,38,0),
            #0f0e17 90%
        );

    pointer-events: none;
}


/* Subtle background grid */
.sw-bundles-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 72px 72px;

    opacity: .25;

    pointer-events: none;
}


.sw-bundles-page-hero .container-xl {
    position: relative;
    z-index: 2;
}


.sw-bundles-page-hero .sw-section-eyebrow {
    display: block;

    margin-bottom: 16px;

    color: #a88fff;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .19em;
}


.sw-bundles-page-hero h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(52px, 6vw, 76px);
    line-height: .95;

    font-weight: 850;
    letter-spacing: -.065em;
}


.sw-bundles-page-hero p {
    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 18px;
    line-height: 1.65;
}


/* ==========================================================
   BUNDLE CONTENT — FLOW INTO HERO
   ========================================================== */

.sw-bundles-page-content {
    position: relative;
    z-index: 3;

    margin-top: -55px;

    padding: 0 0 100px;

    background: #0f0e17;
}


/* Toolbar now sits visually inside the transition */
.sw-bundles-page-toolbar {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 22px 24px;

    margin-bottom: 28px;

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

    border-radius: 18px;

    background: rgba(21,20,33,.92);

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

    backdrop-filter: blur(12px);
}


.sw-bundles-page-count {
    color: #aaa6b6;

    font-size: 13px;
    font-weight: 650;
}


/* Search */
.sw-bundles-search {
    position: relative;

    display: flex;
    align-items: center;

    width: min(440px, 100%);

    padding: 5px;

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

    border-radius: 13px;

    background: #0f0e17;
}


.sw-bundles-search > i {
    margin-left: 14px;

    color: #8d889b;

    font-size: 13px;
}


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

    min-width: 0;

    height: 43px;

    padding: 0 12px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
}


.sw-bundles-search input::placeholder {
    color: #777483;
}


.sw-bundles-search button {
    display: inline-flex;

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

    gap: 8px;

    height: 43px;

    padding: 0 16px;

    border: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #7759ff,
            #9675ff
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}


/* Bundle grid */
.sw-bundle-grid-page {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   LIGHT MODE
   ========================================================== */

html:not([data-theme="dark"]) .sw-bundles-page-hero {
    background:
        radial-gradient(
            circle at 82% 15%,
            rgba(119,89,255,.13),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #faf9fd 0%,
            #f3f0fa 75%,
            #eeebf6 100%
        );

    color: #181720;
}

html:not([data-theme="dark"]) .sw-bundles-page-hero::after {
    background:
        linear-gradient(
            to bottom,
            rgba(238,235,246,0),
            #f7f6fb 90%
        );
}

html:not([data-theme="dark"]) .sw-bundles-page-content {
    background: #f7f6fb;
}

html:not([data-theme="dark"]) .sw-bundles-page-toolbar {
    background: rgba(255,255,255,.92);

    border-color:
        rgba(25,22,40,.07);

    box-shadow:
        0 18px 50px rgba(35,25,75,.07);
}

html:not([data-theme="dark"]) .sw-bundles-page-count {
    color: #777985;
}

html:not([data-theme="dark"]) .sw-bundles-search {
    background: #ffffff;

    border-color:
        rgba(25,22,40,.09);
}

html:not([data-theme="dark"]) .sw-bundles-search input {
    color: #181720;
}

html:not([data-theme="dark"]) .sw-bundles-search input::placeholder {
    color: #9b9ca7;
}


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

@media (max-width: 767px) {

    .sw-bundles-page-hero {
        padding: 65px 0 95px;
    }

    .sw-bundles-page-hero h1 {
        font-size: 46px;
    }

    .sw-bundles-page-content {
        margin-top: -35px;
        padding-bottom: 70px;
    }

    .sw-bundles-page-toolbar {
        align-items: stretch;
        flex-direction: column;

        padding: 18px;

        border-radius: 16px;
    }

    .sw-bundles-search {
        width: 100%;
    }
}

/* CONTENT */

.sw-bundles-page-content {
    padding: 65px 0 100px;
}


/* TOOLBAR */

.sw-bundles-page-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 28px;
}

.sw-bundles-page-count {
    color: #878894;

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

.sw-bundles-search {
    position: relative;

    display: flex;
    align-items: center;

    width: min(440px, 100%);

    padding: 5px;

    border: 1px solid rgba(25,22,40,.08);

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 8px 30px rgba(30,25,60,.05);
}

.sw-bundles-search > i {
    margin-left: 14px;

    color: #918c9f;

    font-size: 13px;
}

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

    min-width: 0;

    height: 43px;

    padding: 0 12px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #181720;

    font-family: inherit;
    font-size: 13px;
}

.sw-bundles-search input::placeholder {
    color: #9b9ca7;
}

.sw-bundles-search button {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    height: 43px;

    padding: 0 15px;

    border: 0;

    border-radius: 10px;

    background: #7759ff;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}


/* GRID */

.sw-bundle-grid-page {
    display: grid;

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

    gap: 18px;
}


/* Slightly more spacious than homepage */

.sw-bundle-grid-page .sw-bundle-card {
    width: 100%;
}


/* KEEP HOMEPAGE BUNDLE DESIGN */

.sw-bundle-grid-page .sw-bundle-top {
    min-height: 112px;
}

.sw-bundle-grid-page .sw-bundle-course {
    min-height: 72px;
}


/* PAGINATION */

.sw-bundles-pagination {
    margin-top: 45px;

    text-align: center;
}

.sw-bundles-pagination .pagination {
    justify-content: center;

    gap: 6px;
}

.sw-bundles-pagination .pagination li a,
.sw-bundles-pagination .pagination li span {
    display: inline-flex;

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

    min-width: 38px;
    height: 38px;

    padding: 0 11px;

    border-radius: 10px !important;

    border: 1px solid rgba(25,22,40,.08) !important;

    background: #ffffff !important;

    color: #555666 !important;

    font-size: 13px;

    text-decoration: none !important;
}

.sw-bundles-pagination .pagination li.active span,
.sw-bundles-pagination .pagination li.active a {
    background: #7759ff !important;

    border-color: #7759ff !important;

    color: #ffffff !important;
}


/* EMPTY STATE */

.sw-bundles-empty {
    padding: 85px 20px;

    text-align: center;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 22px;

    background: #ffffff;
}

.sw-bundles-empty-icon {
    display: grid;

    place-items: center;

    width: 65px;
    height: 65px;

    margin: 0 auto 20px;

    border-radius: 18px;

    background: #eee9ff;

    color: #7759ff;

    font-size: 22px;
}

.sw-bundles-empty h3 {
    margin: 0 0 8px;

    color: #181720;

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

.sw-bundles-empty p {
    margin: 0;

    color: #888995;

    font-size: 14px;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .sw-bundles-page {
    background: #0b0a12;
    color: #e9e6f2;
}

html[data-theme="dark"] .sw-bundles-page-hero {
    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(119,89,255,.20),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0b0a12 0%,
            #121020 100%
        );
}

html[data-theme="dark"] .sw-bundles-page-hero h1 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-bundles-page-hero p {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-bundles-page-count {
    color: #8e899c;
}

html[data-theme="dark"] .sw-bundles-search {
    background: #151421;

    border-color:
        rgba(255,255,255,.08);

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

html[data-theme="dark"] .sw-bundles-search input {
    color: #ffffff;
}

html[data-theme="dark"] .sw-bundles-search input::placeholder {
    color: #777483;
}

html[data-theme="dark"] .sw-bundles-pagination
.pagination li a,
html[data-theme="dark"] .sw-bundles-pagination
.pagination li span {
    background: #151421 !important;

    border-color:
        rgba(255,255,255,.08) !important;

    color: #aaa6b6 !important;
}

html[data-theme="dark"] .sw-bundles-empty {
    background: #151421;

    border-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-bundles-empty h3 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-bundles-empty p {
    color: #aaa6b6;
}


/* RESPONSIVE */

@media (max-width: 991px) {

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

    .sw-bundles-page-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sw-bundles-search {
        width: 100%;
    }

}

@media (max-width: 767px) {

    .sw-bundles-page-hero {
        padding: 70px 0 65px;
    }

    .sw-bundles-page-content {
        padding: 45px 0 75px;
    }

    .sw-bundles-page-hero h1 {
        font-size: 46px;
    }

    .sw-bundle-grid-page {
        gap: 14px;
    }

}

/* ==========================================================
   SKILLWELL — PRIVACY POLICY
   ========================================================== */

.sw-privacy-page {
    background: #f7f6fb;
    color: #181720;
}


/* ==========================================================
   HERO
   ========================================================== */

.sw-privacy-hero {
    position: relative;

    overflow: hidden;

    padding: 90px 0 105px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(119,89,255,.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(70,90,180,.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0b0a12 0%,
            #111021 58%,
            #241852 100%
        );
}

.sw-privacy-hero::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 72px 72px;

    opacity: .25;

    pointer-events: none;
}

.sw-privacy-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130,100,255,.20) 0%,
            rgba(130,100,255,0) 70%
        );

    pointer-events: none;
}

.sw-privacy-hero .container-xl {
    position: relative;
    z-index: 2;
}

.sw-privacy-eyebrow {
    display: inline-block;

    margin-bottom: 17px;

    color: #a995ff;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .19em;
}

.sw-privacy-hero h1 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(52px, 6.5vw, 82px);
    line-height: .95;

    font-weight: 850;

    letter-spacing: -.065em;
}

.sw-privacy-hero p {
    max-width: 700px;

    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 18px;
    line-height: 1.7;
}


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

.sw-privacy-content {
    position: relative;

    padding: 75px 0 110px;

    background: #f7f6fb;
}

.sw-privacy-layout {
    display: grid;

    grid-template-columns:
        270px minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


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

.sw-privacy-side {
    position: sticky;
    top: 100px;
}

.sw-privacy-side-card {
    padding: 28px;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 20px;

    background: #ffffff;

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

.sw-privacy-side-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    border-radius: 14px;

    background: #eee9ff;

    color: #7759ff;

    font-size: 17px;
}

.sw-privacy-side-card h3 {
    margin: 0 0 10px;

    color: #181720;

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

.sw-privacy-side-card p {
    margin: 0;

    color: #7b7d88;

    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================================
   DOCUMENT
   ========================================================== */

.sw-privacy-document {
    min-width: 0;

    padding: 50px 55px;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 22px 65px
        rgba(28,22,60,.055);
}

.sw-privacy-document-header {
    padding-bottom: 28px;

    margin-bottom: 30px;

    border-bottom:
        1px solid
        rgba(25,22,40,.08);
}

.sw-privacy-document-header span {
    display: block;

    margin-bottom: 9px;

    color: #7759ff;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .17em;
}

.sw-privacy-document-header h2 {
    margin: 0;

    color: #181720;

    font-size: 30px;
    font-weight: 800;

    letter-spacing: -.035em;
}


/* ==========================================================
   EXISTING POLICY CONTENT
   ========================================================== */

.sw-privacy-richtext {
    color: #686a76;

    font-size: 15px;
    line-height: 1.85;
}


/* Headings coming from the stored privacy policy */
.sw-privacy-richtext h1,
.sw-privacy-richtext h2,
.sw-privacy-richtext h3,
.sw-privacy-richtext h4,
.sw-privacy-richtext h5,
.sw-privacy-richtext h6 {
    margin-top: 36px;
    margin-bottom: 13px;

    color: #181720;

    font-weight: 800;

    line-height: 1.25;
}

.sw-privacy-richtext h1 {
    font-size: 30px;
}

.sw-privacy-richtext h2 {
    font-size: 25px;
}

.sw-privacy-richtext h3 {
    font-size: 21px;
}

.sw-privacy-richtext h4 {
    font-size: 18px;
}

.sw-privacy-richtext h5,
.sw-privacy-richtext h6 {
    font-size: 16px;
}


/* Paragraphs */
.sw-privacy-richtext p {
    margin:
        0
        0
        18px;
}


/* Lists */
.sw-privacy-richtext ul,
.sw-privacy-richtext ol {
    margin:
        0
        0
        22px;

    padding-left: 24px;
}

.sw-privacy-richtext li {
    margin-bottom: 8px;
}


/* Links */
.sw-privacy-richtext a {
    color: #694cff;

    font-weight: 650;

    text-decoration: none;
}

.sw-privacy-richtext a:hover {
    text-decoration: underline;
}


/* Strong text */
.sw-privacy-richtext strong,
.sw-privacy-richtext b {
    color: #292733;

    font-weight: 750;
}


/* Tables */
.sw-privacy-richtext table {
    width: 100%;

    margin: 25px 0;

    border-collapse: collapse;
}

.sw-privacy-richtext th,
.sw-privacy-richtext td {
    padding: 12px 14px;

    border:
        1px solid
        rgba(25,22,40,.08);

    text-align: left;
}

.sw-privacy-richtext th {
    background: #f7f6fb;

    color: #292733;

    font-weight: 750;
}


/* Blockquotes */
.sw-privacy-richtext blockquote {
    margin:
        25px 0;

    padding:
        18px
        22px;

    border-left:
        3px solid
        #7759ff;

    border-radius: 0 12px 12px 0;

    background: #f7f5ff;

    color: #696b77;
}


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

.sw-privacy-footer-note {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 40px;
    padding-top: 25px;

    border-top:
        1px solid
        rgba(25,22,40,.08);

    color: #999aa5;

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

.sw-privacy-footer-note i {
    color: #7759ff;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .sw-privacy-page {
    background: #0b0a12;
    color: #e9e6f2;
}

html[data-theme="dark"] .sw-privacy-content {
    background: #0b0a12;
}

html[data-theme="dark"] .sw-privacy-side-card,
html[data-theme="dark"] .sw-privacy-document {
    background: #151421;

    border-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.18);
}

html[data-theme="dark"] .sw-privacy-side-card h3,
html[data-theme="dark"] .sw-privacy-document-header h2 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-privacy-side-card p {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-privacy-richtext {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-privacy-richtext h1,
html[data-theme="dark"] .sw-privacy-richtext h2,
html[data-theme="dark"] .sw-privacy-richtext h3,
html[data-theme="dark"] .sw-privacy-richtext h4,
html[data-theme="dark"] .sw-privacy-richtext h5,
html[data-theme="dark"] .sw-privacy-richtext h6 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-privacy-richtext strong,
html[data-theme="dark"] .sw-privacy-richtext b {
    color: #eeeeF5;
}

html[data-theme="dark"] .sw-privacy-richtext th {
    background: #101018;

    color: #ffffff;
}

html[data-theme="dark"] .sw-privacy-richtext th,
html[data-theme="dark"] .sw-privacy-richtext td {
    border-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-privacy-richtext blockquote {
    background: rgba(119,89,255,.08);

    color: #aaa6b6;
}

html[data-theme="dark"] .sw-privacy-document-header {
    border-bottom-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-privacy-footer-note {
    border-top-color:
        rgba(255,255,255,.08);

    color: #777483;
}


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

@media (max-width: 991px) {

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

    .sw-privacy-side {
        position: static;
    }

    .sw-privacy-side-card {
        max-width: 100%;
    }

}

@media (max-width: 767px) {

    .sw-privacy-hero {
        padding: 70px 0 80px;
    }

    .sw-privacy-hero h1 {
        font-size: 48px;
    }

    .sw-privacy-hero p {
        font-size: 16px;
    }

    .sw-privacy-content {
        padding: 55px 0 75px;
    }

    .sw-privacy-document {
        padding: 30px 22px;

        border-radius: 19px;
    }

    .sw-privacy-document-header h2 {
        font-size: 26px;
    }

    .sw-privacy-richtext {
        font-size: 14px;
        line-height: 1.8;
    }

}

/* ==========================================================
   SKILLWELL — TERMS & CONDITIONS
   ========================================================== */

.sw-terms-page {
    background: #f7f6fb;
    color: #181720;
}


/* ==========================================================
   HERO
   ========================================================== */

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

    padding: 90px 0 105px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(119,89,255,.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(70,90,180,.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0b0a12 0%,
            #111021 58%,
            #241852 100%
        );
}

.sw-terms-hero::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 72px 72px;

    opacity: .25;

    pointer-events: none;
}

.sw-terms-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130,100,255,.20) 0%,
            rgba(130,100,255,0) 70%
        );

    pointer-events: none;
}

.sw-terms-hero .container-xl {
    position: relative;
    z-index: 2;
}

.sw-terms-eyebrow {
    display: inline-block;

    margin-bottom: 17px;

    color: #a995ff;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .19em;
}

.sw-terms-hero h1 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(50px, 6.5vw, 80px);
    line-height: .95;

    font-weight: 850;

    letter-spacing: -.065em;
}

.sw-terms-hero p {
    max-width: 700px;

    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 18px;
    line-height: 1.7;
}


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

.sw-terms-content {
    padding: 75px 0 110px;

    background: #f7f6fb;
}

.sw-terms-layout {
    display: grid;

    grid-template-columns:
        270px minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


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

.sw-terms-side {
    position: sticky;
    top: 100px;
}

.sw-terms-side-card {
    padding: 28px;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 20px;

    background: #ffffff;

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

.sw-terms-side-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    border-radius: 14px;

    background: #eee9ff;

    color: #7759ff;

    font-size: 17px;
}

.sw-terms-side-card h3 {
    margin: 0 0 10px;

    color: #181720;

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

.sw-terms-side-card p {
    margin: 0;

    color: #7b7d88;

    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================================
   DOCUMENT
   ========================================================== */

.sw-terms-document {
    min-width: 0;

    padding: 50px 55px;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 22px 65px
        rgba(28,22,60,.055);
}

.sw-terms-document-header {
    padding-bottom: 28px;

    margin-bottom: 30px;

    border-bottom:
        1px solid
        rgba(25,22,40,.08);
}

.sw-terms-document-header span {
    display: block;

    margin-bottom: 9px;

    color: #7759ff;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .17em;
}

.sw-terms-document-header h2 {
    margin: 0;

    color: #181720;

    font-size: 30px;
    font-weight: 800;

    letter-spacing: -.035em;
}


/* ==========================================================
   EXISTING TERMS CONTENT
   ========================================================== */

.sw-terms-richtext {
    color: #686a76;

    font-size: 15px;
    line-height: 1.85;
}

.sw-terms-richtext h1,
.sw-terms-richtext h2,
.sw-terms-richtext h3,
.sw-terms-richtext h4,
.sw-terms-richtext h5,
.sw-terms-richtext h6 {
    margin-top: 36px;
    margin-bottom: 13px;

    color: #181720;

    font-weight: 800;

    line-height: 1.25;
}

.sw-terms-richtext h1 {
    font-size: 30px;
}

.sw-terms-richtext h2 {
    font-size: 25px;
}

.sw-terms-richtext h3 {
    font-size: 21px;
}

.sw-terms-richtext h4 {
    font-size: 18px;
}

.sw-terms-richtext h5,
.sw-terms-richtext h6 {
    font-size: 16px;
}

.sw-terms-richtext p {
    margin: 0 0 18px;
}

.sw-terms-richtext ul,
.sw-terms-richtext ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

.sw-terms-richtext li {
    margin-bottom: 8px;
}

.sw-terms-richtext a {
    color: #694cff;

    font-weight: 650;

    text-decoration: none;
}

.sw-terms-richtext a:hover {
    text-decoration: underline;
}

.sw-terms-richtext strong,
.sw-terms-richtext b {
    color: #292733;
    font-weight: 750;
}

.sw-terms-richtext table {
    width: 100%;

    margin: 25px 0;

    border-collapse: collapse;
}

.sw-terms-richtext th,
.sw-terms-richtext td {
    padding: 12px 14px;

    border:
        1px solid
        rgba(25,22,40,.08);

    text-align: left;
}

.sw-terms-richtext th {
    background: #f7f6fb;

    color: #292733;

    font-weight: 750;
}

.sw-terms-richtext blockquote {
    margin: 25px 0;

    padding: 18px 22px;

    border-left:
        3px solid
        #7759ff;

    border-radius: 0 12px 12px 0;

    background: #f7f5ff;

    color: #696b77;
}


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

.sw-terms-footer-note {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 40px;
    padding-top: 25px;

    border-top:
        1px solid
        rgba(25,22,40,.08);

    color: #999aa5;

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

.sw-terms-footer-note i {
    color: #7759ff;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .sw-terms-page {
    background: #0b0a12;
    color: #e9e6f2;
}

html[data-theme="dark"] .sw-terms-content {
    background: #0b0a12;
}

html[data-theme="dark"] .sw-terms-side-card,
html[data-theme="dark"] .sw-terms-document {
    background: #151421;

    border-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.18);
}

html[data-theme="dark"] .sw-terms-side-card h3,
html[data-theme="dark"] .sw-terms-document-header h2 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-terms-side-card p {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-terms-richtext {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-terms-richtext h1,
html[data-theme="dark"] .sw-terms-richtext h2,
html[data-theme="dark"] .sw-terms-richtext h3,
html[data-theme="dark"] .sw-terms-richtext h4,
html[data-theme="dark"] .sw-terms-richtext h5,
html[data-theme="dark"] .sw-terms-richtext h6 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-terms-richtext strong,
html[data-theme="dark"] .sw-terms-richtext b {
    color: #eeeeF5;
}

html[data-theme="dark"] .sw-terms-richtext th {
    background: #101018;
    color: #ffffff;
}

html[data-theme="dark"] .sw-terms-richtext th,
html[data-theme="dark"] .sw-terms-richtext td {
    border-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-terms-richtext blockquote {
    background: rgba(119,89,255,.08);
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-terms-document-header {
    border-bottom-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-terms-footer-note {
    border-top-color:
        rgba(255,255,255,.08);

    color: #777483;
}


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

@media (max-width: 991px) {

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

    .sw-terms-side {
        position: static;
    }

}

@media (max-width: 767px) {

    .sw-terms-hero {
        padding: 70px 0 80px;
    }

    .sw-terms-hero h1 {
        font-size: 47px;
    }

    .sw-terms-hero p {
        font-size: 16px;
    }

    .sw-terms-content {
        padding: 55px 0 75px;
    }

    .sw-terms-document {
        padding: 30px 22px;
        border-radius: 19px;
    }

    .sw-terms-document-header h2 {
        font-size: 26px;
    }

    .sw-terms-richtext {
        font-size: 14px;
        line-height: 1.8;
    }

}

/* ==========================================================
   SKILLWELL — REFUND POLICY
   ========================================================== */

.sw-refund-page {
    background: #f7f6fb;
    color: #181720;
}


/* ==========================================================
   HERO
   ========================================================== */

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

    padding: 90px 0 105px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(119,89,255,.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(70,90,180,.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0b0a12 0%,
            #111021 58%,
            #241852 100%
        );
}

.sw-refund-hero::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 72px 72px;

    opacity: .25;

    pointer-events: none;
}

.sw-refund-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130,100,255,.20) 0%,
            rgba(130,100,255,0) 70%
        );

    pointer-events: none;
}

.sw-refund-hero .container-xl {
    position: relative;
    z-index: 2;
}

.sw-refund-eyebrow {
    display: inline-block;

    margin-bottom: 17px;

    color: #a995ff;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .19em;
}

.sw-refund-hero h1 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(50px, 6.5vw, 80px);
    line-height: .95;

    font-weight: 850;

    letter-spacing: -.065em;
}

.sw-refund-hero p {
    max-width: 700px;

    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 18px;
    line-height: 1.7;
}


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

.sw-refund-content {
    padding: 75px 0 110px;

    background: #f7f6fb;
}

.sw-refund-layout {
    display: grid;

    grid-template-columns:
        270px minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


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

.sw-refund-side {
    position: sticky;
    top: 100px;
}

.sw-refund-side-card {
    padding: 28px;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 20px;

    background: #ffffff;

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

.sw-refund-side-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    border-radius: 14px;

    background: #eee9ff;

    color: #7759ff;

    font-size: 17px;
}

.sw-refund-side-card h3 {
    margin: 0 0 10px;

    color: #181720;

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

.sw-refund-side-card p {
    margin: 0;

    color: #7b7d88;

    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================================
   DOCUMENT
   ========================================================== */

.sw-refund-document {
    min-width: 0;

    padding: 50px 55px;

    border:
        1px solid
        rgba(25,22,40,.07);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 22px 65px
        rgba(28,22,60,.055);
}

.sw-refund-document-header {
    padding-bottom: 28px;

    margin-bottom: 30px;

    border-bottom:
        1px solid
        rgba(25,22,40,.08);
}

.sw-refund-document-header span {
    display: block;

    margin-bottom: 9px;

    color: #7759ff;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .17em;
}

.sw-refund-document-header h2 {
    margin: 0;

    color: #181720;

    font-size: 30px;
    font-weight: 800;

    letter-spacing: -.035em;
}


/* ==========================================================
   EXISTING REFUND CONTENT
   ========================================================== */

.sw-refund-richtext {
    color: #686a76;

    font-size: 15px;
    line-height: 1.85;
}

.sw-refund-richtext h1,
.sw-refund-richtext h2,
.sw-refund-richtext h3,
.sw-refund-richtext h4,
.sw-refund-richtext h5,
.sw-refund-richtext h6 {
    margin-top: 36px;
    margin-bottom: 13px;

    color: #181720;

    font-weight: 800;

    line-height: 1.25;
}

.sw-refund-richtext h1 {
    font-size: 30px;
}

.sw-refund-richtext h2 {
    font-size: 25px;
}

.sw-refund-richtext h3 {
    font-size: 21px;
}

.sw-refund-richtext h4 {
    font-size: 18px;
}

.sw-refund-richtext h5,
.sw-refund-richtext h6 {
    font-size: 16px;
}

.sw-refund-richtext p {
    margin: 0 0 18px;
}

.sw-refund-richtext ul,
.sw-refund-richtext ol {
    margin: 0 0 22px;

    padding-left: 24px;
}

.sw-refund-richtext li {
    margin-bottom: 8px;
}

.sw-refund-richtext a {
    color: #694cff;

    font-weight: 650;

    text-decoration: none;
}

.sw-refund-richtext a:hover {
    text-decoration: underline;
}

.sw-refund-richtext strong,
.sw-refund-richtext b {
    color: #292733;

    font-weight: 750;
}

.sw-refund-richtext table {
    width: 100%;

    margin: 25px 0;

    border-collapse: collapse;
}

.sw-refund-richtext th,
.sw-refund-richtext td {
    padding: 12px 14px;

    border:
        1px solid
        rgba(25,22,40,.08);

    text-align: left;
}

.sw-refund-richtext th {
    background: #f7f6fb;

    color: #292733;

    font-weight: 750;
}

.sw-refund-richtext blockquote {
    margin: 25px 0;

    padding: 18px 22px;

    border-left:
        3px solid
        #7759ff;

    border-radius: 0 12px 12px 0;

    background: #f7f5ff;

    color: #696b77;
}


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

.sw-refund-footer-note {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 40px;
    padding-top: 25px;

    border-top:
        1px solid
        rgba(25,22,40,.08);

    color: #999aa5;

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

.sw-refund-footer-note i {
    color: #7759ff;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .sw-refund-page {
    background: #0b0a12;
    color: #e9e6f2;
}

html[data-theme="dark"] .sw-refund-content {
    background: #0b0a12;
}

html[data-theme="dark"] .sw-refund-side-card,
html[data-theme="dark"] .sw-refund-document {
    background: #151421;

    border-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.18);
}

html[data-theme="dark"] .sw-refund-side-card h3,
html[data-theme="dark"] .sw-refund-document-header h2 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-refund-side-card p {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-refund-richtext {
    color: #aaa6b6;
}

html[data-theme="dark"] .sw-refund-richtext h1,
html[data-theme="dark"] .sw-refund-richtext h2,
html[data-theme="dark"] .sw-refund-richtext h3,
html[data-theme="dark"] .sw-refund-richtext h4,
html[data-theme="dark"] .sw-refund-richtext h5,
html[data-theme="dark"] .sw-refund-richtext h6 {
    color: #ffffff;
}

html[data-theme="dark"] .sw-refund-richtext strong,
html[data-theme="dark"] .sw-refund-richtext b {
    color: #eeeeF5;
}

html[data-theme="dark"] .sw-refund-richtext th {
    background: #101018;
    color: #ffffff;
}

html[data-theme="dark"] .sw-refund-richtext th,
html[data-theme="dark"] .sw-refund-richtext td {
    border-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-refund-richtext blockquote {
    background: rgba(119,89,255,.08);

    color: #aaa6b6;
}

html[data-theme="dark"] .sw-refund-document-header {
    border-bottom-color:
        rgba(255,255,255,.08);
}

html[data-theme="dark"] .sw-refund-footer-note {
    border-top-color:
        rgba(255,255,255,.08);

    color: #777483;
}


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

@media (max-width: 991px) {

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

    .sw-refund-side {
        position: static;
    }

}

@media (max-width: 767px) {

    .sw-refund-hero {
        padding: 70px 0 80px;
    }

    .sw-refund-hero h1 {
        font-size: 47px;
    }

    .sw-refund-hero p {
        font-size: 16px;
    }

    .sw-refund-content {
        padding: 55px 0 75px;
    }

    .sw-refund-document {
        padding: 30px 22px;

        border-radius: 19px;
    }

    .sw-refund-document-header h2 {
        font-size: 26px;
    }

    .sw-refund-richtext {
        font-size: 14px;
        line-height: 1.8;
    }

}

@media (max-width: 767px) {

    body {
        padding-bottom: 105px !important;
    }

}

/* ==========================================================
   MOBILE MENU — SOLID DARK PANELS
   ========================================================== */

@media (max-width: 767px) {

    /* Main mobile menu */
    .sw-navbar .main-nav-wrap .mobile-main-nav {
        background: #141321 !important;

        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 0 0 20px 20px !important;

        box-shadow:
            0 25px 60px rgba(0,0,0,.45) !important;

        overflow: hidden !important;
    }


    /* Main menu items */
    .sw-navbar .main-nav-wrap .mobile-main-nav > li > a {
        background: #141321 !important;

        color: #ffffff !important;

        opacity: 1 !important;
    }


    /* Hover / active */
    .sw-navbar .main-nav-wrap .mobile-main-nav > li > a:hover,
    .sw-navbar .main-nav-wrap .mobile-main-nav > li > a:focus,
    .sw-navbar .main-nav-wrap .mobile-main-nav > li > a:active {
        background: #1d1a2d !important;

        color: #ffffff !important;
    }


    /* Categories dropdown */
    .sw-navbar .main-nav-wrap
    .mobile-main-nav .category {
        background: #151421 !important;

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

        box-shadow:
            0 25px 60px rgba(0,0,0,.50) !important;

        border-radius: 18px !important;

        overflow: hidden !important;
    }


    /* Category links */
    .sw-navbar .main-nav-wrap
    .mobile-main-nav .category li > a {
        background: #151421 !important;

        color: #ffffff !important;

        opacity: 1 !important;
    }


    /* Category links hover */
    .sw-navbar .main-nav-wrap
    .mobile-main-nav .category li > a:hover,
    .sw-navbar .main-nav-wrap
    .mobile-main-nav .category li > a:active {
        background: #211d34 !important;

        color: #ffffff !important;
    }


    /* Sub-category dropdown */
    .sw-navbar .main-nav-wrap
    .mobile-main-nav .sub-category {
        background: #151421 !important;

        border-radius: 18px !important;

        overflow: hidden !important;
    }


    .sw-navbar .main-nav-wrap
    .mobile-main-nav .sub-category li > a {
        background: #151421 !important;

        color: #ffffff !important;
    }


    .sw-navbar .main-nav-wrap
    .mobile-main-nav .sub-category li > a:hover {
        background: #211d34 !important;
    }


    /* Icons */
    .sw-navbar .main-nav-wrap
    .mobile-main-nav .icon,
    .sw-navbar .main-nav-wrap
    .mobile-main-nav i {
        color: #a98cff !important;
        opacity: 1 !important;
    }


    /* Arrow */
    .sw-navbar .main-nav-wrap
    .mobile-main-nav .has-sub-category i {
        color: #ffffff !important;
        opacity: 1 !important;
    }


    /* Menu overlay */
    .sw-navbar .main-nav-wrap .mobile-overlay {
        background: rgba(3,3,8,.58) !important;
        opacity: 1 !important;
    }

}

/* ==========================================================
   MOBILE NAV — REMOVE TRANSPARENCY
   ========================================================== */

@media (max-width: 767px) {

    /* Main mobile navigation wrapper */
    .sw-navbar .main-nav-wrap {
        background: #12111b !important;
        background-color: #12111b !important;

        opacity: 1 !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        box-shadow:
            0 25px 60px rgba(0, 0, 0, .55) !important;
    }


    /* Overlay behind navigation */
    .sw-navbar .main-nav-wrap .mobile-overlay {
        background: rgba(0, 0, 0, .72) !important;
        opacity: 1 !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* Main menu panel */
    .sw-navbar .main-nav-wrap .mobile-main-nav {
        background: #12111b !important;
        background-color: #12111b !important;

        opacity: 1 !important;

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

        border-radius: 0 0 20px 20px !important;

        box-shadow:
            0 25px 60px rgba(0, 0, 0, .45) !important;
    }


    /* Every main navigation item */
    .sw-navbar .main-nav-wrap .mobile-main-nav > li,
    .sw-navbar .main-nav-wrap .mobile-main-nav > li > a {
        background: #12111b !important;
        background-color: #12111b !important;

        opacity: 1 !important;

        color: #ffffff !important;
    }


    /* Sign-in / sign-up area */
    .sw-navbar .sign-in-box {
        background: #12111b !important;
        background-color: #12111b !important;

        opacity: 1 !important;
    }


    .sw-navbar .sign-in-box .btn-sign-in {
        background: #12111b !important;
        background-color: #12111b !important;

        color: #ffffff !important;
        opacity: 1 !important;
    }


    .sw-navbar .sign-in-box .btn-sign-up {
        background:
            linear-gradient(
                135deg,
                #6d4cff,
                #8e6bff
            ) !important;

        color: #ffffff !important;
        opacity: 1 !important;
    }


    /* Categories dropdown */
    .sw-navbar .mobile-main-nav .category {
        background: #151421 !important;
        background-color: #151421 !important;

        opacity: 1 !important;

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

        box-shadow:
            0 25px 60px rgba(0, 0, 0, .55) !important;
    }


    /* Category links */
    .sw-navbar .mobile-main-nav .category li,
    .sw-navbar .mobile-main-nav .category li > a {
        background: #151421 !important;
        background-color: #151421 !important;

        color: #ffffff !important;

        opacity: 1 !important;
    }


    /* Sub-category dropdown */
    .sw-navbar .mobile-main-nav .sub-category {
        background: #151421 !important;
        background-color: #151421 !important;

        opacity: 1 !important;
    }


    .sw-navbar .mobile-main-nav .sub-category li > a {
        background: #151421 !important;
        background-color: #151421 !important;

        color: #ffffff !important;

        opacity: 1 !important;
    }

}

/* ==========================================================
   COURSE CURRICULUM — MOBILE ONLY
   Fix title / lesson / duration overlap
   Desktop remains untouched
   ========================================================== */

@media (max-width: 767px) {

    /* Each section card */
    .course-curriculum-box .lecture-group-wrapper {
        width: 100% !important;
        margin-bottom: 14px !important;

        overflow: hidden !important;
    }


    /* Section header */
    .course-curriculum-box .lecture-group-title {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        min-height: 104px !important;

        padding: 18px 18px 16px 58px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* Section title */
    .course-curriculum-box .lecture-group-title .title {
        float: none !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 17px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;

        white-space: normal !important;
    }


    /* Lesson count + duration */
    .course-curriculum-box .lecture-group-title > .float-end {
        float: none !important;

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

        width: 100% !important;

        margin: 9px 0 0 !important;
        padding: 0 !important;

        gap: 14px !important;

        white-space: nowrap !important;
    }


    .course-curriculum-box
    .lecture-group-title
    .total-lectures,

    .course-curriculum-box
    .lecture-group-title
    .total-time {
        float: none !important;

        display: inline-block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1.25 !important;

        white-space: nowrap !important;
    }


    /* Plus icon */
    .course-curriculum-box .lecture-group-title::before {
        content: "+" !important;

        position: absolute !important;

        left: 18px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        color: #987cff !important;

        font-size: 26px !important;
        font-weight: 500 !important;

        line-height: 1 !important;
    }


    /* Lessons inside an opened section */
    .course-curriculum-box .lecture-list li {
        display: block !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 14px 18px !important;
    }


    .course-curriculum-box .lecture-list .lecture-title {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        line-height: 1.45 !important;

        white-space: normal !important;
    }


    .course-curriculum-box .lecture-list .lecture-info {
        float: none !important;

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

        margin-top: 7px !important;
    }

}

/* ==========================================================
   MOBILE COURSE CURRICULUM — CLEAN TWO-ROW HEADER
   ========================================================== */

@media (max-width: 767px) {

    /* Card */
    .course-curriculum-box
    .lecture-group-wrapper {
        position: relative !important;

        width: 100% !important;

        margin-bottom: 16px !important;

        overflow: hidden !important;

        border-radius: 20px !important;
    }


    /* Header */
    .course-curriculum-box
    .lecture-group-title {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 120px !important;
        min-height: 120px !important;

        padding: 20px 18px 18px 58px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* TITLE — completely remove Bootstrap float */
    .course-curriculum-box
    .lecture-group-title
    .title.float-start {

        float: none !important;

        position: absolute !important;

        left: 58px !important;
        top: 20px !important;
        right: 18px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        font-size: 17px !important;

        line-height: 1.25 !important;

        font-weight: 800 !important;

        white-space: nowrap !important;
    }


    /* STATS — completely remove Bootstrap float */
    .course-curriculum-box
    .lecture-group-title
    > .float-end {

        float: none !important;

        position: absolute !important;

        left: 58px !important;
        top: 67px !important;
        right: 18px !important;
        bottom: auto !important;

        width: auto !important;

        height: 24px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 16px !important;

        white-space: nowrap !important;
    }


    /* LESSON COUNT */
    .course-curriculum-box
    .lecture-group-title
    > .float-end
    .total-lectures {

        float: none !important;

        position: static !important;

        display: inline-block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    /* DURATION */
    .course-curriculum-box
    .lecture-group-title
    > .float-end
    .total-time {

        float: none !important;

        position: static !important;

        display: inline-block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    /* PLUS ICON */
    .course-curriculum-box
    .lecture-group-title::before {

        content: "+" !important;

        position: absolute !important;

        left: 18px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        color: #987cff !important;

        font-size: 27px !important;

        line-height: 1 !important;

        font-weight: 400 !important;
    }

}

/* Align category header with Top Courses */
.sw-category-section .sw-section-head {
    margin-left: 22px !important;
}

/* ==========================================================
   BUNDLE CARDS — ALIGN BOTTOM CONTENT
   ========================================================== */

.sw-bundle-card {
    display: flex !important;
    flex-direction: column !important;
}


/* Let the course area take the available height */
.sw-bundle-card .sw-bundle-courses {
    flex: 1 1 auto !important;
}


/* Push rating / price / buttons to the bottom */
.sw-bundle-card .sw-bundle-bottom {
    margin-top: auto !important;

    flex-shrink: 0 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
}


/* Keep the rating + price together */
.sw-bundle-card .sw-bundle-meta {
    flex-shrink: 0 !important;
}


/* Keep buttons together */
.sw-bundle-card .sw-bundle-actions {
    flex-shrink: 0 !important;
}

@media (max-width: 767px) {
    .sw-navbar .user-box {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .logged-in-my-courses {
        display: none !important;
    }
}

/* ==========================================================
   LOGGED-IN MOBILE MENU / DRAWER
   ========================================================== */

@media (max-width: 767px) {

    .sw-logged-in #mobile-primary-nav {
        width: 320px !important;
        max-width: calc(100vw - 32px) !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #111018 !important;

        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 20px !important;

        box-shadow:
            0 24px 70px rgba(0,0,0,.55),
            0 8px 30px rgba(0,0,0,.3) !important;

        overflow: hidden !important;

        color: #fff !important;
    }

    /* Account / welcome section */
    .sw-logged-in #mobile-primary-nav .dropdown-user-info {
        background:
            linear-gradient(
                135deg,
                #171522,
                #211a3b
            ) !important;

        border-bottom: 1px solid rgba(255,255,255,.07) !important;

        padding: 22px 20px !important;
    }

    /* User image */
    .sw-logged-in #mobile-primary-nav .user-image img {
        width: 58px !important;
        height: 58px !important;

        border-radius: 50% !important;

        border: 2px solid rgba(255,255,255,.16) !important;
    }

    /* User name */
    .sw-logged-in #mobile-primary-nav .user-name {
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 700 !important;
    }

    .sw-logged-in #mobile-primary-nav .user-email {
        color: rgba(255,255,255,.52) !important;
        font-size: 12px !important;
    }

    /* Menu list */
    .sw-logged-in #mobile-primary-nav .user-dropdown-menu {
        margin: 0 !important;
        padding: 10px !important;
        background: #111018 !important;
    }

    /* Individual items */
    .sw-logged-in #mobile-primary-nav .user-dropdown-menu-item {
        margin: 2px 0 !important;
        border: 0 !important;
    }

    .sw-logged-in #mobile-primary-nav .user-dropdown-menu-item a {
        display: flex !important;
        align-items: center !important;

        min-height: 48px !important;

        padding: 11px 14px !important;

        border-radius: 11px !important;

        color: rgba(255,255,255,.92) !important;

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

        text-decoration: none !important;

        transition: background .2s ease, transform .2s ease !important;
    }

    .sw-logged-in #mobile-primary-nav .user-dropdown-menu-item a:hover,
    .sw-logged-in #mobile-primary-nav .user-dropdown-menu-item a:active {
        background: rgba(118,87,255,.14) !important;
    }

    /* Icons */
    .sw-logged-in #mobile-primary-nav .user-dropdown-menu-item i {
        width: 28px !important;
        margin-right: 9px !important;

        color: #a98cff !important;

        font-size: 16px !important;
        text-align: center !important;
    }

    /* Logout */
    .sw-logged-in #mobile-primary-nav .dropdown-user-logout {
        margin-top: 7px !important;
        padding-top: 7px !important;

        border-top: 1px solid rgba(255,255,255,.07) !important;
    }

    .sw-logged-in #mobile-primary-nav .dropdown-user-logout a {
        color: #ff7777 !important;
    }

}

@media (max-width: 767px) {
    .sw-logged-in #mobile-primary-nav .category-menu-item {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .sw-logged-in .main-nav-wrap .mobile-categories-menu {
        display: none !important;
    }
}

/* FIX: MOBILE LIGHT MODE NAV WRAPPER */

@media (max-width: 767px) {
    html[data-theme="light"] .sw-navbar .main-nav-wrap {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }
}

/* ==========================================================
   MY COURSES — COMPLETE DARK MODE REDESIGN
   Existing sections only
   ========================================================== */

html[data-theme="dark"] body {
    background: #090811 !important;
}


/* ==========================================================
   1. MY COURSES HERO
   ========================================================== */

html[data-theme="dark"] .page-header-area.my-course-area {
    background: #090811 !important;
    padding-bottom: 0 !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container-fluid {
    position: relative !important;
    min-height: 250px !important;
    overflow: hidden !important;

    background-position: center !important;
    background-size: cover !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container-fluid::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(119,89,255,.25),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(8,7,15,.20) 0%,
            rgba(8,7,15,.72) 70%,
            #090811 100%
        );

    pointer-events: none;
}

html[data-theme="dark"] .page-header-area.my-course-area
.image-placeholder-2 {
    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(9,8,17,.82),
            rgba(9,8,17,.25),
            rgba(9,8,17,.65)
        ) !important;

    z-index: 1 !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container-fluid > .container {
    position: relative !important;
    z-index: 3 !important;

    min-height: 250px !important;

    display: flex !important;
    align-items: flex-end !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
.page-title {
    margin: 0 !important;
    padding: 0 0 38px !important;

    color: #ffffff !important;

    font-size: clamp(38px, 5vw, 58px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;

    text-shadow:
        0 5px 30px rgba(0,0,0,.45) !important;
}


/* ==========================================================
   2. PROFILE NAVIGATION
   ========================================================== */

html[data-theme="dark"] .page-header-area.my-course-area
> .container {
    position: relative !important;
    z-index: 5 !important;

    margin-top: -25px !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;

    gap: 12px !important;

    margin: 0 !important;
    padding: 0 0 12px !important;

    list-style: none !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul > li {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    min-height: 48px !important;

    padding: 0 19px !important;

    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 14px !important;

    background:
        rgba(22,20,34,.88) !important;

    color: #d9d6e3 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18) !important;

    backdrop-filter: blur(14px) !important;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul > li > a i {
    font-size: 15px !important;
    color: #aaa4bb !important;

    transition: color .2s ease !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul > li > a:hover {
    transform: translateY(-2px) !important;

    background: #211b35 !important;

    border-color: rgba(151,117,255,.35) !important;

    color: #ffffff !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.30),
        0 0 24px rgba(119,89,255,.08) !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul > li > a:hover i {
    color: #ad94ff !important;
}


/* ACTIVE TAB */

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul > li.active > a {
    background:
        linear-gradient(
            135deg,
            #7759ff 0%,
            #9475ff 100%
        ) !important;

    border-color: transparent !important;

    color: #ffffff !important;

    box-shadow:
        0 10px 30px rgba(119,89,255,.28) !important;
}

html[data-theme="dark"] .page-header-area.my-course-area
> .container > ul > li.active > a i {
    color: #ffffff !important;
}


/* ==========================================================
   3. MY COURSES CONTENT AREA
   ========================================================== */

html[data-theme="dark"] .my-courses-area {
    padding: 38px 0 90px !important;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(119,89,255,.06),
            transparent 30%
        ),
        #090811 !important;
}

html[data-theme="dark"] .my-courses-area
> .container > .w-100 {
    margin-bottom: 30px !important;
}


/* ==========================================================
   4. FILTER / SEARCH PANEL
   ========================================================== */

html[data-theme="dark"] .my-courses-area
> .container > .w-100 > .row {
    align-items: center !important;

    padding: 12px !important;

    border:
        1px solid rgba(255,255,255,.07) !important;

    border-radius: 20px !important;

    background:
        rgba(20,19,31,.88) !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.22) !important;

    backdrop-filter: blur(15px) !important;
}


/* CATEGORY BUTTON */

html[data-theme="dark"] .my-courses-area
.bg-background {
    min-height: 45px !important;

    padding: 0 17px !important;

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

    border-radius: 12px !important;

    background: #181622 !important;

    color: #dedbe7 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .my-courses-area
.bg-background:hover {
    background: #211b35 !important;

    border-color: rgba(151,117,255,.30) !important;

    color: #ffffff !important;
}


/* RESET */

html[data-theme="dark"] .my-courses-area
.btn-group + .btn-group {
    margin-left: 8px !important;
}


/* DROPDOWN */

html[data-theme="dark"] .my-courses-area
.dropdown-menu {
    margin-top: 8px !important;

    padding: 8px !important;

    min-width: 190px !important;

    background: #161421 !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    border-radius: 14px !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.55) !important;
}

html[data-theme="dark"] .my-courses-area
.dropdown-menu .dropdown-item {
    padding: 10px 12px !important;

    border-radius: 9px !important;

    color: #d9d5e2 !important;

    font-size: 13px !important;
}

html[data-theme="dark"] .my-courses-area
.dropdown-menu .dropdown-item:hover {
    background: #211b35 !important;

    color: #b99fff !important;
}


/* ==========================================================
   5. SEARCH BOX
   ========================================================== */

html[data-theme="dark"] .my-courses-area
.common-search-box {
    height: 48px !important;

    padding: 4px !important;

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

    border-radius: 14px !important;

    background: #11101a !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html[data-theme="dark"] .my-courses-area
.common-search-box .form-control {
    height: 40px !important;

    padding: 0 14px !important;

    border: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    box-shadow: none !important;

    font-size: 14px !important;
}

html[data-theme="dark"] .my-courses-area
.common-search-box .form-control::placeholder {
    color: #777483 !important;
}

html[data-theme="dark"] .my-courses-area
.common-search-box button {
    width: 42px !important;
    height: 40px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            #7759ff,
            #9475ff
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 5px 18px rgba(119,89,255,.20) !important;
}


/* ==========================================================
   6. COURSE GRID
   ========================================================== */

html[data-theme="dark"] .my-courses-area
#my_courses_area {
    margin-top: 0 !important;
}

html[data-theme="dark"] .my-courses-area
#my_courses_area > [class*="col-"] {
    margin-bottom: 24px !important;
}


/* ==========================================================
   7. COURSE CARD
   ========================================================== */

html[data-theme="dark"] .my-courses-area
.course-box-wrap {
    height: 100% !important;

    padding: 0 8px !important;
}

html[data-theme="dark"] .my-courses-area
.course-box {
    height: 100% !important;

    overflow: hidden !important;

    border:
        1px solid rgba(255,255,255,.07) !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            180deg,
            #181622 0%,
            #12111b 100%
        ) !important;

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

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}

html[data-theme="dark"] .my-courses-area
.course-box:hover {
    transform: translateY(-5px) !important;

    border-color:
        rgba(151,117,255,.30) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.35),
        0 0 28px rgba(119,89,255,.07) !important;
}


/* COURSE IMAGE */

html[data-theme="dark"] .my-courses-area
.course-image {
    position: relative !important;

    aspect-ratio: 16 / 9 !important;

    height: auto !important;

    overflow: hidden !important;

    background: #0e0d15 !important;
}

html[data-theme="dark"] .my-courses-area
.course-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition:
        transform .4s ease,
        filter .4s ease !important;
}

html[data-theme="dark"] .my-courses-area
.course-box:hover .course-image img {
    transform: scale(1.045) !important;

    filter: brightness(1.05) saturate(1.04) !important;
}


/* IMAGE OVERLAY */

html[data-theme="dark"] .my-courses-area
.course-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(5,4,10,.35) 100%
        );

    pointer-events: none;
}


/* PLAY BUTTON */

html[data-theme="dark"] .my-courses-area
.course-image .play-btn {
    z-index: 2 !important;

    width: 46px !important;
    height: 46px !important;

    border-radius: 50% !important;

    background:
        rgba(119,89,255,.92) !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35) !important;
}


/* ==========================================================
   8. COURSE INFORMATION
   ========================================================== */

html[data-theme="dark"] .my-courses-area
.course-details {
    padding: 18px 18px 8px !important;
}

html[data-theme="dark"] .my-courses-area
.course-details .title {
    margin-bottom: 14px !important;

    color: #ffffff !important;

    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;

    letter-spacing: -.2px !important;
}

html[data-theme="dark"] .my-courses-area
.course-details .title:hover {
    color: #b59cff !important;
}


/* PROGRESS */

html[data-theme="dark"] .my-courses-area
.progress {
    height: 6px !important;

    margin: 0 0 7px !important;

    overflow: hidden !important;

    border-radius: 99px !important;

    background: #292633 !important;
}

html[data-theme="dark"] .my-courses-area
.progress .progress-bar {
    border-radius: 99px !important;

    background:
        linear-gradient(
            90deg,
            #7759ff,
            #a07fff
        ) !important;
}

html[data-theme="dark"] .my-courses-area
.course-details > small {
    color: #918c9e !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}


/* ==========================================================
   9. RATINGS
   ========================================================== */

html[data-theme="dark"] .my-courses-area
.your-rating-box {
    margin-top: 12px !important;
}

html[data-theme="dark"] .my-courses-area
.your-rating-box i {
    color: #f5c451 !important;

    font-size: 13px !important;
}

html[data-theme="dark"] .my-courses-area
.your-rating-text {
    margin: 5px 0 0 !important;
}

html[data-theme="dark"] .my-courses-area
.your-rating-text a {
    color: #a98aff !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

html[data-theme="dark"] .my-courses-area
.your-rating-text a:hover {
    color: #c3b1ff !important;
}


/* ==========================================================
   10. START LESSON BUTTON
   ========================================================== */

html[data-theme="dark"] .my-courses-area
.course-box .btn.red {
    min-height: 46px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            #7759ff,
            #9475ff
        ) !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 750 !important;

    box-shadow:
        0 8px 22px rgba(119,89,255,.18) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

html[data-theme="dark"] .my-courses-area
.course-box .btn.red:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 10px 28px rgba(119,89,255,.28) !important;
}


/* ==========================================================
   11. RATING EDIT FORM
   ========================================================== */

html[data-theme="dark"] .my-courses-area
.course-rating-view,
html[data-theme="dark"] .my-courses-area
.course-details form {
    color: #ffffff !important;
}

html[data-theme="dark"] .my-courses-area
.course-details select,
html[data-theme="dark"] .my-courses-area
.course-details textarea {
    background: #1b1926 !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    border-radius: 10px !important;

    color: #ffffff !important;
}

html[data-theme="dark"] .my-courses-area
.course-details textarea::placeholder {
    color: #777483 !important;
}


/* ==========================================================
   12. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    html[data-theme="dark"]
    .page-header-area.my-course-area
    > .container-fluid {
        min-height: 210px !important;
    }

    html[data-theme="dark"]
    .page-header-area.my-course-area
    > .container-fluid > .container {
        min-height: 210px !important;
    }

    html[data-theme="dark"]
    .page-header-area.my-course-area
    .page-title {
        padding-bottom: 28px !important;

        font-size: 39px !important;
        letter-spacing: -1.5px !important;
    }

    html[data-theme="dark"]
    .page-header-area.my-course-area
    > .container {
        margin-top: -18px !important;
    }

    html[data-theme="dark"]
    .page-header-area.my-course-area
    > .container > ul {
        display: grid !important;

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

        gap: 9px !important;
    }

    html[data-theme="dark"]
    .page-header-area.my-course-area
    > .container > ul > li > a {
        width: 100% !important;

        min-height: 50px !important;

        padding: 0 8px !important;

        border-radius: 13px !important;

        font-size: 12px !important;
    }

    html[data-theme="dark"]
    .page-header-area.my-course-area
    > .container > ul > li > a i {
        font-size: 14px !important;
    }

    html[data-theme="dark"]
    .my-courses-area {
        padding-top: 24px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    > .container > .w-100 > .row {
        padding: 10px !important;

        border-radius: 17px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    > .container > .w-100 > .row > .col-lg-6 {
        padding: 4px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .btn-group {
        margin-bottom: 4px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .bg-background {
        min-height: 43px !important;

        padding: 0 13px !important;

        font-size: 12px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .common-search-box {
        margin-top: 7px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    #my_courses_area > [class*="col-"] {
        margin-bottom: 18px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .course-box-wrap {
        padding: 0 5px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .course-box {
        border-radius: 17px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .course-details {
        padding: 15px 14px 7px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .course-details .title {
        font-size: 15px !important;
    }

    html[data-theme="dark"]
    .my-courses-area
    .course-box .btn.red {
        min-height: 43px !important;
    }
}

/* ==========================================================
   MY COURSES — TALL COURSE CARDS
   Show more of the instructor image
   DARK MODE
   ========================================================== */

html[data-theme="dark"] .my-courses-area .course-box {
    overflow: hidden !important;
}

/* Make the image area significantly taller */
html[data-theme="dark"] .my-courses-area .course-image {
    height: 410px !important;
    min-height: 410px !important;

    aspect-ratio: auto !important;

    overflow: hidden !important;
}

/* Keep the image filling the taller area */
html[data-theme="dark"] .my-courses-area .course-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/* Give the card more breathing room below the image */
html[data-theme="dark"] .my-courses-area .course-details {
    padding: 22px 20px 18px !important;
}

/* Slightly larger course title */
html[data-theme="dark"] .my-courses-area .course-details .title {
    font-size: 18px !important;
    line-height: 1.4 !important;
}


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

@media (max-width: 767px) {

    html[data-theme="dark"] .my-courses-area .course-image {
        height: 330px !important;
        min-height: 330px !important;
    }

    html[data-theme="dark"] .my-courses-area .course-details {
        padding: 18px 16px 15px !important;
    }

}

/* ==========================================================
   PURCHASE HISTORY — PREMIUM DARK MODE REDESIGN
   Existing sections only
   ========================================================== */

html[data-theme="dark"] section.purchase-history-list-area {
    padding: 42px 0 90px !important;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(119,89,255,.08),
            transparent 30%
        ),
        #090811 !important;
}


/* ==========================================================
   PURCHASE HISTORY LIST
   ========================================================== */

html[data-theme="dark"] .purchase-history-list {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

html[data-theme="dark"] .purchase-history-list
.purchase-history-list-header {
    min-width: 0 !important;

    margin-bottom: 12px !important;
    padding: 0 20px !important;

    border: 0 !important;

    background: transparent !important;

    color: #898496 !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: .7px !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-list-header .row {
    margin: 0 !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-list-header [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


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

html[data-theme="dark"] .purchase-history-list
.purchase-history-items {
    min-width: 0 !important;

    margin-bottom: 14px !important;
    padding: 14px !important;

    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            135deg,
            #181622 0%,
            #12111b 100%
        ) !important;

    box-shadow:
        0 12px 40px rgba(0,0,0,.22) !important;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-items:hover {
    transform: translateY(-2px) !important;

    border-color:
        rgba(151,117,255,.28) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.32),
        0 0 25px rgba(119,89,255,.06) !important;
}


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

html[data-theme="dark"] .purchase-history-list
.purchase-history-course-img {
    float: none !important;

    display: inline-block !important;

    vertical-align: middle !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-course-img img {
    width: 155px !important;
    height: 96px !important;

    margin: 0 17px 0 0 !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 13px !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.25) !important;
}


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

html[data-theme="dark"] .purchase-history-list
.purchase-history-course-title {
    display: inline-block !important;

    max-width: calc(100% - 180px) !important;

    vertical-align: middle !important;

    color: #ffffff !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 750 !important;

    text-decoration: none !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-course-title:hover {
    color: #b59cff !important;
}


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

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail {
    display: flex !important;

    align-items: center !important;

    min-height: 96px !important;

    color: #aaa6b6 !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail > .row {
    width: 100% !important;

    margin: 0 !important;

    align-items: center !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


/* DATE */

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail .date {
    color: #aaa6b6 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* PRICE */

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail .price {
    color: #ffffff !important;

    font-size: 15px !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail .price b {
    color: #b79cff !important;

    font-weight: 800 !important;
}


/* PAYMENT TYPE */

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail .payment-type {
    color: #c0bcc9 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


/* ==========================================================
   INVOICE BUTTON
   ========================================================== */

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail .btn-receipt {
    display: inline-flex !important;

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

    min-height: 38px !important;

    padding: 0 15px !important;

    border: 1px solid rgba(151,117,255,.30) !important;
    border-radius: 10px !important;

    background:
        rgba(119,89,255,.10) !important;

    color: #b89fff !important;

    font-size: 12px !important;
    font-weight: 750 !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease !important;
}

html[data-theme="dark"] .purchase-history-list
.purchase-history-detail .btn-receipt:hover {
    transform: translateY(-1px) !important;

    border-color:
        rgba(151,117,255,.55) !important;

    background:
        linear-gradient(
            135deg,
            #7759ff,
            #9475ff
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(119,89,255,.20) !important;
}


/* ==========================================================
   NO RECORDS
   ========================================================== */

html[data-theme="dark"] .purchase-history-list
> li:not(.purchase-history-list-header):not(.purchase-history-items) {
    min-width: 0 !important;

    padding: 50px 20px !important;

    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 18px !important;

    background: #14131d !important;

    color: #918c9e !important;

    text-align: center !important;

    font-size: 14px !important;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

html[data-theme="dark"] section.purchase-history-list-area
+ nav {
    padding: 0 0 70px !important;

    background: #090811 !important;

    text-align: center !important;
}

html[data-theme="dark"] section.purchase-history-list-area
+ nav a,
html[data-theme="dark"] section.purchase-history-list-area
+ nav span {
    display: inline-flex !important;

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

    min-width: 38px !important;
    height: 38px !important;

    margin: 0 3px !important;

    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;

    background: #161521 !important;

    color: #aaa6b6 !important;

    text-decoration: none !important;
}

html[data-theme="dark"] section.purchase-history-list-area
+ nav a:hover {
    border-color: rgba(151,117,255,.35) !important;

    background: #211b35 !important;

    color: #b99fff !important;
}


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

@media (max-width: 767px) {

    html[data-theme="dark"]
    section.purchase-history-list-area {
        padding: 25px 0 60px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-list-header {
        display: none !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-items {
        padding: 12px !important;

        border-radius: 16px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-items > .row {
        display: block !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-items > .row > .col-5,
    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-items > .row > .col-7 {
        width: 100% !important;

        max-width: 100% !important;

        padding: 0 !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-course-img img {
        width: 100% !important;
        height: auto !important;

        max-height: 220px !important;

        margin: 0 0 13px !important;

        object-fit: cover !important;

        border-radius: 13px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-course-title {
        display: block !important;

        max-width: 100% !important;

        margin: 0 4px 15px !important;

        font-size: 16px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail {
        display: block !important;

        min-height: 0 !important;

        padding: 14px 4px 2px !important;

        border-top:
            1px solid rgba(255,255,255,.07) !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail > .row {
        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

        gap: 12px 8px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail [class*="col-"] {
        width: auto !important;

        max-width: none !important;

        padding: 0 !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail .date::before {
        content: "Date" !important;

        display: block !important;

        margin-bottom: 3px !important;

        color: #777281 !important;

        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: .6px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail .price::before {
        content: "Price" !important;

        display: block !important;

        margin-bottom: 3px !important;

        color: #777281 !important;

        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: .6px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail .payment-type::before {
        content: "Payment" !important;

        display: block !important;

        margin-bottom: 3px !important;

        color: #777281 !important;

        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: .6px !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail > .row > .text-center {
        text-align: left !important;

        grid-column: 1 / -1 !important;
    }

    html[data-theme="dark"]
    .purchase-history-list
    .purchase-history-detail .btn-receipt {
        width: 100% !important;

        min-height: 42px !important;
    }
}

/* ==========================================================
   SKILLWELL INVOICE — PREMIUM REDESIGN
   ========================================================== */

html[data-theme="dark"] .sw-invoice-page {
    padding: 35px 0 90px !important;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(119,89,255,.08),
            transparent 32%
        ),
        #090811 !important;
}


/* ==========================================================
   INVOICE DOCUMENT
   ========================================================== */

.sw-invoice {
    width: 100%;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

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

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


/* ==========================================================
   HEADER
   ========================================================== */

.sw-invoice-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    padding: 32px 36px;

    background:
        linear-gradient(
            135deg,
            #f7f5ff 0%,
            #ffffff 60%
        );

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


/* BRAND */

.sw-invoice-brand {
    display: flex;

    align-items: center;

    gap: 16px;
}

.sw-invoice-logo {
    width: auto !important;

    height: 46px !important;

    max-width: 190px;

    display: block;
}

.sw-invoice-company {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.sw-invoice-company strong {
    color: #181620;

    font-size: 14px;

    font-weight: 800;
}

.sw-invoice-company span {
    color: #85818e;

    font-size: 11px;
}


/* INVOICE HEADING */

.sw-invoice-heading {
    text-align: right;
}

.sw-invoice-label {
    display: block;

    margin-bottom: 4px;

    color: #7759ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;
}

.sw-invoice-heading h1 {
    margin: 0;

    color: #17151d;

    font-size: 30px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: -.8px;
}


/* PAID */

.sw-invoice-status {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 10px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #eeeaff;

    color: #7052ec;

    font-size: 10px;

    font-weight: 800;
}


/* ==========================================================
   PAYMENT SUMMARY
   ========================================================== */

.sw-invoice-summary {
    display: grid;

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

    gap: 12px;

    padding: 20px 36px;

    background: #ffffff;

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

.sw-invoice-meta {
    padding: 15px 16px;

    border-radius: 13px;

    background: #f8f7fb;

    border:
        1px solid
        rgba(30,25,50,.06);
}

.sw-invoice-meta-label {
    display: block;

    margin-bottom: 5px;

    color: #888492;

    font-size: 10px;

    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: .06em;
}

.sw-invoice-meta strong {
    display: block;

    color: #292631;

    font-size: 13px;

    font-weight: 800;
}

.sw-invoice-meta .sw-invoice-amount {
    color: #7759ff;

    font-size: 17px;
}


/* ==========================================================
   SECTION
   ========================================================== */

.sw-invoice-section {
    padding: 28px 36px 0;
}

.sw-invoice-section-title {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 15px;
}

.sw-invoice-section-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex: none;

    border-radius: 10px;

    background: #f0edff;

    color: #7759ff;

    font-size: 13px;
}

.sw-invoice-section-title > div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.sw-invoice-section-title span:not(.sw-invoice-section-icon) {
    color: #211e29;

    font-size: 13px;

    font-weight: 800;
}

.sw-invoice-section-title small {
    color: #918d99;

    font-size: 10px;
}


/* ==========================================================
   BILL TO
   ========================================================== */

.sw-invoice-buyer {
    padding: 17px 18px;

    border-radius: 13px;

    background: #faf9fc;

    border:
        1px solid
        rgba(30,25,50,.06);
}

.sw-invoice-buyer strong {
    display: block;

    margin-bottom: 4px;

    color: #26232e;

    font-size: 14px;

    font-weight: 800;
}

.sw-invoice-buyer span {
    color: #85818e;

    font-size: 12px;
}


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

.sw-invoice-course {
    overflow: hidden;

    border-radius: 15px;

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

    background: #ffffff;
}

.sw-invoice-course-main {
    padding: 19px 20px;

    background:
        linear-gradient(
            135deg,
            #f8f6ff,
            #ffffff
        );

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

.sw-invoice-course-label {
    display: block;

    margin-bottom: 6px;

    color: #7759ff;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .12em;
}

.sw-invoice-course-main strong {
    display: block;

    color: #24212c;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 800;
}


/* COURSE META */

.sw-invoice-course-info {
    display: grid;

    grid-template-columns:
        1fr 1fr auto;

    gap: 20px;

    padding: 17px 20px;

    align-items: center;
}

.sw-invoice-course-info > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.sw-invoice-course-info span {
    color: #92909a;

    font-size: 10px;

    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: .05em;
}

.sw-invoice-course-info strong {
    color: #393640;

    font-size: 12px;

    font-weight: 750;
}

.sw-invoice-course-price {
    text-align: right;
}

.sw-invoice-course-price strong {
    color: #7759ff;

    font-size: 15px;
}


/* ==========================================================
   TOTALS
   ========================================================== */

.sw-invoice-total-area {
    margin: 28px 36px 0;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(30,25,50,.10);
}

.sw-invoice-total-row {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 55px;

    padding: 5px 0;

    color: #77737f;

    font-size: 12px;
}

.sw-invoice-total-row strong {
    min-width: 90px;

    color: #3a3741;

    text-align: right;

    font-weight: 750;
}

.sw-invoice-grand-total {
    margin-top: 7px;

    padding: 14px 16px;

    border-radius: 12px;

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

    color: #292531;

    font-size: 14px;

    font-weight: 800;
}

.sw-invoice-grand-total strong {
    color: #7759ff;

    font-size: 18px;
}


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

.sw-invoice-footer {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    margin-top: 30px;

    padding: 22px 36px;

    background: #faf9fc;

    border-top:
        1px solid
        rgba(30,25,50,.06);
}

.sw-invoice-footer > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.sw-invoice-footer strong {
    color: #35313c;

    font-size: 11px;

    font-weight: 800;
}

.sw-invoice-footer span {
    color: #97939e;

    font-size: 10px;
}

.sw-invoice-company-details {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    text-align: right;
}


/* ==========================================================
   PRINT BUTTON
   ========================================================== */

.sw-invoice-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 18px;
}

.sw-invoice-print {
    display: inline-flex;

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

    gap: 8px;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #7759ff,
            #9577ff
        );

    color: #ffffff !important;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none !important;

    box-shadow:
        0 9px 25px
        rgba(119,89,255,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.sw-invoice-print:hover {
    transform: translateY(-2px);

    color: #ffffff !important;

    box-shadow:
        0 13px 30px
        rgba(119,89,255,.30);
}


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

@media (max-width: 767px) {

    html[data-theme="dark"] .sw-invoice-page {
        padding: 20px 0 60px !important;
    }

    .sw-invoice {
        border-radius: 17px;
    }

    .sw-invoice-header {
        display: block;

        padding: 24px 20px;
    }

    .sw-invoice-brand {
        margin-bottom: 25px;
    }

    .sw-invoice-heading {
        text-align: left;
    }

    .sw-invoice-heading h1 {
        font-size: 27px;
    }

    .sw-invoice-summary {
        grid-template-columns: 1fr;

        padding: 15px 20px;
    }

    .sw-invoice-section {
        padding: 23px 20px 0;
    }

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

        gap: 16px;
    }

    .sw-invoice-course-price {
        grid-column: 1 / -1;

        text-align: left;
    }

    .sw-invoice-total-area {
        margin-left: 20px;
        margin-right: 20px;
    }

    .sw-invoice-footer {
        display: block;

        padding: 20px;
    }

    .sw-invoice-company-details {
        align-items: flex-start;

        margin-top: 14px;

        text-align: left;
    }

    .sw-invoice-actions {
        justify-content: stretch;
    }

    .sw-invoice-print {
        width: 100%;
    }
}


/* ==========================================================
   PRINT VERSION
   ========================================================== */

@media print {

    html[data-theme="dark"],
    body {
        background: #ffffff !important;
    }

    .sw-invoice-page {
        padding: 0 !important;

        background: #ffffff !important;
    }

    .sw-invoice {
        border: none !important;

        border-radius: 0 !important;

        box-shadow: none !important;
    }

    .sw-invoice-header {
        background: #f7f5ff !important;
    }

    .sw-invoice-summary,
    .sw-invoice-section,
    .sw-invoice-total-area,
    .sw-invoice-footer {
        break-inside: avoid !important;
    }

    .sw-invoice-actions {
        display: none !important;
    }
}

/* ==========================================================
   MY BUNDLES — NEW DESIGN
   ========================================================== */

.sw-my-bundle-card {
    position: relative;
    overflow: hidden;

    height: 100%;

    background: #12111b;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;

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

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

    display: flex;
    flex-direction: column;
}

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

    border-color: rgba(142,108,255,.35);

    box-shadow:
        0 25px 65px rgba(0,0,0,.35);
}


/* ==========================================================
   BANNER
   ========================================================== */

.sw-my-bundle-banner {
    position: relative;

    display: block;

    height: 210px;

    overflow: hidden;

    text-decoration: none !important;

    background: #1b1925;
}

.sw-my-bundle-banner img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .5s ease;
}

.sw-my-bundle-card:hover
.sw-my-bundle-banner img {
    transform: scale(1.05);
}

.sw-my-bundle-banner-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(10,9,15,.95) 0%,
            rgba(10,9,15,.45) 45%,
            rgba(10,9,15,.05) 100%
        );
}

.sw-my-bundle-banner-content {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 18px;

    z-index: 2;
}

.sw-my-bundle-banner-content span {
    display: inline-block;

    margin-bottom: 7px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .16em;

    color: #a58aff;
}

.sw-my-bundle-banner-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.25;

    font-weight: 800;
}


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

.sw-my-bundle-courses {
    padding: 15px 16px 5px;

    flex: 1;
}

.sw-my-bundle-course {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 11px;

    margin-bottom: 10px;

    background: #191822;

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

    border-radius: 13px;

    transition:
        background .2s ease,
        border-color .2s ease;
}

.sw-my-bundle-course:hover {
    background: #201e2b;

    border-color: rgba(151,124,255,.22);
}

.sw-my-bundle-course > img {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    object-fit: cover;

    border-radius: 10px;

    display: block;
}

.sw-my-bundle-course-info {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.sw-my-bundle-course-info > a:first-child {
    display: block;

    color: #ffffff !important;

    font-size: 13px;
    line-height: 1.35;

    font-weight: 600;

    text-decoration: none !important;
}

.sw-my-bundle-start {
    display: inline-flex !important;

    align-items: center;

    gap: 6px;

    width: fit-content;

    color: #a58aff !important;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none !important;
}

.sw-my-bundle-start i {
    font-size: 10px;
}


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

.sw-my-bundle-footer {
    position: relative;

    padding: 15px 16px 17px;

    border-top: 1px solid rgba(255,255,255,.07);

    background: #100f17;
}

.sw-my-bundle-status {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    padding-right: 35px;
}

.sw-my-bundle-status-label {
    color: #8e8a9d;

    font-size: 12px;
}

.sw-my-bundle-badge {
    display: inline-flex;

    align-items: center;

    padding: 4px 9px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 700;
}

.sw-my-bundle-badge.active {
    color: #69e6a6;

    background: rgba(57,211,137,.12);
}

.sw-my-bundle-badge.expired {
    color: #ff7474;

    background: rgba(255,82,82,.12);
}

.sw-my-bundle-badge.disabled {
    color: #aaa5b5;

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

.sw-my-bundle-expiry {
    margin-top: 9px;

    color: #858191;

    font-size: 11px;
}

.sw-my-bundle-expiry strong {
    color: #d5d1dd;

    font-weight: 600;
}


/* ==========================================================
   THREE-DOT MENU
   ========================================================== */

.sw-my-bundle-menu {
    position: absolute;

    right: 12px;
    bottom: 14px;
}

.sw-my-bundle-menu button {
    width: 34px;
    height: 34px;

    padding: 0;

    display: flex;

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

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

    border-radius: 9px;

    background: #1c1a26;

    color: #aaa5b5;

    cursor: pointer;

    transition: .2s ease;
}

.sw-my-bundle-menu button:hover {
    color: #ffffff;

    background: #272331;

    border-color: rgba(151,124,255,.25);
}

.sw-my-bundle-menu .dropdown-menu {
    min-width: 190px;

    padding: 7px;

    background: #191722;

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

    border-radius: 12px;

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

.sw-my-bundle-menu .dropdown-item {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 10px;

    color: #d5d1dd !important;

    font-size: 12px;

    border-radius: 8px;
}

.sw-my-bundle-menu .dropdown-item:hover {
    color: #ffffff !important;

    background: #272331;
}

.sw-my-bundle-menu .dropdown-item i {
    width: 16px;

    color: #9a7cff;
}


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

@media (max-width: 767px) {

    .sw-my-bundle-card {
        border-radius: 17px;
    }

    .sw-my-bundle-banner {
        height: 190px;
    }

    .sw-my-bundle-banner-content h3 {
        font-size: 18px;
    }

    .sw-my-bundle-course > img {
        width: 54px;
        height: 54px;

        flex-basis: 54px;
    }

    .sw-my-bundle-course-info > a:first-child {
        font-size: 12px;
    }

}

/* ==========================================================
   SKILLWELL COURSE ENROLL CARD
   MOBILE ONLY — SMOOTH RESPONSIVE VERSION
   Desktop remains completely untouched
   ========================================================== */

@media (max-width: 767px) {

    /* Main sidebar */
    .course-sidebar.natural {
        width: calc(100% - 24px) !important;
        max-width: 520px !important;
        margin: 20px auto 30px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* ------------------------------------------
       COURSE PREVIEW IMAGE
       Keep original image proportions
       ------------------------------------------ */

    .course-sidebar.natural .preview-video-box {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;

        border-radius: 20px 20px 0 0 !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-bottom: 0 !important;

        background: #151421 !important;
        box-shadow: none !important;
    }

    .course-sidebar.natural .preview-video-box a {
        display: block !important;
        position: relative !important;
        line-height: 0 !important;
    }

    .course-sidebar.natural .preview-video-box img {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Preview title */
    .course-sidebar.natural .preview-video-box .preview-text {
        bottom: 16px !important;

        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 800 !important;

        text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
    }

    /* Play button stays centered */
    .course-sidebar.natural .preview-video-box .play-btn {
        z-index: 5 !important;
    }


    /* ------------------------------------------
       PURCHASE SECTION
       ------------------------------------------ */

    .course-sidebar.natural .course-sidebar-text-box {
        width: 100% !important;

        margin: 0 !important;
        padding: 24px 18px 26px !important;

        box-sizing: border-box !important;

        background: linear-gradient(
            180deg,
            #1c1a2a 0%,
            #151421 100%
        ) !important;

        border: 1px solid rgba(255,255,255,.10) !important;
        border-top: 0 !important;
        border-radius: 0 0 20px 20px !important;

        box-shadow: 0 18px 45px rgba(0,0,0,.25) !important;

        color: #ffffff !important;

        /* Don't force a strange grid on narrow screens */
        display: block !important;
    }


    /* ------------------------------------------
       PRICE
       ------------------------------------------ */

    .course-sidebar.natural .course-sidebar-text-box .price {
        display: flex !important;
        align-items: baseline !important;
        justify-content: center !important;

        gap: 10px !important;

        margin: 0 0 12px !important;
        padding: 0 !important;

        line-height: 1 !important;
        text-align: center !important;
    }

    .course-sidebar.natural .course-sidebar-text-box
    .price .original-price {
        color: #9995a8 !important;

        font-size: 16px !important;
        font-weight: 600 !important;

        text-decoration: line-through !important;
    }

    .course-sidebar.natural .course-sidebar-text-box
    .price .current-price,
    .course-sidebar.natural .course-sidebar-text-box
    .price > .current-price {
        color: #ffffff !important;

        font-size: 38px !important;
        font-weight: 850 !important;

        letter-spacing: -1px !important;
    }


    /* ------------------------------------------
       OFFER MESSAGE
       ------------------------------------------ */

    .course-sidebar.natural .course-sidebar-text-box > p {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: fit-content !important;
        max-width: 100% !important;

        margin: 10px auto 20px !important;
        padding: 8px 13px !important;

        box-sizing: border-box !important;

        border: 1px solid rgba(245,200,91,.30) !important;
        border-radius: 999px !important;

        background: rgba(245,200,91,.08) !important;

        color: #f5c85b !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .course-sidebar.natural .course-sidebar-text-box > p i {
        color: #f5c85b !important;
        flex-shrink: 0 !important;
    }


    /* ------------------------------------------
       BUTTON AREA
       ------------------------------------------ */

    .course-sidebar.natural .course-sidebar-text-box > .buy-btns {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    /* Wishlist — full width */
    .course-sidebar.natural
    .course-sidebar-text-box > .buy-btns:has(.btn-add-wishlist) {
        display: block !important;
        width: 100% !important;
    }

    /* Cart + Buy Now */
    .course-sidebar.natural
    .course-sidebar-text-box > .buy-btns:has(.btn-buy-now) {
        display: flex !important;

        width: 100% !important;
        gap: 10px !important;

        margin-bottom: 0 !important;
    }

    .course-sidebar.natural .buy-btns .btn {
        min-height: 54px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 12px 10px !important;

        border-radius: 14px !important;

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

        font-size: 14px !important;
        font-weight: 800 !important;

        line-height: 1.2 !important;

        box-sizing: border-box !important;
    }


    /* Wishlist */
    .course-sidebar.natural .btn-add-wishlist {
        color: #ddd9e8 !important;

        background: rgba(255,255,255,.035) !important;

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

        margin-bottom: 0 !important;
    }

    .course-sidebar.natural .btn-add-wishlist:hover,
    .course-sidebar.natural .btn-add-wishlist.active {
        color: #ffffff !important;

        border-color: rgba(112,64,255,.75) !important;

        background: rgba(112,64,255,.12) !important;
    }


    /* Add to cart */
    .course-sidebar.natural .buy-btns .btn-buy-now {
        color: #ffffff !important;

        background: rgba(112,64,255,.13) !important;

        border: 1px solid rgba(132,92,255,.65) !important;

        box-shadow: none !important;
    }


    /* Buy now */
    .course-sidebar.natural .buy-btns .btn-buy {
        color: #ffffff !important;

        background: linear-gradient(
            135deg,
            #7040ff 0%,
            #916cff 100%
        ) !important;

        border: 0 !important;

        box-shadow:
            0 10px 25px rgba(112,64,255,.25) !important;
    }


    /* ------------------------------------------
       INCLUDES
       ------------------------------------------ */

    .course-sidebar.natural .includes {
        width: 100% !important;

        margin-top: 18px !important;
        padding-top: 20px !important;

        border-top: 1px solid rgba(255,255,255,.10) !important;
    }

    .course-sidebar.natural .includes .title {
        margin: 0 0 8px !important;

        color: #ffffff !important;

        font-size: 18px !important;
        font-weight: 800 !important;
    }

    .course-sidebar.natural .includes ul {
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .course-sidebar.natural .includes li {
        display: flex !important;
        align-items: flex-start !important;

        gap: 11px !important;

        margin: 0 !important;
        padding: 11px 0 !important;

        color: #c8c4d3 !important;

        font-size: 13px !important;
        line-height: 1.45 !important;

        border-bottom: 1px solid rgba(255,255,255,.055) !important;
    }

    .course-sidebar.natural .includes li:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .course-sidebar.natural .includes li i {
        width: 20px !important;
        min-width: 20px !important;

        margin-top: 2px !important;

        color: #a681ff !important;

        text-align: center !important;
    }
}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 420px) {

    .course-sidebar.natural {
        width: calc(100% - 20px) !important;
        margin-top: 14px !important;
    }

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

    .course-sidebar.natural .course-sidebar-text-box
    .price .current-price,
    .course-sidebar.natural .course-sidebar-text-box
    .price > .current-price {
        font-size: 35px !important;
    }

    .course-sidebar.natural .course-sidebar-text-box
    .price .original-price {
        font-size: 15px !important;
    }

    .course-sidebar.natural .buy-btns .btn {
        min-height: 52px !important;
        font-size: 13px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .course-sidebar.natural .includes li {
        font-size: 12.5px !important;
    }
}

/* =========================================================
   SKILLWELL — COURSE ENROLLMENT CARD
   DESKTOP VISUAL REDESIGN
   Does NOT change sidebar position / sticky / course image
   ========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------
       ENROLLMENT CARD
       ----------------------------------------- */

    .course-sidebar-text-box {
        background: #171622 !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 0 0 24px 24px !important;
        padding: 28px 30px 30px !important;
        color: #d8d5e3 !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30) !important;
    }


    /* -----------------------------------------
       PRICE
       ----------------------------------------- */

    .course-sidebar-text-box .price {
        display: flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
    }

    .course-sidebar-text-box .original-price {
        color: #858292 !important;
        font-size: 22px !important;
        text-decoration: line-through !important;
        font-weight: 500 !important;
    }

    .course-sidebar-text-box .current-price,
    .course-sidebar-text-box .current-price .current-price {
        color: #ffffff !important;
        font-size: 42px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }


    /* -----------------------------------------
       OFFER MESSAGE
       ----------------------------------------- */

    .course-sidebar-text-box > p {
        color: #b9b4c7 !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 999px !important;
        padding: 11px 18px !important;
        text-align: center !important;
        font-size: 14px !important;
        margin: 0 0 22px !important;
    }

    .course-sidebar-text-box > p i {
        color: #9b75ff !important;
        margin-right: 6px !important;
    }


    /* -----------------------------------------
       BUTTON CONTAINERS
       ----------------------------------------- */

    .course-sidebar-text-box .buy-btns {
        margin-bottom: 12px !important;
    }


    /* -----------------------------------------
       WISHLIST
       ----------------------------------------- */

    .course-sidebar-text-box .btn-add-wishlist {
        width: 100% !important;
        min-height: 58px !important;

        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 16px !important;

        color: #ddd9e8 !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        transition: all 0.2s ease !important;
    }

    .course-sidebar-text-box .btn-add-wishlist:hover,
    .course-sidebar-text-box .btn-add-wishlist.active {
        border-color: #8b5cf6 !important;
        color: #ffffff !important;
        background: rgba(139, 92, 246, 0.08) !important;
    }


    /* -----------------------------------------
       ADD TO CART
       ----------------------------------------- */

    .course-sidebar-text-box .btn-buy-now {
        width: 100% !important;
        min-height: 58px !important;

        background: transparent !important;
        border: 1px solid #7447ff !important;
        border-radius: 16px !important;

        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        transition: all 0.2s ease !important;
    }

    .course-sidebar-text-box .btn-buy-now:hover {
        background: rgba(116, 71, 255, 0.12) !important;
        border-color: #956cff !important;
    }


    /* -----------------------------------------
       BUY NOW
       ----------------------------------------- */

    .course-sidebar-text-box .btn-buy {
        width: 100% !important;
        min-height: 58px !important;

        background: linear-gradient(
            135deg,
            #7442ff 0%,
            #956cff 100%
        ) !important;

        border: 1px solid #8b5cf6 !important;
        border-radius: 16px !important;

        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        box-shadow: 0 10px 28px rgba(116, 66, 255, 0.25) !important;

        transition: all 0.2s ease !important;
    }

    .course-sidebar-text-box .btn-buy:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 14px 32px rgba(116, 66, 255, 0.32) !important;
    }


    /* -----------------------------------------
       INCLUDES SECTION
       ----------------------------------------- */

    .course-sidebar-text-box .includes {
        margin-top: 26px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    .course-sidebar-text-box .includes .title {
        color: #ffffff !important;
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    .course-sidebar-text-box .includes ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .course-sidebar-text-box .includes li {
        display: flex !important;
        align-items: center !important;

        min-height: 48px !important;

        padding: 10px 0 !important;

        color: #c5c1d0 !important;
        font-size: 15px !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .course-sidebar-text-box .includes li:last-child {
        border-bottom: none !important;
    }

    .course-sidebar-text-box .includes li i {
        width: 30px !important;
        min-width: 30px !important;

        color: #9b75ff !important;
        font-size: 15px !important;

        margin-right: 8px !important;
    }

}

/* =========================================================
   DESKTOP COURSE ENROLLMENT CARD - REDUCE HEIGHT
   ========================================================= */

@media (min-width: 992px) {

    .course-sidebar-text-box {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .course-sidebar-text-box .price {
        margin-bottom: 10px !important;
    }

    .course-sidebar-text-box > p {
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }

    .course-sidebar-text-box .buy-btns {
        margin-bottom: 10px !important;
    }

    .course-sidebar-text-box .btn {
        min-height: 56px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .course-sidebar-text-box .includes {
        margin-top: 18px !important;
    }

    .course-sidebar-text-box .includes .title {
        margin-bottom: 10px !important;
    }

    .course-sidebar-text-box .includes ul {
        margin-bottom: 0 !important;
    }

    .course-sidebar-text-box .includes li {
        margin-bottom: 7px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

@media (min-width: 992px) {

    .course-sidebar-text-box {
        border-radius: 0 0 28px 28px !important;
        overflow: hidden !important;
        background: #171622 !important;
    }

    .course-sidebar-text-box::after {
        display: none !important;
    }

    .course-sidebar {
        background: transparent !important;
    }

    .course-sidebar-text-box,
    .course-sidebar-text-box * {
        box-sizing: border-box;
    }
}

/* =========================================================
   SKILLWELL PROFESSIONAL FOOTER — FINAL OVERRIDES
   Replaces the legacy footer styling while preserving PHP.
   ========================================================= */

.footer-area.skillwell-footer {
    --sw-f-bg-light: #f8f7fc;
    --sw-f-surface-light: rgba(255,255,255,.82);
    --sw-f-heading-light: #17131f;
    --sw-f-text-light: #706b7b;
    --sw-f-border-light: rgba(30,25,50,.09);
    --sw-f-accent: #7759ff;

    margin-top: 55px !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(119,89,255,.08), transparent 28%),
        radial-gradient(circle at 92% 100%, rgba(151,117,255,.07), transparent 25%),
        var(--sw-f-bg-light) !important;
    color: var(--sw-f-text-light) !important;
    border-top: 1px solid var(--sw-f-border-light) !important;
}

.footer-area.skillwell-footer .skillwell-footer__container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.footer-area.skillwell-footer .skillwell-footer__main {
    display: grid !important;
    grid-template-columns: 1.45fr .9fr .9fr .9fr 1.35fr;
    gap: 42px;
    padding: 58px 0 48px;
}

.footer-area.skillwell-footer .skillwell-footer__brand {
    min-width: 0;
}

.footer-area.skillwell-footer .skillwell-footer__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}

.footer-area.skillwell-footer .skillwell-footer__logo img {
    display: block;
    width: 142px !important;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
}

.footer-area.skillwell-footer .skillwell-footer__description {
    max-width: 275px;
    margin: 15px 0 21px !important;
    color: var(--sw-f-text-light) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    font-weight: 500;
}

.footer-area.skillwell-footer .skillwell-footer__socials {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 27px;
}

.footer-area.skillwell-footer .skillwell-footer__socials a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 37px !important;
    height: 37px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--sw-f-border-light) !important;
    background: var(--sw-f-surface-light) !important;
    color: var(--sw-f-heading-light) !important;
    box-shadow: 0 6px 20px rgba(35,25,65,.06) !important;
    text-decoration: none !important;
    transition: .22s ease !important;
}

.footer-area.skillwell-footer .skillwell-footer__socials a i {
    color: inherit !important;
    font-size: 13px;
}

.footer-area.skillwell-footer .skillwell-footer__socials a:hover {
    color: #fff !important;
    background: linear-gradient(135deg,#6d3cff,#9b6cff) !important;
    border-color: transparent !important;
    transform: translateY(-3px);
}

.footer-area.skillwell-footer .skillwell-footer__column h5 {
    margin: 3px 0 18px !important;
    color: var(--sw-f-heading-light) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase;
}

.footer-area.skillwell-footer .skillwell-footer__column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-area.skillwell-footer .skillwell-footer__column li {
    padding: 0 !important;
    margin: 0 0 11px !important;
}

.footer-area.skillwell-footer .skillwell-footer__column a {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    color: var(--sw-f-text-light) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: color .2s ease, transform .2s ease !important;
}

.footer-area.skillwell-footer .skillwell-footer__column a:hover {
    color: var(--sw-f-accent) !important;
    transform: translateX(2px);
}

.footer-area.skillwell-footer .skillwell-footer__app {
    margin-top: 26px;
}

.footer-area.skillwell-footer .skillwell-footer__eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    padding: 5px 9px;
    border: 1px solid rgba(119,89,255,.18);
    border-radius: 999px;
    background: rgba(119,89,255,.08);
    color: var(--sw-f-accent);
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .11em;
}

.footer-area.skillwell-footer .skillwell-footer__app h4 {
    margin: 0 0 6px !important;
    color: var(--sw-f-heading-light) !important;
    font-size: 16px !important;
    font-weight: 800;
}

.footer-area.skillwell-footer .skillwell-footer__app p {
    margin: 0 0 14px !important;
    color: var(--sw-f-text-light) !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

.footer-area.skillwell-footer .skillwell-footer__app-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-area.skillwell-footer .skillwell-footer__app-button {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 185px;
    min-height: 43px;
    padding: 6px 11px !important;
    box-sizing: border-box;
    border: 1px solid var(--sw-f-border-light) !important;
    border-radius: 9px !important;
    background: var(--sw-f-surface-light) !important;
    color: var(--sw-f-heading-light) !important;
    text-decoration: none !important;
    transition: .2s ease !important;
}

.footer-area.skillwell-footer .skillwell-footer__app-button:hover {
    transform: translateY(-2px);
    border-color: rgba(119,89,255,.28) !important;
    box-shadow: 0 8px 22px rgba(35,25,65,.08);
}

.footer-area.skillwell-footer .skillwell-footer__app-button > i {
    width: 21px;
    text-align: center;
    font-size: 18px;
}

.footer-area.skillwell-footer .skillwell-footer__app-button span {
    display: flex;
    flex-direction: column;
    text-align: left;
    color: inherit !important;
    line-height: 1;
}

.footer-area.skillwell-footer .skillwell-footer__app-button small {
    margin-bottom: 3px;
    color: var(--sw-f-text-light) !important;
    font-size: 6.5px;
    line-height: 1;
    letter-spacing: .06em;
}

.footer-area.skillwell-footer .skillwell-footer__app-button strong {
    color: var(--sw-f-heading-light) !important;
    font-size: 11px;
    line-height: 1.1;
}

.footer-area.skillwell-footer .skillwell-footer__contact {
    min-width: 0;
}

.footer-area.skillwell-footer .skillwell-footer__contact-card {
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--sw-f-border-light);
    border-radius: 16px;
    background: var(--sw-f-surface-light);
    box-shadow: 0 12px 35px rgba(35,25,65,.045);
}

.footer-area.skillwell-footer .skillwell-footer__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 15px;
    border-radius: 11px;
    background: rgba(119,89,255,.1);
    color: var(--sw-f-accent);
}

.footer-area.skillwell-footer .skillwell-footer__contact-card span {
    display: block;
    margin-bottom: 5px;
    color: var(--sw-f-accent) !important;
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .1em;
}

.footer-area.skillwell-footer .skillwell-footer__contact-card strong {
    display: block;
    color: var(--sw-f-heading-light) !important;
    font-size: 16px;
    line-height: 1.3;
}

.footer-area.skillwell-footer .skillwell-footer__contact-card p {
    margin: 9px 0 15px !important;
    color: var(--sw-f-text-light) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
}

.footer-area.skillwell-footer .skillwell-footer__contact-card a {
    color: var(--sw-f-accent) !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none !important;
}

.footer-area.skillwell-footer .skillwell-footer__contact-card a i {
    margin-left: 5px;
    font-size: 9px;
    transition: transform .2s ease;
}

.footer-area.skillwell-footer .skillwell-footer__contact-card a:hover i {
    transform: translateX(3px);
}

.footer-area.skillwell-footer .skillwell-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 65px;
    border-top: 1px solid var(--sw-f-border-light) !important;
    color: var(--sw-f-text-light) !important;
    font-size: 10px;
}

.footer-area.skillwell-footer .skillwell-footer__copyright {
    color: var(--sw-f-text-light) !important;
}

.footer-area.skillwell-footer .skillwell-footer__legal {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-area.skillwell-footer .skillwell-footer__legal a {
    color: var(--sw-f-text-light) !important;
    font-size: 10px;
    text-decoration: none !important;
}

.footer-area.skillwell-footer .skillwell-footer__legal a:hover {
    color: var(--sw-f-accent) !important;
}

.footer-area.skillwell-footer .skillwell-footer__language {
    display: none !important;
}

/* DARK MODE */
html[data-theme="dark"] .footer-area.skillwell-footer {
    --sw-f-bg-light: #09080e;
    --sw-f-surface-light: rgba(255,255,255,.035);
    --sw-f-heading-light: #f5f2fa;
    --sw-f-text-light: #96919f;
    --sw-f-border-light: rgba(255,255,255,.085);

    background:
        radial-gradient(circle at 8% 0%, rgba(119,89,255,.11), transparent 28%),
        radial-gradient(circle at 92% 100%, rgba(151,117,255,.07), transparent 25%),
        #09080e !important;
    color: #96919f !important;
}

html[data-theme="dark"] .footer-area.skillwell-footer .skillwell-footer__contact-card,
html[data-theme="dark"] .footer-area.skillwell-footer .skillwell-footer__app-button,
html[data-theme="dark"] .footer-area.skillwell-footer .skillwell-footer__socials a {
    background: rgba(255,255,255,.035) !important;
}

/* TABLET */
@media (max-width: 991px) {
    .footer-area.skillwell-footer .skillwell-footer__main {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 35px 26px;
        padding: 50px 0 42px;
    }

    .footer-area.skillwell-footer .skillwell-footer__brand {
        grid-column: span 3;
    }

    .footer-area.skillwell-footer .skillwell-footer__contact {
        grid-column: span 3;
    }

    .footer-area.skillwell-footer .skillwell-footer__contact-card {
        height: auto;
    }

    .footer-area.skillwell-footer .skillwell-footer__app {
        margin-top: 24px;
    }

    .footer-area.skillwell-footer .skillwell-footer__app-buttons {
        flex-direction: row;
    }
}

/* MOBILE */
@media (max-width: 640px) {
    .footer-area.skillwell-footer {
        margin-top: 35px !important;
    }

    .footer-area.skillwell-footer .skillwell-footer__container {
        width: calc(100% - 32px);
    }

    .footer-area.skillwell-footer .skillwell-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 30px 20px;
        padding: 42px 0 32px;
    }

    .footer-area.skillwell-footer .skillwell-footer__brand {
        grid-column: span 2;
        text-align: center;
    }

    .footer-area.skillwell-footer .skillwell-footer__logo {
        justify-content: center;
    }

    .footer-area.skillwell-footer .skillwell-footer__logo img {
        width: 135px !important;
        object-position: center;
    }

    .footer-area.skillwell-footer .skillwell-footer__description {
        max-width: 330px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .footer-area.skillwell-footer .skillwell-footer__socials {
        justify-content: center;
    }

    .footer-area.skillwell-footer .skillwell-footer__app {
        margin-top: 24px;
    }

    .footer-area.skillwell-footer .skillwell-footer__app-buttons {
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-area.skillwell-footer .skillwell-footer__app-button {
        flex: 1 1 145px;
        max-width: 180px;
    }

    .footer-area.skillwell-footer .skillwell-footer__contact {
        grid-column: span 2;
    }

    .footer-area.skillwell-footer .skillwell-footer__contact-card {
        text-align: center;
    }

    .footer-area.skillwell-footer .skillwell-footer__contact-icon {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-area.skillwell-footer .skillwell-footer__bottom {
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        padding: 18px 0 20px;
        gap: 10px;
        text-align: center;
    }

    .footer-area.skillwell-footer .skillwell-footer__legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 17px;
    }
}

/* EXTRA SMALL */
@media (max-width: 380px) {
    .footer-area.skillwell-footer .skillwell-footer__main {
        gap: 27px 15px;
    }

    .footer-area.skillwell-footer .skillwell-footer__column a {
        font-size: 12px !important;
    }

    .footer-area.skillwell-footer .skillwell-footer__app-buttons {
        flex-direction: column;
        align-items: center;
    }

    .footer-area.skillwell-footer .skillwell-footer__app-button {
        width: 100%;
        max-width: 215px;
    }
}

/* ==========================================================
   SKILLWELL — GLOBAL MOBILE PROFILE NAVIGATION FIX
   The profile navigation appears on multiple account pages.
   Keep it above the mobile navbar/overlays on every page,
   not only on My Courses.
   ========================================================== */
@media (max-width: 767px) {
    .page-header-area.my-course-area {
        position: relative !important;
        z-index: 1000002 !important;
        pointer-events: auto !important;
    }

    .page-header-area.my-course-area > .container,
    .page-header-area.my-course-area > .container > ul,
    .page-header-area.my-course-area > .container > ul > li,
    .page-header-area.my-course-area > .container > ul > li > a {
        position: relative !important;
        z-index: 1000003 !important;
        pointer-events: auto !important;
    }

    .page-header-area.my-course-area > .container > ul > li > a {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
    }

    /* Never let the navbar's mobile overlay block the profile tabs. */
    .page-header-area.my-course-area a {
        pointer-events: auto !important;
    }
}