@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI,
                    Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}



:root{
    --aura-gold-light: #FFD56C;
    --aura-brown:       #663500;

    --aura-purple-light:#9972FF;
    --aura-purple-mid:  #440985;
    --aura-purple-dark: #2A0756;
    --aura-purple-deep: #1E053D;

    --aura-blue-dark:   #05477D;
    --aura-teal:        #33D1C5;

    --aura-white:       rgb(214, 200, 190);
    --aura-white-50:    rgba(255,255,255,.5);
    --aura-white-60:    rgba(255,255,255,.6);
    --aura-white-70:    rgba(255,255,255,.7);
    --aura-white-75:    rgba(255,255,255,.75);
    --aura-white-85:    rgba(255,255,255,.85);
    --aura-white-90:    rgba(255,255,255,.9);

    --aura-link:        var(--aura-purple-mid);
    --aura-link-hover:  var(--aura-purple-dark);
    --aura-gold:        var(--aura-gold-light);

    font-family: var(--font-sans), sans-serif;
}

html, body {
    font-family: var(--font-sans), sans-serif; }

/* =========================================================
   NAVBAR
   ========================================================= */
/* Default transparent navbar */
.aura-navbar {
    color: var(--aura-white);
    min-height: 64px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.aura-navbar.navbar-scrolled {
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(14px);
}

.aura-navbar .vr
{
    border-left:1px solid var(--aura-white-50) !important;
    max-height: 3em !important;
    height: 3em !important;
    align-self: center !important;
}

.aura-hamburger{ color: var(--aura-white-90) !important; }
.aura-hamburger:hover{ color: var(--aura-white-50) !important; }

.aura-link{
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
.aura-link:hover{ color: var(--aura-link-hover); }
.aura-link.active{ position:relative; }
.aura-link.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background: var(--aura-link);
}

.aura-icon{ color: #fff }
.aura-icon:hover{ color: var(--aura-link-hover); }

@media (min-width: 992px){
    .aura-navbar .navbar-nav .nav-link {
        padding-left: .25rem;
        padding-right: .25rem;
        color: #fff;
    }
}

/* =========================================================
   PAGE BACKGROUND / DECOR
   ========================================================= */
.aura-page{
    min-height:100dvh;
    background: hsla(270, 50%, 40%, 1);

    background: linear-gradient(280deg, hsla(270, 50%, 40%, 1) 45%, hsla(174, 72%, 56%, 1) 70%, hsla(270, 50%, 40%, 1) 90%);

    background: -moz-linear-gradient(280deg, hsla(270, 50%, 40%, 1) 45%, hsla(174, 72%, 56%, 1) 70%, hsla(270, 50%, 40%, 1) 90%);

    background: -webkit-linear-gradient(280deg, hsla(270, 50%, 40%, 1) 45%, hsla(174, 72%, 56%, 1) 70%, hsla(270, 50%, 40%, 1) 90%);

    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--aura-white);
}

.aura-leaf{
    background: url("/assets/default/img/leaf.png") no-repeat right bottom / auto 85%;
    pointer-events: none;
}

.aura-gold{
    letter-spacing: 1px;
    background: linear-gradient(180deg, #FFD56C 0%, #75491A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
   FORMS / BUTTONS
   ========================================================= */
.aura-auth-wrap{
    padding-top: clamp(48px, 6vw, 96px);
    padding-bottom: clamp(48px, 6vw, 96px);
}

.aura-leaf-login{
    min-height: 70vh;
    background: url("/assets/default/img/leaf.png") no-repeat right top / auto 92%;
    pointer-events: none;
}

.aura-input{
    color: #fff !important;
    padding: 0.95rem 1.25rem !important;
    border-radius: 47px !important;
    border: none !important;
    box-shadow: inset 0 5px 22px #ffffff3b !important;
    background: linear-gradient(
        136deg,
        rgba(68, 9, 133, 0.03) 0%,
        rgba(100, 2, 102, 0.1) 100%
    ) !important;
}
.aura-input::placeholder{ color: rgba(255,255,255,.6) !important; letter-spacing:.4px; }
.aura-input:focus{
    border-color: rgba(215,183,74,.65) !important;
    box-shadow:
        inset 0 2px 7px rgba(0,0,0,.3),
        0 0 0 3px rgba(215,183,74,.22) !important;
    outline: none !important;
}


.aura-btn{
    border-radius:9999px !important;
    color: var(--aura-white);
    box-shadow: inset 0 5px 22px #ffffff3b !important;
    background: linear-gradient(
        136deg,
        rgba(68, 9, 133, 0.03) 0%,
        rgba(100, 2, 102, 0.1) 100%
    );
    padding:.55rem 1.25rem !important;
    transition: background-color 200ms ease-in !important;
}
.aura-btn:hover
{
    background: var(--aura-purple-mid) !important;
}

.aura-link-purple{ color:#3f168a; text-decoration:none; }
.aura-link-purple:hover{ text-decoration:underline; }

/* =========================================================
   FOOTER / UTILITIES
   ========================================================= */
.aura-footer{ border-top:1px solid rgba(255,255,255,.2); }
.aura-footer-link{ color:var(--aura-white); opacity:.85; text-decoration:none; }
.aura-footer-link:hover{ opacity:1; text-decoration:underline; }
.border-white-25{ border-color:rgba(255,255,255,.25)!important; }

.aura-sidebar p{ color:#E7E0F3; }
.aura-news-email{
    display:flex; gap:.5rem; align-items:center;
    border:1px solid rgba(255,255,255,.35);
    border-radius:9999px; padding:.35rem .4rem .35rem .9rem;
    background: rgba(255,255,255,.06);
    max-width: 25em;
}
.aura-news-email input{
    color:var(--aura-white); background:transparent; border:none; outline:none; width:100%;
}
.aura-news-email input::placeholder{ color: var(--aura-white-70); }

/* =========================================================
   FULL-SCREEN OVERLAY MENU (hamburger)
   ========================================================= */
.aura-menu{
    width:100vw; max-width:100vw; height:100vh;
    background:
        radial-gradient(240px 200px at 78% 12%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
    color: var(--aura-white);
    border-left:none;
}
.aura-menu .menu-big{ margin:0; }
.aura-menu .menu-link{
    display:block; 
    color:var(--aura-white); 
    text-decoration:none;
    font-weight:700; 
    font-size:clamp(1.6rem,3.2vw,2.5rem); 
    line-height:1.85;
}
.aura-menu .menu-link:hover{ text-decoration:underline; }

.offcanvas.aura-menu{
    --bs-offcanvas-width: 100vw;
    height: 100vh;
    border-left: none;
    background: radial-gradient(77.04% 119.34% at 85% -15%, #1E053D 0%, #40E0D0 29.33%, #639 62.98%, #1E053D 97.6%);

    color: var(--aura-white);
}
.offcanvas-backdrop.show{ opacity:.45; }

.right-leaf {
    position: fixed;
    right: 0;
    padding: 0 !important;
    z-index: -1;
    max-width: 15em !important;
}

@media(max-width: 900px)
{
    .right-leaf {
        display: none !important;
    }
}



/* ---- HERO ---- */

/* Hero gradient decoration (photo) */
.hero-gradient{
    position: absolute;
    top: -15vw;
    right: 0;
    width: 88vw;
    height: 200vh;
    background: url("/assets/default/img/homepage-gradient.png") no-repeat center top / cover;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 1000px){
    .hero-gradient{
        top: -20vw;
        height: 200vh;
    }
}

@media (max-width: 600px){
    .hero-gradient{
        display: none;
    }
}

.aura-hero{
    padding-top: clamp(48px, 8vw, 96px);
    padding-bottom: clamp(48px, 8vw, 96px);
}

.aura-hero .container-xxl{ position: relative; z-index: 1; }

.aura-search-wrap{
    position: relative;
    margin-inline: auto;
}
.aura-search-btn{
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--aura-white-70);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.aura-search-btn:hover{ color: var(--aura-white-90); }

.aura-search-input{
    padding-left: 44px !important;
    min-height: 52px;
    border-radius: 9999px;
}

/* ---- Stat cards ---- */
.aura-stat{
    border-radius: 18px;
    padding: 1rem;
    height: 100%;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: inset 0 2px 10px rgba(255,255,255,.25), 0 6px 20px rgba(255,255,255,.15);
    transition: 200ms;
}

.aura-stat:hover {
    transform: translateY(-1em);
}
.aura-stat-num{
    font-weight: 700;
    font-size: 1.25rem;
    opacity: .95;
    margin-bottom: .5rem;
}
.aura-stat-title{
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .35rem;
}
.aura-stat-sub{
    font-size: .85rem;
    color: var(--aura-white-75);
}

@media (min-width: 1200px){
    .aura-stat{ padding: 1.1rem 1.25rem; }
}

/* ===== Courses ===== */
.course-row { align-items: stretch; }

.course-rail {
    display: flex; flex-direction: column; gap: .55rem;
}
.rail-btn{
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
    color: #fff; opacity: .7;
    border: 1px solid rgba(255,255,255,.35);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
}
.rail-btn.active{
    opacity: 1;
    color: var(--aura-gold);;
    border-color: rgba(255,255,255,.85);
    box-shadow: 0 0 0 2px rgba(255,255,255,.25), inset 0 2px 10px rgba(0,0,0,.28);
}

.course-card{
    overflow: visible;
    border-radius: 28px;
    transition: 200ms;
}

.course-card:hover {
    transform: translateY(-1em);
}
.course-card-inner{
    position: relative;
    min-height: 300px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.45);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 3px 18px rgba(0,0,0,.35);
    overflow: hidden;
}

.course-bg{
    position:absolute; inset:0; background-size: cover; background-position: center;
    z-index: 0;
}

.course-copy{
    position: relative; z-index: 2;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    max-width: clamp(280px, 40vw, 420px);
}
.course-type{ font-size:.8rem; color: rgba(255,255,255,.8); letter-spacing:.08em; }

.author-avatar{
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
}

.author-name{ font-size:.9rem; opacity:.9; }

.course-title{ font-size: clamp(1.2rem, 2.1vw, 1.8rem); font-weight:700; }

.course-meta{ color: rgba(255,255,255,.8); font-size:.9rem; display:flex; gap:.5rem; align-items:center; }

.course-price{ margin-top:.75rem; font-size:1.6rem; font-weight:700; }

.course-price span{ font-size:.95rem; font-weight:500; opacity:.85; margin-left:.25rem; }

.course-cta{ margin-top:.75rem; }

.course-badge{
    position:absolute; top:14px; right:16px; z-index:3;
    font-size:.75rem; font-weight:700; color:#fff;
    padding:.3rem .6rem; border-radius:9999px;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    border:1px solid rgba(255,255,255,.45);
}

.course-figure{
    position:absolute; right: 43%;
    max-height: 115%;
    z-index: 2;
    pointer-events:none;
    bottom: 0;
}
.course-figure-right{
    bottom: 0;
    position:absolute; right: 30%;
    max-height: 115%;
    z-index: 2; pointer-events:none;
}

@media (min-width: 1200px){
    .course-card-inner{ min-height: 340px; }
    .course-figure{ height: 125%; }
    .course-figure-right{ height: 125%; }
}



/* ===== Products ===== */
.product-card{
    position: relative;
    text-decoration: none;
    border-radius: 18px;
    padding: 1.1rem 1.25rem;
    min-height: 15em;
    color:#fff;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: inset 0 3px 14px rgba(255,255,255,.25), 0 8px 24px rgba(255,255,255,.10);
    overflow: hidden;
    transition: 200ms;
}

.product-card:hover{
    transform: translateY(-1em);
}
.product-card .bg-img{
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:.18; filter:saturate(1.2) brightness(1);
    z-index:0;
}
.product-card > *{ position: relative; z-index: 1; }

.product-card-bg{
    height: 100%;
    min-height: 150px;
    border-radius: 18px;
    overflow: hidden;
}
.product-card-bg .bg-img{
    position:absolute; inset:0;
    background-size: cover; background-position: center;
    transform: scale(1.02);
    filter: saturate(1.15) contrast(1.02);
}
.product-card-bg .overlay{
    position:absolute; inset:0;
    background: radial-gradient(60% 60% at 80% 20%, rgba(0,0,0,.10), rgba(0,0,0,.45));
}


/* ===== Subscribe / Pricing ===== */
.section-subscribe{ position: relative; }

.pricing-card{
    position: relative;
    border-radius: 22px;
    padding: 1.25rem 1.25rem 1.4rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 3px 16px rgba(255,255,255,.28), 0 12px 28px rgba(255,255,255,.14);
    transition: 200ms;
}

.pricing-card:hover {
    transform: translateY(-1em);
}

.pricing-card--featured{
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
        radial-gradient(120% 120% at 50% 0%, #C7912D 0%, #B88422 40%, #976916 100%); /* gold */
    border-color: rgba(255,255,255,.55);
    box-shadow: 0 18px 40px rgba(255,255,255,.3), inset 0 5px 22px rgba(255,255,255,.15);
}

.pricing-card--bronze {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
        radial-gradient(
            120% 120% at 50% 0%,
            #9972ff 0%,
            #7f5ecc 40%,
            #604699 100%
        );
    border-color: rgba(255,255,255,.55);
    box-shadow: 0 18px 40px rgba(255,255,255,.3),
    inset 0 5px 22px rgba(255,255,255,.15);
}

.pricing-badge{
    position: absolute; top: .6rem; right: .6rem;
    font-size: .7rem; font-weight: 700; color: #fff;
    padding: .25rem .55rem; border-radius: 9999px;
    background: rgba(255,255,255,.25);
}

.pricing-head h3{
    font-weight: 700;
}
.pricing-price{
    margin: 1rem 0;
}
.pricing-price .amount{
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--aura-gold, #FFD56C);
}
.pricing-price .period{
    margin-left: .15rem; opacity: .85;
}

.pricing-cta{
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    height: 46px; padding: 0 14px 0 16px;
    border-radius: 9999px;
    text-decoration: none; color: #fff; font-weight: 600;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    box-shadow: inset 0 2px 10px rgba(255,255,255,.25);
}
.pricing-cta i{ font-size: 1.2rem; opacity: .9; }
.pricing-cta:hover{ background: rgba(255,255,255,.16); }

.pricing-features{ margin-top: .9rem; }
.pricing-features li{
    display: flex; gap: .5rem; align-items: center;
    color: var(--aura-white-85);
    padding: .25rem 0;
}
.pricing-features i{
    color: #26E6B5;
}

@media (min-width: 992px){
    .pricing-featured-col{
        transform: translateY(-3em);
        z-index: 2;
    }
}

@media (min-width: 992px){
    .section-subscribe .row.g-4{ margin-top: 3em; }
}


/* ===== Forum banner ===== */
.forum-card{
    border-radius: 28px;
    min-height: 340px;
    box-shadow: inset 0 4px 18px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.18);
}

.forum-bg{
    position:absolute; inset:0;
    background-size: cover; background-position: center;
    /* filter: saturate(1.05) contrast(1.02) brightness(.95); */
    transform: scale(1.02);
    opacity: 1;
}

.forum-overlay{
    position:absolute; inset:0;
    background:
        radial-gradient(80% 80% at 0% 40%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
}

.forum-content{ height: 100%; display:flex; align-items:center; }
.forum-copy{ max-width: 560px; padding: clamp(18px, 4vw, 36px); color:rgb(214, 200, 190); }
.forum-copy h2{ font-weight: 700; }

/* ===== Win Club Points ===== */
.winpoints-title{
    font-weight: 800;
    letter-spacing: .02em;
    line-height: .95;
    font-size: clamp(2.2rem, 7vw, 4.5rem);
}

.winpoints-section .lead{
    max-width: 720px;
}

.win-btn{
    border-radius: 9999px;
    height: 48px;
    display: inline-flex;
    align-items: center;
}
.win-btn-ghost{
    color:#fff;
    border:1px solid rgba(255,255,255,.55);
    background:
        linear-gradient(180deg, rgba(117,187,219,.45), rgba(71,134,175,.35));
    box-shadow: inset 0 2px 10px rgba(0,0,0,.22);
}
.win-btn-ghost:hover{ filter: brightness(1.06); color:#fff; }

.win-btn-solid{
    background:#fff;
    border:1px solid rgba(255,255,255,.85);
}
.win-btn-solid:hover{ background:#f2f2f2; }

.win-card {
    min-height: 220px;
    border-radius: 20px;
    padding: 1.25rem;
    color: #b58a40;
    text-decoration: none;
    background: hsla(174, 72%, 56%, 1);
    box-shadow: inset 0 4px 12px rgba(255,255,255,.28), 0 10px 22px rgba(255,255,255,.18);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}
.win-card:hover{ transform: translateY(-2px); transition: transform .18s ease; }

.win-card-title{
    font-weight: 800;
    letter-spacing:.06em;
    margin-top:.15rem;
}

.win-fab{
    position:absolute; right: 12px; bottom: 12px;
    width: 28px; height: 28px; border-radius: 9999px;
    display:grid; place-items:center;
    color:#fff;
    background: linear-gradient(180deg, #FFD56C 0%, #75491A 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 2px 6px rgba(255,255,255,.25);
    pointer-events:none;
}
.win-fab i{ font-size: 1rem; }

/* ===== Course Product Card ===== */
.course-product-card {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,213,108,0.15) 0%, rgba(153,114,255,0.15) 100%);
    border: 1px solid rgba(255,213,108,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.course-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,213,108,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.course-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255,213,108,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    border-color: rgba(255,213,108,0.5);
}

.course-product-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.course-product-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,213,108,0.4);
}

.course-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-product-card:hover .course-product-image img {
    transform: scale(1.1);
}

.course-product-info {
    flex-grow: 1;
    min-width: 0;
}

.course-product-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.25rem;
}

.course-product-title {
    font-size: 1rem;
    font-weight: 700;
    color: #FFD56C;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-product-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.course-product-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFD56C 0%, #B8860B 100%);
    box-shadow: 0 4px 12px rgba(255,213,108,0.4), inset 0 2px 4px rgba(255,255,255,0.3);
    color: #1E053D;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.course-product-card:hover .course-product-arrow {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255,213,108,0.5), inset 0 2px 4px rgba(255,255,255,0.3);
}

/* ===== Testimonials ===== */
.t-card{
    border-radius: 18px;
    padding: 1.1rem 1.25rem;
    color:#fff;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 4px 16px rgba(255,255,255,.28), 0 10px 24px rgba(255,255,255,.18);
    min-height: 190px;
    transition: 200ms;
}

.t-card:hover {
    transform: scale(1.05);
}

.t-avatar{
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,.85);
}
.t-avatar--placeholder{
    background: transparent;
    border: 2px solid rgba(255,255,255,.85);
}

.t-stars i{ color: #FFD56C; }
.t-quote{ color: rgba(255,255,255,.9); }


/* ===== Blogs ===== */
.blogs-grid{
    display: grid;
    gap: 20px;
}

/* Desktop layout: 3 columns with named areas */
@media (min-width: 992px){
    .blogs-grid{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr;
        grid-auto-rows: 1fr;
        align-items: stretch;
        grid-template-areas:
        "A A B B"
        "A A D E"
        "C C D E"
    }
    .blogs-grid .area-a{ grid-area: A; }
    .blogs-grid .area-b{ grid-area: B; }
    .blogs-grid .area-c{ grid-area: C; }
    .blogs-grid .area-d{ grid-area: D; }
    .blogs-grid .area-e{ grid-area: E; }
}

/* Tablet: 2 columns, natural flow */
@media (min-width: 600px) and (max-width: 991.98px){
    .blogs-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: one column */
@media (max-width: 599.98px){
    .blogs-grid{ grid-template-columns: 1fr; }
}

.blogs-grid > div { height: 100%; }

/* Card skin (glass) */
.blog-card{
    position: relative;
    border-radius: 18px;
    padding:20px 30px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 4px 12px rgba(255,255,255,.28), 0 10px 20px rgba(255,255,255,.16);
    min-height: 200px;
    height: 100%;
    transition: 200ms;
}

.blog-card:hover{
    transform: translateY(-1em);
}

.blog-date{
    background: linear-gradient(180deg, #FFD56C 0%, #75491A 100%);
    color: #fff; font-weight: 700; font-size: .75rem;
    padding: .25rem .55rem; border-radius: 9999px;
    width: 10em;
    text-align: center;
    margin-left: auto;
}

.blog-title{
    font-weight: 800;
    font-size: clamp(1.05rem, 1.6vw, 1.6rem);
    margin-bottom: .4rem;
}

.blog-title-link{
    text-decoration: none;
    color: #fff;
    transition: color 200ms;
}

.blog-title-link:hover{
    color: rgba(255,255,255,0.6);
}

.blog-excerpt{
    color: rgba(255,255,255,.85);
    font-size: .95rem;
    margin-bottom: 2.4rem;
}

.blog-meta{
    display:flex; align-items:center; justify-content:space-between;
    color: rgba(255,255,255,.9);
}
.blog-meta .author i{ margin-right:.35rem; opacity:.9; }
.blog-meta .comments i{ font-size: 1.2rem; opacity:.9; }

.blog-card--image{
    padding: 0; overflow: hidden;
    display: grid; place-items: stretch;
    height: 100%;
}
.blog-card--image img{
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    border-radius: 18px;
}


/* Back-to-top button */
.aura-backtotop{
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 9999px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 2px 10px rgba(0,0,0,.22);
    cursor: pointer;

    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1040;
}
.aura-backtotop.show{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.aura-backtotop:hover{
    background: rgba(255,255,255,.2);
}

@media (prefers-reduced-motion: reduce){
    .aura-backtotop{ transition: none; }
}


/* ===== Contact page ===== */
.contact-wrap{ position:relative; }

/* Gold headline style from mock */
.contact-title{
    font-weight: 800;
    letter-spacing: .04em;
}

/* thin line under the small caption */
.contact-divider{
    height:1px;
    background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08));
}

/* info cards */
.contact-info-card{
    border-radius: 14px;
    padding: .9rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 2px 12px rgba(0,0,0,.25);
}

.contact-label{
    color: rgba(255,255,255,.8);
    font-size: .78rem;
    letter-spacing: .07em;
    font-weight: 700;
    margin-bottom: .35rem;
}

.contact-ico{
    font-size: 1rem;
    color: var(--aura-gold, #FFD56C);
    margin-top: .15rem;
}

/* small rounded chip like “Get Directions” */
.contact-chip{
    display:inline-block;
    font-size:.78rem;
    padding:.25rem .6rem;
    border-radius: 9999px;
    color:#fff;
    text-decoration:none;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.45);
}
.contact-chip:hover{ filter: brightness(1.06); }

/* textarea skin identical to pill inputs but tall */
.aura-textarea{
    color:#fff !important;
    border:none !important;
    border-radius: 28px !important;
    resize: vertical;
    padding: 1rem 1.25rem !important;
    box-shadow: inset 0 5px 22px #ffffff3b !important;
    background: linear-gradient(
        136deg,
        rgba(68, 9, 133, 0.03) 0%,
        rgba(100, 2, 102, 0.1) 100%
    ) !important;
}

/* left donut decorative image */
.aura-donut-left{
    position: absolute;
    left: -18em;
    bottom: 10em;
    width: 30vw;
    height: 42vw;
    max-width: 700px;
    max-height: 700px;
    background: url("/assets/default/img/contact-moon.png") no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

/* keep content above decoration */
.contact-wrap .container-xxl{ position: relative; z-index: 1; }

/* small adjustments on narrow screens */
@media (max-width: 1375px){
    .aura-donut-left{
        display: none;
    }
}


/* ===== Courses page ===== */
.courses-wrap{ position:relative; }

.aura-planet-right{
    position: absolute;
    right: -18em;
    bottom: 10em;
    width: 25vw;
    height: 46vw;
    max-width: 900px;
    max-height: 900px;
    background: url("/assets/default/img/blog-moon-2.png") no-repeat center / contain;
    opacity: .95;
    pointer-events: none;
    z-index: 0;
}

.courses-wrap .container-xxl{ position: relative; z-index: 1; }

/* Search inside input (reuses aura-input styles) */
.aura-search-btn{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    border:0; background:transparent; color: var(--aura-white-70);
}
.aura-search-input{ padding-left: 44px !important; }

/* Filter “glass” pills */
.filter-pill{
    color:#fff;
    border-radius: 9999px;
    padding:.45rem .9rem;
    font-weight:600;
    transition: 200ms;
    cursor: pointer;
}
.filter-pill:hover{
    background-color: var(--aura-purple-mid);
}

.filter-pill.active {
    background-color: var(--aura-purple-mid);
}


/* Dropdown-look pills (no JS yet) */
.filter-select{
    display:inline-flex; align-items:center; gap:.25rem;
    color:#fff; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    border-radius: 9999px; padding:.45rem .9rem; font-weight:600;
    transition: 200ms;
    cursor: pointer;
}

.filter-select:hover {
    background-color: var(--aura-purple-mid);
}

/* Apply button (white like the mock) */
.filter-apply{
    border-radius:9999px; padding:.45rem 1.1rem; font-weight:700;
    background:#fff; color:#3a158c; border:1px solid rgba(255,255,255,.75);
}
.filter-apply:hover{ background:#f3f3f3; }

.products-filters {
    border-radius: 99px;
    background: rgba(68, 9, 133, 0.1);
    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.05) inset, -1px -2px 3px 0 rgba(255, 255, 255, 0.10) inset, 1px 1px 2px 0 rgba(255, 255, 255, 0.15) inset;
    padding: 1em;
}


/* ===== Course details ===== */
.course-show-wrap .glass-panel{
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 4px 16px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.18);
}

/* Tabs look like the mock: subtle underline on active */
.course-tabs .nav-link{
    color: rgba(255,255,255,.85);
    background: transparent;
    border: 0;
    font-weight: 600;
    padding: .5rem 1rem;
    position: relative;
}
.course-tabs .nav-link.active{
    color: #fff;
}
.course-tabs .nav-link.active::after{
    content:""; position:absolute; left:.8rem; right:.8rem; bottom:0;
    height: 2px; background: var(--aura-gold,#FFD56C);
}

.course-tabcontent .glass-panel{ border-radius: 16px; }

/* Specs grid (2 columns) */
.spec-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem 1rem;
}

.butterfly {
    width: 15em;
}

@media(max-width: 1130px)
{
    .butterfly{
        display: none;
    }
}

/* ===== Course details → Accordion ===== */
.aura-accordion .accordion-item { border:0; }
.aura-accordion .accordion-button
{
    box-shadow:none;
}
.aura-accordion .accordion-button::after
{
    margin-left: 0 !important;
}

.aura-acc-btn{
    gap:.75rem;
    color:#fff;
    background: transparent;
    padding: .9rem 1rem;
}
.aura-acc-btn:not(.collapsed){
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border-bottom:1px solid rgba(255,255,255,.18);
}
.aura-acc-btn::after{
    filter: invert(1) opacity(.9);
}

.aura-acc-title{
    font-weight: 600;
    color: rgba(255,255,255,.95);
}
.aura-acc-count{
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    border:1px solid rgba(255,255,255,.35);
    min-width: max-content !important;

}

/* Module rows inside an open accordion */
.aura-module{
    border-top:1px solid rgba(255,255,255,.18);
    padding: .85rem 1rem;
}
.aura-module:first-child{ border-top:0; }

.aura-module-head{
    display:flex; align-items:flex-start; gap:.8rem;
}
.aura-module-icon{
    width:28px; height:28px; display:grid; place-items:center;
    border-radius:50%;
    color:#fff;
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
    border:1px solid rgba(255,255,255,.35);
    margin-top:.2rem;
    flex: 0 0 auto;
}
.aura-module-copy{ flex: 1 1 auto; min-width: 0; }
.aura-module-title{
    font-weight: 700; color:#fff; margin-bottom:.15rem;
}
.aura-module-desc{
    color: var(--aura-white-85);
    font-size: .95rem;
    margin-bottom: .5rem;
}
.aura-module-meta{
    display:flex; gap:1rem; color: var(--aura-white-75);
    font-size:.9rem;
}
.aura-module-cta{ margin-left: .75rem; flex: 0 0 auto; }

.accordion .collapse { visibility: visible !important; }


/* ===== Forums: hero stats ===== */
.forum-stat-pill{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:.15rem; height:84px; border-radius:16px; color:#fff;
    border:1px solid rgba(255,255,255,.35);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 2px 10px rgba(0,0,0,.22);
    transition: 200ms;
}
.forum-stat-pill:hover{
    transform: translateY(-1em);
}

.forum-stat-num{ font-weight:800; font-size:1.4rem; }
.forum-stat-label{ opacity:.9; font-weight:600; }

/* ===== Featured Topics grid ===== */
.featured-grid{
    display:grid;
    gap:16px;
    grid-template-columns: 1fr;
}

/* desktop: mosaic layout */
@media (min-width: 992px){
    .featured-grid{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 1fr;
        grid-auto-rows: 1fr;
        align-items: stretch;
        grid-template-areas:
      "a b b"
      "c c d";
    }
    .featured-grid .area-a{ grid-area: a; }
    .featured-grid .area-b{ grid-area: b; }
    .featured-grid .area-c{ grid-area: c; }
    .featured-grid .area-d{ grid-area: d; }
}

.featured-card{
    position: relative; height:100%;
    border-radius:18px; padding:24px 26px; color:#fff;
    border:1px solid rgba(255,255,255,.35);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 4px 12px rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.18);
    transition: 200ms;
}

.featured-card:hover{
    transform: translateY(-1em);
}

.badge-gold{
    border-radius:50%;
    width: 32px;
    height: 32px;
    background: linear-gradient(180deg, #FFD56C 0%, #75491A 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 1px 3px rgba(255,255,255,.35);
}

/* ===== Forums list ===== */
.forum-section{
    position: relative;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow:
        inset 0 4px 16px rgba(0,0,0,.28),
        0 10px 26px rgba(0,0,0,.18);
    transition: 200ms;
}
.forum-section:hover{
    box-shadow:
        inset 0 4px 16px rgba(0,0,0,.4),
        0 12px 30px rgba(0,0,0,.32);
    transform: scale(1.05);
}

.forum-section-label{
    position: absolute;
    left: 50%;
    bottom: -.65em;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: clamp(1.6rem, 6vw, 4.25rem);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    background: linear-gradient(90deg, #FFD56C -21.74%, #75491A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.forum-row{
    display:grid; gap:16px; align-items:center;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 1rem 0;
    position: relative;
}
.forum-row:first-child{ border-top:0; padding-top:0; }

@media (max-width: 991.98px){
    .forum-row{ grid-template-columns: 1fr; }
}

.forum-row-left .small{
    opacity:.9;
}
.forum-row-mid{
    display:flex;
    align-items:center;
    gap:14px;
    justify-content:center;
    padding: 0 28px;
    position: relative;
}

/* Draw the two vertical lines */
.forum-row-mid::before,
.forum-row-mid::after{
    content:"";
    position:absolute;
    top:50%; transform: translateY(-50%);
    width:1px; height:32px;
    background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.18));
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
    pointer-events:none;
}
.forum-row-mid::before{ left:0; }
.forum-row-mid::after { right:0; }
.forum-count{
    display:flex;
    align-items:center;
    gap:.35rem;
}

.forum-row-mid .divider{ display:none; }

.forum-count .num{
    font-weight:800;
    font-size:1.1rem;
}
.forum-count .lbl{
    opacity:.85;
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.02em;
}
.forum-row-mid .divider{
    width:1px;
    height:22px;
    background: rgba(255,255,255,.35);
}
.forum-row-right .last-user{
    font-size:.95rem;
}
.forum-row-right .last-bio{
    max-width: 360px;
}

@media (max-width: 991.98px){
    .forum-row{
        grid-template-columns: 1fr;
        padding: .85rem .9rem;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        box-shadow: inset 0 2px 10px rgba(0,0,0,.18);
        margin-bottom: 10px;         /* visual separation between rows */
    }
    .forum-row-mid{
        justify-content:flex-start;
        padding: 0;                  /* no side padding in stacked layout */
    }
    /* hide the vertical separators on mobile */
    .forum-row-mid::before,
    .forum-row-mid::after{ display:none; }
    /* optional tiny top accent line for clarity (can remove if you prefer) */
    .forum-row::before{
        content:"";
        position:absolute; left:10px; right:10px; top:0;
        height:1px; border-radius:1px;
        background: rgba(255,255,255,.18);
        pointer-events:none;
    }
}


/* ===== Generic glass wrapper used on this page */
.glass-strong{
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 4px 16px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.18);
}

/* ===== Product image */
.pd-image { overflow: hidden; }
.pd-image img{
    width: 100%;
    height: 21em;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
    border-radius: 22px;
}

/* ===== Right card */
.pd-card{ border-radius: 22px; }
.pd-badge{
    position:absolute; right:12px; top:12px;
    font-size:.75rem; font-weight:700; color:#fff;
    padding:.25rem .6rem; border-radius:9999px;
    background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.12));
    border:1px solid rgba(255,255,255,.45);
}
.pd-icon{
    width:26px; height:26px; border-radius:8px;
    display:grid; place-items:center; font-weight:800;
    color:#3a158c; background:#fff;
}
.pd-kicker{ letter-spacing:.04em; }
.pd-title{ letter-spacing:.02em; }

.pd-price small{ opacity:.9; margin-left:.35rem; }

/* Qty control */
.pd-qty{
    display:inline-flex; align-items:center; border-radius:9999px;
    border:1px solid rgba(255,255,255,.45);
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    height:40px; padding:0 6px;
}
.pd-qty-input{
    width:54px; background:transparent; border:0; color:#fff; text-align:center;
    -moz-appearance: textfield;
}
.pd-qty-input::-webkit-outer-spin-button,
.pd-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-qty-btn{
    width:32px; height:28px; border:0; border-radius:12px; color:#fff;
    background: rgba(255,255,255,.10);
}
.pd-qty-btn:hover{ background: rgba(255,255,255,.18); }

.pd-share{ color:#fff; text-decoration:underline; opacity:.9; }
.pd-share:hover{ opacity:1; }

/* Tabs look like the mock */
.pd-tabs .nav-link{
    color: rgba(255,255,255,.85); background:transparent; border:0;
    font-weight:600; padding:.5rem 1rem; position:relative;
}
.pd-tabs .nav-link.active{ color:#fff; }
.pd-tabs .nav-link.active::after{
    content:""; position:absolute; left:.8rem; right:.8rem; bottom:0;
    height: 2px; background: var(--aura-gold,#FFD56C);
}

/* Comment box */
.pd-comment{
    border-radius: 28px;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 3px 14px rgba(0,0,0,.22);
}

/* ===== Reviews: rating bars (matches Aura glass look) ===== */
.rating-row{
    display:flex; align-items:center; gap:12px; margin-bottom:.75rem;
}
.rating-row .lbl{
    width:170px; min-width:140px; color:#fff; opacity:.9; font-weight:600;
}
.rating-row .bar{
    flex:1 1 auto; height:10px; border-radius:9999px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.22);
    overflow: hidden; display:block;
}
.rating-row .fill{
    display:block; height:100%;
    background: linear-gradient(90deg, #FFD56C, #B88422);
    box-shadow: 0 0 10px rgba(255,213,108,.35);
}

/* Optional: tighten testimonial cards when used here */
.testimonial-card--compact{ padding: 16px 18px; }


/* --- Blogs page canvas --- */
.blogs-wrap{
    min-height: 100dvh;
    color: #fff;
}

/* Bottom butterfly (subtle footer decoration) */
.bottom-butterfly{
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -4vh; width: 70vw; max-width: 1100px; height: 26vw; max-height: 420px;
    background: url("/assets/default/img/butterfly.png") no-repeat center / contain;
    pointer-events: none; z-index: 0; opacity: .28;
}

/* Keep all real content above decorations */
.blogs-wrap .container-xxl{ position: relative; z-index: 1; }



/* Optional: increase spacing above grid on desktop */
@media (min-width: 992px){
    .blogs-wrap .container-xxl{ padding-top: 56px; }
}

/* Make sure your grid cards sit nicely over the decorations */
.blogs-grid > div{ position: relative; z-index: 1; }


/* ===== Certificate Validation Page ===== */
.certificate-validate {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.captcha-box {
    width: 120px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    letter-spacing: 2px;
    user-select: none;
}


/* ===== Blog Detail Page ===== */
.blog-detail{
    min-height: 100vh;
    color: #fff;
}

.blog-detail h2{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: .02em;
}

.blog-detail .text-white-75 i{
    color: rgba(255,255,255,.6);
}

/* Paragraphs inside content */
.blog-detail p{
    color: rgba(255,255,255,.85);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* Rule-style headings inside content (RULE #1, etc.) */
.blog-detail strong{
    color: #FFD56C;
    font-weight: 600;
}

/* Comment box */
.blog-comment{
    border-radius: 22px;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    box-shadow:
        inset 0 4px 16px rgba(0,0,0,.25),
        0 10px 26px rgba(0,0,0,.18);
}

/* ===============================
   ABOUT AURA – grid composition
   =============================== */

.about-aura{
    --ring: clamp(260px, 32vw, 420px);
    --pad: clamp(16px, 2.2vw, 28px);
    --stage: min(1140px, 94vw);
    --copy-w: clamp(280px, 30vw, 420px);
    --text: rgba(255,255,255,.92);
    color: #fff;
}

.about-section{
}

.bubble{
    display: grid;
    place-items: center;
    width: 40em;
    aspect-ratio: 1 / 1;
}

/* ring layer */
.bubble .bubble-ring{
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.28));
}

/* text layer */
.bubble .content{
    grid-area: 1 / 1;
    width: 100%;
    max-width: calc(var(--ring) - var(--pad) * 2);
    padding: 0 var(--pad);
    color: var(--text);
    line-height: 1.68;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    font-size: clamp(.92rem, 1.05vw, 1rem);
}
.bubble .eyebrow{
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    margin-bottom: .35rem;
}

.mid-copy{
    grid-column: 2;
    justify-self: center;
    width: 100%;
    max-width: var(--copy-w);
    color: var(--text);
    line-height: 1.75;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    font-size: clamp(.95rem, 1.05vw, 1rem);
    z-index: 3; /* over right bubble */
    margin-right: 4em;
}
.vision{
    grid-column: 3;
    justify-self: end;
    z-index: 1;
}

.mission{
    margin-top: clamp(6px, 1.5vw, 10px);
    grid-column: 1;
    justify-self: start;
    z-index: 4;
}

.spiral{
    position: absolute;
    top: 20em;
    left: 6em;
    justify-self: center;
    width: 70em;
    transform: rotate(45deg);
    z-index: 2;
    pointer-events: none;

}

@media (max-width: 1275px){
    .spiral{
        width: 70vw;
        top: 40vh;
        left: 10em;

    }
}

@media (max-width: 1200px){
    .spiral{
        width: 70vw;
        top: 45vh;
        left: 10em;

    }
}

@media (max-width: 1050px){
    .spiral{
        width: 70vw;
        top: 50vh;
        left: 10em;

    }
}

@media (max-width: 850px){
    .spiral{
       display: none;

    }
    .about-left-content {
        justify-content: center !important;
    }

    .about-right-content{
        margin-top: 0 !important;
        align-items: center !important;
    }

    .mid-copy {
        margin-right: 0 !important;
        margin-left: 5em !important;
    }
}

/* ------------------------------
   Comment Input (Glass Morphism)
------------------------------ */
.aura-comment-box {
    width: 100%;
    border-radius: 40px;
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px);
    color: #fff;
    font-size: 15px;
    outline: none;
    resize: vertical;
    box-shadow: 0 0 25px rgba(153, 114, 255, 0.25);
    transition: 0.3s ease;
}

.aura-comment-box::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.aura-comment-box:focus {
    border-color: rgba(153, 114, 255, 0.45);
    box-shadow: 0 0 35px rgba(153, 114, 255, 0.45);
}


/* ----------------------------------------
   Comment Card (Glass Panel + Soft Glow)
----------------------------------------- */
.aura-comment-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 35px;
    padding: 25px 30px;
    margin-top: 40px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 0 18px rgba(255, 255, 255, 0.05);
    transition: 0.3s ease-in-out;
}

.aura-comment-card:hover {
    box-shadow:
        0 16px 55px rgba(153, 114, 255, 0.35),
        inset 0 0 22px rgba(255, 255, 255, 0.08);
    border-color: rgba(153, 114, 255, 0.35);
}


.aura-comment-reply {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 25px;
    padding: 20px 25px;
    margin-top: 25px;
    margin-left: 55px;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 8px 25px rgba(153, 114, 255, 0.22),
        inset 0 0 14px rgba(255, 255, 255, 0.04);
    transition: 0.3s ease;
}

.aura-comment-reply:hover {
    border-color: rgba(153, 114, 255, 0.28);
}


.aura-comment-card .text-gray,
.aura-comment-reply .text-gray {
    color: rgba(255, 255, 255, 0.65) !important;
}

.aura-comment-card .text-secondary,
.aura-comment-reply .text-secondary {
    color: #fff !important;
}

.aura-comment-card img,
.aura-comment-reply img {
    border-radius: 12px;
}

.dropdown-menu {
    background: rgba(20, 20, 20, 0.75) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px;
}


.aura-modal {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px);
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}

.aura-share-icon i {
    color: #6b4bff;
    stroke-width: 1.4;
}

.aura-share-link-box {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.45);
}

.aura-share-link-text {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aura-share-copy-btn {
    background: #6b4bff;
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: .2s ease;
}

.aura-share-copy-btn:hover {
    background: #5538e6;
}

.aura-social-icon {
    background: rgba(255, 255, 255, 0.5);
    padding: 18px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: .2s;
}

.aura-social-icon:hover {
    transform: translateY(-3px);
}

.aura-close-btn {
    background: #ff4a4a;
    color: #fff;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 10px;
    transition: .2s;
}

.aura-close-btn:hover {
    background: #d93737;
}

.aura-share-trigger {
    padding: 10px 12px;
    border-radius: 14px;
    transition: 0.25s ease;
}

.aura-share-trigger:hover {
    background: rgba(107, 75, 255, 0.08);
    transform: translateY(-2px);
}

.aura-share-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(107, 75, 255, 0.12);
    border: 1px solid rgba(107, 75, 255, 0.25);
    transition: 0.25s ease;
    backdrop-filter: blur(6px);
}

.aura-share-trigger:hover .aura-share-icon-box {
    background: rgba(107, 75, 255, 0.22);
    border-color: rgba(107, 75, 255, 0.45);
}

.aura-share-title {
    color: #222;
}

.aura-share-subtitle {
    opacity: 0.8;
}

#navbarShopingCart, #navbarNotification {
    display: flex;
    color: #fff;
    border: unset;
}
#navbarShopingCart::after,#navbarNotification::after {
     content: unset;
}
.navbar-nav .dropdown-menu {
    position: absolute;
    top: 0px;
    background: rgb(255 255 255) !important;
}
.custom-dropdown.navbar-auth-user-dropdown .rounded-circle {
    border: 2px solid #ffff;
}
.custom-dropdown.navbar-auth-user-dropdown .rounded-circle {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
    object-fit: contain;
}
#localItems .dropdown-toggle span{
    color: #ffff;
}
#localItems .dropdown-toggle::after {
    color: #fff;
}
.language-select .dropdown-menu {
    background: var(--white) !important;
}
.tab-content.course-tabcontent #about-pane p, 
.tab-content.course-tabcontent #about-pane p span,
.aura-card-header h3,
.aura-section-header h3,
.aura-section-header,
.aura-skills-wrapper,
.aura-skills-wrapper h4,
.aura-skills-list li,
.aura-skills-list font,
.aura-card-list li,
.aura-card-list li font,
.aura-skills-box.aura-evidence-practices {
    color: #fff !important;
    background: transparent !important;
}
.aura-skills-box.aura-evidence-practices{
     margin-top: 12px;
}
.tab-content.course-tabcontent #about-pane p
{
    background-color: transparent !important;
}
.tab-content.course-tabcontent #about-pane .aura-content-section .aura-intro-box {
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    box-shadow: inset 0 4px 16px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .18) !important;
}
.aura-card-header{
     background: transparent !important;
}
.aura-card.aura-card-growth{
    width: 100% !important;
    min-width: unset !important;
}
.aura-closing-message{
    border-left: 4px solid rgb(101 223 213) !important;
    background: transparent !important;
}
.aura-card.aura-card-how-works{
    width: 100% !important;
}
.tab-content.course-tabcontent #about-pane .specialText {
    color: #fff !important;
    font-weight: bold;
}
#about-pane .aura-footer{
    display: none;
}
.aura-header-section {
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    box-shadow: inset 0 4px 16px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .18) !important;
}
/* Course lessons */
#learningPageContent{
background-color: transparent !important;
}
.learning-page .learning-page-content,
.learning-page .learning-content {
    background-color: transparent !important;
}
#learningPageContent p,
#learningPageContent span,
#learningPageContent font,
#learningPageContent li,
#learningPageContent b{
    color: #fff !important;
    background: transparent !important;
}
#learningPageContent
div[style*="linear-gradient(135deg, rgb(212, 164, 72)"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .10) 100%) !important;
}

