/* ===========================
   RESET
=========================== */

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Poppins", sans-serif;

}

:root{

    --sidebar-width:270px;
    --sidebar-collapse-width:90px;

    --header-height:60px;

    --content-padding:40px;

    --dashboard-max-width:1500px;
    --content-top-space:120px;

}

.sidebar.collapsed{
    width:var(--sidebar-collapse-width);
}
body{

    background: #f5f7fb;
    overflow: scroll;

}

html {

    scrollbar-gutter: stable;
}

/* ===========================
   MAIN CONTAINER
=========================== */

.container{
    display:flex;
    min-height:100vh;
    width:100%;
}

.sidebar {
    top: 0;
    position: fixed;
    left: 0;
    width:var(--sidebar-width);
    min-height: 100vh;
    background: white;
    border-right: 1px solid #e8e8e8;
    padding: 25px;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 2px;

    margin-bottom: 25px;
    margin-top: -8px;
}

.sidebar-logo img {
    width: 60px;
    margin-top: -8px;
}

.sidebar-logo h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: -2px;
}

.sidebar-logo p {
    color: #777;
    font-size: 12px;
     margin-bottom: -2px;
    
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;   /* आइकनों के बीच दूरी */
    flex: 1;
}

.sidebar-menu a {

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 12px 16px;

    color: #111111;

    text-decoration: none;

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

    border-radius: 12px;
}



.sidebar-menu a i {

    width: 28px;

    text-align: center;

    color: #000000;

    font-size: 16px;

    flex-shrink: 0;
}

.sidebar-menu a:hover {
    background: #f4f2ff;
}

.sidebar-menu .active {

    background: #f4f2ff;

    color: #6c63ff ;
}

.sidebar-menu .active i {

    color: #6c63ff;
}



/* ===== Sidebar Version ===== */

.sidebar-version{

    margin-top:auto;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:12px;

    padding:12px 16px;

    border-top:1px solid #e8e8e8;

    border-bottom:1px solid #e8e8e8;

    transition:.35s ease;

    cursor:pointer;

    transform:translateY(-2px);

}

.version-left{

    display:flex;

    align-items:center;

    gap:14px;

    color:#8b8b8b;

    font-size:15px;

    font-weight:550;

    transition:.35s ease;

}



.version-left i{

    width:28px;

    text-align:center;

    transition:.35s ease;

}

.version-badge{

    background:#f4f2ff;

    color:#6c63ff;

    font-size:11px;

    font-weight:700;

    padding:4px 10px;

    border-radius:30px;

    opacity:0;

    transform:translateX(8px);

    transition:.35s ease;

}

.sidebar-version:hover{

    background:#faf9ff;

}

.sidebar-version:hover .version-left{

    color:#6c63ff;

}

.sidebar-version:hover .version-left i{

    transform:rotate(-12deg) scale(1.15);

    color:#6c63ff;

}

.sidebar-version:hover .version-badge{

    opacity:1;

    transform:translateX(0);

}

.sidebar-version{
    margin-top:auto;
    padding:12px 16px;
    transform: translateY(-2px);
}
/* ===========================
   MAIN CONTENT
=========================== */

.main-content{

    flex:1;

   margin-left:var(--sidebar-width);
   width:calc(100% - var(--sidebar-width));
   padding:var(--content-padding);
  
   margin-right: auto;
   max-width:var(--dashboard-max-width);

   margin-top:120px;

   transition:all .35s ease;

   box-sizing:border-box;
   margin-top:var(--content-top-space);
}

/* ===========================
         TOP HEADER
=========================== */

.top-header{

    position:fixed;

    top:0;

    left:var(--sidebar-width);
    width:calc(100% - var(--sidebar-width));
    height:var(--header-height);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    background:#ffffff;

    border-bottom:1px solid #ececec;

    transition:all .35s ease;

    z-index:9999;

    box-sizing: border-box;

}

.header-left{

    display:flex;

    align-items:center;

    gap:18px;

}

/* ===========================
         MENU BUTTON
=========================== */

.menu-btn{

    width:18px;

    height:14px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border:none;

    background:transparent;

    cursor:pointer;

}

.menu-btn span{

    height:2px;

    border-radius:20px;

    background:#666;

    transition:.3s ease;

}

.menu-btn span:nth-child(1){

    width:20px;

}

.menu-btn span:nth-child(2){

    width:14px;

}

.menu-btn span:nth-child(3){

    width:8px;

}

.menu-btn:hover span{

    background:#6c63ff;

}

.menu-btn:hover span:nth-child(2){

    width:20px;

}

.menu-btn:hover span:nth-child(3){

    width:20px;

}

/* ===========================
         SEARCH BOX
=========================== */

.search-box{

    width:500px;

    height:42px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 16px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:14px;

    box-shadow:0 2px 8px rgba(0,0,0,.04);

    transition:all .3s ease;

}

.search-box:hover{

    border-color:#d4d4d8;

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

}

.search-box:focus-within{

    border-color:#6c63ff;

    box-shadow:0 0 0 4px rgba(108,99,255,.12);

}

.search-box i{

    font-size:15px;

    color:#8b8b8b;

    transition:.3s ease;

}

.search-box:focus-within i{

    color:#6c63ff;

}

.search-box input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

    color:#222;

}

.search-box input::placeholder{

    color:#9ca3af;

}

/* ===========================
      HEADER RIGHT
=========================== */

.header-right{

    display:flex;

    align-items:center;

    gap:14px;

}

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

.icon-btn{

    position:relative;

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:14px;

    background:#ffffff;

    color:#555;

    font-size:17px;

    cursor:pointer;

    overflow:hidden;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    transition:all .35s ease;

}

.icon-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:14px;

    background:linear-gradient(135deg,#6c63ff,#8f88ff);

    opacity:0;

    transform:scale(.75);

    transition:.35s ease;

}

.icon-btn i{

    position:relative;

    z-index:2;

    transition:.35s ease;

}

.icon-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(108,99,255,.18);

}

.icon-btn:hover::before{

    opacity:.12;

    transform:scale(1);

}

.icon-btn:hover i{

    color:#6c63ff;

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

}

/* ===========================
      PROFILE
=========================== */

.profile-img{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

    margin-left:6px;

    cursor:pointer;

    border:2px solid transparent;

    transition:all .35s ease;

}

.profile-img:hover{

    transform:translateY(-3px) scale(1.08);

    border-color:#6c63ff;

    box-shadow:0 10px 24px rgba(108,99,255,.18);

}



/* ===========================
   CONNECT HUB
=========================== */

.share-container {

    padding: 0;

    margin-left: px;

    margin-top: 0;
}

.share-toggle {

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 16px;

    color: #111111;

    text-decoration: none;

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

    border-radius: 12px;

    margin-left: 15px;
}

.share-toggle:hover {

    background: #f4f2ff;
}

.share-toggle .fa-share-nodes {

    font-size: 16px;

    width: 22px;

    margin-left: -8px;
}

.share-toggle span {

    font-size: 15px;

    font-weight: 550;

    margin-left: 5px;
}

.share-toggle .fa-chevron-down {

    margin-left: auto;
}

.share-section {

    display: none;

    width: 100%;

    overflow: hidden;

    margin-top: 15px;
}

.share-links a:hover i {

    transform: translateY(-3px);
}

.share-links a i {

    width: 30px;

    height: 30px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: white;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

    transition: 0.3s;
}

.fa-youtube {

    background: #ff0000;
}

.fa-instagram {

    background: linear-gradient(
        45deg,
        #f9ce34,
        #ee2a7b,
        #6228d7
    );
}

.fa-facebook-f {

    background: #1877f2;
}

.fa-telegram {

    background: #229ED9;
}

.fa-x-twitter {

    background: #000;

    color: #fff;

    font-size: 18px;

    border-radius: 12px;
}

.fa-linkedin-in {

    background: #0A66C2;
}

.share-links a:last-child {

    margin-bottom: 0;
}
/* ===========================
   DASHBOARD
=========================== */

.dashboard-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:60px;

    margin-top:-10px;

    margin-bottom:28px;

}

.welcome-section{

    flex:1;

    min-width:320px;

}

.date-time-wrapper{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:18px;

    flex-shrink:0;

}

/* ===========================
        WELCOME SECTION
=========================== */

.welcome-section{

    display:flex;

    flex-direction:column;

    gap:8px;

    animation:welcomeFade .8s ease;

}

.welcome-section h1{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:-26px;

    margin-bottom:0;

    font-size:28px;

    font-weight:700;

    color:#111827;

    letter-spacing:-0.5px;

    line-height:1.3;

    white-space: nowrap;

}

.welcome-section h1:hover{

    color:#6c63ff;

    transition:.35s ease;

}

.welcome-section p{

    margin:0;

    font-size:14px;

    color:#6b7280;

    line-height:1.7;

    max-width:520px;

}

/* Smooth Page Entry */

@keyframes welcomeFade{

    from{

        opacity:0;

        transform:translateY(16px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===== Date & Time ===== */

/* =====================================
      FUTUREVERSE HERO CARDS
===================================== */

.date-time-wrapper{

    display:flex;

    gap:18px;

    align-items:center;

  

}

/* ---------- Common Card ---------- */

.ai-card,
.mini-card{

    width:190px;

    height:88px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 18px;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:18px;

    cursor:pointer;

    overflow:hidden;

    position:relative;

    transition:all .35s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.04);

}

/* Soft Premium Glow */

.ai-card::before,
.mini-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
    rgba(108,99,255,.08),
    rgba(255,255,255,0));

    opacity:0;

    transition:.35s ease;

}

/* Hover */

.ai-card:hover,
.mini-card:hover{

    transform:translateY(-6px);

    border-color:#d8d5ff;

    box-shadow:0 18px 36px rgba(108,99,255,.14);

}

.ai-card:hover::before,
.mini-card:hover::before{

    opacity:1;

}

/* ---------- Icons ---------- */

.ai-icon,
.mini-card i{

    width:44px;

    height:44px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f4ff;

    color:#6c63ff;

    font-size:20px;

    flex-shrink:0;

    transition:.35s ease;

}

/* Icon Animation */

.ai-card:hover .ai-icon,

.mini-card:hover i{

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

    background:#6c63ff;

    color:#ffffff;

}

/* ---------- Heading ---------- */

.ai-card h3,
.mini-card h3{

    margin:0;

    font-size:13px;

    font-weight:700;

    color:#111827;

}

/* ---------- Text ---------- */

.ai-card p,
.mini-card p{

    margin-top:4px;

    font-size:11px;

    color:#777;

    line-height:1.4;

}

/* ---------- AI Accent ---------- */

.ai-card{

    border-color:#e5e1ff;

}

.ai-card:hover{

    box-shadow:0 20px 40px rgba(108,99,255,.18);

}

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

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,233px);
    gap:18px;
    margin:28px 0;
}

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

.stats-card{
    width:233px;
    height:120px;
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:18px;
    padding:18px;
    cursor:pointer;
    box-sizing:border-box;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.stats-card:hover{
    transform:translateY(-5px);
    border-color:#d8dee8;
    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

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

.stats-top{
    display:flex;
    align-items:center;
    gap:16px;
    height:100%;
}

.stats-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:transform .28s ease;
}

.stats-card:hover .stats-icon{
    transform:scale(1.08);
}

.stats-icon i{
    font-size:24px;
}

/* ===== TEXT ===== */

.stats-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stats-text h2{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#111827;
    line-height:1;
}

.stats-text h4{
    margin:8px 0 5px;
    font-size:14px;
    font-weight:600;
    color:#1f2937;
    white-space:nowrap;
}

.stats-text p{
    margin:0;
    font-size:12px;
    color:#6b7280;
}

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

.courses{
    background:#eef2ff;
    color:#6366f1;
}

.progress{
    background:#eafaf2;
    color:#22b573;
}

.certificates{
    background:#fff8df;
    color:#f4b400;
}

.streak{
    background:#ffeaf4;
    color:#ec4899;
}






/* =========================================
   CONTINUE LEARNING
========================================= */

.continue-learning{
    margin-top:18px;
}

/* ---------- Section Title ---------- */

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin-bottom:18px;
}

.section-title h2{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#111827;
}

.section-title a{
    font-size:14px;
    font-weight:600;
    color:#4f6cff;
    text-decoration:none;
    transition:.28s ease;
}

.section-title a:hover{
    color:#3455ff;
}

/* ---------- Course Cards ---------- */

