/* hero CSS start */

section.hero.wk_service {
  align-items: center;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 150px;

  /* The per-page banner backdrops (logo-design-banner-bg.webp and friends) are
     purple/gold artwork from the old theme and can't be retoned by swapping a
     colour. They are decorative only — the product mockup is a separate <img> —
     so they're replaced with design.md's signature red/teal gradient.
     !important is needed because the image is set inline, per page.

     design.md draws the gradient red -> teal from the top left. Here it runs the
     other way: the hero copy sits top-left, and the emphasised <span> in the H1
     is --color-brand, so red-on-red would erase it. Teal leads and red bleeds in
     from the far corner — same two colours, red kept as an accent. */
  background-image: linear-gradient(115deg,
      var(--color-deep) 0%,
      var(--color-deep) 42%,
      #0f5a72 68%,
      var(--color-brand) 130%) !important;
  background-color: var(--color-deep);
}
.wk_white {
  color: #fff;
}

h1.wk_hero_h span {
  color: var(--color-brand);
}

/* ...but on the teal hero the brand red is too low-contrast against the deep
   teal, so the emphasised half of the H1 uses the hotter accent instead. */
section.hero.wk_service h1.wk_hero_h span {
  color: #ff7a7a;
}
/* ************************************** hero CSS End ****************************************/

/* *********************         OUR INDUSTRIES start  ********************* */
.wk_service section#industries {
  background: var(--color-surface-alt);
}

.wk_service .industries .section-tag-dark.aos-init.aos-animate,
.wk_service .industries .hh2,
.wk_service .industries .link.white,
.wk_service .industries .marquee div {
  color: var(--color-ink) !important;
}

/* *********************         OUR INDUSTRIES end  ********************* */

/* *********************        Cta sec start   ********************* */

section.cta-contact.wk_cta_sec {
  background-size: 90%;
  background-position: bottom right;
  background-color: var(--color-surface-soft);
}
/* *********************        Cta sec end   ********************* */

/* *********************        why choose  sec start   ********************* */
.wk_text_con {
  padding: 30px;
  box-shadow: 0px 0px 50px 0px rgba(7, 52, 71, 0.1);
  border-radius: 20px;
  margin: 15px 0;
  background-color: #fff;
}
.wk_text_con h4 {
  margin-top: 30px;
  margin-bottom: -5px;
  font-size: 40px;
  font-weight: bold;
}
.wk_why {
  margin-top: 50px;
}
.wk_why > [class*="col-"] {
  display: flex;
}
/* *********************        why choose  sec end   ********************* */
/* *********************       process  sec start   ********************* */
.wk_process {
  background-color: var(--color-surface-alt);
  background-repeat: no-repeat;
}
.wk_stky {
  position: sticky;
  top: 100px;
  height: fit-content;
}
.stp {
  position: absolute;
  right: 30px;
  top: 16%;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 20px;
}
/* *********************       cta2 sec start   ********************* */

.wk_cta_sec2 {
    background-size: cover;
    background-position: top right;
    background-color: var(--color-surface-soft);
    /* padding-bottom: 0; */
    padding: 120px 0;
}
@media (min-width: 1024px) {
  .wk_cta2_img {
    margin-top: -170px;
  }
}
/* *********************       cta2 sec end   ********************* */
/* *********************       testimonial   ********************* */

section.wk_testimonial {
  padding: 0;
  background-repeat: no-repeat;
}

.wk_testimonial div#testimonials {
  background-color: transparent !important;
}

/* *********************       cta3 sec start   ********************* */
section.wk_cta3_sec {
    background: var(--color-surface-soft);
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.wk_cta3_img {
  margin-top: -49px;
}

/* UK services CSS Start */
.uk_img_container {
  position: relative;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.uk_fb_cta_sec {
  background-size: 100% !important;
}
/* UK services CSS End*/


/* wk app  cta sec start */
section.cta-contact.wk_app_cta {
    background-size: cover;
    padding: 0;
}

.app_development img.wk_hero_img {
    margin-right: -60%;
    margin-bottom: -13%;
}