* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: "Cairo", sans-serif;
          background: hsl(220 25% 8% / 1);
          color: #fff;
          overflow-x: hidden;
      }

      /* Grid Background */
      body::before {
          content: "";
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to right,
                  hsl(240 10% 20%) 1px,
                  transparent 1px),
              linear-gradient(to bottom, hsl(240 10% 20%) 1px, transparent 1px);
          background-size: 50px 50px;
          pointer-events: none;
          z-index: 0;
      }

      /* Navigation */
      nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.5rem 5%;
          position: fixed;
          width: 100%;
          top: 0;
          backdrop-filter: blur(10px);
          z-index: 1000;
          border-bottom: 1px solid rgba(124, 58, 237, 0.1);
          background: rgba(10, 14, 39, 0.8);
      }

      .logo {
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: transform 0.3s ease;
      }

      .logo:hover {
          transform: scale(1.05);
      }

      .logo img {
          height: 40px;
          width: auto;
          max-width: 150px;
          object-fit: contain;
      }

      .nav-links {
          display: flex;
          gap: 2rem;
          list-style: none;
      }

      .nav-links a {
          color: #fff;
          text-decoration: none;
          transition: color 0.3s;
      }

      .nav-links a:hover,
      .nav-links a.active {
          color: #7c3aed;
      }

      .nav-btn {
          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          color: white;
          border: none;
          padding: 0.7rem 1.5rem;
          border-radius: 8px;
          cursor: pointer;
          font-weight: 600;
          transition: transform 0.3s;
      }

      .nav-btn:hover {
          transform: translateY(-2px);
      }

      /* Mobile Menu */
      .mobile-menu-btn {
          display: none;
          background: none;
          border: none;
          color: white;
          font-size: 1.5rem;
          cursor: pointer;
          z-index: 1001;
      }

      .hamburger {
          width: 25px;
          height: 3px;
          background: white;
          position: relative;
          transition: all 0.3s;
      }

      .hamburger::before,
      .hamburger::after {
          content: "";
          position: absolute;
          width: 25px;
          height: 3px;
          background: white;
          transition: all 0.3s;
      }

      .hamburger::before {
          top: -8px;
      }

      .hamburger::after {
          top: 8px;
      }

      /* Hero Section */
      .blog-hero {
          min-height: 50vh;
          margin-top: 0;
          padding: 8rem 10% 4rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          background: linear-gradient(to right,
                  hsl(220 20% 18%) 1px,
                  transparent 1px),
              linear-gradient(to bottom, hsl(220 20% 18%) 1px, transparent 1px);
          background-size: 50px 50px;
          position: relative;
      }

      .blog-hero::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at 50% 30%,
                  rgba(124, 58, 237, 0.15) 0%,
                  transparent 50%);
          pointer-events: none;
      }

      .hero-content {
          position: relative;
          z-index: 1;
          max-width: 800px;
      }

      .badge {
          display: inline-block;
          background: rgba(124, 58, 237, 0.2);
          color: #a855f7;
          padding: 0.4rem 1rem;
          border-radius: 20px;
          font-size: 0.85rem;
          margin-bottom: 1.5rem;
      }

      .blog-title {
          font-size: 3.5rem;
          line-height: 1.2;
          margin-bottom: 1rem;
      }

      .highlight {
          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .blog-description {
          color: #94a3b8;
          font-size: 1.2rem;
          line-height: 1.8;
          margin-bottom: 2rem;
      }

      /* Search and Filter */
      .blog-filters {
          padding: 2rem 10%;
          position: relative;
          z-index: 1;
      }

      .filter-container {
          display: flex;
          gap: 1rem;
          align-items: center;
          flex-wrap: wrap;
      }

      .search-box {
          flex: 1;
          min-width: 300px;
          position: relative;
      }

      .search-input {
          width: 100%;
          padding: 1rem 1rem 1rem 3rem;
          border-radius: 12px;
          border: 1px solid rgba(124, 58, 237, 0.3);
          background: rgba(15, 23, 42, 0.8);
          color: white;
          font-size: 1rem;
          transition: all 0.3s;
      }

      .search-input:focus {
          outline: none;
          border-color: #7c3aed;
          box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
      }

      .search-icon {
          position: absolute;
          left: 1rem;
          top: 50%;
          transform: translateY(-50%);
          color: #94a3b8;
      }

      .category-filters {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
      }

      .category-btn {
          padding: 0.6rem 1.2rem;
          border-radius: 8px;
          border: 1px solid rgba(124, 58, 237, 0.3);
          background: rgba(15, 23, 42, 0.6);
          color: #94a3b8;
          cursor: pointer;
          font-weight: 600;
          transition: all 0.3s;
          font-size: 0.9rem;
      }

      .category-btn:hover,
      .category-btn.active {
          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          color: white;
          border-color: transparent;
      }

      /* Blog Grid */
      .blog-section {
          padding: 2rem 10%;
          position: relative;
          z-index: 1;
      }

      .blog-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
          gap: 2rem;
      }

      .blog-card {
          background: rgba(15, 23, 42, 0.6);
          border: 1px solid rgba(124, 58, 237, 0.2);
          border-radius: 16px;
          overflow: hidden;
          transition: transform 0.3s, border-color 0.3s;
          cursor: pointer;
          backdrop-filter: blur(10px);
      }

      .blog-card:hover {
          transform: translateY(-10px);
          border-color: rgba(124, 58, 237, 0.5);
      }

      .blog-image {
          width: 100%;
          height: 200px;
          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 3rem;
          position: relative;
          overflow: hidden;
      }

      .blog-image::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at 30% 30%,
                  rgba(255, 255, 255, 0.2) 0%,
                  transparent 60%);
      }

      .blog-content {
          padding: 1.5rem;
      }

      .blog-meta {
          display: flex;
          gap: 1rem;
          margin-bottom: 1rem;
          font-size: 0.85rem;
          color: #94a3b8;
      }

      .blog-category {
          background: rgba(124, 58, 237, 0.2);
          color: #a855f7;
          padding: 0.3rem 0.8rem;
          border-radius: 6px;
          font-weight: 600;
      }

      .blog-card-title {
          font-size: 1.5rem;
          margin-bottom: 0.75rem;
          color: #fff;
          line-height: 1.3;
      }

      .blog-excerpt {
          color: #94a3b8;
          line-height: 1.6;
          margin-bottom: 1rem;
      }

      .read-more {
          color: #a855f7;
          font-weight: 600;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          transition: gap 0.3s;
      }

      .read-more:hover {
          gap: 1rem;
      }

      /* Featured Post */
      .featured-post {
          background: rgba(15, 23, 42, 0.6);
          border: 2px solid rgba(124, 58, 237, 0.5);
          border-radius: 20px;
          padding: 2rem;
          margin-bottom: 3rem;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          backdrop-filter: blur(10px);
          position: relative;
          overflow: hidden;
      }

      .social-links {
          display: flex;
          gap: 1rem;
          justify-content: flex-end;
          direction: ltr;
      }

      .featured-image {
          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 5rem;
          position: relative;
          overflow: hidden;
          /*min-height: 300px;*/
          height: 400px;
      }

      .featured-content h2 {
          font-size: 2.5rem;
          margin-bottom: 1rem;
      }

      .featured-excerpt {
          color: #94a3b8;
          line-height: 1.8;
          margin-bottom: 1.5rem;
          font-size: 1.1rem;
      }

      .featured-btn {
          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          color: white;
          border: none;
          padding: 1rem 2rem;
          border-radius: 10px;
          cursor: pointer;
          font-weight: 600;
          font-size: 1rem;
          transition: transform 0.3s;
          display: inline-block;
          text-decoration: none;
      }

      .featured-btn:hover {
          transform: translateY(-2px);
      }

      /* Pagination */
      .pagination {
          display: flex;
          justify-content: center;
          gap: 0.5rem;
          margin-top: 3rem;
          padding-bottom: 4rem;
      }

      .page-btn {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          border: 1px solid rgba(124, 58, 237, 0.3);
          background: rgba(15, 23, 42, 0.6);
          color: #94a3b8;
          cursor: pointer;
          font-weight: 600;
          transition: all 0.3s;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .page-btn:hover,
      .page-btn.active {
          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          color: white;
          border-color: transparent;
      }

      /* Footer */
      footer {
          padding: 3rem 5%;
          background: hsl(220 25% 8% / 1);
          border-top: 1px solid rgba(124, 58, 237, 0.1);
          position: relative;
          z-index: 1;
      }

      .footer-content {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 3rem;
          margin-bottom: 2rem;
      }

      .footer-section h4 {
          margin-bottom: 1rem;
      }

      .footer-section ul {
          list-style: none;
      }

      .footer-section a {
          color: #94a3b8;
          text-decoration: none;
          display: block;
          margin-bottom: 0.5rem;
          transition: color 0.3s;
      }

      .footer-section a:hover {
          color: #7c3aed;
      }

      .footer-bottom {
          text-align: center;
          padding-top: 2rem;
          border-top: 1px solid rgba(124, 58, 237, 0.1);
          color: #94a3b8;
          font-size: 0.9rem;
      }

      /* Responsive */
      @media (max-width: 768px) {
          .logo img {
              height: 32px;
              max-width: 120px;
          }

          .mobile-menu-btn {
              display: block;
          }

          .nav-links {
              position: fixed;
              top: 0;
              right: -100%;
              height: 100vh;
              width: 70%;
              max-width: 300px;
              background: rgba(10, 14, 39, 0.98);
              backdrop-filter: blur(20px);
              flex-direction: column;
              padding: 5rem 2rem 2rem;
              gap: 1.5rem;
              transition: right 0.3s ease;
              border-left: 1px solid rgba(124, 58, 237, 0.2);
              z-index: 999;
          }

          .nav-links.active {
              right: 0;
          }

          .nav-btn {
              display: none;
          }

          .blog-title {
              font-size: 2.5rem;
          }

          .blog-hero {
              padding: 6rem 5% 3rem;
          }

          .blog-filters,
          .blog-section {
              padding: 2rem 5%;
          }

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

          .featured-post {
              grid-template-columns: 1fr;
          }

          .filter-container {
              flex-direction: column;
          }

          .search-box {
              min-width: 100%;
          }
      }