.elementor-4705 .elementor-element.elementor-element-e059877{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-4705 .elementor-element.elementor-element-e059877:not(.elementor-motion-effects-element-type-background), .elementor-4705 .elementor-element.elementor-element-e059877 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background:url("https://gknectdigital.co.za/wp-content/uploads/2026/08/services-hero-poster.webp") 50% 50%;background-size:cover;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-4705 .elementor-element.elementor-element-e059877{--margin-top:-137px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS */.gk-svc{
  --gk-head:"Bruno Ace","Segoe UI",system-ui,sans-serif;
  --gk-body:"Figtree","Segoe UI",system-ui,sans-serif;
  font-family:var(--gk-body); color:#fff; max-width:1280px; margin:0 auto;
}
.gk-svc *{box-sizing:border-box}
.gk-svc a{text-decoration:none !important}

.gk-glass{
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.3);
  border-radius:20px;
  box-shadow:0 8px 32px 0 rgba(0,0,0,.37),inset 0 1px 1px 0 rgba(255,255,255,.3);
  transition:all .3s ease;
}

.gk-svc .gk-eyebrow{font-family:var(--gk-head);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.gk-svc .gk-title{font-family:var(--gk-head);font-size:clamp(28px,4vw,46px);line-height:1.15;color:#fff;margin:0 0 36px}

.gk-svc .gk-explorer{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start}
.gk-svc .gk-list{display:flex;flex-direction:column;gap:14px}

.gk-svc .gk-item{display:flex;align-items:center;gap:16px;padding:24px 24px;cursor:pointer;width:100%;text-align:left;color:#fff;font-family:var(--gk-body)}
.gk-svc .gk-item .gk-en{font-family:var(--gk-head);font-size:14px;color:rgba(255,255,255,.6);width:30px}
.gk-svc .gk-item .gk-et{font-size:18px;font-weight:600}
.gk-svc .gk-item:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5)}
.gk-svc .gk-item.is-active{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.12));border-color:rgba(255,255,255,.65)}
.gk-svc .gk-item:focus-visible{outline:2px solid #fff;outline-offset:2px}

.gk-svc .gk-panel{position:relative;overflow:hidden;min-height:560px;padding:0}
.gk-svc .gk-pane{position:absolute;inset:0}
.gk-svc .gk-pane[hidden]{display:none !important}
.gk-svc .gk-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.gk-svc .gk-pane::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.25) 100%)}
.gk-svc .gk-content{position:relative;z-index:2;padding:56px 60px;animation:gkfade .45s ease}
@keyframes gkfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.gk-svc .gk-h{font-family:var(--gk-head);font-size:34px;line-height:1.15;color:#fff;margin:0 0 18px}
.gk-svc .gk-sub{font-size:17px;line-height:1.65;color:rgba(255,255,255,.85);max-width:48ch;margin:0 0 34px}
.gk-svc .gk-deliver{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:0 0 38px;padding:0;list-style:none}
.gk-svc .gk-deliver li{position:relative;padding-left:30px;font-size:16px;color:#fff}
.gk-svc .gk-deliver li::before{content:"";position:absolute;left:2px;top:5px;width:15px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

.gk-svc .gk-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--gk-head);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:16px 28px;font-weight:600;text-decoration:none !important}
.gk-svc .gk-cta:hover,.gk-svc .gk-cta:focus{transform:translateY(-2px);border-color:rgba(255,255,255,.6);color:#fff;text-decoration:none !important}

/* ---------- Mobile: accordion (box drops under the tapped service) ---------- */
@media(max-width:820px){
  .gk-svc{max-width:100%}
  .gk-svc .gk-title{margin:0 0 24px}
  .gk-svc .gk-explorer{grid-template-columns:1fr;gap:0}
  .gk-svc .gk-list{flex-direction:column;gap:14px}
  .gk-svc .gk-item{padding:18px 18px}

  /* the empty desktop panel is not used on mobile */
  .gk-svc .gk-panel{display:none}

  /* the active pane, now moved under its button, becomes its own glass box */
  .gk-svc .gk-list > .gk-pane{
    position:relative; inset:auto; display:block; width:100%;
    overflow:hidden; border-radius:20px; min-height:0;
    border:1px solid rgba(255,255,255,.3);
    box-shadow:0 8px 32px 0 rgba(0,0,0,.37),inset 0 1px 1px 0 rgba(255,255,255,.3);
  }
  .gk-svc .gk-pane::after{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.8))}
  .gk-svc .gk-content{padding:34px 26px}
  .gk-svc .gk-h{font-size:26px;margin:0 0 14px}
  .gk-svc .gk-sub{font-size:16px;margin:0 0 26px}
  .gk-svc .gk-deliver{grid-template-columns:1fr;gap:12px;margin:0 0 30px}
}

/* ---------- Small phones ---------- */
@media(max-width:520px){
  .gk-svc .gk-item{padding:16px 16px}
  .gk-svc .gk-title{font-size:clamp(24px,8vw,32px)}
  .gk-svc .gk-content{padding:28px 22px}
  .gk-svc .gk-h{font-size:23px}
  .gk-svc .gk-sub{font-size:15px}
  .gk-svc .gk-cta{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){.gk-svc *{animation:none!important;transition:none!important}}

/* clear the fixed site header */
.gk-svc{padding-top:32px}
@media(max-width:820px){.gk-svc{padding-top:110px}}

/* CURSOR */
#cursor {
  position: fixed;
  z-index: 9999;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.9); /* Pure white */
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .15s, height .15s, background .2s;
  mix-blend-mode: normal;
}

#cursor-ring {
  position: fixed;
  z-index: 9998;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.5); /* White ring */
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .22s cubic-bezier(.25,.46,.45,.94),
              height .22s cubic-bezier(.25,.46,.45,.94),
              border-color .2s;
    mix-blend-mode: normal;
}

/* Hover state - brighter white glow */
body.hovering #cursor {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 1); /* Full white */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); /* White glow */
}

body.hovering #cursor-ring {
  width: 60px;
  height: 60px;
  border-color: rgba(255, 255, 255, 0.8); /* Brighter white ring */
}

/* Hide default cursor */
body {
  cursor: none;
}

a, button, .elementor-button, input, textarea {
  cursor: none;
}

.gk-svc .gk-item,
.gk-svc .gk-cta { cursor: none; }/* End custom CSS */