.services_hero {
      width: 100%;
      height: 90vh;

      overflow: hidden;  
      max-width: 1880px;
  margin: 0 auto;
  border-radius: 16px;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
     
  
    }


    #video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;}

     

  









    .text{
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-direction: column !important;
      flex-wrap: wrap !important;
      height: auto !important;
      width: 100%;
      margin: 0 auto !important;
      margin-top: 1rem !important;
      text-align: center !important;
      line-height: 1.4 !important;
      padding: 28px !important;
      gap: 1rem !important;
z-index: 10;
     color: #fff !important;
      
    }


    .text h1  {
      color: white !important;
      font-size: 2.4rem;
      width: 50%;
      font-weight: 700;
      text-transform: capitalize;
    }

    .text h5{
      width: 70%;
      font-size: 1.2rem;
      margin-bottom: 1rem;
      font-weight: 400;
    }


    .tablet img {
        max-width: 100%;
    width: 100%;
    height: 42rem;
    object-fit: contain;
   
    margin-top: -10rem;
}
     
.acs_button_services{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

 .two-button{
  background: transparent !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: none !important;
  border: 1px solid rgb(255, 255, 255) !important;
}
    
.new_acs_tag{
  margin-top: 2.9rem !important;
  background: white !important;
  color: black;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 4px !important;
      border-radius: 45px;
    background: #FFEBE9;
    padding: 10px 16px;
    border: none;
}

@media (max-width: 1920px){
  .text h1  {
      /* font-size: 1.4rem; */
    /* width: 99%; */
    }

    .text h5{
      /* font-size: 1rem; */
width: 70%;

    }


    .tablet img {
          /* height: 32rem;
    object-fit: contain;
    margin-top: -8rem; */

}


   #logo-bounce canvas {
        height: 95.8vh !important;
        overflow: hidden;
      }
}


@media (max-width: 1440px){
  
  
  .text h1  {
      font-size: 1.4rem;
    width: 99%;
    }

    .text h5{
      font-size: 1rem;
width: 100%;

    }


    .tablet img {
          height: 32rem;
    object-fit: contain;
    margin-top: -5.8rem;

}


   #logo-bounce canvas {
        height: 95.8vh !important;
        overflow: hidden;
      }
}


@media (max-width: 1280px){
  .text h1  {
      font-size: 1.4rem;
    width: 99%;
    }

    .text h5{
      font-size: 1rem;
width: 100%;

    }


    .tablet img {
          height: 32rem;
    object-fit: contain;
    margin-top: -5rem;

}


   #logo-bounce canvas {
        height: 95.8vh !important;
        overflow: hidden;
      }

}


@media (max-width:  1024px){
  .text h1  {
      font-size: 1.4rem;
    width: 99%;
    }

    .text h5{
      font-size: 1rem;
width: 100%;

    }


    .tablet img {
          height: 32rem;
    object-fit: contain;
    margin-top: -7rem;

}


   #logo-bounce canvas {
        height: 95.8vh !important;
        overflow: hidden;
      }
}




@media (max-width: 899px){
  .text h1  {
      font-size: 1.4rem;
    width: 99%;
    }

    .text h5{
      font-size: 1rem;
width: 100%;

    }


    .tablet img {
          height: 32rem;
    object-fit: contain;
    margin-top: -8rem;

}


   #logo-bounce canvas {
        height: 95.8vh !important;
        overflow: hidden;
      }
}



@media (max-width: 767px){
   .text h1  {
      font-size: 1.4rem;
    width: 99%;
    }

    .text h5{
      font-size: 1rem;
width: 100%;

    }


    .tablet img {
          height: 32rem;
    object-fit: contain;
    margin-top: -8rem;

}


   #logo-bounce canvas {
        height: 95.8vh !important;
        overflow: hidden;
      }
}





@media (min-width: 0px) and (max-width: 480px){

 .services_hero {

height: auto;
}

.text{
  padding: 20px;
}

     .text h1  {
      font-size: 1.4rem;
    width: 99%;
    }

    .text h5{
      font-size: 1rem;
width: 100%;

    }


    .tablet img {
          height: 32rem;
    object-fit: contain;
    margin-top: -9rem;

}


   #logo-bounce canvas {
        height: 95.8vh !important;
        overflow: hidden;
      }


}








.services_hero {
           position: relative;
            
            /* background: #1a1a1a; */
            border-radius: 12px;
            
            border: 1px solid #ffffff;
        }

        .border-beam {
            position: absolute;
            inset: -1px;
            border-radius: 12px;
            padding: 3.6px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: xor;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            -webkit-mask-composite:exclude;
            opacity: 1;
            transition: opacity 9s ease-in;
        }

      


        .button_tag{
    border-radius: 45px;
background: #FFEBE9;
padding: 10px 16px;
border: none;
}