#learningPageContent div[
    style*="background-image: initial"
][
    style*="background-position: initial"
][
    style*="background-size: initial"
][
    style*="background-repeat: initial"
][
    style*="background-attachment: initial"
][
    style*="background-origin: initial"
][
    style*="background-clip: initial"
][
    style*="margin-bottom: 16px"
][
    style*="padding: 16px"
][
    style*="border: 1px solid rgb(229, 231, 235)"
] {
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    box-shadow: inset 0 4px 16px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .18) !important;
}

div[
    style*="background-image: initial"
][
    style*="background-position: initial"
][
    style*="background-size: initial"
][
    style*="background-repeat: initial"
][
    style*="background-attachment: initial"
][
    style*="background-origin: initial"
][
    style*="background-clip: initial"
][
    style*="display: inline-block"
][
    style*="padding: 6px 12px"
][
    style*="color: rgb(255, 255, 255)"
][
    style*="border-radius: 999px"
][
    style*="font-size: 12px"
][
    style*="font-weight: 600"
][
    style*="letter-spacing: 0.4px"
][
    style*="background-color: rgb(0, 255, 255)"
] {
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    box-shadow: inset 0 4px 16px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .18) !important;
}
.text-lesson-content h4.font-16.font-weight-bold.text-dark{
    display: none;
}
.learning-page .learning-page-navbar .course-progress {
    margin: unset !important;
}
.learning-page-progress-card a.learning-page-navbar-title {
    color: #fff !important;
    text-decoration: unset !important;
}
#content-tab,
#content-tab i,
#content-tab span,
#quizzes-tab,
#quizzes-tab i,
#quizzes-tab span,
#certificates-tab,
#certificates-tab i,
#certificates-tab span
 {
    color: #fff !important;
    text-decoration: unset !important;
}
.learning-page .learning-page-tabs .learning-page-tabs-icons svg {
    fill: #fff;
}
.mainQuizTitle
.activities-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .10) 100%) !important;
}
.mainQuizTitle
.activities-container
.text-secondary {
    --bs-text-opacity: 1;
    color: rgb(255 255 255) !important;
}
.mainQuizTitle
.activities-container
.text-gray {
    color: #ffffff !important;
}
/* 
.quiz-form * {
    font-family: sans-serif !important;
    color: #fff !important;
} */
 .cart-banner {
    background-color: #663399;
}

