/* 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;
}

/* The hero H1 was inheriting the site-wide `h1 {font-size: 75px}` rule
   (am_responsive.css) written for full-width heroes like the homepage and
   portfolio. This H1 sits in a col-lg-6 column, so at 75px even a 3-word
   headline like "Application Development Services" exploded across 3-4
   giant lines (facebook-marketing's read "Effective / Facebook / Marketing
   / Services"). Same clamp() approach as brochure-design's .brx-h1, tuned
   a little smaller since these columns run narrower with longer copy. */
section.hero.wk_service h1.wk_hero_h {
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* ************************************** 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   ********************* */
/* Card padding/radius/margin and the icon size/colour are matched to
   brochure-design.php's .brx-cap capability card (--brx-line grid, 46px
   icons at --color-brand red) so this shared card reads the same across
   graphic-design, web-development, app-development, digital-marketing,
   facebook-marketing and logo-design. Heading size and the card's own
   shadow are left as they were -- only spacing and icon colour moved. */
.wk_text_con {
  padding: 38px 32px;
  box-shadow: 0px 0px 50px 0px rgba(7, 52, 71, 0.1);
  border-radius: 18px;
  margin: 12px 0;
  background-color: #fff;
}
.wk_text_con img {
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  /* Recolors the flat black line icons to var(--color-brand) (#E84242) --
     computed for pure black source art, see filter-solve.js in dev notes. */
  filter: invert(42%) sepia(56%) saturate(3882%) hue-rotate(335deg) brightness(91%) contrast(99%);
}
.wk_text_con h4 {
  margin-top: 30px;
  margin-bottom: -5px;
  font-size: 40px;
  font-weight: bold;
}
.wk_why {
  margin-top: 56px;
}
.wk_why > [class*="col-"] {
  display: flex;
}

/* Same problem as the hero H1, same fix: the "Why choose 360Kreations"
   heading is a <div class="hh2">, which has its own 67px base (my-styles.css)
   sitting in this same col-lg-6 column -- "What Sets 360Kreations Apart in
   Facebook Marketing" (51 chars) at 67px wraps just as badly. Several
   breakpoints force `.hh2` with !important (am_responsive.css), so this needs
   !important too to actually win here; .wk_why_sec is unique to these 6
   service pages so nothing outside them is touched. Scale matches
   brochure-design's .brx-h2. */
.wk_why_sec .hh2 {
  font-size: clamp(30px, 3.1vw, 46px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}
/* *********************        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%;
}