/*
 * Digital Kreativ homepage: mobile services section from 390px PSD.
 * Review draft. Only homepage page #78, viewport <=767px.
 * Preserves Elementor cards, links, touch scrolling and desktop design.
 */
@media (max-width:767px) {
  body.page-id-78 .dk-services-section {
    --dk-services-mobile-font:'Poppins',Arial,Helvetica,sans-serif;
    --dk-services-display-font:'Playfair Display',Georgia,serif;
    background-color:#000706!important;
  }
  body.page-id-78 .dk-services-section .dk-services-layout {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:53px!important;
    width:100%!important;
    max-width:100%!important;
    padding:14px 0 64px!important;
  }
  body.page-id-78 .dk-services-section .dk-services-intro {
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    width:100%!important;
    max-width:390px!important;
    padding:0 17px!important;
    margin:0 auto!important;
    gap:0!important;
    text-align:center!important;
  }
  body.page-id-78 .dk-services-section .dk-services-kicker {
    width:auto!important;
    margin:0 auto 29px!important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-services-kicker .elementor-heading-title {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    padding:8px 20px!important;
    border:1px solid #3edfd0!important;
    border-radius:999px!important;
    color:#fff!important;
    background:rgba(0,14,14,.3)!important;
    font-family:'Poppins',Arial,sans-serif!important;
    font-size:12.5px!important;
    font-weight:400!important;
    letter-spacing:0!important;
    line-height:1.4!important;
    white-space:nowrap;
  }
  body.page-id-78 .dk-services-section .dk-services-title-a,
  body.page-id-78 .dk-services-section .dk-services-title-b {
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-services-title-a .elementor-heading-title {
    color:#fff!important;
    font-family:'Playfair Display',Georgia,serif!important;
    font-size:clamp(22px,6.41vw,25px)!important;
    font-weight:700!important;
    line-height:1.2!important;
    letter-spacing:0!important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-services-title-b .elementor-heading-title {
    color:#3edfd0!important;
    font-family:'Playfair Display',Georgia,serif!important;
    font-size:clamp(29px,8.547vw,33.333px)!important;
    font-weight:700!important;
    line-height:1.15!important;
    letter-spacing:0!important;
  }
  body.page-id-78 .dk-services-section .dk-services-description {
    display:block!important;
    width:100%!important;
    max-width:356px!important;
    margin:30px auto 29px!important;
    padding:0!important;
    text-align:center!important;
  }
  body.page-id-78 .dk-services-section .dk-services-description p {
    margin:0!important;
    color:#fff!important;
    font-family:'Poppins',Arial,sans-serif!important;
    font-size:12.5px!important;
    font-weight:400!important;
    line-height:2!important;
    letter-spacing:0!important;
    text-align:center!important;
  }
  body.page-id-78 .dk-services-section .dk-services-all {
    width:188px!important;
    max-width:100%!important;
    margin:0 auto!important;
  }
  body.page-id-78 .dk-services-section .dk-services-all .elementor-button {
    display:flex!important;
    width:188px!important;
    max-width:100%!important;
    height:41px!important;
    min-height:41px!important;
    padding:0 18px 0 20px!important;
    justify-content:space-between!important;
    align-items:center!important;
    border:1px solid rgba(225,247,246,.9)!important;
    border-radius:999px!important;
    background:rgba(0,13,14,.3)!important;
    color:#fff!important;
    font-family:'Poppins',Arial,sans-serif!important;
    font-size:12.5px!important;
    font-weight:500!important;
    line-height:1.3!important;
  }
  body.page-id-78 .dk-services-section .dk-services-all .elementor-button::after {
    content:'›'!important;
    margin:0!important;
    font-size:20px!important;
    line-height:1!important;
  }
  body.page-id-78 .dk-services-section .dk-services-person {
    display:none!important;
  }
  /* Horizontal swipe grid: PSD 278px center card / 34px column spacing.
     The layout displays Nettside over Grafisk, and preserves all four cards. */
  body.page-id-78 .dk-services-section .dk-services-grid {
    --dk-mobile-card-width:min(71.28vw,278px);
    display:grid!important;
    width:100vw!important;
    max-width:none!important;
    margin:0 0 0 calc(50% - 50vw)!important;
    padding:0 calc((100vw - var(--dk-mobile-card-width))/2) 3px!important;
    grid-template-columns:none!important;
    grid-template-rows:repeat(2,max-content)!important;
    grid-auto-flow:column!important;
    grid-auto-columns:var(--dk-mobile-card-width)!important;
    column-gap:34px!important;
    row-gap:31px!important;
    justify-content:start!important;
    align-content:start!important;
    align-items:start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:calc((100vw - var(--dk-mobile-card-width))/2)!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.page-id-78 .dk-services-section .dk-services-grid::-webkit-scrollbar {
    display:none;
  }
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(1){order:1}
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(3){order:2}
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(2){order:3}
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(4){order:4}
  body.page-id-78 .dk-services-section .dk-service-card {
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:287px!important;
    min-height:287px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    align-self:start!important;
    scroll-snap-align:center!important;
    border:1px solid rgba(62,223,208,.73)!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:#060908!important;
    box-shadow:0 9px 23px rgba(0,0,0,.5),0 0 17px rgba(62,223,208,.1)!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:first-child,
  body.page-id-78 .dk-services-section .dk-service-card:first-child:hover,
  body.page-id-78 .dk-services-section .dk-service-card:first-child:focus-within {
    background:#103b34!important;
    transform:none!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:not(:first-child):hover,
  body.page-id-78 .dk-services-section .dk-service-card:not(:first-child):focus-within {
    background:#103b34!important;
  }
  /* First card is already turquoise in the PSD; it must not animate/zoom. */
  body.page-id-78 .dk-services-section .dk-service-card:first-child:hover,
  body.page-id-78 .dk-services-section .dk-service-card:first-child:focus-within {
    border-color:rgba(62,223,208,.73)!important;
    box-shadow:0 9px 23px rgba(0,0,0,.5),0 0 17px rgba(62,223,208,.1)!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:first-child:hover .dk-service-image img,
  body.page-id-78 .dk-services-section .dk-service-card:first-child:focus-within .dk-service-image img,
  body.page-id-78 .dk-services-section .dk-service-card:first-child:hover .dk-service-icon,
  body.page-id-78 .dk-services-section .dk-service-card:first-child:focus-within .dk-service-icon {
    transform:none!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:first-child:hover .dk-service-heading .elementor-heading-title a,
  body.page-id-78 .dk-services-section .dk-service-card:first-child:focus-within .dk-service-heading .elementor-heading-title a {
    color:#fff!important;
  }
  body.page-id-78 .dk-services-section .dk-service-image {
    flex:0 0 184px!important;
    width:100%!important;
    height:184px!important;
    min-height:184px!important;
    margin:0!important;
    border-bottom:1px solid rgba(62,223,208,.72)!important;
    border-radius:21px 21px 13px 13px!important;
    overflow:hidden!important;
  }
  body.page-id-78 .dk-services-section .dk-service-image img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body {
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:center!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:13px 10px 10px!important;
    gap:0!important;
    overflow:visible!important;
    text-align:center!important;
  }
  body.page-id-78 .dk-services-section .dk-service-heading {
    width:100%!important;
    max-width:100%!important;
    margin:0 0 8px!important;
    padding:0!important;
    text-align:center!important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-service-heading .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-service-heading .elementor-heading-title a {
    font-family:'Poppins',Arial,sans-serif!important;
    font-size:clamp(14px,4.274vw,16.667px)!important;
    font-weight:600!important;
    line-height:1.35!important;
    letter-spacing:0!important;
    color:#fff!important;
    text-align:center!important;
  }
  body.page-id-78 .dk-services-section .dk-service-summary {
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
  }
  body.page-id-78 .dk-services-section .dk-service-summary p {
    margin:0!important;
    color:#eee!important;
    font-family:'Poppins',Arial,sans-serif!important;
    font-size:12.5px!important;
    font-weight:400!important;
    line-height:1.65!important;
    letter-spacing:0!important;
    text-align:center!important;
  }
  body.page-id-78 .dk-services-section .dk-service-arrow {
    display:none!important;
  }

  /* Icon tiles positioned inside lower-left of the photos. Use the same
     verified Media Library icon PNGs as desktop, rendered white on teal. */
  body.page-id-78 .dk-services-section .dk-service-icon {
    position:absolute!important;
    z-index:3!important;
    top:-61px!important;
    left:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    background:#106e65!important;
    background-image:none!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  body.page-id-78 .dk-services-section .dk-service-icon .elementor-icon {
    visibility:hidden!important;
  }
  body.page-id-78 .dk-services-section .dk-service-icon::before {
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:8px!important;
    top:8px!important;
    width:28px!important;
    height:28px!important;
    background:#fff!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(1) .dk-service-icon::before {
    -webkit-mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/pngtree-web-development-line-icon-vector-png-image_6630883-1.png")!important;
    mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/pngtree-web-development-line-icon-vector-png-image_6630883-1.png")!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(2) .dk-service-icon::before {
    -webkit-mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/1997928.png")!important;
    mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/1997928.png")!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(3) .dk-service-icon::before {
    -webkit-mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4091459.png")!important;
    mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4091459.png")!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card:nth-child(4) .dk-service-icon::before {
    -webkit-mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4201611.png")!important;
    mask-image:url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/4201611.png")!important;
  }
}
/* User screenshot QA: keep the decorative network behind a dark overlay,
   while keeping the real Elementor card text, buttons and icons on top. */
@media (max-width:767px) {
  body.page-id-78 .dk-services-section::before {
    opacity:.27!important;
  }
  body.page-id-78 .dk-services-section::after {
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    z-index:0!important;
    background:linear-gradient(180deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.66) 43%,
      rgba(0,0,0,.74) 100%)!important;
  }
  body.page-id-78 .dk-services-section > .e-con-inner,
  body.page-id-78 .dk-services-section > .elementor-container,
  body.page-id-78 .dk-services-section .dk-services-layout {
    position:relative!important;
    z-index:2!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card {
    position:relative!important;
    isolation:isolate!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body {
    /* Pin the Elementor content to the bottom of every fixed-height card.
       The inherited responsive min-height/padding pushed the first card's
       real widgets below the clipped card boundary on phones. */
    position:absolute!important;
    inset:auto 0 0 0!important;
    z-index:10!important;
    flex:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:103px!important;
    min-height:103px!important;
    max-height:103px!important;
    margin:0!important;
    padding:9px 12px 10px!important;
    gap:0!important;
    --gap:0px!important;
    --row-gap:0px!important;
    --column-gap:0px!important;
    background:transparent!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body .dk-service-heading,
  body.page-id-78 .dk-services-section .dk-service-card-body .dk-service-summary,
  body.page-id-78 .dk-services-section .dk-service-card-body .elementor-widget-container {
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    position:relative!important;
    z-index:5!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body .dk-service-heading {
    margin:0 0 5px!important;
    padding:0!important;
    min-height:20px!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body .dk-service-summary {
    margin:0!important;
    padding:0!important;
    min-height:20px!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body .elementor-heading-title,
  body.page-id-78 .dk-services-section .dk-service-card-body .elementor-heading-title a {
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    color:#fff!important;
    font-family:'Poppins',Arial,sans-serif!important;
    font-size:16px!important;
    font-weight:600!important;
    line-height:1.35!important;
    text-align:center!important;
    white-space:normal!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body .dk-service-summary p {
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    color:#f5fafa!important;
    font-family:'Poppins',Arial,sans-serif!important;
    font-size:12.5px!important;
    font-weight:400!important;
    line-height:1.55!important;
    text-align:center!important;
    white-space:normal!important;
  }
  /* The badge is positioned over the photograph, not inside the text flow. */
  body.page-id-78 .dk-services-section .dk-service-card-body .dk-service-icon {
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:7!important;
    left:15px!important;
    top:-53px!important;
    width:42px!important;
    height:42px!important;
    background-color:#106e65!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body .dk-service-icon::before {
    z-index:8!important;
  }
}
@media (max-width:359px) {
  body.page-id-78 .dk-services-section .dk-services-layout {gap:35px!important}
  body.page-id-78 .dk-services-section .dk-service-card {
    height:270px!important;
    min-height:270px!important;
  }
  body.page-id-78 .dk-services-section .dk-service-image {
    height:153px!important;
    min-height:153px!important;
    flex-basis:153px!important;
  }
  body.page-id-78 .dk-services-section .dk-service-card-body {
    height:117px!important;
    min-height:117px!important;
    max-height:117px!important;
  }
  body.page-id-78 .dk-services-section .dk-services-intro {padding-inline:14px!important}
  body.page-id-78 .dk-services-section .dk-services-title-a .elementor-heading-title {font-size:22px!important}
  body.page-id-78 .dk-services-section .dk-services-title-b .elementor-heading-title {font-size:29px!important}
  body.page-id-78 .dk-services-section .dk-service-heading .elementor-heading-title,
  body.page-id-78 .dk-services-section .dk-service-heading .elementor-heading-title a {font-size:14px!important}
  body.page-id-78 .dk-services-section .dk-service-summary p {font-size:11.8px!important}
}