.course-cards{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.course-card{

    position:relative;

    width:225px;

    height:200px;

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:16px;

    box-sizing:border-box;

    overflow:hidden;

    cursor:pointer;

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

/* ---------- Hover ---------- */

.course-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

/* ---------- Course Menu ---------- */

.course-menu{

    position:absolute;

    top:18px;

    right:18px;

    font-size:16px;

    color:#9ca3af;

    cursor:pointer;

    transition:.25s ease;
}

.course-menu:hover{

    color:#4f6cff;
}

/* ---------- Tag ---------- */

.course-tag{

    display:block;

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;

    color:#9ca3af;

    margin-bottom:8px;
}

/* ---------- Icon ---------- */

.course-icon{

    width:50px;

    height:50px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:14px;

    transition:transform .28s ease;
}

.course-card:hover .course-icon{

    transform:scale(1.08);
}

/* ---------- Icon Colors ---------- */

.html{

    background:#fff1eb;

    color:#ff6b35;
}

.css{

    background:#eef4ff;

    color:#2563eb;
}

.js{

    background:#fff9db;

    color:#facc15;
}

/* ---------- Text ---------- */

.course-card h3{

    font-size:14px;

    font-weight:700;

    line-height:1.35;

    color:#111827;

    margin-top:-12px;

    margin-bottom:10px;

    white-space:nowrap;
}

.course-card p{

    font-size:11px;

    color:#6b7280;

    line-height:1.5;

    margin-top:-5px;

    margin-bottom:10px;
}

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

.progress-wrapper{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:5px;
}

.progress-bar{

    flex:1;

    height:5px;

    background:#eeeeee;

    border-radius:20px;

    overflow:hidden;
}

.progress-fill{

    height:100%;

    border-radius:20px;

    transition:width .45s ease;
}

.progress-percent{

    min-width:38px;

    text-align:right;

    font-size:14px;

    font-weight:700;

    color:#111827;
}

/* ---------- Progress Colors ---------- */

.html-progress{

    width:72%;

    background:#ff7a59;
}

.css-progress{

    width:45%;

    background:#3b82f6;
}

.js-progress{

    width:30%;

    background:#facc15;
}

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

.course-card button{

    width:100%;

    height:30px;

    border:none;

    border-radius:12px;

    background:#f3f4f6;

    color:#374151;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

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

.course-card button:hover{

    background:#eef2ff;

    color:#4f6cff;

    transform:translateY(-2px);

    box-shadow:0 4px 12px rgba(79,108,255,.15);
}

/* =========================================
   DASHBOARD LAYOUT
========================================= */

.dashboard-section{

    display:flex;

    align-items:flex-start;

    gap:30px;
}

.left-content{

    flex:1;
}

.right-sidebar{

    width:320px;

    flex-shrink:0;

    display:flex;

    flex-direction:column;

    gap:0;
}

/* =========================================
   MICRO POLISH
========================================= */

.course-card:hover h3{

    color:#111827;
}

.course-card:hover .progress-percent{

    color:#111827;
}

.course-card:hover .course-tag{

    color:#6b7280;
}






/* =========================================
   AI QUICK HELP
========================================= */

.ai-quick-help{

    width:75%;

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:20px;

    margin-top:20px;

    box-sizing:border-box;

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

.ai-quick-help:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

/* =========================================
   HEADER
========================================= */

.ai-header{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;
}

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

.ai-icon{

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:16px;

    background:#f3efff;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:transform .28s ease;
}

.ai-quick-help:hover .ai-icon{

    transform:scale(1.08);
}

.ai-icon i{

    font-size:22px;

    color:#6c63ff;
}

/* =========================================
   TEXT
========================================= */

.ai-header h2{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#111827;
}

.ai-header p{

    margin:8px 0 0;

    font-size:11px;

    line-height:1.6;

    color:#6b7280;
}

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

.ask-ai-btn{

    width:100%;

    height:42px;

    border:none;

    border-radius:12px;

    background:#f3f4f6;

    color:#374151;

    font-size:14px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration: none;

    gap:10px;

    cursor:pointer;

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

.ask-ai-btn:hover{

    background:#eef2ff;

     text-decoration: none;

    color:#4f6cff;

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(79,108,255,.15);
}

.ask-ai-btn i{

    transition:transform .28s ease;
}

.ask-ai-btn:hover i{

    transform:translateX(4px);
}






/* Schedule Card */

.schedule-card {

    width: 75%;

    background: #ffffff;

    border: 1px solid #ececec;

    border-radius: 10px;

    padding: 15px;

    margin-top: 24px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);

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

        
}

.schedule-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);

}

.schedule-btn:hover i{

    transform:translateX(5px);
}

.schedule-btn:hover i{

    transform:translateX(5px);
}

.schedule-card button:hover {

    background: #f3f4ff;

    color: #4f6cff;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(79, 108, 255, 0.15);

}

.schedule-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}

.schedule-header h2 {

    font-size: 18px;

    font-weight: 700;
}

.schedule-header i {

    color: #b0b0b0;
}

.schedule-item {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 15px;
}

.schedule-icon {

    width: 40px;

    height: 40px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.schedule-icon i {

    font-size: 16px;
}

.html-box {

    background: #eaf2ff;
}

.css-box {

    background: #eafbf0;
}

.js-box {

    background: #fff8e1;
}

.html-box i {

    color: #3b82f6;
}

.css-box i {

    color: #22c55e;
}

.js-box i {

    color: #facc15;
}

.schedule-info h3 {

    font-size: 14px;

    margin-bottom: 5px;
}

.schedule-info p {

    color: #6b7280;

    font-size: 11px;
}

.schedule-btn {

    width: 100%;

    height: 35px;

    border: none;

    border-radius: 10px;

    background: #f3efff;

    color: #6c63ff;

    font-size: 15px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    cursor: pointer;

    margin-top: 10px;
}

body {

    overflow-x: hidden;
}





/* =========================================
   RECOMMENDED SECTION
========================================= */

.recommended-section{

    margin-top:40px;
}

.recommended-cards{

    display:flex;

    gap:15px;

    margin-top:20px;
}

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

.recommended-card{

    width:165px;

    height:145px;

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:18px;

    box-sizing:border-box;

    cursor:pointer;

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

.recommended-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

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

.recommended-icon{

    width:40px;

    height:40px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    position:relative;

    transition:transform .28s ease;
}

.recommended-card:hover .recommended-icon{

    transform:scale(1.08);
}

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

.recommended-card h3{

    font-size:12px;

    font-weight:600;

    line-height:18px;

    color:#111827;

    margin-bottom:8px;

    margin-left:0;

    height:32px;
}

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

.recommended-card p{

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:10px;

    color:#6b7280;

    margin-top: -5px;

    margin-left:0;
}

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

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.section-title h2{

    white-space:nowrap;
}

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

.monitor-icon{

    background:#eef2ff;
}

.monitor-icon .fa-display{

    font-size:24px;

    color:#4f46e5;
}

.mobile-icon{

    position:absolute;

    right:8px;

    bottom:8px;

    font-size:12px;

    color:#8b5cf6;
}

.python-icon{

    background:#eef4ff;
}

.python-icon i{

    font-size:30px;

    color:#3776ab;
}

.code-icon{

    background:#f5f1ff;
}

.code-icon i{

    font-size:22px;

    color:#8b5cf6;
}

.figma-icon{

    background:#fff1f2;
}

.figma-icon i{

    font-size:26px;

    color:#f24e1e;
}

/* =========================================
   LEVEL TAGS
========================================= */

.level-tag{

    padding:5px 10px;

    border-radius:999px;

    font-size:9px;

    font-weight:600;

    margin-top: -5px;
}

.intermediate{

    background:#eef4ff;

    color:#5a8cff;
}

.beginner{

    background:#eafbf0;

    color:#37b75a;
}

.advanced{

    background:#f3efff;

    color:#7a5cff;
}

.beginner-blue{

    background:#eaf6ff;

    color:#5ea9e8;
}






.sidebar.collapsed {

    width: 90px;
}

.sidebar.collapsed h2,
.sidebar.collapsed p,
.sidebar.collapsed span {

    display: none;
}

.sidebar.collapsed .sidebar-logo {

    justify-content: center;
}

.sidebar.collapsed .sidebar-menu a {

    justify-content: center;
}

.main-content.expanded{

   

   margin-left:var(--sidebar-collapse-width);
width:calc(100% - var(--sidebar-collapse-width));

    max-width:1700px;

    margin-right:auto;

}

.top-header.expanded {

   left:var(--sidebar-collapse-width);
width:calc(100% - var(--sidebar-collapse-width));
}

.sidebar.collapsed .share-toggle {

    justify-content: center;

    margin-left: 10;

    padding-left: 0;
}

.sidebar.collapsed .share-toggle i {

    margin: 0;

    width: 28px;

    text-align: center;
}









/* ===========================
   RECENTLY COMPLETED
=========================== */

.recent-box{

    width:100%;

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:24px;

    margin-top:40px;

    box-sizing:border-box;

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

.recent-box:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.recent-item{

    display:flex;

    align-items:center;
}

.recent-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    background:#eefaf2;

    color:#22c55e;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

    transition:transform .28s ease;
}

.recent-box:hover .recent-icon{

    transform:scale(1.08);
}

.recent-text{

    margin-left:18px;

    flex:1;
}

.recent-text h3{

    font-size:16px;

    font-weight:600;

    color:#111827;

    margin-bottom:6px;
}

.recent-text p{

    font-size:13px;

    color:#6b7280;
}

.xp-box{

    background:#ecfdf3;

    color:#16a34a;

    padding:10px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

    transition:
        transform .28s ease,
        background .28s ease;
}

.recent-box:hover .xp-box{

    transform:scale(1.05);

    background:#dcfce7;
}





/*=========================================
 QUIZ CENTER
=========================================*/

.test-card{

    width:240px;

    height:370px;

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:20px;

    margin-top:20px;

    box-sizing:border-box;

    overflow:hidden;

    position:relative;

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

.test-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,#4f46e5,#3b82f6,#06b6d4);

    transition:left .8s ease;
}

.test-card:hover::before{

    left:0;
}

.test-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

/*========================*/

.test-card h3{

    font-size:19px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;
}

.test-card p{

    font-size:11px;

    color:#6b7280;

    line-height:1.6;

    margin-bottom:18px;
}

/*========================*/

.test-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 14px;

    margin-bottom:12px;

    background:#f8faff;

    border:1px solid #edf0f5;

    border-radius:14px;

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

.test-item:hover{

    transform:translateX(6px);

    background:#f2f7ff;

    border-color:#dbeafe;
}

.test-item h4{

    font-size:14px;

    color:#111827;

    margin-bottom:4px;
}

.test-item span{

    font-size:12px;

    color:#6b7280;
}

/*========================*/

.test-item button{

    width:75px;

    height:34px;

    border:none;

    border-radius:10px;

    background:#5b67ff;

    color:#ffffff;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

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

.test-item button span{

    color:white;

    transition:transform .25s ease;
}

.test-item button:hover{

    background:#4f46e5;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(91,103,255,.25);
}

.test-item button:hover span{

    transform:translateX(4px);
}




/*=========================================
 PERFORMANCE OVERVIEW
=========================================*/

.dashboard-section-title{

    font-size:22px;

    font-weight:700;

    color:#111827;

    margin:45px 0 20px;
}

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

.growth-card{

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:22px;

    margin-top:22px;

    max-width:740px;

    position:relative;

    overflow:hidden;

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

.growth-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#4f46e5,#3b82f6,#06b6d4);
}

.growth-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

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

.growth-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;
}

.growth-top h2{

    font-size:18px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;
}

.growth-top p{

    color:#6b7280;

    font-size:14px;

    margin-top:10px;
}

/*=========================================
 LIVE
=========================================*/

.live-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:4px;

    padding:7px 12px;

    border-radius:999px;

    background:#eefbf4;

    color:#16a34a;

    font-size:12px;

    font-weight:700;
}

.live-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22c55e;

    animation:pulse 1.8s infinite;
}

@keyframes pulse{

0%{

transform:scale(.8);

opacity:.5;

}

50%{

transform:scale(1.3);

opacity:1;

}

100%{

transform:scale(.8);

opacity:.5;

}

}

/*=========================================
 GROWTH BADGE
=========================================*/

.growth-badge{

    background:#ecfdf3;

    color:#16a34a;

    padding:10px 18px;

    border-radius:999px;

    font-weight:700;

    font-size:14px;

    transition:.28s;
}

.growth-card:hover .growth-badge{

    transform:scale(1.05);
}

/*=========================================
 CHART
=========================================*/

#growthChart{

    width:100%!important;

    height:270px!important;

    margin-top:20px;
}

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

.growth-bottom{

    display:flex;

    justify-content:space-between;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #edf0f5;
}

.growth-bottom h3{
    font-size:20px;
    font-weight:700;
    color:#111827;
    margin:0 0 2px 0;   /* पहले margin-bottom:6px था */
    line-height:1.1;
}

.growth-bottom span{
    font-size:12px;
    color:#6b7280;
    margin:0;
    line-height:1.1;
}




