.bg-navy {
    background-color: #062a5e;
}



.profile-bg {
    background-color: #f7f5ff; /* default for small screens */
  }
  

@media (max-width: 767px) {
    .image-overlay-container {
        position: relative;
        display: inline-block; /* or block if needed */
    }

    .image-overlay-container img {
        display: block;
        width: 100%;
        height: auto;
    }

    .image-overlay-container::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%; /* the fade zone */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
        pointer-events: none;
        z-index: 0;
    }
}
@media (min-width: 768px) {
    .profile-bg {
      background: linear-gradient(to right, #f7f5ff 0%, #f7f5ff 80%, #6e829d 80%, #6e829d 100%);
    }

    .image-fade-left {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-position: left top;
      
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        mask-position: left top;
      }


  }

.text-outline-black {
    color: white;
    text-shadow:
      0 0 2px black,
      1px 1px 1px black,
      -1px -1px 1px black;
}
  
  
 


  .column-center {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical alignment */
    align-items: center;     /* horizontal alignment */
    height: 100%; /* or a fixed height if needed */
  }
  
  .big-h1 {
    font-size: 120px;
  }

  .big-h4 {
    font-size: 40px;
  }

  .fs-60 {
    font-size: 60px;
  }
  .z-1 {
    z-index: 2;
  }