:host {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .glowing-hexagons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -51;
    overflow: hidden;
  }
  
  
  .hexagon {
    position: absolute;
    width: 100px;
    height: 55px;
    background: linear-gradient(to bottom, #493414, #ff9b59);
    box-shadow: 0 0 20px rgba(33, 29, 29, 0.8);
    margin: 27.5px 0;
    animation: float 5s infinite ease-in-out;
    clip-path: polygon(
        50% 0%, 
        100% 25%, 
        100% 75%, 
        50% 100%, 
        0% 75%, 
        0% 25%
      );
      overflow: hidden;
  }
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
.transparent-layer {
  position: relative;
  z-index: 5;
  backdrop-filter: blur(5px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0),rgba(255,255,255,0.7), rgba(255, 255, 255, 0.93), rgb(255, 255, 255));

  padding: 20px;
  height: 100vh;
}