/*=========================================
 FUTURE TECHNOLOGIES
=========================================*/

.future-tech-card{

    width:75%;              /* पहले 81% था */

    height:350px;

    background:#ffffff;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:22px;

    margin-top:20px;

    box-sizing:border-box;

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

.future-tech-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.future-tech-card h3{

    font-size:20px;

    font-weight:700;

    color:#111827;

    margin-bottom:18px;
}

/*============================*/

.tech-list{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.tech-item{

    background:#f8faff;

    border:1px solid #edf0f5;

    border-radius:14px;

    padding:12px 15px;

    font-size:14px;

    color:#374151;

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

.tech-item:hover{

    transform:translateX(5px);

    background:#f2f7ff;

    border-color:#dbeafe;
}

/*============================*/

.explore-btn{

    width:100%;

    height:44px;

    margin-top:10px;

    border:none;

    border-radius:12px;

    background:#5b67ff;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

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

.explore-btn:hover{

    transform:translateY(-2px);

    background:#4f46e5;

    box-shadow:0 10px 20px rgba(91,103,255,.25);
}































@media (max-width:768px){

    .space-cards,
    .space-row-two{
        width:100%;
    }

}

/* =====================================================
   SPACE INTELLIGENCE ROW 1
   ISS + SOLAR
===================================================== */

.space-cards{

    display:flex;

    gap:24px;

    align-items:stretch;

    width:135%;

    margin-top:25px;

}

/* ================= ISS Card ================= */

.iss-card{

    flex:1;

    background:#fff;

    border:1px solid #e8ebf3;

    border-radius:18px;

    padding:20px;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:.3s ease;

}

.iss-card:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,0,0,.08);

}

/* ================= Header ================= */

.iss-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.iss-header img{

    width:28px;

    height:28px;

    margin-top:-15px;

}

.iss-header h3{

    font-size:21px;

    margin:0;

}

.iss-header span{

    font-size:13px;

    color:#8a8a8a;

}

/* ================= Grid ================= */

.iss-info{

    display:grid;

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

    gap:12px;

}

/* ================= Small Boxes ================= */

.iss-item{

    background:#f8faff;

    border:1px solid #e8eefb;

    border-radius:12px;

    padding:14px;

}

.iss-item p{

    margin:0 0 6px;

    font-size:13px;

    color:#7b8794;

    font-weight:500;

}

.iss-item span{

    font-size:15px;

    font-weight:700;

    color:#111827;

    word-break:break-word;

}

/* Premium Card Effect */

.iss-card,
.solar-card{

    position:relative;

    overflow:hidden;

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

}

.iss-card::before,
.solar-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,#4f46e5,#3b82f6,#06b6d4);

    transition:left .8s ease;

}

.iss-card:hover::before,
.solar-card:hover::before{

    left:0;

}

.iss-card:hover,
.solar-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);

}

.iss-item,
.solar-item{

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

}

.iss-item:hover,
.solar-item:hover{

    transform:translateY(-2px);

    background:#f2f7ff;

    border-color:#dbeafe;

}

.status-active,
.solar-active{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:16px;

    color:#16a34a;

    font-size:14px;

    font-weight:600;

}

.live-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22c55e;

    animation:livePulse 1.8s infinite;

}

@keyframes livePulse{

0%{

    transform:scale(.8);

    opacity:.45;

}

50%{

    transform:scale(1.35);

    opacity:1;

    box-shadow:0 0 10px rgba(34,197,94,.45);

}

100%{

    transform:scale(.8);

    opacity:.45;

}

}

/* ================= Status ================= */

.status-active{

    margin-top:16px;

    color:#22c55e;

    font-size:14px;

    font-weight:600;

}

/* ================= Solar Card ================= */

.solar-card{

    flex:1;

    background:#fff;

    border:1px solid #e8ebf3;

    border-radius:18px;

    padding:20px;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:.3s ease;

}

.solar-card:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,0,0,.08);

}

/* ================= Header ================= */

.solar-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.solar-header img{

    width:28px;

    height:28px;

    margin-top:-15px;

}

.solar-header h3{

    font-size:21px;

    margin:0;

}

.solar-header span{

    font-size:13px;

    color:#8a8a8a;

}

/* ================= Grid ================= */

.solar-info{

    display:grid;

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

    gap:12px;

}

/* ================= Small Boxes ================= */

.solar-item{

    background:#f8faff;

    border:1px solid #e8eefb;

    border-radius:12px;

    padding:14px;

}

.solar-item p{

    margin:0 0 6px;

    font-size:13px;

    color:#7b8794;

    font-weight:500;

}

.solar-item span{

    font-size:15px;

    font-weight:700;

    color:#111827;

    word-break:break-word;

}

/* ================= Status ================= */

.solar-active{

    margin-top:16px;

    color:#22c55e;

    font-size:14px;

    font-weight:600;

}

/* =====================================================
      SPACE INTELLIGENCE - ROW 2
      NEAR EARTH + ALIEN
===================================================== */

.space-row-two{

    display:flex;

    gap:24px;

    align-items:stretch;

    width:135%;

    margin-top:30px;

}

/* ================= NEAR EARTH CARD ================= */

.near-card{

    flex:1;

    width:100%;

    max-width:none;

    background:#ffffff;

    border:1px solid #e8ebf3;

    border-radius:18px;

    padding:20px;

    margin:0;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:.3s ease;

}

.near-card:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,0,0,.08);

}

/* Header */

.near-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.near-header img{

    width:28px;

    height:28px;

    margin-top:-15px;

}

.near-header h3{

    margin:0;

    font-size:21px;

}

.near-header span{

    font-size:13px;

    color:#8a8a8a;

}

/* Grid */

.near-info{

    display:grid;

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

    gap:12px;

}

/* Small Boxes */

.near-item{

    background:#f8faff;

    border:1px solid #e8eefb;

    border-radius:12px;

    padding:14px;

}

.near-item p{

    margin:0 0 6px;

    font-size:13px;

    color:#7b8794;

    font-weight:500;

}

.near-item span{

    font-size:15px;

    font-weight:700;

    color:#111827;

    word-break:break-word;

}

.near-active{

    margin-top:16px;

    color:#22c55e;

    font-size:14px;

    font-weight:600;

}

/* Premium Card */

.near-card,
.alien-card{

    position:relative;

    overflow:hidden;

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

}

.near-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,#06b6d4,#3b82f6,#4f46e5);

    transition:left .8s ease;

}

.alien-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,#7c3aed,#4f46e5,#06b6d4);

    transition:left .8s ease;

}

.near-card:hover::before,
.alien-card:hover::before{

    left:0;

}

.near-card:hover,
.alien-card:hover{

    transform:translateY(-5px);

    border-color:#d8dee8;

    box-shadow:0 12px 28px rgba(15,23,42,.08);

}

.near-item,
.alien-item{

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

}

.near-item:hover,
.alien-item:hover{

    transform:translateY(-2px);

    background:#f2f7ff;

    border-color:#dbeafe;

}

.near-active,
.alien-active{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:16px;

    font-size:14px;

    font-weight:600;

}

.near-active{

    color:#16a34a;

}

.alien-active{

    color:#3b82f6;

}

/* Green Live Dot */

.live-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22c55e;

    animation:livePulse 1.8s infinite;

}

/* Blue Scan Dot */

.scan-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#3b82f6;

    animation:scanPulse 1.6s infinite;

}

@keyframes scanPulse{

0%{

    transform:scale(.8);

    opacity:.4;

    box-shadow:0 0 0 rgba(59,130,246,0);

}

50%{

    transform:scale(1.35);

    opacity:1;

    box-shadow:0 0 10px rgba(59,130,246,.45);

}

100%{

    transform:scale(.8);

    opacity:.4;

    box-shadow:0 0 0 rgba(59,130,246,0);

}

}

/* ================= ALIEN SCANNER CARD ================= */

.alien-card{

    flex:1;

    width:100%;

    max-width:none;

    background:#ffffff;

    border:1px solid #e8ebf3;

    border-radius:18px;

    padding:20px;

    margin:0;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:.3s ease;

}

.alien-card:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,0,0,.08);

}

/* Header */

.alien-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.alien-header img{

    width:28px;

    height:28px;

    margin-top:-15px;

}

.alien-header h3{

    margin:0;

    font-size:21px;

}

.alien-header span{

    font-size:13px;

    color:#8a8a8a;

}

/* Grid */

.alien-info{

    display:grid;

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

    gap:12px;

}

/* Small Boxes */

.alien-item{

    background:#f8faff;

    border:1px solid #e8eefb;

    border-radius:12px;

    padding:14px;

}

.alien-item p{

    margin:0 0 6px;

    font-size:13px;

    color:#7b8794;

    font-weight:500;

}

.alien-item span{

    font-size:15px;

    font-weight:700;

    color:#111827;

    word-break:break-word;

}

.alien-active{

    margin-top:16px;

    color:#22c55e;

    font-size:14px;

    font-weight:600;

}




/* =========================================
   FutureVerse Premium Footer
========================================= */

.footer-logo{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    margin-bottom:18px;

}

.footer-logo img{

    width:100px;
    height:100px;

    object-fit:contain;

}

/* =========================================
   FutureVerse Premium Footer
========================================= */

.footer{
    position: relative;
    overflow: hidden;
    background: #000;
    color: #fff;
    padding: 80px 7% 40px;
    margin-top: 100px;
    border-top: 2px solid rgba(77,166,255,.20);
}

/* Glow */

.footer::before{

    content:"";

    position:absolute;

    top:-220px;

    left:50%;

    transform:translateX(-50%);

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(77,166,255,.14) 0%,
    transparent 72%);

    pointer-events:none;

}

/* =========================================
        Brand Section
========================================= */

.footer-brand{

    width:100%;

    max-width:760px;

    margin-bottom:65px;

}

.footer-brand h2{

    font-size:35px;

    font-weight:650;

    margin-bottom:18px;

    transition:.35s;

}

.footer-brand h2:hover{

    color:#4da6ff;

    text-shadow:
    0 0 15px rgba(77,166,255,.45);

}

.footer-tagline{

    font-size:20px;

    font-weight:600;

    color:#4da6ff;

    margin-bottom:24px;

    letter-spacing:.8px;

}

.footer-description{

    max-width:650px;

    font-size:14px;

    line-height:1.9;

    color:#cfcfcf;

    margin-bottom:30px;

}

.footer-developer{

    font-size:17px;

    font-weight:500;

}

.footer-developer strong{

    color:#4da6ff;

}

/* =========================================
        Footer Links
========================================= */

.footer-links{

    width:100%;

    display:grid;

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

    gap:55px;

    margin-bottom:70px;

}

.footer-column h3{

    font-size:22px;

    margin-bottom:22px;

    color:#fff;

    position:relative;

    display:inline-block;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:45px;

    height:2px;

    background:#4da6ff;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column ul li{

    margin-bottom:14px;

}

.footer-column ul li a{

    color:#cfcfcf;

    text-decoration:none;

    font-size:16px;

    transition:.3s;

}

.footer-column ul li a:hover{

    color:#4da6ff;

    padding-left:8px;

}

/* =========================================
        Social Media
========================================= */

.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    margin-bottom:45px;

}

.footer-social a{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    border:1px solid rgba(77,166,255,.25);

    color:#ffffff;

    font-size:22px;

    text-decoration:none;

    transition:all .35s ease;

}

.footer-social a:hover{

    transform:translateY(-8px) scale(1.08);

    background:#4da6ff;

    color:#ffffff;

    box-shadow:
        0 0 18px rgba(77,166,255,.55),
        0 0 40px rgba(77,166,255,.25);

}

/* =========================================
        Footer Bottom
========================================= */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.10);

    padding-top:28px;

    text-align:center;

    color:#a8a8a8;

    font-size:15px;

    letter-spacing:.5px;

}

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

@media(max-width:992px){

    .footer{

        padding:70px 40px 35px;

    }

    .footer-links{

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

        gap:40px;

    }

}

@media(max-width:768px){

    .footer{

        padding:60px 25px 30px;

        text-align:center;

    }

    .footer-brand{

        margin:0 auto 50px;

    }

    .footer-description{

        margin:0 auto 25px;

    }

    .footer-links{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-column h3::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-social{

        gap:16px;

        flex-wrap:wrap;

    }

    .footer-social a{

        width:50px;

        height:50px;

        font-size:20px;

    }

    .footer-brand h2{

        font-size:30px;

    }

    .footer-tagline{

        font-size:18px;

    }

}

@media(max-width:480px){

    .footer{

        padding:50px 18px 25px;

    }

    .footer-brand h2{

        font-size:26px;

    }

    .footer-description{

        font-size:15px;

        line-height:1.8;

    }

    .footer-column h3{

        font-size:20px;

    }

    .footer-column ul li a{

        font-size:15px;

    }

    .footer-bottom{

        font-size:13px;

    }

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.10);

    padding-top:28px;

    text-align:center;

    color:#a8a8a8;

    font-size:15px;

    letter-spacing:.5px;

    transition:all .35s ease;

}