.unauthContainer a{
    text-decoration: unset;
}

.learning-page .accordion-row{
    background-color: rgb(102 51 153) !important;
}
.learning-page .accordion-row span, .learning-page .accordion-row p, .learning-page .accordion-row label{
    color: #fff !important;
}
.learning-page .accordion-row .chapter-icon {
    background-color: var(--primary) !important;
}
.learning-page .accordion-row .chapter-icon svg {
    color: #FFFFFF !important;
}
.learning-page .learning-page-tabs .certificate-item.active, .learning-page .learning-page-tabs .tab-item.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .10) 100%) !important;
}
.learning-page .accordion-row.border {
    border: var(--bs-border-width) var(--bs-border-style) #d4a448 !important;
}
.learning-page .accordion-row .panel-collapse {
    border-top: 1px solid #d4a448;
}

/* Completed Chapter Styling */
.learning-page .accordion-row.chapter-completed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    position: relative;
}
.learning-page .accordion-row.chapter-completed::after {
    content: "✓";
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.learning-page .accordion-row.chapter-completed::after{
    content: unset; 
}

.rtl .learning-page .accordion-row.chapter-completed::after {
    right: unset;
    left: 45px;
}
.learning-page .accordion-row.chapter-completed .chapter-icon {
    background-color: #fff !important;
}
.learning-page .accordion-row.chapter-completed .chapter-icon svg {
    color: #10b981 !important;
}
.learning-page .accordion-row.chapter-completed.border {
    border-color: #10b981 !important;
}
.learning-page .accordion-row.chapter-completed .panel-collapse {
    border-top-color: rgba(255, 255, 255, 0.3);
}

/* scroll bar start */
/* Beautiful Custom Scrollbar Design for AURA Learning Platform */

/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-radius: 10px;
  margin: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d4a448 0%, #3b82f6 50%, #06b6d4 100%);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d4a448 0%, #2563eb 50%, #0891b2 100%);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #d4a448 0%, #1d4ed8 50%, #0e7490 100%);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #d4a448 rgba(139, 92, 246, 0.1);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Optional: Glowing effect variant */
.scrollbar-glow::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d4a448 0%, #3b82f6 50%, #06b6d4 100%);
  box-shadow: 0 0 8px #d4a448;
}

