body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f7fc;
      color: #333;
    }
    .navbar {
      background-color: #023e8a;
    }
    .navbar-brand, .nav-link {
      color: #ffffff !important;
    }
    .navbar-brand img {
      height: 50px;
      width: auto;
    }

    .hero {
      background: linear-gradient(135deg, #0077b6, #00b4d8);
      color: white;
      padding: 60px 20px;
      text-align: center;
      margin-top: 60px;
    }
    .category-card:hover {
      /*transform: scale(1.02);
      transition: 0.3s;*/
      border: 1px solid #023e8a;
    }
    footer {
      background-color: #023e8a;
      color: white;
      padding: 40px 0 20px;
    }
    .footer-links a {
      color: #ade8f4;
      text-decoration: none;
      display: block;
      margin-bottom: 5px;
    }
    .footer-links a:hover {
      color: #ffffff;
    }
    /* Back to top */
    #backToTop {
      position: fixed;
      bottom: 40px;
      right: 30px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: #0077b6;
      color: white;
      cursor: pointer;
      padding: 10px 15px;
      border-radius: 50%;
      display: none;
    }

    #backToTop:hover {
      background-color: #023e8a;
    }
    /* Blog Layout */
    .blog-post {
      background-color: white;
      border: 1px solid #ddd;
      padding: 20px;
      margin-bottom: 30px;
      border-radius: 5px;
      box-shadow: 0 0 10px #0000000f;
    }
    
    .tags span {
            background-color: #eee;
            padding: 5px 10px;
            margin-right: 5px;
            border-radius: 4px;
            font-size: 0.9em;
        }
    .meta {
            color: #777;
            font-size: 0.9em;
            margin-bottom: 10px;
        }