.hero-section {
        position: relative;
        width: 100%;
        height: 400px;
        overflow: hidden;
      }

      .hero-section img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(100%); /* dark effect like your screenshot */
      }

      .hero-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        z-index: 2;
      }

      .hero-content h1 {
        font-size: 42px;
        margin: 0 0 10px;
        font-weight: bold;
      }

      .hero-content p {
        font-size: 18px;
        font-weight: 600;
      }

      .page-header h1 {
        font-size: 16px;
        color:black;
        font-weight: normal;
        margin-left: 100px;
      }

      .page-header {
        background: #fff;
        padding: 25px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
      }


      .breadcrumb {
        font-size: 14px;
        color: #444;
        margin-right: 100px;
      }

      .breadcrumb a {
        text-decoration: none;
        color: #444;
        transition: color 0.3s ease;
      }

      .breadcrumb a:hover {
        color: #000;
      }

      .breadcrumb span {
        margin: 0 5px;
        color: lightgray;
      }

      @media (max-width: 480px) {
      .hero-section {
        height: 250px; /* shorter hero for mobile */
      }

      .hero-content h1 {
        font-size: 24px; /* smaller heading */
      }

      .hero-content p {
        font-size: 14px;
        font-weight: normal;
        padding: 0 10px; /* add spacing for small screens */
      }

      .page-header {
        flex-direction: row; /* stack title + breadcrumb */
        align-items: flex-start;
        padding: 15px 20px;
      }

     .page-header h1 {
        font-size: 10px;
        margin-left: 0;
        margin-bottom: 8px;
      }

      .breadcrumb {
        margin-left: 10px;
        margin-right: 0;
      }

      .breadcrumb a{
        font-size: 8px;
      }

      .breadcrumb span {
        margin: 0 3px;
        font-size: 8px;
      }
    }