.scrollbar-glow::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 15px #d4a448, 0 0 25px rgba(59, 130, 246, 0.4);
}

/* Thin scrollbar variant */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* For the learning content area specifically */
.learning-page-content::-webkit-scrollbar {
  width: 10px;
}

.learning-page-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.learning-page-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ec4899 0%, #d4a448 50%, #3b82f6 100%);
  border-radius: 8px;
  border: 2px solid transparent;
}

.learning-page-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #db2777 0%, #d4a448 50%, #2563eb 100%);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.5);
}

/* scroll bar end */

.learning-page .shadow-sm.rounded-lg.bg-white.px-15.px-md-25.py-20.mt-20 {
    box-shadow: rgba(0, 0, 0, 0.28) 0px 4px 16px inset, rgba(0, 0, 0, 0.18) 0px 10px 26px !important;
    border-radius: 20px !important;
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    border-image: initial !important;
    max-width: 89%;
    margin: auto;
}
.learning-page .shadow-sm.rounded-lg.bg-white.px-15.px-md-25.py-20.mt-20
.text-dark-blue{
        color: #fff !important;
}
.learning-page .btn.learning-page-navbar-btn {
    background-color: rgb(212 164 72) !important;
    color: #fff !important;
    border: unset !important;
    padding: 8px !important;
}
.learning-page #collapseBtn {
    color: #ffff !important;
}
.learning-page #quizzes span,.learning-page #quizzes label,
.learning-page #certificates span,.learning-page #certificates label{
   color: #fff !important;
}  
.learning-page #quizzes .chapter-icon, .learning-page #certificates .chapter-icon {
    background-color: var(--primary) !important;
}
.learning-page #quizzes .chapter-icon svg, .learning-page #certificates .chapter-icon svg {
    color: #FFFFFF !important;
}

