/* DESK TOP */
/* HERO RESPONSIVE TEST  one more time */
@media screen and (min-width: 1382px) {
  .wp-block-group.alignfull.services-hero.hero-copy {
     width: 1280px !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;

        background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .services-hero .header-tagline-box,
  .services-hero .header-tagline-box p {
    max-width: 520px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* TABLET */
@media (min-width: 769px) and (max-width: 1100px) {
  .hero-script::after {
    width: 220px !important;
    bottom: -8px !important;
  }

  .hero-script::before {
    width: 150px !important;
    bottom: -18px !important;
  }
}

/* PHONE */
@media screen and (max-width: 900px) {
  .hero-girl,
  .hero-girl img {
    display: none !important;
  }

  .service-label,
  .hero-service-label,
  .services-label {
    display: none !important;
  }

  .hero-section,
  .hero-section .kt-row-column-wrap,
  .hero-section .wp-block-columns {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

.hero-title,
.hero-copy h1 {
  font-size: 42px !important;
  line-height: .9 !important;
  max-width: 330px !important;
  margin: 0 auto 12px !important;
  text-align: center !important;
}

  .hero-script,
  .hero-copy h2 {
    font-size: 34px !important;
    line-height: 1 !important;
    margin: 8px auto 30px !important;
    display: inline-block !important;
    position: relative !important;
  }

  .hero-script::after {
    width: 145px !important;
    height: 4px !important;
    bottom: -12px !important;
  }

  .hero-script::before {
    width: 105px !important;
    height: 3px !important;
    bottom: -22px !important;
  }

  .header-tagline-box,
  .header-tagline-box p {
    width: 100% !important;
    max-width: 285px !important;
    margin: 18px auto 28px !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  @media screen and (min-width: 1382px) {
  body::before {
    content: "HERO RESPONSIVE CSS IS LOADING";
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 999999;
    background: red;
    color: white;
    padding: 12px 18px;
    font-size: 18px;
    font-weight: 700;
    border: 1 px solid red; 
  }
}

}