body {
      background: var(--bg-color);
      color: var(--text-color);
      font-family: "Poppins", sans-serif;
      overflow-x: hidden;
    }

    /* ===== Hero Section ===== */
    .blog-hero {
      width: 100%;
      min-height: 65vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px 20px;

      background: linear-gradient(rgba(0, 0, 0, 0.6),
          rgba(0, 0, 0, 0.9)),
        url("../../image/tech1.webp") center/cover no-repeat;

      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
      position: relative;
    }

    .hero-content {
      backdrop-filter: blur(10px);
      padding: 35px 30px;
    }

    .hero-content h1 {
      color: var(--main-color);
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.3;
    }

    .blog-meta {
      margin-top: 10px;
      font-size: 0.95rem;
      color: #ccc;
    }

    /* ===== Blog Content ===== */
    .blog-section {
      max-width: 900px;
      margin: auto;
      padding: 50px 20px;
      line-height: 1.85;
      font-size: 1.15rem;
    }

    .featured-img {
      width: 100%;
      border-radius: 16px;
      margin: 30px 0;
      box-shadow: 0 0 20px rgba(0, 238, 255, 0.2);
    }

    h3 {
      margin-top: 40px;
      color: var(--main-color);
      font-weight: 600;
    }


    /* ===== Navigation ===== */
    .post-nav {
      max-width: 900px;
      margin: auto;
      padding-bottom: 50px;
    }

    .post-nav a {
      padding: 12px 22px;
      border-radius: 10px;
      border: 1px solid var(--main-color);
      color: var(--main-color);
      text-decoration: none;
      transition: 0.3s;
    }

    .post-nav a:hover {
      background: var(--main-color);
      color: black;
    }

    /* ===== Responsive ===== */
    @media (max-width: 992px) {
      .hero-content h1 {
        font-size: 2.4rem;
      }
    }

    @media (max-width: 768px) {
      .hero-content {
        padding: 25px 20px;
      }

      .hero-content h1 {
        font-size: 1.9rem;
      }

      .blog-section {
        font-size: 1.05rem;
      }

      .post-nav {
        margin: auto;
        padding: 0px 30px 30px 30px;
      }

      .post-nav a {
        padding: 5px 10px;
      }

    }

    @media (max-width: 576px) {
      .hero-content {
        padding: 20px 18px;
      }

      .hero-content h1 {
        font-size: 1.7rem;
      }

      .featured-img {
        max-height: 300px;
        object-fit: cover;
      }

      .post-nav {
        margin: auto;
        padding: 0px 30px 30px 30px;
      }

      .post-nav a {
        padding: 5px 10px;
      }
    }