:root {
      --primary: #0088cc;
      --secondary: #006699;
      --accent: #00bbff;
      --light: #f5f9fa;
  }

  body {
      font-family: 'Montserrat';
      overflow-x: hidden;
      background-color: var(--light);
  }

  a {
      color: black;

  }

  .navbar {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .navbar-brand img {
      height: 40px;
  }

  .hero-banner {
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
          url('../images/Banner/1.jpg');
      background-size: cover;
      background-position: center;
      padding: 150px 0;
      color: white;
  }

  .blog-card {
      transition: transform 0.3s;
      height: 100%;
      margin-bottom: 20px;
  }

  .blog-card:hover {
      transform: translateY(-5px);
  }

  .blog-card .card-img-top {
      height: 200px;
      object-fit: cover;
  }

  .category-badge {
      background-color: var(--accent);
  }

  .read-more {
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
  }

  .read-more:hover {
      color: var(--secondary);
  }

  .sidebar-card {
      border: none;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  }

  .sidebar-title {
      border-bottom: 2px solid var(--accent);
      padding-bottom: 10px;
      color: var(--secondary);
  }

  p {
      text-align: justify;
  }




  @media screen and (max-width: 768px) {
      .hero-banner {
          margin-top: 8rem;
          padding: 80px 0;
      }
  }