.footer-bottom:hover{

    color:#4da6ff;

    text-shadow:
        0 0 12px rgba(77,166,255,.5);

    transform:scale(1.03);

}











/* Footer आने पर Header Hide */

.top-header.footer-mode{
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .4s ease;
}

/* Footer आने पर Sidebar Hide */

.sidebar.footer-mode{
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .4s ease;
}
.top-header.footer-mode{
    display: none !important;
}


/* ===========================
   Footer Mode (Highest Priority)
=========================== */

.top-header.footer-mode{
    top: -100px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.sidebar.footer-mode{
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ===========================
   Premium Footer Animation
=========================== */

.sidebar,
.top-header,
.footer{
    transition: all .55s cubic-bezier(.22,.61,.36,1);
}

/* Sidebar */

.sidebar.footer-mode{
    transform: translateX(-100%);
    opacity: 0;
    filter: blur(6px);
}

/* Header */

.top-header.footer-mode{
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(6px);
}

/* Footer */

.footer{
    opacity: .3;
    transform: translateY(60px);
}

.footer.footer-visible{
    opacity: 1;
    transform: translateY(0);
}






.follow-title{

    text-align:center;

    font-size:25px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:25px;

}

.footer-extra-links{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    margin-top:35px;

}

.footer-extra-links a{

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

.footer-extra-links a:hover{

    color:#4da6ff;

}









/* ==========================================
        Space Intelligence Banner
========================================== */

.space-intelligence{

    width:135%;
    min-height:140px;

    margin:60px 0 40px;

    background:#ffffff;

    border:2px solid #4da6ff;      /* Permanent Blue Border */

    border-radius:16px;

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

    overflow:hidden;
    position:relative;

    isolation:isolate;

    transition:all .35s ease;

    animation:bannerFade .8s ease;
}

/* Hover */

.space-intelligence:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 25px rgba(77,166,255,.18),
        0 12px 35px rgba(0,0,0,.08);
}

/* ==========================================
        Content
========================================== */

.space-content{

    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ==========================================
        Heading
========================================== */

.space-content h2{

    font-size:35px;
    font-weight:800;
    letter-spacing:8px;

    margin:0;

    text-transform:uppercase;

    user-select:none;

    padding:0 15px;

    background:linear-gradient(
        180deg,
        #4da6ff,
        #2f80ff
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    color:transparent;

    transition:.4s ease;
}

/* Heading Glow */

.space-intelligence:hover h2{

    text-shadow:
        0 0 10px rgba(77,166,255,.35),
        0 0 20px rgba(77,166,255,.18);
}

/* ==========================================
        Blue Line
========================================== */

.space-line{

    position:relative;

    overflow:hidden;

    width:250px;
    height:4px;

    margin:18px 0;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        transparent,
        #4da6ff,
        #6ec8ff,
        #4da6ff,
        transparent
    );

    animation:lineGlow 2.5s ease-in-out infinite;
}

.space-line::before{

    content:"";

    position:absolute;

    top:0;
    left:-40%;

    width:40%;
    height:100%;

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

    filter:blur(2px);

    animation:spaceScan 3s linear infinite;
}

/* ==========================================
        Tagline
========================================== */

.space-content p{

    margin:0;

    font-size:23px;

    font-weight:500;

    color:#7d8ca5;

    transition:.35s ease;
}

.space-intelligence:hover p{

    color:#4d6f9d;

    letter-spacing:.5px;
}

/* ==========================================
        Premium Shine
========================================== */

.space-intelligence::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.55),
        transparent 35%,
        transparent 65%,
        rgba(77,166,255,.08)
    );

    pointer-events:none;
}

/* ==========================================
        Blue Aura
========================================== */

.space-intelligence::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:420px;
    height:120px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(77,166,255,.12),

        transparent 70%

    );

    filter:blur(35px);

    z-index:-1;

    pointer-events:none;
}

/* ==========================================
        Animations
========================================== */

@keyframes spaceScan{

    0%{

        left:-40%;

    }

    100%{

        left:140%;

    }

}

@keyframes lineGlow{

    0%{

        box-shadow:0 0 8px rgba(77,166,255,.25);

    }

    50%{

        box-shadow:
            0 0 18px rgba(77,166,255,.55),
            0 0 35px rgba(77,166,255,.25);

    }

    100%{

        box-shadow:0 0 8px rgba(77,166,255,.25);

    }

}

@keyframes bannerFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}











/*=========================================
        FUTUREVERSE CLOSING CARD
=========================================*/

.future-closing{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:45px 0;
    overflow:hidden;
}

.future-glow{
    position:absolute;
    width:700px;
    height:300px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(37,99,235,.12),
    transparent 70%);
    filter:blur(30px);
    z-index:0;
}

.future-card{
    position:relative;
    width:92%;
    max-width:980px;
    min-height:270px;
    padding:35px 45px;

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

    backdrop-filter:blur(18px);

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

    border-radius:25px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.08),
    0 0 35px rgba(37,99,235,.08);

    text-align:center;

    overflow:hidden;

    z-index:2;

    transition:.35s;
}

.future-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.12),
    0 0 40px rgba(37,99,235,.12);

}

/*==============================*/

.future-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin:18px 0 25px;
}

.future-divider i{
    color:#d7b458;
    font-size:16px;
}

.future-divider span{
    width:110px;
    height:2.5px;
    background:#d4af37;
    border-radius:50px;
    display:block;
}

.divider-star{
    color:#d4af37;
    font-size:20px;
    font-weight:700;
    line-height:1;
}





.dashboard-wrapper{

    width:100%;

    max-width:1500px;

    margin:0 auto;

}








@media (max-width:1024px){

    .main-content{
    padding:25px;
}

.top-header{
    padding:0 25px;
}
.sidebar{
    width:220px;
}

.main-content{
    margin-left:220px;
    width:calc(100% - 220px);
}

.top-header{
    left:220px;
    width:calc(100% - 220px);
}

}@media (max-width:768px){

}
@media (max-width:480px){

}










/*=========================================
        FUTUREVERSE 1 August Neeche
=========================================*/


.loading-screen{
    position:fixed;
    inset:0;
    background:#ffffff;
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:99999;
}

.loader{
    width:60px;
    height:60px;
    border:6px solid #ddd;
    border-top:6px solid #4f6cff;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin-bottom:20px;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.loading-screen h2{
    color:#4f6cff;
    margin:0;
}

.loading-screen p{
    color:#777;
}








/* ===========================
   PREMIUM PAGE LOADER
=========================== */

#pageLoader{

    position:fixed;

    inset:0;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:.45s ease;

}

#pageLoader.active{

    opacity:1;

    visibility:visible;

}

/* Center */

.loader-center{

    text-align:center;

    width:320px;

}

/* ===========================
   AI ORB
=========================== */

.ai-orb{

    position:relative;

    width:120px;

    height:120px;

    margin:0 auto 35px;

}

/* Center Core */

.core{

    position:absolute;

    top:50%;

    left:50%;

    width:24px;

    height:24px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    box-shadow:
    0 0 18px rgba(79,70,229,.8),
    0 0 45px rgba(37,99,235,.45);

    animation:pulse 1.8s infinite;

}

/* Rings */

.ring{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:2px solid rgba(79,70,229,.18);

}

.ring1{

    width:55px;

    height:55px;

    animation:spin1 3s linear infinite;

}

.ring2{

    width:80px;

    height:80px;

    animation:spin2 4s linear infinite reverse;

}

.ring3{

    width:105px;

    height:105px;

    animation:spin1 5s linear infinite;

}

/* Text */

.loader-center h2{

    font-size:28px;

    color:#111827;

    margin-bottom:10px;

}

.loader-center p{

    color:#64748b;

    font-size:15px;

    margin-bottom:28px;

}

/* Progress */

.progress-bar{

    width:100%;

    height:8px;

    border-radius:50px;

    overflow:hidden;

    background:#edf2f7;

}

.progress-fill{

    width:0%;

    height:100%;

    border-radius:50px;

    background:linear-gradient(90deg,#4f46e5,#2563eb);

}

/* ===========================
   Animations
=========================== */

@keyframes pulse{

    0%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.25);

    }

    100%{

        transform:translate(-50%,-50%) scale(1);

    }

}

