.hero-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: #f5f5f5;
  }
  
  .hero-section h1 {
    /* max-width: 700px; */
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 20px;
    margin-left: -7px;
    
  }
  
  .hero-section p {
    max-width: 1064px;
    font-size: 17px;
    margin-bottom: 80px;
    color: #c8ced1;
  }

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow-x: clip;
    /* overflow: hidden; */
    background: #101010;
    color: #fff;
    top: -30px;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
    /* max-width: 920px; */
    margin-top: 70px;
  }
  
  .hero-labels{
    margin-bottom: 18px;
    display: flex;
    /* gap: 1rem; */
   
  }

  .hero-label {
    /* font-size: 26px; */
    font-size: clamp(18px, 1vw, 26px);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgb(92, 137, 126) ; /*rgb(93, 93, 93)*/
    margin-right: 1rem;
  }

  .hero-label.active {
    color: rgb(0, 255, 200);
  }
  
  .hero-section h1 {
    font-size: clamp(60px, 8vw, 150px);
    line-height: 0.95;
    letter-spacing: -0.06em;
    margin-bottom: 28px;
    font-weight: 600;
    /* background: linear-gradient(179deg,rgb(243 243 243) 0%, rgb(179 179 179) 100%);
     */
     display: flex;
     flex-wrap: wrap;
  }
  .hero-section h1 span{
    /* background: linear-gradient(180deg,rgb(243 243 243) 0%, rgb(126 126 126) 85%, rgb(243 243 243) 100%); */
    background: linear-gradient(180deg,rgb(243 243 243) 0%, rgb(126 126 126) 84%, rgb(243 243 243) 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff00;
    padding-right: 1rem;
  }
  
  .hero-text {
    /* max-width: 560px; */
    font-size: 18px;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: 34px;
    font-weight: 400;
  }
  
  .hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  
  .hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
  }
  
  .hero-glow-one {
    /* top: 12%;
    right: 10%;
    background: #3cffdb;
    opacity: 0.3; */
    /* bottom: -19%;
    right: -12%; */
    bottom: -178px;
    right: -355px;
    background: #3cffdb;
    opacity: 0.3;
  }
  
  .hero-glow-two {
    /* bottom: -10%;
    left: 8%;
    background: #3dcbff;
    opacity: 0.3; */
    /* top: -21%;
    left: -8%; */
    top: -210px;
    left: -130px;
    background: #3dcbff;
    opacity: 0.3;
  }

  .hero-glow-three {
    /* bottom: 38%;
    left: -24%; */
    top: 138px;
    left: -400px;
    background: #3cffdb;
    opacity: 0.2;
  }

  .hero-glow-four {
    /* bottom: 2%;
    right: -24%; */
    bottom: 42px;
    right: -460px;
    background: #3dcbff;
    opacity: 0.3;
  }


  /*GLOW ANIMATION*/

  .hero-glow-oneX {
    animation: glowFloatOne 2s ease-in-out ;

  }
  
  .hero-glow-twoX {
    animation: glowFloatTwo 2s ease-in-out ;
  }

  .hero-glow-threeX {
    animation: glowFloatThree 3s ease-in-out ;
  }

  .hero-glow-fourX {
    animation: glowFloatFour 3s ease-in-out ;
  }
  
  @keyframes glowFloatOne {
    0% {
      /* transform: translate3d(30px, 13px, 0); */
      opacity: 0.4;
    }

    100% {
      /* transform: translate3d(0, 0, 0); */
      opacity: 0.3;
    }
  }
  
  @keyframes glowFloatTwo {  
    0% {
      /* transform: translate3d(-56px, 13px, 0); */
      opacity: 0.4;
    }
    100% {
      /* transform: translate3d(0, 0, 0); */
      opacity: 0.3;
    }
  }

  @keyframes glowFloatThree {

  
    0% {
      /* transform: translate3d(-40px, -20px, 0) ; */
      opacity: 0.3;
    }

    100% {
      /* transform: translate3d(0, 0, 0) ; */
      opacity: 0.3;
    }
  }

  @keyframes glowFloatFour {
    0% {
      /* transform: translate3d(20px, 13px, 0);  */
      opacity: 0.4;
    }
    0%, 100% {
      /* transform: translate3d(0, 0, 0);  */
      opacity: 0.3;
    }
  }
  
  @media (max-width: 768px) {
    .hero-section {
      min-height: calc(100vh - 76px);
    }
  
    .hero-section h1 {
      letter-spacing: -0.04em;
    }

    .hero-labels {
        flex-wrap: wrap;
    }

    .hero-label.active{
      width: 100%;
    }

    .hero-section p {
      margin-bottom: 40px;
    }


    .hero-glow-one {
        bottom: -258px;
        right: -455px;
    }
      
    .hero-glow-two {
      top: -280px;
      left: -390px;
    }
  
    .hero-glow-three {
      top: 58px;
      left: -410px;
    }
  
    .hero-glow-four {
      bottom: 18px;
      right: -470px;
    }

  }