/* --- SECTION STYLING --- */
  .hero-banner-section {
    position: relative;
    /* Main Layout Margins */
    margin-left: 12vw;
    margin-right: 12vw;
    margin-top: 40px;
    margin-bottom: 0px;
    padding-left: 2vw; /* Slight internal padding for alignment */
    
    min-height: 350px; 
    
    /* Flexbox: Content Bottom-Left */
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #222;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    border-radius: 4px;
  }

  /* --- DARK OVERLAY --- */
  .overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0, 0.3);
    z-index: 1;
    transition: background 0.5s ease; /* Smooth darken effect on hover */
  }
  
  /* Optional: Make background slightly darker when hovering the whole section */
  .hero-banner-section:hover .overlay {
    background: rgba(0,0,0, 0.4);
  }

  /* --- CONTENT WRAPPER --- */
  .banner-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-bottom: 60px;
  }

  /* --- CLICKABLE LINK --- */
  .banner-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
  }

  /* --- TYPOGRAPHY & UNDERLINE ANIMATION --- */
  .banner-title {
    font-size: 35px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    color: #ffffff;
    position: relative; /* Needed for the underline absolute position */
    display: inline-block;
  }

  /* The Underline (Hidden by default) */
  .banner-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px; /* Distance from text */
    width: 0%;    /* Start at 0 width */
    height: 2px;  /* Thickness */
    background-color: #ffffff;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth ease-out */
  }

  /* The Underline (Visible on hover) */
  .banner-link:hover .banner-title::after {
    width: 100%;
  }

  /* --- ICON ANIMATION --- */
  .banner-icon {
    width: 32px;
    height: 32px;
    margin-left: 15px;
    fill: #ffffff;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy effect */
  }
  
  /* Move Up and Right on hover */
  .banner-link:hover .banner-icon {
    transform: translate(5px, -5px); 
  }

  /* --- RESPONSIVE --- */
  @media screen and (max-width: 991px) {
     .banner-title {
       font-size: 36px;
     }
  }

  @media screen and (max-width: 479px) {
    .banner-content-wrapper {
       margin-bottom: 40px;
    }
    .banner-title {
      font-size: 28px;
    }
    .hero-banner-section {
      min-height: 300px;
      margin-left: 5vw; /* Smaller margins for mobile */
      margin-right: 5vw;
    }
  }