@keyframes spin1{

    from{

        transform:translate(-50%,-50%) rotate(0deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(360deg);

    }

}

@keyframes spin2{

    from{

        transform:translate(-50%,-50%) rotate(360deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(0deg);

    }

}




















.share-container {
    display: none;
}
















/* =========================================================
   FUTUREVERSE HOME - FINAL MOBILE RESPONSIVE CSS
   HTML में कोई बदलाव नहीं
========================================================= */


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

@media (max-width: 768px){

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

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    body{
        overflow-y:auto;
    }

    .container{
        display:block;
        width:100%;
        min-height:100vh;
    }


    /* =====================================================
       SIDEBAR
       DEFAULT = पूरी तरह hidden
    ===================================================== */

    .sidebar{
        position:fixed !important;

        top:0;
        left:0;

        width:min(86vw, 360px) !important;
        height:100dvh;
        min-height:100dvh;

        padding:22px 20px;

        z-index:30000;

        transform:translateX(-110%);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        overflow-y:auto;
        overflow-x:hidden;

        box-shadow:
            14px 0 45px rgba(15,23,42,.20);

        transition:
            transform .35s ease,
            opacity .25s ease,
            visibility .25s ease;
    }


    /* =====================================================
       MENU CLICK के बाद
       Existing JS .collapsed add करता है
       Mobile पर = FULL SIDEBAR OPEN
    ===================================================== */

    .sidebar.collapsed{
        width:min(86vw, 360px) !important;

        transform:translateX(0);

        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /* Desktop collapsed rules override */

    .sidebar.collapsed h2,
    .sidebar.collapsed p,
    .sidebar.collapsed span{
        display:initial !important;
    }

    .sidebar.collapsed .sidebar-logo{
        justify-content:flex-start !important;
    }

    .sidebar.collapsed .sidebar-menu a{
        justify-content:flex-start !important;
    }

    .sidebar.collapsed .share-toggle{
        justify-content:flex-start !important;

        margin-left:0 !important;
        padding-left:16px !important;
    }

    .sidebar.collapsed .share-toggle i{
        width:28px !important;

        margin:0 !important;

        text-align:center !important;
    }


    /* ===========================
       FULL SIDEBAR CONTENT
    =========================== */

    .sidebar-logo{
        justify-content:flex-start;
        margin-bottom:25px;
    }

    .sidebar-logo img{
        width:60px;
    }

    .sidebar-menu{
        gap:4px;
    }

    .sidebar-menu a{
        width:100%;

        padding:12px 16px;

        justify-content:flex-start;
    }

    .sidebar-version{
        width:100%;

        justify-content:flex-start;

        padding:12px 16px;
    }


    /* =====================================================
       TOP HEADER
       Sidebar बंद होने पर full width
    ===================================================== */

    .top-header,
    .top-header.expanded{
        position:fixed;

        top:0;
        left:0 !important;

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

        height:60px;

        padding:0 16px;

        z-index:9999;

        transition:none;
    }


    /* ===========================
       HEADER
    =========================== */

    .header-left{
        flex:1;
        min-width:0;

        gap:14px;
    }

    .header-right{
        display:flex;

        align-items:center;

        gap:8px;

        flex-shrink:0;
    }

    .menu-btn{
        flex-shrink:0;
    }


    /* ===========================
       SEARCH
    =========================== */

    .search-box{
        width:100%;

        min-width:0;

        height:40px;

        padding:0 12px;
    }

    .search-box input{
        width:100%;

        min-width:0;

        font-size:13px;
    }


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

    .icon-btn{
        width:38px;
        height:38px;

        flex-shrink:0;
    }

    .profile-img{
        width:38px;
        height:38px;

        margin-left:0;

        flex-shrink:0;
    }


    /* =====================================================
       MAIN CONTENT
       Left sidebar की कोई खाली जगह नहीं
    ===================================================== */

    .main-content,
    .main-content.expanded{
        width:100% !important;
        max-width:100% !important;

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

        margin-top:78px;

        padding:16px;

        transition:none;
    }

    .dashboard-wrapper{
        width:100%;
        max-width:100%;

        margin:0;
    }


    /* ===========================
       DASHBOARD LAYOUT
    =========================== */

    .dashboard-section{
        width:100%;

        display:flex;
        flex-direction:column;

        align-items:stretch;

        gap:30px;
    }

    .left-content,
    .right-sidebar{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .right-sidebar{
        order:2;
    }


    /* ===========================
       WELCOME SECTION
    =========================== */

    .dashboard-header{
        flex-direction:column;

        align-items:stretch;

        gap:20px;

        margin-top:0;
        margin-bottom:24px;
    }

    .welcome-section h1{
        margin-top:0;

        white-space:normal;

        font-size:26px;
        line-height:1.3;
    }

    .welcome-section p{
        max-width:100%;
    }


    /* ===========================
       AI / DATE / TIME
    =========================== */

    .date-time-wrapper{
        width:100%;

        display:flex;

        flex-wrap:wrap;

        gap:12px;
    }

    .ai-card,
    .mini-card{
        width:calc(50% - 6px);

        min-width:0;

        height:82px;

        padding:0 14px;

        gap:10px;
    }


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

    .stats-grid{
        width:100%;

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

        gap:12px;

        margin:24px 0;
    }

    .stats-card{
        width:100%;

        height:auto;
        min-height:112px;

        padding:15px;
    }


    /* ===========================
       TITLES
    =========================== */

    .section-title{
        gap:14px;

        margin-bottom:14px;
    }

    .section-title h2{
        white-space:normal;

        font-size:21px;
    }

    .section-title a{
        flex-shrink:0;

        white-space:nowrap;
    }


    /* ===========================
       COURSE CARDS
    =========================== */

    .course-cards{
        width:100%;

        display:grid;

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

        gap:14px;
    }

    .course-card{
        width:100%;

        height:auto;
        min-height:205px;

        padding:14px;
    }

    .course-card h3{
        white-space:normal;
    }


    /* ===========================
       RECOMMENDED
    =========================== */

    .recommended-section{
        margin-top:32px;
    }

    .recommended-cards{
        width:100%;

        display:grid;

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

        gap:12px;
    }

    .recommended-card{
        width:100%;

        height:auto;
        min-height:145px;
    }


    /* ===========================
       RECENTLY COMPLETED
    =========================== */

    .recent-box{
        width:100%;

        padding:18px;

        margin-top:30px;
    }


    /* ===========================
       PERFORMANCE
    =========================== */

    .dashboard-section-title{
        font-size:21px;
    }

    .growth-card{
        width:100%;
        max-width:100%;

        padding:18px;
    }

    #growthChart{
        width:100% !important;
        height:220px !important;
    }


    /* ===========================
       SPACE INTELLIGENCE
    =========================== */

    .space-intelligence{
        width:100% !important;
        max-width:100%;

        min-height:120px;

        margin:45px 0 28px;
    }

    .space-content h2{
        font-size:23px;

        letter-spacing:4px;

        text-align:center;
    }

    .space-cards,
    .space-row-two{
        width:100% !important;
        max-width:100%;

        display:flex;
        flex-direction:column;

        gap:16px;
    }

    .iss-card,
    .solar-card,
    .neo-card,
    .alien-card{
        width:100% !important;
        max-width:100%;

        flex:none;
    }

    .iss-info,
    .solar-info,
    .neo-info,
    .alien-info{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ===========================
       RIGHT SIDE
    =========================== */

    .ai-quick-help,
    .schedule-card,
    .future-tech-card,
    .test-card{
        width:100% !important;
        max-width:100%;
    }

    .ai-quick-help{
        margin-top:0;
    }

    .schedule-card,
    .future-tech-card,
    .test-card{
        margin-top:20px;
    }


    /* =====================================================
       THE FUTURE BEGINS WITH YOU

       HTML untouched.
       Mobile पर original section को dashboard के
       visual end की तरह रखा गया है.
    ===================================================== */

    .future-closing{
        width:100%;

        position:relative;

        display:flex;

        justify-content:center;

        align-items:center;

        margin:50px 0 0;

        padding:0 0 35px;

        overflow:hidden;

        order:10;
    }

    .future-card{
        width:100%;
        max-width:100%;

        min-height:270px;

        padding:30px 20px;

        border-radius:24px;
    }

    .future-glow{
        width:520px;

        max-width:none;
    }

    .future-divider{
        gap:12px;
    }

    .future-divider span{
        width:70px;
    }


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

    .footer{
        width:100%;
        max-width:100%;

        margin-top:0;

        transform:none !important;

        opacity:1 !important;
    }

    .footer.footer-visible{
        transform:none !important;

        opacity:1 !important;
    }


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

    .sidebar.footer-mode{
        transform:translateX(-110%) !important;

        opacity:0 !important;

        visibility:hidden !important;

        pointer-events:none !important;
    }

}



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

@media (max-width:480px){

    /* ===========================
       HEADER
    =========================== */

    .top-header,
    .top-header.expanded{
        padding:0 11px;
    }

    .main-content,
    .main-content.expanded{
        margin-top:74px;

        padding:12px;
    }

    .header-left{
        gap:9px;
    }

    .header-right{
        gap:5px;
    }

    .search-box{
        height:38px;

        padding:0 9px;
    }

    .search-box input{
        font-size:11px;
    }

    .icon-btn{
        width:34px;
        height:34px;
    }

    .profile-img{
        width:34px;
        height:34px;
    }


    /* ===========================
       FULL SIDEBAR DRAWER
    =========================== */

    .sidebar,
    .sidebar.collapsed{
        width:min(90vw, 340px) !important;

        padding:20px 16px;
    }


    /* ===========================
       WELCOME
    =========================== */

    .welcome-section h1{
        font-size:23px;
    }

    .welcome-section p{
        font-size:12px;
    }


    /* ===========================
       TOP CARDS
    =========================== */

    .date-time-wrapper{
        flex-direction:column;
    }

    .ai-card,
    .mini-card{
        width:100%;

        height:76px;
    }


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

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stats-card{
        min-height:96px;
    }


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

    .course-cards,
    .recommended-cards{
        grid-template-columns:1fr;
    }


    /* ===========================
       CHART
    =========================== */

    #growthChart{
        height:190px !important;
    }


    /* ===========================
       SPACE INTELLIGENCE
    =========================== */

    .space-content h2{
        font-size:19px;

        letter-spacing:2px;
    }

    .iss-info,
    .solar-info,
    .neo-info,
    .alien-info{
        grid-template-columns:1fr;
    }


    /* =====================================================
       THE FUTURE BEGINS WITH YOU
    ===================================================== */

    .future-closing{
        margin-top:40px;

        padding-bottom:28px;
    }

    .future-card{
        width:100%;

        min-height:auto;

        padding:28px 16px;

        border-radius:20px;
    }

    .future-card h2{
        font-size:25px;

        line-height:1.35;
    }

    .future-text{
        font-size:14px;

        line-height:1.7;
    }

    .future-subtext{
        font-size:13px;
    }

    .future-divider span{
        width:45px;
    }

}/* =========================================================
   FUTUREVERSE HOME - FINAL MOBILE RESPONSIVE CSS
   HTML में कोई बदलाव नहीं
========================================================= */


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

@media (max-width: 768px){

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

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    body{
        overflow-y:auto;
    }

    .container{
        display:block;
        width:100%;
        min-height:100vh;
    }


    /* =====================================================
       SIDEBAR
       DEFAULT = पूरी तरह hidden
    ===================================================== */

    .sidebar{
        position:fixed !important;

        top:0;
        left:0;

        width:min(86vw, 360px) !important;
        height:100dvh;
        min-height:100dvh;

        padding:22px 20px;

        z-index:30000;

        transform:translateX(-110%);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        overflow-y:auto;
        overflow-x:hidden;

        box-shadow:
            14px 0 45px rgba(15,23,42,.20);

        transition:
            transform .35s ease,
            opacity .25s ease,
            visibility .25s ease;
    }


    /* =====================================================
       MENU CLICK के बाद
       Existing JS .collapsed add करता है
       Mobile पर = FULL SIDEBAR OPEN
    ===================================================== */

    .sidebar.collapsed{
        width:min(86vw, 360px) !important;

        transform:translateX(0);

        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /* Desktop collapsed rules override */

    .sidebar.collapsed h2,
    .sidebar.collapsed p,
    .sidebar.collapsed span{
        display:initial !important;
    }

    .sidebar.collapsed .sidebar-logo{
        justify-content:flex-start !important;
    }

    .sidebar.collapsed .sidebar-menu a{
        justify-content:flex-start !important;
    }

    .sidebar.collapsed .share-toggle{
        justify-content:flex-start !important;

        margin-left:0 !important;
        padding-left:16px !important;
    }

    .sidebar.collapsed .share-toggle i{
        width:28px !important;

        margin:0 !important;

        text-align:center !important;
    }


    /* ===========================
       FULL SIDEBAR CONTENT
    =========================== */

    .sidebar-logo{
        justify-content:flex-start;
        margin-bottom:25px;
    }

    .sidebar-logo img{
        width:60px;
    }

    .sidebar-menu{
        gap:4px;
    }

    .sidebar-menu a{
        width:100%;

        padding:12px 16px;

        justify-content:flex-start;
    }

    .sidebar-version{
        width:100%;

        justify-content:flex-start;

        padding:12px 16px;
    }


    /* =====================================================
       TOP HEADER
       Sidebar बंद होने पर full width
    ===================================================== */

    .top-header,
    .top-header.expanded{
        position:fixed;

        top:0;
        left:0 !important;

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

        height:60px;

        padding:0 16px;

        z-index:9999;

        transition:none;
    }


    /* ===========================
       HEADER
    =========================== */

    .header-left{
        flex:1;
        min-width:0;

        gap:14px;
    }

    .header-right{
        display:flex;

        align-items:center;

        gap:8px;

        flex-shrink:0;
    }

    .menu-btn{
        flex-shrink:0;
    }


    /* ===========================
       SEARCH
    =========================== */

    .search-box{
        width:100%;

        min-width:0;

        height:40px;

        padding:0 12px;
    }

    .search-box input{
        width:100%;

        min-width:0;

        font-size:13px;
    }


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

    .icon-btn{
        width:38px;
        height:38px;

        flex-shrink:0;
    }

    .profile-img{
        width:38px;
        height:38px;

        margin-left:0;

        flex-shrink:0;
    }


    /* =====================================================
       MAIN CONTENT
       Left sidebar की कोई खाली जगह नहीं
    ===================================================== */

    .main-content,
    .main-content.expanded{
        width:100% !important;
        max-width:100% !important;

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

        margin-top:78px;

        padding:16px;

        transition:none;
    }

    .dashboard-wrapper{
        width:100%;
        max-width:100%;

        margin:0;
    }


    /* ===========================
       DASHBOARD LAYOUT
    =========================== */

    .dashboard-section{
        width:100%;

        display:flex;
        flex-direction:column;

        align-items:stretch;

        gap:30px;
    }

    .left-content,
    .right-sidebar{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .right-sidebar{
        order:2;
    }


    /* ===========================
       WELCOME SECTION
    =========================== */

    .dashboard-header{
        flex-direction:column;

        align-items:stretch;

        gap:20px;

        margin-top:0;
        margin-bottom:24px;
    }

    .welcome-section h1{
        margin-top:0;

        white-space:normal;

        font-size:26px;
        line-height:1.3;
    }

    .welcome-section p{
        max-width:100%;
    }


    /* ===========================
       AI / DATE / TIME
    =========================== */

    .date-time-wrapper{
        width:100%;

        display:flex;

        flex-wrap:wrap;

        gap:12px;
    }

    .ai-card,
    .mini-card{
        width:calc(50% - 6px);

        min-width:0;

        height:82px;

        padding:0 14px;

        gap:10px;
    }


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

    .stats-grid{
        width:100%;

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

        gap:12px;

        margin:24px 0;
    }

    .stats-card{
        width:100%;

        height:auto;
        min-height:112px;

        padding:15px;
    }


    /* ===========================
       TITLES
    =========================== */

    .section-title{
        gap:14px;

        margin-bottom:14px;
    }

    .section-title h2{
        white-space:normal;

        font-size:21px;
    }

    .section-title a{
        flex-shrink:0;

        white-space:nowrap;
    }


    /* ===========================
       COURSE CARDS
    =========================== */

    .course-cards{
        width:100%;

        display:grid;

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

        gap:14px;
    }

    .course-card{
        width:100%;

        height:auto;
        min-height:205px;

        padding:14px;
    }

    .course-card h3{
        white-space:normal;
    }


    /* ===========================
       RECOMMENDED
    =========================== */

    .recommended-section{
        margin-top:32px;
    }

    .recommended-cards{
        width:100%;

        display:grid;

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

        gap:12px;
    }

    .recommended-card{
        width:100%;

        height:auto;
        min-height:145px;
    }


    /* ===========================
       RECENTLY COMPLETED
    =========================== */

    .recent-box{
        width:100%;

        padding:18px;

        margin-top:30px;
    }


    /* ===========================
       PERFORMANCE
    =========================== */

    .dashboard-section-title{
        font-size:21px;
    }

    .growth-card{
        width:100%;
        max-width:100%;

        padding:18px;
    }

    #growthChart{
        width:100% !important;
        height:220px !important;
    }


    /* ===========================
       SPACE INTELLIGENCE
    =========================== */

    .space-intelligence{
        width:100% !important;
        max-width:100%;

        min-height:120px;

        margin:45px 0 28px;
    }

    .space-content h2{
        font-size:23px;

        letter-spacing:4px;

        text-align:center;
    }

    .space-cards,
    .space-row-two{
        width:100% !important;
        max-width:100%;

        display:flex;
        flex-direction:column;

        gap:16px;
    }

    .iss-card,
    .solar-card,
    .neo-card,
    .alien-card{
        width:100% !important;
        max-width:100%;

        flex:none;
    }

    .iss-info,
    .solar-info,
    .neo-info,
    .alien-info{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ===========================
       RIGHT SIDE
    =========================== */

    .ai-quick-help,
    .schedule-card,
    .future-tech-card,
    .test-card{
        width:100% !important;
        max-width:100%;
    }

    .ai-quick-help{
        margin-top:0;
    }

    .schedule-card,
    .future-tech-card,
    .test-card{
        margin-top:20px;
    }


    /* =====================================================
       THE FUTURE BEGINS WITH YOU

       HTML untouched.
       Mobile पर original section को dashboard के
       visual end की तरह रखा गया है.
    ===================================================== */

    .future-closing{
        width:100%;

        position:relative;

        display:flex;

        justify-content:center;

        align-items:center;

        margin:50px 0 0;

        padding:0 0 35px;

        overflow:hidden;

        order:10;
    }

    .future-card{
        width:100%;
        max-width:100%;

        min-height:270px;

        padding:30px 20px;

        border-radius:24px;
    }

    .future-glow{
        width:520px;

        max-width:none;
    }

    .future-divider{
        gap:12px;
    }

    .future-divider span{
        width:70px;
    }


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

    .footer{
        width:100%;
        max-width:100%;

        margin-top:0;

        transform:none !important;

        opacity:1 !important;
    }

    .footer.footer-visible{
        transform:none !important;

        opacity:1 !important;
    }


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

    .sidebar.footer-mode{
        transform:translateX(-110%) !important;

        opacity:0 !important;

        visibility:hidden !important;

        pointer-events:none !important;
    }

}



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

@media (max-width:480px){

    /* ===========================
       HEADER
    =========================== */

    .top-header,
    .top-header.expanded{
        padding:0 11px;
    }

    .main-content,
    .main-content.expanded{
        margin-top:74px;

        padding:12px;
    }

    .header-left{
        gap:9px;
    }

    .header-right{
        gap:5px;
    }

    .search-box{
        height:38px;

        padding:0 9px;
    }

    .search-box input{
        font-size:11px;
    }

    .icon-btn{
        width:34px;
        height:34px;
    }

    .profile-img{
        width:34px;
        height:34px;
    }


    /* ===========================
       FULL SIDEBAR DRAWER
    =========================== */

    .sidebar,
    .sidebar.collapsed{
        width:min(90vw, 340px) !important;

        padding:20px 16px;
    }


    /* ===========================
       WELCOME
    =========================== */

    .welcome-section h1{
        font-size:23px;
    }

    .welcome-section p{
        font-size:12px;
    }


    /* ===========================
       TOP CARDS
    =========================== */

    .date-time-wrapper{
        flex-direction:column;
    }

    .ai-card,
    .mini-card{
        width:100%;

        height:76px;
    }


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

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stats-card{
        min-height:96px;
    }


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

    .course-cards,
    .recommended-cards{
        grid-template-columns:1fr;
    }


    /* ===========================
       CHART
    =========================== */

    #growthChart{
        height:190px !important;
    }


    /* ===========================
       SPACE INTELLIGENCE
    =========================== */

    .space-content h2{
        font-size:19px;

        letter-spacing:2px;
    }

    .iss-info,
    .solar-info,
    .neo-info,
    .alien-info{
        grid-template-columns:1fr;
    }


    /* =====================================================
       THE FUTURE BEGINS WITH YOU
    ===================================================== */

    .future-closing{
        margin-top:40px;

        padding-bottom:28px;
    }

    .future-card{
        width:100%;

        min-height:auto;

        padding:28px 16px;

        border-radius:20px;
    }

    .future-card h2{
        font-size:25px;

        line-height:1.35;
    }

    .future-text{
        font-size:14px;

        line-height:1.7;
    }

    .future-subtext{
        font-size:13px;
    }

    .future-divider span{
        width:45px;
    }

}





/* =========================================================
   FUTUREVERSE FOOTER
   FINAL MOBILE DESIGN OVERRIDE
   Existing CSS को delete नहीं करना
========================================================= */

@media (max-width: 768px){

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

    .footer{
        width:100% !important;
        max-width:100% !important;

        padding:48px 18px 26px !important;

        margin-top:40px !important;

        text-align:center;

        overflow:hidden;
    }


    /* =========================
       FUTUREVERSE LOGO
       CENTER
    ========================= */

    .footer-logo{
        width:100%;

        display:flex !important;

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

        margin:0 auto 18px !important;
    }

    .footer-logo img{
        width:78px !important;
        height:78px !important;

        object-fit:contain;
    }


    /* =========================
       BRAND SECTION
    ========================= */

    .footer-brand{
        width:100%;

        max-width:430px;

        margin:0 auto 38px !important;
    }

    .footer-brand h2{
        font-size:24px !important;

        line-height:1.3;

        margin-bottom:9px !important;
    }

    .footer-tagline{
        font-size:15px !important;

        margin-bottom:17px !important;

        letter-spacing:.3px;
    }

    .footer-description{
        max-width:420px;

        margin:0 auto 18px !important;

        font-size:12px !important;

        line-height:1.75;
    }

    .footer-developer{
        font-size:13px !important;
    }


    /* =========================
       FOOTER CATEGORIES
       Compact 2 Column Layout
    ========================= */

    .footer-links{
        width:100%;

        display:grid !important;

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

        gap:34px 14px !important;

        margin:0 auto 38px !important;
    }

    .footer-column{
        min-width:0;
    }

    .footer-column h3{
        font-size:17px !important;

        margin-bottom:15px !important;
    }

    .footer-column h3::after{
        left:50% !important;

        transform:translateX(-50%);

        width:38px !important;

        bottom:-6px !important;
    }

    .footer-column ul li{
        margin-bottom:10px !important;
    }


    /* =========================
       TAG / LINK SIZE
       छोटे लेकिन readable
    ========================= */

    .footer-column ul li a{
        display:inline-block;

        font-size:12px !important;

        line-height:1.35;

        white-space:normal;
    }


    /* =========================
       FOLLOW FUTUREVERSE
    ========================= */

    .follow-title{
        font-size:20px !important;

        margin:8px 0 18px !important;

        line-height:1.3;
    }


    /* =========================
       ALL 6 SOCIAL ICONS
       ONE SINGLE LINE
    ========================= */

    .footer-social{
        width:100%;

        display:flex !important;

        flex-wrap:nowrap !important;

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

        gap:clamp(5px, 2vw, 10px) !important;

        margin:0 auto 28px !important;

        padding:0 !important;
    }

    .footer-social a{
        width:clamp(38px, 10vw, 46px) !important;
        height:clamp(38px, 10vw, 46px) !important;

        min-width:0;

        flex:0 1 auto;

        font-size:clamp(15px, 4vw, 19px) !important;

        border-radius:50%;

        transform:none;
    }


    /* =========================
       EXTRA FUTUREVERSE LINKS
       Compact Tags
    ========================= */

    .footer-extra-links{
        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:9px !important;

        margin:0 auto !important;

        padding:0 4px;
    }

    .footer-extra-links a{
        font-size:12px !important;

        line-height:1.45;

        white-space:normal;
    }


    /* =========================
       COPYRIGHT
    ========================= */

    .footer-bottom{
        width:100%;

        margin-top:26px;

        padding-top:18px !important;

        font-size:11px !important;

        line-height:1.5;

        letter-spacing:.2px;

        white-space:normal;
    }

}



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

@media (max-width: 480px){

    .footer{
        padding:40px 14px 22px !important;
    }


    /* Center Logo */

    .footer-logo{
        margin-bottom:15px !important;
    }

    .footer-logo img{
        width:70px !important;
        height:70px !important;
    }


    /* Brand */

    .footer-brand{
        margin-bottom:32px !important;
    }

    .footer-brand h2{
        font-size:21px !important;
    }

    .footer-tagline{
        font-size:14px !important;
    }

    .footer-description{
        font-size:11px !important;
        line-height:1.7;
    }

    .footer-developer{
        font-size:12px !important;
    }


    /* Categories */

    .footer-links{
        gap:30px 10px !important;

        margin-bottom:34px !important;
    }

    .footer-column h3{
        font-size:15px !important;
    }

    .footer-column ul li{
        margin-bottom:9px !important;
    }

    .footer-column ul li a{
        font-size:11px !important;
    }


    /* Follow */

    .follow-title{
        font-size:18px !important;

        margin-bottom:15px !important;
    }


    /* EXACTLY 6 ICONS IN ONE LINE */

    .footer-social{
        gap:5px !important;

        flex-wrap:nowrap !important;
    }

    .footer-social a{
        width:40px !important;
        height:40px !important;

        font-size:16px !important;
    }


    /* Small Tags */

    .footer-extra-links{
        gap:8px !important;
    }

    .footer-extra-links a{
        font-size:11px !important;
    }


    /* Copyright */

    .footer-bottom{
        margin-top:22px;

        padding-top:16px !important;

        font-size:10.5px !important;
    }

}























/* =====================================================
   SPACE INTELLIGENCE
   MOBILE UNIFIED 2x2 GRID OVERRIDE
   Existing CSS को नहीं हटाना
===================================================== */

@media (max-width: 768px){

    /* ==========================================
       ISS + SOLAR + ALIEN
       SAME INTERNAL LAYOUT AS NEAR EARTH
    ========================================== */

    .iss-info,
    .solar-info,
    .alien-info{

        display:grid !important;

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

        gap:12px !important;

        width:100%;

    }


    /* ==========================================
       SAME CARD PADDING
    ========================================== */

    .iss-card,
    .solar-card,
    .alien-card{

        width:100% !important;

        max-width:none !important;

        padding:20px !important;

        box-sizing:border-box;

    }


    /* ==========================================
       SAME HEADER SPACING
    ========================================== */

    .iss-header,
    .solar-header,
    .alien-header{

        display:flex !important;

        align-items:center !important;

        gap:10px !important;

        margin-bottom:18px !important;

    }


    /* ==========================================
       SAME INFO BOX SIZE
    ========================================== */

    .iss-item,
    .solar-item,
    .alien-item{

        min-width:0 !important;

        padding:14px !important;

        box-sizing:border-box;

        border-radius:12px;

    }


    /* ==========================================
       PREVENT TEXT OVERFLOW
    ========================================== */

    .iss-item p,
    .solar-item p,
    .alien-item p{

        font-size:13px !important;

        line-height:1.35;

        overflow-wrap:anywhere;

    }


    .iss-item span,
    .solar-item span,
    .alien-item span{

        display:block;

        font-size:15px !important;

        line-height:1.35;

        word-break:break-word;

        overflow-wrap:anywhere;

    }


    /* ==========================================
       STATUS
    ========================================== */

    .status-active,
    .solar-active,
    .alien-active{

        display:flex !important;

        align-items:center;

        gap:8px;

        margin-top:16px !important;

    }

}


/* =====================================================
   SMALL MOBILE
   Extra safety for narrow screens
===================================================== */

@media (max-width: 420px){

    .iss-card,
    .solar-card,
    .alien-card{

        padding:18px !important;

    }


    .iss-info,
    .solar-info,
    .alien-info{

        gap:10px !important;

    }


    .iss-item,
    .solar-item,
    .alien-item{

        padding:12px !important;

    }


    .iss-item p,
    .solar-item p,
    .alien-item p{

        font-size:12px !important;

    }


    .iss-item span,
    .solar-item span,
    .alien-item span{

        font-size:14px !important;

    }

}


/* Your Future, Our Mission
   FutureVerse के नीचे से start होगा */

@media (max-width:768px){

    .sidebar-logo-text span,
    .sidebar-brand span,
    .logo-text span{

        display:block;

        margin-left:0 !important;

        margin-top:6px;

    }

}






















@media (max-width:768px){

    .sidebar.collapsed .sidebar-logo h2,
    .sidebar.collapsed .sidebar-logo p{

        display:block !important;

    }

    .sidebar.collapsed .sidebar-logo p{

        margin-left:0 !important;
        margin-top:4px !important;

    }

}













/* =====================================================
   MOBILE HEADER - FINAL ICON SIZE & PERFECT CENTER
===================================================== */

@media (max-width:768px){

    /* सभी RIGHT SIDE ITEMS एक ही CENTER LINE में */
    .top-header .header-right{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:6px !important;

        height:60px !important;
    }


    /* ==========================================
       NOTIFICATION + DARK MODE
       Outer white background भी छोटा
    ========================================== */

    .top-header .header-right .icon-btn{

        width:26px !important;
        height:26px !important;

        min-width:26px !important;
        min-height:26px !important;

        flex:0 0 32px !important;

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

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

        align-self:center !important;

        border-radius:50px !important;

        transform:none !important;
    }


    /* Bell + Moon icon थोड़ा छोटा */
    .top-header .header-right .icon-btn i,
    .top-header .header-right .icon-btn svg{

        font-size:12px !important;

        width:15px !important;
        height:15px !important;
    }


    /* ==========================================
       PROFILE OUTER CIRCLE बड़ा
       PNG की actual size को बड़ा नहीं करेगा
    ========================================== */

   /* ==========================================
   HOME PROFILE INITIAL AVATAR
========================================== */

.top-header .header-right .profile-img{

    width:34px !important;
    height:34px !important;

    min-width:34px !important;
    min-height:34px !important;

    flex:0 0 34px !important;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box !important;

    border-radius:50% !important;

    background:#000000 !important;

    border:2px solid #6366F1 !important;

    object-fit:cover !important;

    align-self:center !important;

    transform:none !important;

}


    /* Search और first icon के बीच का gap थोड़ा कम */
    .top-header .header-left{
        margin-right:2px !important;
    }

}






/* ==========================================
   FINAL HOME PROFILE AVATAR — FIXED
========================================== */

#homeProfileLink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    height: 40px !important;

    flex-shrink: 0 !important;

    text-decoration: none !important;
    color: inherit !important;

    border: none !important;
    outline: none !important;
}


/* ==========================================
   HOME PROFILE IMAGE / INITIALS
========================================== */

#homeProfileImage {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    flex: 0 0 40px !important;

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

    box-sizing: border-box !important;

    border-radius: 50% !important;

    border: none !important;

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

    overflow: hidden !important;

    background-color: #111827 !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-align: center !important;

    text-decoration: none !important;

    user-select: none !important;
    -webkit-user-select: none !important;
}


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

@media (max-width: 768px) {

    #homeProfileLink {
        width: 40px !important;
        height: 40px !important;
    }

    #homeProfileImage {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        flex: 0 0 40px !important;

        font-size: 14px !important;
    }
}









































