.learning-page .PassedItemContainer{
    position: relative;
}
/* .learning-page .PassedItemContainer::before {
    content: "✓ PASSED";
    position: absolute;
    right: -8px;
    top: 15px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 6px 16px 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    z-index: 10;
} */
.learning-page .PassedItemContainer::before {
    content: "✓";
    position: absolute;
    right: 15px;
    top: 21px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #d4a448 0%, #d4a448 100%);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.rtl .learning-page .PassedItemContainer::before {
    right: unset;
    left: 15px;
}

.learning-page .LessonTitle {
    max-width: 86%;
}
.learning-page .learning-content-box h4{
    color: #fff !important;
}

.learning-page .learning-content-box a{
    background-color: rgb(212 164 72) !important;
    color: #fff !important;
    border: unset !important;
    padding: 8px !important;
}
.learning-page .learning-content .learning-content-box {
    border: 1px dashed #d4a448;
}
/* .custom-control-input:checked ~ .custom-control-label:before {
    color: var(--primary-btn-color) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary-border) !important;
    box-shadow: none;
} */
 .quiz-card section ,.quiz-card .question-multi-answers .answer-item .answer-label{
    background-color: rgb(102 51 153) !important;
 }
  .quiz-card section p,.quiz-card section span,.quiz-card section li, .quiz-card .question-multi-answers .answer-item .answer-label{
     color: #fff !important;
 }

 
 .question-multi-answers .answer-item input[type="radio"]:checked + .answer-label::before {
    content: "✔";
    color: #fff;
    background: #d4a448 !important;
    border-color: #d4a448 !important;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-form button.previous, .quiz-form button.next, .quiz-form button.finish, .resultSectionContainer .btn.btn-sm.btn-primary{
     background-color: rgb(212 164 72) !important;
    color: #fff !important;
    border: unset !important;
    padding: 8px !important;
    margin-bottom: 35px;
}
.quiz-form button.next:disabled, .quiz-form button.previous:disabled {
    display: none !important;
}

