/* =========================
   GLOBAL
========================= */
body{
  margin:0;
  font-family:Poppins,sans-serif;
  background:#1a1a2e;
  color:#e6f1f5;
  overflow-x:hidden;
}

/* =========================
   HEADER
========================= */
.blog-header{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:2rem;
}

.blog-header h1{
  font-size:2.8rem;
  margin-top:1rem;
  color:#eaf4f7;
}

.blog-header h1 span,
.blog-header h1 i{
  color:#a9cbd6;
}

.back-btn{
  align-self:flex-start;
  margin-left:2rem;
  text-decoration:none;
  color:#eaf4f7;
  font-weight:600;
  font-size:1.6rem;
  transition:color .3s;
}

.back-btn:hover{
  color:#a9cbd6;
}

/* =========================
   SEARCH
========================= */
.search-glass{
  display:flex;
  justify-content:center;
  margin:2rem 0;
}

.search-glass input{
  width:70%;
  max-width:500px;
  padding:1.2rem 2rem;
  border-radius:50px;
  border:1px solid rgba(169,203,214,.2);
  background:rgba(50,62,74,.55);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:1.6rem;
  outline:none;
  box-shadow:0 8px 25px rgba(0,0,0,.6);
  transition:all .3s ease;
}

.search-glass input::placeholder{
  color:rgba(255,255,255,.6);
}

.search-glass input:focus{
  border-color:#a9cbd6;
  box-shadow:0 0 25px rgba(169,203,214,.4);
}

/* =========================
   TAGS
========================= */
.tag-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-bottom:2rem;
  padding:0 2rem;
}

.tag{
  background:rgba(50,62,74,.6);
  padding:.6rem 1.2rem;
  border-radius:30px;
  cursor:pointer;
  font-size:1.3rem;
  color:#eaf4f7;
  backdrop-filter:blur(10px);
  transition:all .3s ease;
  border:1px solid rgba(169,203,214,.15);
}

.tag:hover{
  transform:translateY(-2px);
  box-shadow:0 0 15px rgba(169,203,214,.25);
}

.tag.active{
  background:rgba(50,62,74,.9);
  border-color:#a9cbd6;
  color:#a9cbd6;
  box-shadow:0 0 20px rgba(169,203,214,.35);
}

/* =========================
   BLOG GRID
========================= */
.blogs-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
  padding:0 5%;
  margin-bottom:4rem;
}

/* =========================
   BLOG CARD (MAIN PART)
========================= */
.blog-card{
  background:linear-gradient(
    145deg,
    #2a3440 0%,
    #323e4a 55%,
    #1c2430 100%
  );

  border-radius:22px;
  overflow:hidden;
  backdrop-filter:blur(14px);
  border:1px solid rgba(169,203,214,.14);

  box-shadow:
    0 12px 30px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(169,203,214,.18);

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

.blog-card:hover{
  transform:translateY(-10px);
  border-color:rgba(169,203,214,.35);

  box-shadow:
    0 22px 50px rgba(0,0,0,.85),
    0 0 30px rgba(169,203,214,.28),
    inset 0 1px 0 rgba(169,203,214,.28);
}

.blog-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

/* =========================
   BLOG CONTENT
========================= */
.blog-info{
  padding:1.5rem;
}

.blog-info h3{
  font-size:1.8rem;
  color:#eaf4f7;
  margin-bottom:.8rem;
}

.blog-info p{
  font-size:1.4rem;
  color:rgba(234,244,247,.85);
  margin:.5rem 0 1rem;
  line-height:1.6;
}

.blog-info .tags{
  margin:1rem 0;
}

.blog-info .tags span{
  font-size:1.2rem;
  color:#a9cbd6;
  margin-right:.5rem;
}

.blog-info a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
  color:#a9cbd6;
  text-decoration:none;
  font-size:1.3rem;
  font-weight:600;
  transition:all .3s ease;
}

.blog-info a:hover{
  color:#ffffff;
  gap:1rem;
}

/* =========================
   VIEW MORE BUTTON
========================= */
.view-more{
  text-align:center;
  margin-top:3rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:1rem 2.5rem;
  background:rgba(50,62,74,.6);
  backdrop-filter:blur(10px);
  border:2px solid rgba(169,203,214,.3);
  border-radius:50px;
  color:#fff;
  text-decoration:none;
  font-size:1.1rem;
  font-weight:600;
  transition:all .3s ease;
  box-shadow:0 4px 15px rgba(0,0,0,.6);
}

.btn:hover{
  box-shadow:0 0 30px rgba(169,203,214,.45);
  transform:translateY(-3px);
  gap:1.2rem;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:768px){
  .blog-header h1{font-size:2.2rem}
  .blogs-container{grid-template-columns:1fr}
  .search-glass input{width:85%;font-size:1.4rem}
  .tag{font-size:1.1rem}
}