/* Sticky Header */
.pinned-content-title {
    cursor: pointer;
    position: sticky;
    top: 0; /* Sticks right at the top */
    left: 0;
    z-index: 1000;
  
    /* Remove any default margins that might push it down */
    margin: 0 auto;
    padding: 12.5px 15px;
  
    /* Appearance */
    background: white;
    backdrop-filter: blur(8px);
    border: 2px solid #ccc;
    border-radius: 1cm;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
  
    /* Text Styles */
    font-weight: bold;
    font-size: 2.9em;
    color: black;
    -webkit-text-stroke: 1px darkslategray;
    -webkit-text-fill-color: lightslategray;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.375);
  
    /* Transition for hover and sticky-active states */
    transition: all 0.3s ease;
  
    /* If you need to center it based on your design */
    width: calc(100%);
  }
  
  .pinned-content-title.sticky-active {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 3px solid #ccc;
  }
  
  /* Hover effects */
  .pinned-content-title:hover {
    background: #73ffff;
    transform: scale(1.025);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25),
                inset 0 0 20px rgba(0, 99, 87, 0.65);
  }
  
  /* Mobile adjustments */
  @media (max-width: 762px) {
    .pinned-content-title {
      transform: scale(0.65);
      transform-origin: top left;
      left: 0;
      top: 0;
      width: 100%;
    }
    
    .pinned-content-title:hover {
      background: #73ffff;
      transform: scale(0.75);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25),
                  inset 0 0 20px rgba(0, 0, 0, 0.45);
    }
  
    /* Adjust content if needed. Use sparingly,
       only if extra space below the pinned header is causing layout issues. */
    .content-one {
      top: -20px;
    }
  }
  
  /* Content container for clarity */
  .content-one {
    position: relative;
    /* Ensure no extra top margin disrupts positioning */
    margin-top: -40px; /* Pushes content below the sticky header */
    border: 2px solid #ccc;
    border-radius: 15px;
    background: white;
    padding: 3.75px;
    transition: all 0.4s ease;
  }