/* =========================
   HERO SECTION
========================= */
.hero{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  padding:80px 0 100px;
}

.hero-title{
  font-size:clamp(1.6rem,4vw,3rem);
  line-height:1.25;
}

.hero-brand{ opacity:.95; }

.hero-subtitle{
  font-size:1rem;
  color:rgba(255,255,255,.85);
}

.hero-logo{
  height:1.2em;
  width:auto;
  vertical-align:middle;
  margin-left:6px;
}

/* =========================
   COINS CARD
========================= */
.coins-box{
  background:var(--card);
  max-width:420px;
  margin:auto;
  padding:24px;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* Coin glow */
.eduCoin-wrap{
  width:70px;
  height:70px;
  margin:5px auto;
  border-radius:50%;
  background:radial-gradient(circle,#fff3b0,#fbbf24,#f59e0b);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 12px rgba(251,191,36,.7),
    0 0 30px rgba(245,158,11,.5);
  animation:sunPulse 2.5s infinite;
}

.eduCoin{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#fff;
  object-fit:contain;
}

@keyframes sunPulse{
  0%{box-shadow:0 0 10px rgba(251,191,36,.6)}
  50%{box-shadow:0 0 18px rgba(251,191,36,.9)}
  100%{box-shadow:0 0 10px rgba(251,191,36,.6)}
}

/* Coin values */
.coins-row{
  max-width:260px;
  margin:auto;
  gap:30px;
}

.coin-item{ text-align:center; }

.coin-label{
  font-size:.75rem;
  color:var(--muted);
  text-transform:uppercase;
}

.coin-value{
  font-size:1.2rem;
  font-weight:600;
  color:var(--primary);
}

.coin-value.total{ color:#f59e0b; }

/*add friend session start =========================*/


/* ===============================
   SUGGESTION WRAPPER
================================ */
.fb-suggest-wrap{
  padding: 8px 16px 14px;
}

.fb-suggest-row{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:none;
}
.fb-suggest-row::-webkit-scrollbar{display:none;}

/* ===============================
   USER CARD
================================ */
.fb-suggest-card{
  min-width:180px;
  max-width:180px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:.25s ease;
}

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

/* ===============================
   CLICKABLE MAIN AREA
================================ */
.fb-suggest-main{
  cursor:pointer;
}

/* ===============================
   PROFILE IMAGE
================================ */
.fb-suggest-img{
  width:100%;
  height:180px;           /* FIXED HEIGHT */
  background:#f0f2f5;
}

.fb-suggest-img img{
  width:100%;
  height:100%;
  object-fit:cover;       /* PREVENT DAMAGE */
  display:block;
}

/* ===============================
   USER INFO
================================ */
.fb-suggest-info{
  padding:10px 12px 6px;
}

.fb-user-name{
  font-size:15px;
  font-weight:600;
  color:#050505;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===============================
   MUTUAL FOLLOWERS
================================ */
.fb-mutual-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:12px;
  color:#65676b;
}

.fb-mutual-imgs{
  display:flex;
}

.fb-mutual-imgs img{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  margin-left:-6px;
}

.fb-mutual-imgs img:first-child{
  margin-left:0;
}

.fb-no-mutual{
  font-size:12px;
  color:#8a8d91;
  display:block;
  margin-top:6px;
}

/* ===============================
   FOLLOW BUTTON
================================ */
.fb-follow-btn{
  margin:8px 12px 12px;
  padding:8px 0;
  border:none;
  border-radius:8px;
  background:#1877f2;
  color:#fff;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

.fb-follow-btn:hover{
  background:#166fe5;
}

/* ===============================
   ANIMATION
================================ */
.animate-in{
  opacity:0;
  transform:translateY(30px);
  transition:.45s ease;
}
.animate-in.show{
  opacity:1;
  transform:none;
}



/* ===============================
   GRID RESPONSIVE
================================ */
/*#userSuggestRow{*/
/*  display:grid;*/
/*  grid-template-columns:repeat(2,1fr);*/
/*  gap:14px;*/
/*}*/

/*@media(min-width:768px){*/
/*  #userSuggestRow{ grid-template-columns:repeat(4,1fr); }*/
/*}*/
/*@media(min-width:1200px){*/
/*  #userSuggestRow{ grid-template-columns:repeat(6,1fr); }*/
/*}*/


/*add friend session end =====================*/



/*==============status start==================*/

/* ===============================
   STORY BAR (INSTAGRAM STYLE)
================================ */

/*.story-bar{*/
/*  display:flex;*/
/*  gap:14px;*/
/*  overflow-x:auto;*/
/*  padding:12px 10px;*/
/*  scrollbar-width:none;*/
/*}*/
/*.story-bar::-webkit-scrollbar{ display:none; }*/


/*.story-circle{*/
/*  width:74px;*/
/*  height:74px;*/
/*  padding:3px;*/
/*  border-radius:50%;*/
/*  flex:0 0 auto;*/
/*  cursor:pointer;*/
/*}*/


/*.story-circle img{*/
/*  width:100%;*/
/*  height:100%;*/
/*  border-radius:50%;*/
/*  object-fit:cover;*/
/*}*/


/*.unseen{*/
/*  background:linear-gradient(*/
/*    45deg,*/
/*    #ff0066,*/
/*    #ff8c00,*/
/*    #facc15*/
/*  );*/
/*}*/


/*.seen{*/
/*  background:#d1d5db;*/
/*}*/

/* ===============================
   ADD STORY DESIGN
================================ */

/*.add-story{*/
/*  background:linear-gradient(135deg,#2563eb,#38bdf8);*/
/*  display:flex;*/
/*  align-items:center;*/
/*  justify-content:center;*/
/*}*/

/*.add-inner{*/
/*  width:100%;*/
/*  height:100%;*/
/*  border-radius:50%;*/
/*  background:#fff;*/
/*  display:flex;*/
/*  align-items:center;*/
/*  justify-content:center;*/
/*  position:relative;*/
/*}*/


/*.add-inner span{*/
/*  font-size:36px;*/
/*  font-weight:600;*/
/*  color:#2563eb;*/
/*  line-height:1;*/
/*}*/


/*.add-story:hover{*/
/*  transform:scale(1.05);*/
/*  transition:.25s ease;*/
/*}*/


/*@media(max-width:480px){*/
/*  .story-circle{*/
/*    width:68px;*/
/*    height:68px;*/
/*  }*/
/*}*/


/*.story-bar{*/
/*  display:flex;*/
/*  gap:14px;*/
/*  padding:10px 12px;*/
/*  overflow-x:auto;*/
/*  scrollbar-width:none;*/
/*}*/
/*.story-bar::-webkit-scrollbar{display:none;}*/


/*.story-item{*/
/*  width:74px;*/
/*  height:74px;*/
/*  border-radius:50%;*/
/*  flex:0 0 auto;*/
/*  cursor:pointer;*/
/*  position:relative;*/
/*}*/

/* =========================
   ADD STORY
========================= */
/*.story-add{*/
/*  background:linear-gradient(135deg,#4f46e5,#9333ea);*/
/*  padding:3px;*/
/*}*/

/*.story-add-inner{*/
/*  width:100%;*/
/*  height:100%;*/
/*  background:#fff;*/
/*  border-radius:50%;*/
/*  display:flex;*/
/*  align-items:center;*/
/*  justify-content:center;*/
/*  position:relative;*/
/*  overflow:hidden;*/
/*}*/

/*.story-add-inner img{*/
/*  width:99%;*/
/*  height:99%;*/
/*  object-fit:contain;*/
/*  opacity:.9;*/
/*}*/

/* Plus icon */
/*.story-plus{*/
/*  position:absolute;*/
/*  bottom:4px;*/
/*  right:4px;*/
/*  width:22px;*/
/*  height:22px;*/
/*  background:#4f46e5;*/
/*  color:#fff;*/
/*  font-size:18px;*/
/*  line-height:22px;*/
/*  text-align:center;*/
/*  border-radius:50%;*/
/*  border:2px solid #fff;*/
/*  font-weight:600;*/
/*}*/


/*.story-add:hover{*/
/*  transform:scale(1.05);*/
/*  transition:.25s ease;*/
/*}*/

/* =========================
   NORMAL STORY
========================= */
/*.story-thumb{*/
/*  padding:3px;*/
/*}*/
/*.story-thumb.unseen{*/
/*  background:linear-gradient(45deg,#ff0050,#ff9f00);*/
/*}*/
/*.story-thumb.seen{*/
/*  background:#d1d5db;*/
/*}*/

/*.story-thumb img{*/
/*  width:100%;*/
/*  height:100%;*/
/*  border-radius:50%;*/
/*  object-fit:cover;*/
/*}*/


/*==============status end==================*/


/* =========================
   SHORT VIDEOS
========================= */
.shorts-wrapper {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar */
.shorts-wrapper::-webkit-scrollbar {
  display: none;
}
.shorts-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.short-item {
  width: 140px;
  scroll-snap-align: start;
}

.short-video {
  height: 220px;
  background: #000;
  border-radius: 12px;
}

/* Action icons */
.short-actions {
  position: absolute;
  right: 8px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.short-actions i {
  color: #fff;
  font-size: 16px;
}



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


/* ===============================
   GALLERY CATEGORY CARD
================================ */

.category-zone{
  padding:10px 16px 10px;
}

.gallery-card{
  position:relative;
  background:var(--card);
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:.3s ease;
}

.gallery-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  transition:.4s ease;
}

.gallery-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
  display:flex;
  align-items:flex-end;
  padding:12px;
}

.gallery-title{
  color:#fff;
  font-weight:600;
  font-size:.95rem;
}

.gallery-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.18);
}

.gallery-card:hover img{
  transform:scale(1.08);
}

/* CATEGORY ANIMATION */
.cat-animate{
  opacity: 0;
  transform: translateY(30px) scale(.96);
  transition: all .6s ease;
}

.cat-animate.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ===============================
   SKELETON LOADER
================================ */
.skeleton{
  height:160px;
  border-radius:16px;
  background:linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 37%,
    #e5e7eb 63%
  );
  background-size:400% 100%;
  animation:shimmer 1.4s infinite;
}

@keyframes shimmer{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}
/*===============CATEGORY End=============*/



/*top 6 blogs =====start===================================*/


.blog-zone{
  padding:2px 16px 10px;
}


.blog-head{
  text-align:start;
  margin-bottom:25px;
}

.blog-title{
  font-size:26px;
  font-weight:700;
}

.blog-subtitle{
  font-size:14px;
  color:#64748b;
  margin-top:4px;
}


.blog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}


.blog-meta{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#64748b;
  margin-top:8px;
}


.blog-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  transform:translateY(30px);
  opacity:0;
 cursor: pointer;
  transition:.6s ease;
}

.blog-card.show{
  transform:translateY(0);
  opacity:1;
}

/* IMAGE */
.blog-thumb img{
  width:100%;
  height:200px;
  object-fit:cover;
}

/* BODY */
.blog-body{
  padding:14px;
}

.blog-tag{
  display:inline-block;
  font-size:11px;
  padding:4px 10px;
  border-radius:20px;
  background:#e0e7ff;
  color:#4338ca;
  margin-bottom:6px;
}

.blog-heading{
  font-size:16px;
  font-weight:600;
  margin:6px 0;
}

.blog-desc{
  font-size:14px;
  color:#475569;
  line-height:1.5;
}

/* HOVER */
.blog-card:hover{
  transform:translateY(-4px);
}

/* RESPONSIVE */
@media(min-width:768px){
  .blog-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(min-width:1100px){
  .blog-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/*top 6 blos end ======================*/



/* =========================
   BLOG
========================= */
.blog-img{
  height:180px;
  object-fit:cover;
  border-radius:14px;
}