.no-result .section-title, .resultSection h2, .resultSection p{
     color: #fff !important;
}

.aura-navbar { 
    top: 0px;
}
.aura-navbar .navbar-brand img{
    height: 4em !important;
    margin-top: 5px !important;
}

.resultSection{
    margin-top: 96px !important;
}
 
#learningPageContent div[style*="linear-gradient(135deg"] {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 100%
    ) !important;

    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 100%
    ) !important;
}

#learningPageContent h2{
    color: #fff !important;
}
#learningPageContent .text-lesson-content > div:first-of-type {
    /* Your CSS here */
    background: transparent !important;
}
.text-lesson-content div[style*="margin-bottom:16px"][style*="padding:16px"][style*="border:1px solid #e5e7eb"][style*="background:#fbfdff"][style*="border-radius:14px"] {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 100%
    ) !important;

    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 18px !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
}

fieldset .quiz-card .table>:not(caption)>*>* {
    color: white;
    background-color: #ffffff00;
    border-bottom-width: var(--bs-border-width);
    box-shadow: unset;
}
fieldset .quiz-card .table thead tr {
    border-top: 1px solid #fff;
}

fieldset .quiz-card section p span{
    background-color: transparent !important;
}
.circle-option.selected {
    border-color: #d4a448 !important;
    background-color: #d4a448 !important;
    font-weight: bold !important;
}
.blank-input {
    border-bottom: 2px dashed #ffffff !important;
    color: #fff !important;
}
.blank-input:focus {
    border-bottom-color: #d4a448 !important;
}

.user-profile-info{
    box-shadow: rgba(0, 0, 0, 0.28) 0px 4px 16px inset, rgba(0, 0, 0, 0.18) 0px 10px 26px !important;
    border-radius: 20px !important;
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    border-image: initial !important;
    max-width: 89%;
    margin: auto;
}
.user-profile-info p, .user-profile-info span, .user-profile-info h1, .userProfileTabsContainer .font-16.text-dark-blue.font-weight-bold{
    color: #fff !important;
}
.userProfileContainer {
    max-height: 19rem;
}
.OnlyForMobile{
        display: none;
}
@media (max-width:700px) {
    .userProfileContainer {
        max-height: 43rem;
    } 
    .OnlyForDesktop{
        display: none !important;
    }
    .OnlyForMobile{
        display: block;
    }
    .navbar-auth-user-dropdown.useForMobile .custom-dropdown-body { 
        right: auto;
    }
} 
#followToggle{
    background-color: rgb(212 164 72) !important;
    color: #fff !important;
    border: unset !important;
    padding: 8px !important;
}
.userProfileTabsContainer #tabs-tab li.nav-item a{
    color: #fff !important;
    text-decoration: unset !important;
}
.userProfileTabsContainer{
    margin-bottom: 30px;
}
 .zindex1{
    z-index: 3;
 }
 .zindex2{
     z-index: 4;
 }
.quiz-form * {
    color: #fff !important;
}
.mainSectionBanner{
    background-position: center;
}
.mainSectionBanner::before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(102, 51, 153, 0.6),
        rgba(102, 51, 153, 1)
    );
}

.mainSectionBanner::after {
    content: '';
    position: absolute;
    left: unset;
    right: 0px;
    bottom: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(102, 51, 153, 0.6),
        rgba(102, 51, 153, 1)
    );
}

.rtl .mainSectionBanner::after {
    left: 0px;
    right: unset;
}

.product-card {
    min-height: 407px;
}

.product-card .bg-img::before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(102, 51, 153, 0.1),
        rgba(102, 51, 153, 1)
    );
}
.product-card .bg-img {
    opacity: 1;
}

.aura-page {
       background: -webkit-linear-gradient(280deg, rgb(102, 51, 153) 45%, rgb(102 51 153) 70%, rgb(102, 51, 153) 90%) 0% 0% / 100% 100% no-repeat;
}

.CourseMainContainer{
    width: 87%;
}

.course-figure {
    right: 16%;
    bottom: 0;
}
.course-figure-right {
    right: -3% !important;
}

.mainSectionBanner {
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 736px;
}
.mainSectionBanner::before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    height: 57%;
    background: linear-gradient(to bottom, 
        rgba(102, 51, 153, 0.1),
        rgba(102, 51, 153, 1)
    );
}
.navbar.aura-navbar::before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(102, 51, 153, 0.6),
        rgba(102, 51, 153, 1)
    );
}

.aura-stat {
    background: linear-gradient(180deg, rgb(102 51 152), rgba(255, 255, 255, .02));
}

[aria-labelledby="navbarShopingCart"].dropdown-menu.show {
    background: #fff !important;
    padding: 10px 10px;
    width: 300px;
}
[aria-labelledby="navbarShopingCart"].dropdown-menu.show a, .CartItemsContainer a {
    text-decoration: unset;
}
.navbar-shopping-cart .navbar-cart-box .navbar-cart-img {
    width: 41px;
    min-width: 41px;
    height: auto;
    min-height: auto;
}
[aria-labelledby="navbarShopingCart"].dropdown-menu a.btn
,.CartItemsContainer .btn,
.CartAllSectionsContainer .btn,
.CheckoutMainContainer .btn{
    background-color: rgb(212 164 72) !important;
    color: #fff !important;
    border: unset !important;
    padding: 8px !important;
}
[aria-labelledby="navbarShopingCart"].dropdown-menu
.price span{
    color: #000 !important;
}
.navbar-shopping-cart .navbar-cart-total strong {
   color: #000 !important;
}
.cart-banner {
    padding-bottom: 19px;
}
.CartItemsContainer .section-title, .CartItemsContainer .text-gray.font-weight-500{
     color: #fff !important;
}
.CartItemsContainer .webinar-card {
    box-shadow: unset;
    background-color: #663399;
}
.CartItemsContainer .webinar-card.webinar-list-cart .image-box {
    height: 150px;
    width: unset;
}
.CartItemsContainer .webinar-card.webinar-list-cart .image-box img {
    border-radius: 5px;
    width: auto;
}
.CartItemsContainer .text-primary,.CartItemsContainer .text-dark-blue,.CartItemsContainer .text-gray {
     color: #fff !important;
}
.cartForm label,.cartForm h3{
     color: #fff !important;
}
.CartAllSectionsContainer .text-dark-blue,
.CartAllSectionsContainer p,
.CartAllSectionsContainer h4,
.CartAllSectionsContainer h3,
.CartAllSectionsContainer label,
.CartAllSectionsContainer .text-gray{
    color: #fff !important;
} 
.CartAllSectionsContainer, .CheckoutMainContainer {
    margin-bottom: 41px;
}
.offcanvas.aura-menu{
    background: radial-gradient(77.04% 119.34% at 85% -15%, rgb(30, 5, 61) 0%, rgb(47 16 83) 29.33%, rgb(102, 51, 153) 62.98%, rgb(30, 5, 61) 97.6%);
}

.CheckoutMainContainer .text-dark-blue,
.CheckoutMainContainer p,
.CheckoutMainContainer h4,
.CheckoutMainContainer h3,
.CheckoutMainContainer h2,
.CheckoutMainContainer label,
.CheckoutMainContainer .text-gray{
    color: #fff !important;
} 
.ProductDetailsContainer .text-dark-blue,
.ProductDetailsContainer p,
.ProductDetailsContainer h4,
.ProductDetailsContainer h3,
.ProductDetailsContainer h2,
.ProductDetailsContainer label,
.ProductDetailsContainer .text-gray{
    color: #fff !important;
} 

.aura-gold.display-5 {
    font-size: 2.3rem;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #e0a565  0%, #e0a565 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.course-copy {
    max-width: clamp(280px, 40vw, 445px);
    /* box-shadow: inset 0 2px 10px rgba(255, 255, 255, .25), 0 6px 20px rgba(255, 255, 255, .15);
    background: linear-gradient(180deg, rgb(102 51 152 / 60%), rgba(255, 255, 255, .02)); */
}
.course-figure-right {
        height: auto;
    }
 
    
