.header-content{
    display: flex; 
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    flex-direction:column;
  }
  .home_btn i {
    font-size: xx-large;
}
  .header-eight .header-content h1{
    font-size: 35px;
  }
  
  .header-eight .header-content p{
    margin-top: 0px;
  }
  #hero-area {
    height: 18vh !important;
    padding: 10px 0 10px 0;
  }
  
  .home_btn {
    position: fixed;
    top: 65px;
    left: 30px;
    z-index: 9999;
    height: 50px;
    width: 50px;
    border-radius: 99999px;
    background-color: white;
    border: 2px solid var(--primary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}
  .desc-btn{
      animation: shake-btn 2s linear infinite alternate;
    }
    
    @keyframes shake-btn {
      
    0% {
      transform: translate(9px, 0);
    }
    7% {
      transform: translate(-9px, 0);
    }
    15%, 100% {
      transform: translate(0, 0);
    }
    }
  
    @media  screen and (max-width: 576px){
      #hero-area {
        height: 40vh !important;
    
      }
      .home_btn{
        top: 20px;
        left: 10px;
      }
      #add_review{
        padding: 5px 10px;
      }
      .container-fluid h2{
        font-size: 10px;
      }
      
    }
    @media  screen and (min-width: 576px) and (max-width: 768px) {
      .ms-2 {
        margin-left: 0px !important;
        margin-top: 10px;
       
    }
    .services-eight .single-services .service-content .buttons {
      left: 4%;
      bottom: 2%;
    }
    .services-eight .single-services .service-content .buttons .service-purchase-btn{
      margin-top: 10px;
    }
    .services-eight .single-services{
      height: 55vh;
    }
   
    }
    @media  screen and (min-width: 576px) and (max-width: 991px){
      .services-eight .single-services.video-editing{
        height: 80vh !important;
      }
      .ms-2 {
        margin-left: 0px !important;
        margin-top: 10px;
       
    }
    .services-eight .single-services .service-content .buttons {
      left: 4%;
      bottom: 2%;
      transform: translateX(0%);
    }
    
    #hero-area {
      height: 35vh !important;
  
    }
    }
    @media screen and (min-width: 768px) and (max-width:991px) {
      .services-eight .single-services .service-content .buttons .service-purchase-btn{
        margin-left: 0px !important;
    
      }
      .col-lg-3 {
        
        width: 40% !important;
    }
    }
    @media  screen and (min-width: 992px) and (max-width:1248px){
        .services-eight .single-services{
            height: 85vh;
        }
        /* .services-eight .single-services .service-content .buttons .service-purchase-btn{
            margin-left: 0px !important;
        
          } */
    }
    @media  screen and (min-width: 992px) {
      .col-lg-3 {
        
        width: 30% !important;
    }
    #hero-area {
      height: 30vh !important;
  
    }
    .row{
      justify-content: center;
    }
    }
    .services-eight .single-services .service-content .buttons{
      position: relative !important;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
    }

    .services-eight .single-services .service-content .buttons .service-purchase-btn{
      width: 100%;

    }
    .services-eight .single-services .service-content .buttons .service-demo-btn,
    .services-eight .single-services .service-content .buttons .purchase-btn{
      width: 50%;
    }
    .row-flex{
      width: 90% !important;
    }
  @media screen and (max-width:768px){
    .services-eight .single-services .service-content .buttons{
      flex-direction: column;
    }
    
  }
  @media screen and (min-width:768px) and (max-width:991px){
    .services-eight .single-services .service-content .buttons .service-purchase-btn,
    .services-eight .single-services .service-content .buttons .service-demo-btn{
      margin-left: 4px;
      margin-right: 4px;
    }
    .services-eight .single-services .service-content .buttons .service-demo-btn,
    .services-eight .single-services .service-content .buttons .purchase-btn{
      width: 100%;
    }
    
  }
  @media screen and (max-width:768px){
    .services-eight .single-services .service-content .buttons .service-demo-btn,
    .services-eight .single-services .service-content .buttons .purchase-btn{
      width: 100%;
    }
    .services-eight .single-services .service-content .buttons .service-purchase-btn{
      margin-left: 0px !important;
    }
    
  }