/* =========================================================
   FUTUREVERSE — PREMIUM DARK MODE
   Controlled by body[data-theme="dark"]
========================================================= */

body[data-theme="dark"] {

    background: #0b1020;
    color: #f8fafc;

    transition:
        background-color .35s ease,
        color .35s ease;
}


/* =========================
   SIDEBAR
========================= */

body[data-theme="dark"] .sidebar {

    background: #111827;

    border-right-color: #202a3d;

    box-shadow:
        10px 0 35px rgba(0,0,0,.25);
}

body[data-theme="dark"] .sidebar-logo h2 {
    color: #f8fafc;
}

body[data-theme="dark"] .sidebar-logo p {
    color: #94a3b8;
}

body[data-theme="dark"] .sidebar-menu a {
    color: #e5e7eb;
}

body[data-theme="dark"] .sidebar-menu a i {
    color: #cbd5e1;
}

body[data-theme="dark"] .sidebar-menu a:hover {
    background: #1b2540;
}

body[data-theme="dark"] .sidebar-menu .active {
    background: #1d2550;
    color: #8b8cff;
}

body[data-theme="dark"] .sidebar-menu .active i {
    color: #8b8cff;
}

body[data-theme="dark"] .sidebar-version {
    border-top-color: #263044;
    border-bottom-color: #263044;
}