.bubble-ring2 {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.28));
    position: absolute;
    left: -120px;
    top: -159px;
    width: 658px;
    height: auto;
    transform: rotate(131deg);
    z-index: -3;
}
.bodytxt {
    box-shadow: inset 0 2px 10px rgb(255 255 255 / 56%), 0 6px 20px rgba(255, 255, 255, .15);
    background: linear-gradient(180deg, rgb(102 51 153), rgb(102 51 153));
    padding: 10px;
    margin-top: 16px;
    border-radius: 15px;
    color: #d6c8be !important;
    font-weight: 500 !important; 
}

.course-price {
    margin-top: unset;
}
.course-title {
    color: #d6c8be !important;
}
.course-price {
    margin-top: unset;
      color: #d6c8be !important;
}
.salePrice {
    color: #d6c8be !important;
    text-decoration: line-through;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-decoration-color: #d8cfbe;
    text-decoration-thickness: 2px;
}
.salePriceArrow {
    font-size: 26px !important;
}
.course-figure-right {
    max-width: 541px;
    right: 1% !important;
}

.bubble-ring3 {
    grid-area: unset;
    width: 100%;
    height: 100%;
    object-fit: unset;
    filter: url();
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: unset;
    transform: unset;
    right: 0px;
    bottom: 0px;
    margin: auto;
}
.aura-stat {
    position: relative;
}
.aura-stat-title {
    text-align: center;
}
.bubble-ring4 {
    width: 100px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.aura-stat {
    background: unset;
    box-shadow: unset;
}

.aura-stat .sec2{
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: inset 0 2px 10px rgba(255, 255, 255, .25), 0 6px 20px rgba(255, 255, 255, .15);
    padding: 31px;
    width: fit-content;
    margin: auto;
    border-radius: 100%;
}

.cursorPointer{
    cursor: pointer;
}
.mainBannerSubtitle {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(rgb(224, 165, 101) 0%, rgb(224, 165, 101) 100%) text;
    padding-top: 2rem;
}
.MainMoonSection {
    position: relative;
    /* margin-top: -25rem;
    left: 0px;
    right: 0px; */
}

.mainBannerSubtitle {
    font-weight: 700;
    color: rgb(224, 165, 101);
    -webkit-text-fill-color: unset;
    /* background: linear-gradient(rgb(102, 51, 153), rgb(102, 51, 153)); */
    background: transparent;
    margin: 0px;
    padding: unset;
    margin-top: 3rem;
}
.mainSectionBanner .display-5.fw-bold.aura-gold.mb-3{
    padding-left: 16px;
     min-height: 8rem;
}
.aura-gold.display-5 {
    font-size: 1.8rem;
} 

/* ========================================
   AURA PRODUCTS SECTION - MOON DESIGN (FIXED)
   ======================================== */

.aura-products-section {
    background: transparent;
    position: relative;
}

.aura-products-heading {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Grid Layout - Responsive */
.aura-products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    padding: 1rem 0;
}

/* Tablet */
@media (max-width: 1200px) {
    .aura-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .aura-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .aura-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .aura-products-heading {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .aura-products-grid {
        gap: 0.75rem;
    }
}

/* Product Item */
.aura-product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================================
   MOON CARD STRUCTURE - FIXED
   ======================================== */

.aura-product-moon-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%; /* Ensure consistent width */
}

.aura-product-moon-card:hover {
    transform: translateY(-8px);
}

/* Moon Wrapper - FIXED: Maintains exact 1:1 aspect ratio */
.aura-product-moon-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Modern approach */
    padding-bottom: unset !important; /* Fallback for older browsers */
    margin-bottom: 1rem;
}

/* Support for browsers that understand aspect-ratio */
@supports (aspect-ratio: 1 / 1) {
    .aura-product-moon-wrapper {
        padding-bottom: 0;
    }
}

/* ========================================
   GOLD RING FRAME - FIXED: OUTSIDE THE IMAGE
   ======================================== */

.aura-product-moon-ring {
    position: absolute;
    top: -66px;
    bottom: 0px;
    left: -65px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    animation: auraProductRingPulse 3s ease-in-out infinite;
    margin: auto;
}
.aura-product-ring-img {
    width: 129%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}

@keyframes auraProductRingPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
    }
    50% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.6));
    }
}

.aura-product-moon-card:hover .aura-product-moon-ring {
    animation: auraProductRingGlow 1.5s ease-in-out infinite;
}

@keyframes auraProductRingGlow {
    0%, 100% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.5));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 35px rgba(212, 175, 55, 0.8));
    }
}

/* ========================================
   CIRCULAR CONTENT AREA - FIXED SIZE
   ======================================== */

.aura-product-moon-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%; /* FIXED: Smaller to accommodate ring around it */
    height: 75%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 
        inset 0 0 30px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Background Image - FIXED: Always covers and centers */
.aura-product-moon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* CRITICAL: Always cover entire circle */
    background-position: center center; /* CRITICAL: Always center */
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
}

.aura-product-moon-card:hover .aura-product-moon-bg {
    transform: scale(1.15);
}

/* Placeholder for products without images */
.aura-product-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Overlay */
.aura-product-moon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.3) 0%,
        rgba(118, 75, 162, 0.4) 100%
    );
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.aura-product-moon-card:hover .aura-product-moon-overlay {
    opacity: 0.7;
}

/* ========================================
   PRODUCT INFORMATION - FIXED HEIGHT
   ======================================== */

.aura-product-info {
    text-align: center;
    padding: 0 0.5rem;
    min-height: 80px; /* FIXED: Consistent height for all cards */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.aura-product-title {
    font-size: 1rem;
    font-weight: 600;
    color: #d4af37;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    height: 2.6em; /* FIXED: Exact 2-line height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aura-product-rating {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    color: #d4af37;
    font-size: 0.875rem;
    height: 1.2em; /* FIXED: Consistent star height */
}

.aura-product-rating i {
    transition: transform 0.2s ease;
}

.aura-product-moon-card:hover .aura-product-rating i {
    transform: scale(1.1);
}

.aura-product-rating .bi-star-fill {
    color: #d4af37;
}

.aura-product-rating .bi-star {
    color: rgba(212, 175, 55, 0.3);
}

/* ========================================
   VIEW MORE CARD
   ======================================== */

.aura-product-moon-card.view-more-card {
    cursor: pointer;
}

.aura-product-viewmore-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4; /* Above ring */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: gap 0.3s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.aura-product-moon-card.view-more-card:hover .aura-product-viewmore-text {
    gap: 1.25rem;
}

.aura-product-viewmore-text i {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.aura-product-moon-card.view-more-card:hover .aura-product-viewmore-text i {
    transform: translateX(5px);
}

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

@media (max-width: 992px) {
    .aura-product-title {
        font-size: 0.95rem;
    }
    
    .aura-product-rating {
        font-size: 0.8rem;
    }
    
    .aura-product-viewmore-text {
        font-size: 1.1rem;
    }
    
    .aura-product-info {
        min-height: 75px;
    }
}

@media (max-width: 768px) {
    .aura-product-moon-wrapper {
        margin-bottom: 0.75rem;
    }
    
    .aura-product-title {
        font-size: 0.875rem;
        height: 2.4em;
    }
    
    .aura-product-rating {
        font-size: 0.75rem;
        gap: 0.2rem;
    }
    
    .aura-product-viewmore-text {
        font-size: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .aura-product-viewmore-text i {
        font-size: 1.25rem;
    }
    
    .aura-product-info {
        min-height: 70px;
    }
}

@media (max-width: 480px) {
    .aura-product-title {
        font-size: 0.8rem;
    }
    
    .aura-product-rating {
        font-size: 0.7rem;
    }
    
    .aura-product-viewmore-text {
        font-size: 0.875rem;
    }
    
    .aura-product-moon-content {
        width: 77%; /* Slightly larger on mobile */
        height: 77%;
    }
    
    .aura-product-info {
        min-height: 65px;
    }
}

/* ========================================
   ACCESSIBILITY & INTERACTIONS
   ======================================== */

.aura-product-moon-card:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 4px;
    border-radius: 4px;
}

.aura-product-moon-card:active {
    transform: translateY(-4px) scale(0.98);
}

/* Loading State */
.aura-product-moon-bg.loading {
    background: linear-gradient(
        90deg,
        rgba(102, 126, 234, 0.3) 0%,
        rgba(118, 75, 162, 0.5) 50%,
        rgba(102, 126, 234, 0.3) 100%
    );
    background-size: 200% 100%;
    animation: auraProductLoadingShimmer 1.5s ease-in-out infinite;
}

@keyframes auraProductLoadingShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ========================================
   RTL SUPPORT
   ======================================== */

.rtl .aura-product-viewmore-text i {
    transform: rotate(180deg);
}

.rtl .aura-product-moon-card.view-more-card:hover .aura-product-viewmore-text i {
    transform: rotate(180deg) translateX(5px);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .aura-product-moon-ring {
        animation: none;
    }
    
    .aura-product-moon-card {
        page-break-inside: avoid;
    }
}

/* ========================================
   CRITICAL FIX: Ensure all items same size
   ======================================== */

/* Force consistent sizing across all grid items */
.aura-product-item {
    width: 100%;
    max-width: 100%;
}

.aura-product-moon-card {
    max-width: 100%;
}

/* Ensure aspect ratio is maintained even with varying content */
.aura-product-moon-wrapper::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

/* For browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .aura-product-moon-wrapper {
        height: 0;
        overflow: hidden;
    }
}

.mainBannerSubtitle {
    color: #d4af37;
    font-weight: 600;
    font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    line-height: 1.3;
}
.winpoints-section, .blog-title, .blog-excerpt,.blog-meta, .t-card,.t-quote{
    color: rgb(214, 200, 190) !important;
}


/* new update */
/* .MainMoonSection {
    position: relative;
    margin-top: -3rem;
    left: 0px;
    right: 0px;
} */

.mainSectionBanner::before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, 
        rgba(102, 51, 153, 0),
        rgba(102, 51, 153, 1)
    );
}
/* .mainSectionBanner::after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(102, 51, 153, 0.6),
        rgba(102, 51, 153, 1)
    );
} */

