/*Dashboard css Start*/
html, body {
    /*height: 100%;*/
    /*overflow: hidden;*/
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f2f5f9;
    color: #000000;
}

.main-container {
    display: flex;
    height: calc(100vh - 72px);
    width: 100vw;
    /*overflow: hidden;*/
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    width: 100%;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /*overflow: hidden;*/
}

.main-wrapper.sidebar-collapsed {
    margin-left: 72px;
}

.main-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    background: #f2f5f9;
    width: 100%;
}

.page-content {
    max-width: 1400px;
    margin: 0 auto;
}

/* Home Page */
.home-page {
    text-align: center;
    padding: 100px 20px;
}

.hero-text h1 {
    font-size: 64px;
    font-weight: 800;
    /* background: linear-gradient(135deg, #015FC9, #2F80ED, #5FA8FF); */
    background: linear-gradient(135deg, #0147A6, #015FC9, #4DA3FF);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 32px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 24px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #4b5563;
    max-width: 700px;
    margin: 0 auto 32px;
}

.cta-button {
    background: linear-gradient(135deg, #0147A6, #015FC9);
    color: white;
    border: none;
    padding: 14px 40px;
    font-size: 18px;
    font-weight: 600;
    /*border-radius: 50px;*/
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(53, 154, 255, 0.4);;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(53, 154, 255, 0.4);
}

/* Channels Page */
.channels-page h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 24px;
}

.channels-page p {
    font-size: 18px;
    color: #4b5563;
    max-width: 800px;
    margin: 0 auto 40px;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.video-card {
    background: #1a1a1a;
    /*border-radius: 16px;*/
    overflow: hidden;
    transition: transform 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #333;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

.video-thumbnail {
    width: 100%;
    height: 200px;
    background: linear-gradient(45deg, #333 0%, #555 50%, #777 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.video-info {
    padding: 10px;
}

.video-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.channel-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #015FC9, #4DA3FF);
    flex-shrink: 0;
    margin-top:28px;
}

.channel-meta {
    flex: 1;
    min-width: 0;
}

.channel-name {
    font-weight: 600;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .sidebar.collapsed {
        width: 72px;
    }
    .main-wrapper.sidebar-collapsed {
        margin-left: 72px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -240px;
        z-index: 200;
        height: calc(100vh - 72px);
    }
    .sidebar.collapsed {
        left: 0;
        width: 240px;
    }
    .main-wrapper.sidebar-collapsed {
        margin-left: 0;
    }
    .main-content {
        padding: 20px 16px;
    }
    .hero-text h1 {
        font-size: 48px;
    }
}

/*Dashboard css End*/

/*videos css start*/

    .main-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    background: #f2f5f9;
    width: 100%;
}

/*.demo-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));*/
/*    gap: 24px;*/
/*    max-width: 1400px;*/
/*    margin: 0 auto;*/
/*}*/

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 360px));
    gap: 24px;
    /*justify-content: center;*/
    max-width: 1600px;
    margin: 0 auto;
}

.video-card {
    background: #1a1a1a;
    /*border-radius: 16px;*/
    overflow: hidden;
    transition: transform 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid black;
}

.video-card:hover {
    transform: translateY(-4px);
}

.video-thumbnail {
    width: 100%;
    height: 200px;
    background: linear-gradient(45deg, #333 0%, #555 50%, #777 100%);
}


.video-info {
    padding: 10px;
}

/* Main horizontal layout */
.video-content-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
}

/* Left content */
.video-left {
    flex: 1;
    min-width: 0;

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

/* Title */
.video-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #fff;

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

    /*min-height: 52px;*/
}

/* Speaker row */
.channel-row {
    display: flex;
    align-items: center;
}

/* Meta section */
.channel-meta {
    flex: 1;
    min-width: 0;
}

/* Speaker name */
.channel-name {
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    margin-bottom: 4px;

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

/* Published */
.video-meta {
    font-size: 12px;
    color: #888;
}

/* Avatar column */
.channel-avatar {
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Uploaded image */
.speaker-image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /*object-fit: cover;*/
    display: block;
}

/* Default avatar */
.avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0147A6, #015FC9);

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

    color: #fff;
    font-size: 20px;
    font-weight: 700;
}


/*videos css end*/

/*Dashboard*/


/* body{font-family:'Inter',sans-serif;background:#f5f7ff;color:#0d1b3e;overflow-x:hidden} */
 