body[data-theme="dark"] .version-left {
    color: #94a3b8;
}

body[data-theme="dark"] .version-badge {
    background: #1d2550;
    color: #9b98ff;
}


/* =========================
   TOP HEADER
========================= */

body[data-theme="dark"] .top-header {

    background: #111827;

    border-bottom-color: #202a3d;

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

body[data-theme="dark"] .menu-btn span {
    background: #cbd5e1;
}

body[data-theme="dark"] .menu-btn:hover span {
    background: #8b8cff;
}


/* =========================
   SEARCH
========================= */

body[data-theme="dark"] .search-box {

    background: #151d2e;

    border-color: #2a354b;

    box-shadow:
        0 4px 14px rgba(0,0,0,.18);
}

body[data-theme="dark"] .search-box:hover {
    border-color: #3d4a66;
}

body[data-theme="dark"] .search-box input {
    color: #f8fafc;
}

body[data-theme="dark"] .search-box input::placeholder {
    color: #64748b;
}

body[data-theme="dark"] .search-box i {
    color: #94a3b8;
}


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

body[data-theme="dark"] .icon-btn {

    background: #151d2e;

    color: #cbd5e1;

    box-shadow:
        0 4px 14px rgba(0,0,0,.18);
}

body[data-theme="dark"] .icon-btn:hover i {
    color: #9b98ff;
}


/* =========================
   WELCOME
========================= */

body[data-theme="dark"] .welcome-section h1 {
    color: #f8fafc;
}

body[data-theme="dark"] .welcome-section p {
    color: #94a3b8;
}


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

body[data-theme="dark"] .ai-card,
body[data-theme="dark"] .mini-card,
body[data-theme="dark"] .stats-card,
body[data-theme="dark"] .course-card,
body[data-theme="dark"] .recommended-card,
body[data-theme="dark"] .recent-box,
body[data-theme="dark"] .test-card,
body[data-theme="dark"] .growth-card,
body[data-theme="dark"] .future-tech-card,
body[data-theme="dark"] .ai-quick-help,
body[data-theme="dark"] .schedule-card,
body[data-theme="dark"] .iss-card,
body[data-theme="dark"] .solar-card,
body[data-theme="dark"] .near-card,
body[data-theme="dark"] .alien-card {

    background: #111827;

    border-color: #202a3d;

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


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

body[data-theme="dark"] .ai-card:hover,
body[data-theme="dark"] .mini-card:hover,
body[data-theme="dark"] .stats-card:hover,
body[data-theme="dark"] .course-card:hover,
body[data-theme="dark"] .recommended-card:hover,
body[data-theme="dark"] .recent-box:hover,
body[data-theme="dark"] .test-card:hover,
body[data-theme="dark"] .growth-card:hover,
body[data-theme="dark"] .future-tech-card:hover,
body[data-theme="dark"] .ai-quick-help:hover,
body[data-theme="dark"] .schedule-card:hover,
body[data-theme="dark"] .iss-card:hover,
body[data-theme="dark"] .solar-card:hover,
body[data-theme="dark"] .near-card:hover,
body[data-theme="dark"] .alien-card:hover {

    border-color: #35415c;

    box-shadow:
        0 16px 38px rgba(0,0,0,.30);
}


/* =========================
   TOP CARDS
========================= */

body[data-theme="dark"] .ai-card h3,
body[data-theme="dark"] .mini-card h3 {

    color: #f8fafc;
}

body[data-theme="dark"] .ai-card p,
body[data-theme="dark"] .mini-card p {

    color: #94a3b8;
}

body[data-theme="dark"] .ai-icon,
body[data-theme="dark"] .mini-card i {

    background: #1c2542;
    color: #8b8cff;
}


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

body[data-theme="dark"] .stats-text h2 {
    color: #ffffff;
}

body[data-theme="dark"] .stats-text h4 {
    color: #e5e7eb;
}

body[data-theme="dark"] .stats-text p {
    color: #94a3b8;
}


/* =========================
   COURSE CARDS
========================= */

body[data-theme="dark"] .course-card h3 {
    color: #f8fafc;
}

body[data-theme="dark"] .course-card p {
    color: #94a3b8;
}

body[data-theme="dark"] .course-tag {
    color: #64748b;
}

body[data-theme="dark"] .progress-bar {
    background: #273247;
}

body[data-theme="dark"] .progress-percent {
    color: #f1f5f9;
}

body[data-theme="dark"] .course-card button {
    background: #1b2437;
    color: #dbeafe;
}

body[data-theme="dark"] .course-card button:hover {
    background: #252f4d;
    color: #a5b4fc;
}


/* =========================
   SECTION TITLES
========================= */

body[data-theme="dark"] .section-title h2,
body[data-theme="dark"] .dashboard-section-title {

    color: #f8fafc;
}

body[data-theme="dark"] .section-title a {
    color: #8b8cff;
}


/* =========================
   RECOMMENDED
========================= */

body[data-theme="dark"] .recommended-card h3 {
    color: #f8fafc;
}

body[data-theme="dark"] .recommended-card p {
    color: #94a3b8;
}


/* =========================
   RECENTLY COMPLETED
========================= */

body[data-theme="dark"] .recent-text h3 {
    color: #f8fafc;
}

body[data-theme="dark"] .recent-text p {
    color: #94a3b8;
}


/* =========================
   AI QUICK HELP
========================= */

body[data-theme="dark"] .ai-header h2 {
    color: #f8fafc;
}

body[data-theme="dark"] .ai-header p {
    color: #94a3b8;
}

body[data-theme="dark"] .ask-ai-btn {
    background: #1b2437;
    color: #e2e8f0;
}

body[data-theme="dark"] .ask-ai-btn:hover {
    background: #252f4d;
    color: #a5b4fc;
}


/* =========================
   SCHEDULE
========================= */

body[data-theme="dark"] .schedule-header h2,
body[data-theme="dark"] .schedule-info h3 {

    color: #f8fafc;
}

body[data-theme="dark"] .schedule-header i {
    color: #64748b;
}

body[data-theme="dark"] .schedule-info p {
    color: #94a3b8;
}

body[data-theme="dark"] .schedule-btn {
    background: #1c2542;
    color: #a5b4fc;
}


/* =========================
   FUTURE TECHNOLOGIES
========================= */

body[data-theme="dark"] .future-tech-card h3 {
    color: #f8fafc;
}

body[data-theme="dark"] .tech-item {
    background: #151e30;
    border-color: #273249;
    color: #dbe4f0;
}

body[data-theme="dark"] .tech-item:hover {
    background: #1d2940;
    border-color: #35415c;
}


/* =========================
   TEST CENTER
========================= */

body[data-theme="dark"] .test-card h3 {
    color: #f8fafc;
}

body[data-theme="dark"] .test-card p {
    color: #94a3b8;
}

body[data-theme="dark"] .test-item {
    background: #151e30;
    border-color: #273249;
}

body[data-theme="dark"] .test-item h4 {
    color: #f1f5f9;
}

body[data-theme="dark"] .test-item span {
    color: #94a3b8;
}


/* =========================
   PERFORMANCE
========================= */

body[data-theme="dark"] .growth-top h2 {
    color: #f8fafc;
}

body[data-theme="dark"] .growth-top p {
    color: #94a3b8;
}

body[data-theme="dark"] .growth-bottom {
    border-top-color: #273249;
}

body[data-theme="dark"] .growth-bottom h3 {
    color: #f8fafc;
}

body[data-theme="dark"] .growth-bottom span {
    color: #94a3b8;
}


/* =========================================================
   SPACE INTELLIGENCE
========================================================= */

body[data-theme="dark"] .space-intelligence {

    background: #0f172a;

    box-shadow:
        0 12px 35px rgba(0,0,0,.35);
}

body[data-theme="dark"] .iss-item,
body[data-theme="dark"] .solar-item,
body[data-theme="dark"] .near-item,
body[data-theme="dark"] .alien-item {

    background: #151e30;

    border-color: #273249;
}

body[data-theme="dark"] .iss-item p,
body[data-theme="dark"] .solar-item p,
body[data-theme="dark"] .near-item p,
body[data-theme="dark"] .alien-item p {

    color: #94a3b8;
}

body[data-theme="dark"] .iss-item span,
body[data-theme="dark"] .solar-item span,
body[data-theme="dark"] .near-item span,
body[data-theme="dark"] .alien-item span {

    color: #f1f5f9;
}


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

body,
.sidebar,
.top-header,
.search-box,
.icon-btn,
.ai-card,
.mini-card,
.stats-card,
.course-card,
.recommended-card,
.recent-box,
.test-card,
.growth-card,
.future-tech-card,
.ai-quick-help,
.schedule-card,
.iss-card,
.solar-card,
.near-card,
.alien-card {

    transition:
        background-color .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}



/* =========================================================
   FUTUREVERSE CLOSING CARD — DARK MODE
========================================================= */

body[data-theme="dark"] .future-card {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(99, 102, 241, 0.16),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #111827 0%,
            #0f172a 55%,
            #0b1222 100%
        );

    border-color: #293653;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

}


/* =========================
   MAIN HEADING
========================= */

body[data-theme="dark"] .future-card h2 {

    color: #f8fafc;

    text-shadow:
        0 0 20px rgba(139, 92, 246, 0.20);
}


/* =========================
   DIVIDER
========================= */

body[data-theme="dark"] .future-divider span {

    background:
        linear-gradient(
            90deg,
            transparent,
            #59657e,
            transparent
        );
}


body[data-theme="dark"] .divider-star {

    color: #f5c76b;

    text-shadow:
        0 0 12px rgba(245, 199, 107, 0.35);
}


/* =========================
   MAIN TEXT
========================= */

body[data-theme="dark"] .future-text {

    color: #cbd5e1;
}


/* =========================
   SUBTEXT
========================= */

body[data-theme="dark"] .future-subtext {

    color: #94a3b8;
}


body[data-theme="dark"] .future-subtext strong {

    color: #a5b4fc;

    text-shadow:
        0 0 12px rgba(129, 140, 248, 0.20);
}


/* =========================
   MOTTO
========================= */

body[data-theme="dark"] .future-motto {

    color: #e2e8f0;

    background:
        rgba(99, 102, 241, 0.08);

    border-color:
        rgba(129, 140, 248, 0.18);
}


/* =========================
   FUTUREVERSE BUTTON
========================= */

body[data-theme="dark"] .future-btn {

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #6366f1
        );

    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 8px 24px
        rgba(79, 70, 229, 0.28);
}