.bodytxt {
    /* box-shadow: inset 0 2px 10px rgb(255 255 255 / 56%), 0 6px 20px rgba(255, 255, 255, .15);
    background: #efece9 !important;
    padding: 10px;
    margin-top: 16px; */
    /* border-radius: 15px; */
    
}
.bodytxt {
    color: #663399 !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    /* background-image: url('/assets/default/img/coursetxt.png'); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2.5rem !important;
    box-shadow: unset;
    background: unset;
    /* margin: unset; */
}
.mainBannerSubtitle{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 14%;
    left: -81px;
    right: 0px;
    margin: auto;
    width: 49%; 
}
.course-copy {
    max-width: clamp(280px, 40vw, 509px);
}
.coursetxt {
    height: 148px;
    position: absolute;
    z-index: -1;
    max-width: 402px;
}



.mainSectionBanner .display-5.fw-bold.aura-gold.mb-3 {
    padding-left: unset;
    height: 100%;
    margin: unset !important;
    vertical-align: middle;
    margin-top: 49% !important;
    font-size: 22px; 
}

.heroBG{
    text-align: left;
}
.rtl .heroBG{
    text-align: right;
} 

.rtl
.mainSectionBanner {
    background-position: center left;
}

.course-copy.bundle
.coursetxt {
    max-width: 442px;
    height: 208px;
}

.aura-page {
    min-height: 100dvh;
    background: hsla(270, 50%, 40%, 1);
    background: linear-gradient(280deg, hsla(270, 50%, 40%, 1) 45%, hsla(174, 72%, 56%, 1) 70%, hsla(270, 50%, 40%, 1) 90%);
    background: -moz-linear-gradient(280deg, hsla(270, 50%, 40%, 1) 45%, hsla(174, 72%, 56%, 1) 70%, hsla(270, 50%, 40%, 1) 90%);
    background: -webkit-linear-gradient(280deg, hsla(270, 50%, 40%, 1) 45%, hsla(174, 72%, 56%, 1) 70%, hsla(270, 50%, 40%, 1) 90%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--aura-white);
}
.aura-menu-moon-decoration {
    top: -23px;
    left: 59px;
    right: unset;
}
.offcanvas.aura-menu {
    --bs-offcanvas-width: 100vw;
    height: 100vh;
    border-left: none;
    background: radial-gradient(77.04% 119.34% at 85% -15%, #1E053D 0%, #40E0D0 29.33%, #639 62.98%, #1E053D 97.6%) !important;
    color: var(--aura-white) !important;
}

.BlogSection .section-title{
    letter-spacing: 1px;
    background: linear-gradient(180deg, #FFD56C 0%, #75491A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
}
.BlogSection .section-hint {
   color: #d6c8be !important;
}
.BlogSection a.btn.btn-border-white{
    color: #d6c8be;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px 0px;
    background-color: var(--primary);
    border-radius: 20px;
}
.BlogSection a{
   text-decoration: unset;
}
.blog-grid-card {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 12px 0px;
    background-color: transparent;
    border-radius: 15px;
    transition: 0.5s;  
}

.blog-grid-card .blog-grid-detail .blog-grid-title,
.blog-grid-card .blog-grid-detail .blog-grid-desc,
.blog-grid-card .blog-grid-detail .blog-grid-footer {
   color: #d6c8be;
}
.forum-copy a.btn.aura-btn.bg-white{
    background: linear-gradient(136deg, rgba(68, 9, 133, 0.03) 0%, rgba(100, 2, 102, 0.1) 100%);
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%)!important;
    border: unset;
    color: #d6c8be !important;
}

.rtl .mainBannerSubtitle {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: -158px; 
    margin: auto;
    width: 100%;
    z-index: -1;
    transform: scaleX(-1);
    text-align: right;
    right: 57px;
    left: 0;
}

.rtl .course-figure-right {
    max-width: 541px;
    right: unset !important;
    left: 1% !important;
}

.aura-gold {
    letter-spacing: 1px;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%) text;
}

.rtl 
.mainSectionBanner .display-5.fw-bold.aura-gold.mb-3 {
    margin-top: 62% !important;
    line-height: 37px;
    padding-right: 47px;
}


.light-animate-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}
.animated-image-container {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.light-animate-card .animated-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
} 

.light-animate-card:hover .animated-image{
    transform: scale(1.1);
} 

  @keyframes pulse-text {
        0%, 100% { transform: scale(0.9); }
        50% { transform: scale(1.05); }
    }

.heroBG .textContainer{
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    animation: pulse-text 3s ease-in-out infinite;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.mainBannerContainerSubtitle .lead {
    font-size: 17px;
    color: rgb(102, 51, 153) !important;
}

.MainMoonSection{
    direction: ltr !important;
}

@media (max-width: 767px) {
    .mainSectionBanner {
        min-height: 402px;
    }
    .heroBG  {
        top: -15rem !important;
        left: -12rem !important;
        scale: 0.3;
    }
    .MainMoonSection .container-xxl.position-relative.z-1.py-5 {
        padding-top: 0px !important;
    }

    .CourseMainContainer {
        width: 100%;
    }
    .course-card-inner {
        min-height: 721px;
    }
    .course-figure-right {
        max-width: 94%;
    }
    .bodytxt {
        line-height: 16px !important;
        padding: 1.5rem !important;
    }
}

.MainAssesmentContainer .learning-content-box-icon{
    position: relative;
    /* width: 100%; */
    /* height: 100%; */
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(212, 175, 55, 0.3);
    box-shadow: unset;
}
.MainAssesmentContainer .learning-content-box-icon img {
    width: 200px;
    height: 200px;
    object-position: center 63%;
    object-fit: cover;
}

.mainQuizTopIcons{
    position: relative;
    /* width: 100%; */
    /* height: 100%; */
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(212, 175, 55, 0.3);
    box-shadow: unset;
}

.mainQuizTopIcons img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mainQuizTopIcons2{
    position: relative;
    /* width: 100%; */
    /* height: 100%; */
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(212, 175, 55, 0.3);
    box-shadow: unset;
}

.mainQuizTopIcons2 img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
button.js-cant-start-quiz-toast{
    background-color: rgb(212, 164, 72) !important;
    color: rgb(255, 255, 255) !important;
    border: unset !important;
    padding: 8px !important;    
}
.quiz-card textarea.form-control{
    background-color: #ffffff12;
}
.MainAssesmentContainer button{
    background-color: rgb(212, 164, 72) !important;
    color: rgb(255, 255, 255) !important;
    border: unset !important;
    padding: 8px !important;    
}
.aura-acc-count {
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%);
    border: unset;
}
 
.aura-module-icon{
    color: #fff;
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%);
    border: unset;
}
.course-description { 
    position: relative;
}

.aura-module-cta a {
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%);
    color: rgb(255, 255, 255) !important;
    border: unset !important;
}
.message-icon {
  background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%) !important;
}
.blog-grid-card .blog-grid-image .created-at{
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%) !important;
}

.highlight-card{
    position: relative;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1)) !important;
    backdrop-filter: blur(20px) !important;
    border: 3px solid rgba(212, 175, 55, 0.5) !important;
    box-shadow: 0 15px 50px rgba(212, 175, 55, 0.3),
            inset 0 0 30px rgba(212, 175, 55, 0.1) !important; 
}
 .final-message {
    position: relative;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1)) !important;
    backdrop-filter: blur(20px) !important;
    border: 3px solid rgba(212, 175, 55, 0.5) !important;
    box-shadow: 0 15px 50px rgba(212, 175, 55, 0.3),
            inset 0 0 30px rgba(212, 175, 55, 0.1) !important; 
} 

.important-box {
    background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(255,107,107,0.1)) !important;
    border: 2px solid rgb(183 143 71) !important;
    border-left: 5px solid rgb(196 153 73) !important;
    background: #f6d18e4a !important;
}
.important-title { 
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%) text !important;
}

.adults-quote-box {
    border: 2px solid rgb(202 164 79) !important;
    border-right: 5px solid rgb(222 190 122) !important;
}
.adults-section-heading { 
    -webkit-text-fill-color: transparent;
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%) text;
}

.adults-tool-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
}

@media (max-width: 767px) {
    .mainSectionBanner::after {
        content: unset;
    }
    .mainSectionBanner {
        min-height: 340px;
    }
   .course-rail { 
     display: none !important;
    }
    .coursetxt { 
        max-width: 100%; 
    }
   .rtl .course-figure-right {
        max-width: 93%;
        right: 0 !important;
        left: 0 !important;
        bottom: 0px;
        margin: auto;
    }
    .course-card-inner {
        min-height: 616px;
    }
    .bundleContainer .course-card-inner 
    {
        min-height: 711px;
    }
    .course-copy {
        max-width: clamp(353px, 40vw, 509px);
    }
    .course-copy.bundle
    .coursetxt {
        max-width: 329px;
    }
    .coursetxt {
        max-width: 91%;
    }
    .aura-menu .menu-link {
        font-size: 1.2rem;
        line-height: 1;
    }
    .navbar-auth-user-dropdown.useForMobile .custom-dropdown-body {
        right: 0px;
        left: 0px;
        margin: auto;
    }
    .learning-page .learning-page-tabs {
        background: #663399 !important;
    }
}


.row.login-container form button.btn.btn-primary.btn-block.mt-20{
    background: linear-gradient(rgb(255, 213, 108) 0%, rgb(117, 73, 26) 100%);
    border: unset;
    box-shadow: unset
}
.row.login-container .text-secondary a, .row.login-container .input-label{
    color: #fff;
}

.custom-dropdown .custom-dropdown-body {
    background: #663399;
    box-shadow: 0 4px 20px rgb(202 158 112);
}
.navbar-auth-user-dropdown .navbar-auth-user-dropdown-item span {
    color: #fff; 
}
.navbar-auth-user-dropdown .navbar-auth-user-dropdown-item a {
    text-decoration: none; 
}
.navbar-auth-user-dropdown .text-secondary ,.navbar-auth-user-dropdown .font-12 {
    color: #fff !important;
}
.navbar-auth-user-dropdown .navbar-auth-user-dropdown-item:hover {
    background-color: #f9f9f9;
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.6); 
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
}



.pd-image {
    overflow: unset;
    height: unset;
}
.pd-image img {
    object-fit: unset;
    width: 100% !important;
    height: auto;
}