/* ── HERO SECTION ── */
.hero{
  background:linear-gradient(145deg,#eef1ff 0%,#dce6ff 40%,#e8eeff 70%,#f0f4ff 100%);
  display:flex;
  align-items:center;
  min-height:510px;
  padding:0 72px;
  position:relative;
  overflow:hidden;
}
 
.hero-left{
  flex:0 0 520px;
  z-index:5;
}
 
.hero-left h1{
  font-size:62px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-2px;
  color:#0d1b3e;
  margin-bottom:0;
}
.hero-left h1 .co-in{
  color:#1a56ff;
  display:block;
}
 
/* exact brush underline from screenshot */


.curve-line{
    width:250px;
    margin:20px;
}

/*svg{*/
/*    width:100%;*/
/*    height:auto;*/
/*}*/
 
.hero-subtitle{
  font-size:17.5px;
  font-weight:700;
  color:#0d1b3e;
  margin-bottom:12px;
  letter-spacing:-0.2px;
}
 
.hero-desc{
  font-size:14px;
  color:#6b7a9a;
  line-height:1.8;
  margin-bottom:36px;
}
 
.btn-start{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#1a56ff;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:16px 32px;
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 6px 24px rgba(26,86,255,.32);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.btn-start:hover{background:#1040cc;transform:translateY(-2px);box-shadow:0 10px 32px rgba(26,86,255,.4)}
.btn-start .play-icon{
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
}
.btn-start .play-icon svg{fill:white;margin-left:2px}
 
/* ── HERO RIGHT MOSAIC ── */
.hero-right{
  flex:1;
  position:relative;
  height:510px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
}
 
/* glow + swirl */
.glow{
  position:absolute;
  width:580px;height:400px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(26,86,255,.1) 0%, transparent 65%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.swirl{
  position:absolute;
  width:510px;height:295px;
  border-radius:50%;
  border:2px solid rgba(26,86,255,.13);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
  box-shadow:0 0 80px 20px rgba(26,86,255,.05);
}
 
/* mosaic grid */
.mosaic{
  position:relative;
  width:600px;height:430px;
  transform:perspective(1100px) rotateY(-9deg) rotateX(4deg);
  transform-style:preserve-3d;
}
 
.mc{
  position:absolute;
  border-radius:14px;
  overflow:hidden;
  background:#c5d5ee;
  box-shadow:0 6px 28px rgba(26,86,255,.18), 0 2px 8px rgba(0,0,0,.1);
}
.mc img{width:100%;height:100%;object-fit:cover;display:block}
 
/* ROW 1 */
.r1a{width:128px;height:84px;top:0;   left:50px}
.r1b{width:160px;height:106px;top:0;  left:186px}
.r1c{width:140px;height:90px; top:0;  left:354px}
.r1d{width:118px;height:84px; top:0;  left:462px}
 
/* ROW 2 */
.r2a{width:135px;height:108px;top:100px;left:8px}
.playcard{
  position:absolute;
  width:198px;height:130px;
  top:86px;left:150px;
  border-radius:18px;
  background:linear-gradient(145deg,#1a56ff,#2060ff);
  box-shadow:0 14px 48px rgba(26,86,255,.55),0 4px 16px rgba(26,86,255,.3);
  display:flex;align-items:center;justify-content:center;
  z-index:6;
}
.play-ring{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 14px rgba(255,255,255,.07);
}
.play-ring svg{fill:white;margin-left:4px}
.r2b{width:148px;height:108px;top:100px;left:356px}
.r2c{width:116px;height:108px;top:100px;left:476px}
 
/* ROW 3 */
.r3a{width:196px;height:105px;top:222px;left:8px}
.r3b{width:145px;height:105px;top:222px;left:212px}
.r3c{width:196px;height:105px;top:222px;left:365px}
 
/* floating orbs */
.orb{position:absolute;border-radius:50%;background:#1a56ff;pointer-events:none;z-index:10}
.ob1{width:12px;height:12px;top:10px; right:68px; opacity:.6}
.ob2{width:8px; height:8px; top:52px; right:14px; opacity:.28}
.ob3{width:13px;height:13px;top:46%;  right:3px;  opacity:.52}
.ob4{width:7px; height:7px; top:64%;  left:48px;  opacity:.22}
.ob5{width:9px; height:9px; bottom:52px;right:48px;opacity:.42}
.ob6{width:5px; height:5px; bottom:70px;right:142px;opacity:.28}
.ob7{width:8px; height:8px; top:74%;  left:16px;  opacity:.32}
 
/* carousel dots */
.hero-dots{
  position:absolute;
  bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;gap:9px;z-index:20;
}
.hdot{width:9px;height:9px;border-radius:50%;background:#c5d4ee;cursor:pointer;transition:all .2s}
.hdot.on{background:#1a56ff;transform:scale(1.2)}
 
/* ── TRENDING SECTION ── */
.trending{
  padding:36px 40px 40px;
  background:#f5f7ff;
}
.t-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px;
}
.t-title{
  display:flex;align-items:center;gap:10px;
  font-size:19px;font-weight:800;color:#0d1b3e;letter-spacing:-.3px;
}
.t-bar{width:4px;height:22px;border-radius:3px;background:#1a56ff}
.t-viewall{
  display:flex;align-items:center;gap:4px;
  color:#1a56ff;font-size:14px;font-weight:600;
  text-decoration:none;transition:gap .18s;
}
.t-viewall:hover{gap:8px}
 
.vgrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
 
.vcard{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(26,86,255,.07);
  cursor:pointer;
  transition:transform .22s, box-shadow .22s;
}
.vcard:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(26,86,255,.14)}
 
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#c5d5ee}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.vcard:hover .thumb img{transform:scale(1.05)}
.dur{
  position:absolute;bottom:8px;right:9px;
  background:rgba(0,0,0,.78);color:#fff;
  font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:5px;
}
 
.vinfo{padding:12px 13px 14px}
.vtop{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:5px}
.vtitle{font-size:13.5px;font-weight:700;color:#0d1b3e;line-height:1.4}
.vmenu{background:none;border:none;cursor:pointer;color:#9aaacb;font-size:19px;padding:0;line-height:1;flex-shrink:0}
.vchan{font-size:12px;color:#6b7a9a;font-weight:500;margin-bottom:4px}
.vmeta{font-size:11.5px;color:#a0aec8;font-weight:500;display:flex;align-items:center;gap:5px}
.sep{width:3px;height:3px;background:#c0cce4;border-radius:50%;display:inline-block}