body[data-theme="dark"] .future-btn:hover {

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #7c3aed
        );

    box-shadow:
        0 12px 30px
        rgba(99, 102, 241, 0.36);
}


/* =========================
   STARS
========================= */

body[data-theme="dark"] .future-stars span {

    background: #ffffff;

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.45);
}


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

body[data-theme="dark"] .future-glow {

    opacity: 0.75;

    filter:
        blur(35px)
        saturate(1.25);
}

/* =========================================
   FUTUREVERSE — CLEAN CSS LOGO
========================================= */

.fv-logo {
    width: 58px;
    height: 42px;

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

    flex-shrink: 0;

    background: transparent;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-style: italic;

    line-height: 1;
}


/* =========================================
   F
========================================= */

.fv-f {
    display: block;

    font-size: 34px;
    font-weight: 900;

    color: #3155ff;

    transform: skewX(-8deg);

    margin: 0;

    letter-spacing: -3px;
}


/* =========================================
   V
========================================= */

.fv-v {
    display: block;

    font-size: 36px;
    font-weight: 900;

    color: #08b9ed;

    transform: skewX(-8deg);

    margin-left: -2px;

    letter-spacing: -4px;
}


/* =========================================
   SIDEBAR SIZE
========================================= */

.sidebar-logo .fv-logo {
    width: 58px;
    height: 42px;

    margin-right: 8px;
}


/* =========================================
   DARK MODE
========================================= */

body[data-theme="dark"] .fv-f {
    color: #4d63ff;

    text-shadow:
        0 0 8px rgba(77, 99, 255, 0.22);
}


body[data-theme="dark"] .fv-v {
    color: #12c8f2;

    text-shadow:
        0 0 8px rgba(18, 200, 242, 0.22);
}





/* =====================================================
   MOBILE SIDEBAR — CLOSE ARROW
   Desktop पर बिल्कुल hidden
===================================================== */

.sidebar-close-btn{
    display:none !important;
}


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

@media (max-width:768px){

    /* Sidebar की existing smooth animation */
    .sidebar{
        transition:
            transform .35s cubic-bezier(.22,1,.36,1),
            opacity .25s ease,
            visibility .25s ease;
    }


    /* Close Arrow — शुरुआत में hidden */
    .sidebar-close-btn{

        position:absolute;

        top:18px;
        right:14px;

        width:38px;
        height:38px;

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

        padding:0;
        margin:0;

        border:0;
        border-radius:50%;

        background:#f4f2ff;
        color:#6c63ff;

        font-size:16px;

        cursor:pointer;

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transform:translateX(12px) scale(.85);

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .30s cubic-bezier(.22,1,.36,1),
            background .2s ease;
    }


    /* Sidebar खुलने के बाद Arrow आएगा */
    .sidebar.collapsed .sidebar-close-btn{

        opacity:1;
        visibility:visible;
        pointer-events:auto;

        transform:translateX(0) scale(1);

        transition-delay:.12s;
    }


    /* Arrow पर touch/hover */
    .sidebar-close-btn:hover{
        background:#6c63ff;
        color:#ffffff;
    }


    /* Press animation */
    .sidebar-close-btn:active{
        transform:scale(.90);
    }

}


































































/* =========================================================
   FUTUREVERSE — LEARNING TIME POPUP
   ========================================================= */

.learning-time-overlay {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

    padding: 20px;

    background: rgba(5, 8, 20, 0.72);

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

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 99999;
}


/* =========================================================
   OPEN STATE
   ========================================================= */

.learning-time-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   POPUP
   ========================================================= */

.learning-time-popup {

    position: relative;

    width: min(100%, 430px);

    padding: 26px;

    border-radius: 24px;

    background: rgba(20, 24, 42, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03);

    transform: translateY(20px) scale(0.96);

    transition:
        transform 0.3s ease;

    overflow: hidden;
}


.learning-time-overlay.active
.learning-time-popup {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   TOP GLOW
   ========================================================= */

.learning-time-popup::before {

    content: "";

    position: absolute;

    top: -90px;
    left: 50%;

    width: 220px;
    height: 160px;

    transform: translateX(-50%);

    background: rgba(90, 110, 255, 0.18);

    filter: blur(55px);

    pointer-events: none;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.learning-popup-close {

    position: absolute;

    top: 16px;
    right: 16px;

    width: 36px;
    height: 36px;

    display: flex;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

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

    color: rgba(255, 255, 255, 0.75);

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.learning-popup-close {

    position: absolute;

    top: 16px;
    right: 16px;

    width: 36px;
    height: 36px;

    display: flex;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

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

    color: rgba(255, 255, 255, 0.75);

    cursor: pointer;

    z-index: 20;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;

    transform: none;

    pointer-events: auto;
}


/* X BUTTON HOVER */

.learning-popup-close:hover {

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

    color: #ffffff;

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

    transform: none;

}


/* X BUTTON ACTIVE */

.learning-popup-close:active {

    transform: scale(0.94);

}


/* =========================================================
   HEADER
   ========================================================= */

.learning-popup-header {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    padding-right: 40px;

    margin-bottom: 25px;
}


.learning-popup-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 15px;

    background: rgba(99, 102, 241, 0.14);

    border: 1px solid rgba(99, 102, 241, 0.22);

    color: #8b8fff;

    font-size: 19px;

    box-shadow:
        0 8px 25px rgba(99, 102, 241, 0.10);
}


.learning-popup-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: -0.3px;
}


.learning-popup-header p {

    margin: 4px 0 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   TIME LIST
   ========================================================= */

.learning-time-list {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* =========================================================
   TIME ROW
   ========================================================= */

.learning-time-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 58px;

    padding: 0 15px;

    border-radius: 15px;

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

    border: 1px solid rgba(255, 255, 255, 0.06);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.learning-time-row:hover {

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

    transform: translateX(2px);

}


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

.learning-course-name {

    display: flex;

    align-items: center;

    gap: 10px;

    color: rgba(255, 255, 255, 0.86);

    font-size: 13px;

    font-weight: 500;
}


.learning-dot {

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    box-shadow:
        0 0 10px currentColor;
}


.html-dot {

    color: #ff8a65;

    background: currentColor;
}


.css-dot {

    color: #42a5f5;

    background: currentColor;
}


.js-dot {

    color: #fdd835;

    background: currentColor;
}


/* =========================================================
   TIME VALUE
   ========================================================= */

.learning-time-row strong {

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   TOTAL
   ========================================================= */

.learning-time-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 18px;

    padding: 18px 15px 4px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.learning-time-total span {

    color: rgba(255, 255, 255, 0.58);

    font-size: 13px;

    font-weight: 500;
}


.learning-time-total strong {

    color: #ffffff;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: -0.2px;
}


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

@media (max-width: 480px) {

    .learning-time-overlay {

        padding: 16px;

    }


    .learning-time-popup {

        padding: 22px;

        border-radius: 21px;

    }


    .learning-popup-header {

        margin-bottom: 21px;

    }


    .learning-popup-icon {

        width: 44px;
        height: 44px;

        border-radius: 13px;

        font-size: 17px;

    }


    .learning-popup-header h2 {

        font-size: 19px;

    }


    .learning-popup-header p {

        font-size: 11px;

    }


    .learning-time-row {

        min-height: 54px;

        padding: 0 13px;

    }


    .learning-course-name {

        font-size: 12px;

    }


    .learning-time-row strong {

        font-size: 13px;

    }


    .learning-time-total {

        padding-top: 16px;

    }

}
















/* =========================================================
   FUTUREVERSE — SEARCH HIGHLIGHT
========================================================= */

.search-highlight {

    position: relative;

    border-radius: 18px;

    animation: futureVerseSearchHighlight 2.8s ease;

    z-index: 5;
}


.search-highlight::after {

    content: "";

    position: absolute;

    inset: -6px;

    border: 2px solid #6c63ff;

    border-radius: 22px;

    box-shadow:
        0 0 0 4px rgba(108, 99, 255, 0.10),
        0 0 30px rgba(108, 99, 255, 0.28);

    pointer-events: none;

    animation: searchHighlightGlow 2.8s ease;

}


@keyframes futureVerseSearchHighlight {

    0% {

        transform: scale(1);

    }

    15% {

        transform: scale(1.015);

    }

    35% {

        transform: scale(1);

    }

    100% {

        transform: scale(1);

    }

}


@keyframes searchHighlightGlow {

    0% {

        opacity: 0;

        transform: scale(0.97);

    }

    15% {

        opacity: 1;

        transform: scale(1);

    }

    60% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform: scale(1.02);

    }

}




















































/* =========================================================
   FUTUREVERSE — PREMIUM SMART MOTION SYSTEM
========================================================= */


/* =========================================================
   1. RECOMMENDED CARDS — PREMIUM MOTION
========================================================= */

.recommended-cards {
    position: relative;
    overflow: hidden;
    scroll-behavior: smooth;
}


/* Auto-moving card */

.recommended-card.fv-auto-motion {
    will-change: transform;
}


/* =========================================================
   2. PREMIUM CARD GLOW
========================================================= */

.recommended-card.fv-motion-active {
    box-shadow:
        0 16px 40px rgba(108, 99, 255, 0.14);
}


/* =========================================================
   3. SCROLL REVEAL
========================================================= */

.fv-reveal {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(5px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,1,.36,1),
        filter 0.8s ease;
}


.fv-reveal.fv-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


/* Slightly different reveal for cards */

.fv-reveal-card {
    opacity: 0;
    transform:
        translateY(28px)
        scale(.98);

    filter: blur(4px);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,1,.36,1),
        filter .65s ease;
}


.fv-reveal-card.fv-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   4. STAGGERED CARD REVEAL
========================================================= */

.fv-reveal-card:nth-child(1) {
    transition-delay: .05s;
}

.fv-reveal-card:nth-child(2) {
    transition-delay: .12s;
}

.fv-reveal-card:nth-child(3) {
    transition-delay: .19s;
}

.fv-reveal-card:nth-child(4) {
    transition-delay: .26s;
}


/* =========================================================
   5. RESPECT REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-reveal,
    .fv-reveal-card {

        opacity: 1;

        transform: none;

        filter: none;

        transition: none;

    }

}

.recommended-cards {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.recommended-cards::-webkit-scrollbar {
    display: none;
}

























































/* =========================================
   DYNAMIC PROFILE INITIALS
   ========================================= */

.profile-initials {
    width: 40px;
    height: 40px;

    min-width: 40px;
    min-height: 40px;

    border-radius: 50%;

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

    overflow: hidden;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;

    text-align: center;

    box-sizing: border-box;

    background: #111827;
    color: #ffffff;

    flex-shrink: 0;

    user-select: none;
    -webkit-user-select: none;
}

/* Profile link ka size avatar ke barabar */
#homeProfileLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    text-decoration: none;
    border: none;
    outline: none;
}

/* Mobile par bhi same size */
@media (max-width: 600px) {

    .profile-initials {
        width: 40px;
        height: 40px;

        min-width: 40px;
        min-height: 40px;

        font-size: 14px;
    }

    #homeProfileLink {
        width: 40px;
        height: 40px;
    }
}