/*
Theme Name: Digital Techie (Elementor)
Theme URI: https://example.com
Author: Claude
Description: Multi-page Premium Tech theme for the Digital Techie digital marketing agency. Every page is built from native Elementor widgets, so it is edited with "Edit with Elementor" and no code.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: digital-techie
Tags: elementor, business, responsive
*/

:root{--x-primary:#3B82F6;--x-primary-deep:#2A5EB1;--x-tint:#EBF2FE;--x-accent:#22D3EE;--x-ink:#07111F;--x-ink2:#0B1930;--x-paper:#F5F8FC;--x-text:#515862;--x-line:#E1E2E4;--x-radius:12px;--x-display:'Inter';--x-body:'Inter';}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--x-body),system-ui,sans-serif;color:var(--x-text);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
img,video,iframe,svg{max-width:100%}
img{height:auto}
a{color:var(--x-primary)}

/* ---------- Full-width safety: nothing may be wider than the screen (prevents the empty strip on the right) ---------- */
.elementor,.site-hdr,.site-ftr{width:100%;max-width:100%}
.e-con,.e-con>.e-con-inner{min-width:0;max-width:100%}
.elementor-widget,.elementor-widget-container{min-width:0;max-width:100%}
.elementor-widget-heading .elementor-heading-title,.elementor-widget-text-editor{overflow-wrap:break-word}
.elementor-widget-google_maps iframe{width:100%!important}
.e-con.e-parent{margin-inline:0}
body.elementor-template-full-width,body.elementor-page{margin:0}

/* ---------- Shared header ---------- */
.site-hdr{position:sticky;top:0;z-index:999}
.admin-bar .site-hdr{top:32px}
@media(max-width:782px){.admin-bar .site-hdr{top:46px}}
.x-nav{backdrop-filter:saturate(1.4) blur(10px);transition:box-shadow .3s}
.x-nav.x-stuck{box-shadow:0 8px 30px -14px rgba(10,14,40,.35)}
.x-navlink .elementor-heading-title a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .3s ease}
.x-navlink:hover .elementor-heading-title a{background-size:100% 2px}
.x-burger{display:none}
.x-burger .elementor-icon{cursor:pointer}

/* ---------- Buttons ---------- */
.x-btn .elementor-button{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background-color .25s,color .25s}
.x-btn .elementor-button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s ease;pointer-events:none}
.x-btn .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(10,14,40,.45)}
.x-btn .elementor-button:hover::after{transform:translateX(130%)}

/* ---------- Hover effects (chosen per design style) ---------- */
.x-h{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
.x-h-lift:hover{transform:translateY(-6px);box-shadow:0 20px 44px -22px rgba(10,14,40,.45)}
.x-h-border:hover{border-color:var(--x-accent)!important;transform:translateY(-3px)}
.x-h-glow:hover{box-shadow:0 0 0 1px var(--x-primary),0 22px 54px -24px var(--x-primary);border-color:var(--x-primary)!important}
.x-h-tilt:hover{transform:perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-5px);box-shadow:0 22px 44px -22px rgba(10,14,40,.5)}
.x-h-underline:hover{border-color:var(--x-ink)!important}
.x-h-underline:hover .elementor-icon-box-title,.x-h-underline:hover .elementor-icon-box-title a,.x-h-underline:hover .elementor-heading-title{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.x-h .elementor-icon-box-icon .elementor-icon{transition:transform .35s ease}
.x-h:hover .elementor-icon-box-icon .elementor-icon{transform:scale(1.1) rotate(-4deg)}
.x-zoom{overflow:hidden}
.x-zoom img{display:block;width:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.x-zoom:hover img,.x-photo-card:hover .x-zoom img{transform:scale(1.07)}

/* ---------- Hero ---------- */
.x-hero-visual{position:relative}
.x-hero-visual .elementor-widget-image img{display:block;margin:0 auto}
.x-float{position:absolute!important;z-index:2;width:auto!important;animation:x-bob 6s ease-in-out infinite}
.x-float-1{top:6%;left:0}
.x-float-2{bottom:8%;right:0;animation-delay:-3s}
@keyframes x-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.x-pill .elementor-heading-title{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--x-tint)}
.x-hero-full,.x-pagehero{position:relative}

/* ---------- Typography helpers ---------- */
.x-price small{font-size:16px;font-weight:500;opacity:.7;letter-spacing:0}
.x-mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--x-accent) 45%,transparent) 62%);padding:0 .08em}
.elementor-widget-counter .elementor-counter{text-align:left}
.elementor-widget-counter .elementor-counter-number-wrapper{justify-content:flex-start;line-height:1.05}

/* ---------- Scrolling ticker (CSS only) ---------- */
.x-marquee{overflow:hidden}
.x-marquee .elementor-heading-title{display:inline-block;white-space:nowrap;padding-left:100%;animation:x-marq 32s linear infinite}
.x-ticker:hover .x-marquee .elementor-heading-title{animation-play-state:paused}
@keyframes x-marq{to{transform:translateX(-100%)}}

/* ---------- Footer / floating WhatsApp ---------- */
.x-wa-float{position:fixed!important;right:20px;bottom:20px;z-index:998;width:auto!important}
.x-wa-float .elementor-icon{box-shadow:0 10px 28px rgba(37,211,102,.45);animation:x-pulse 2.6s infinite}
@keyframes x-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.x-footer .elementor-icon-list-icon{display:none}
.x-footer .elementor-icon-list-item a{transition:color .2s,padding-left .2s}
.x-footer .elementor-icon-list-item a:hover{color:#fff;padding-left:4px}
.elementor-accordion .elementor-accordion-item{border-left:0;border-right:0}

/* ---------- Tablet (Elementor breakpoint 1024) ---------- */
@media(max-width:1024px){
  .x-float{display:none!important}
  .x-stat{border-left:0!important;padding-left:0!important}
  .x-burger{display:block!important;margin-left:auto}
  .x-nav>.e-con-inner{flex-wrap:wrap}
  .x-nav .x-nav-right{display:none!important;width:100%!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important;padding:10px 0 8px}
  .x-nav.x-open .x-nav-right{display:flex!important}
  .x-nav .x-nav-links{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;width:100%!important}
  .x-nav .x-nav-links .elementor-heading-title{font-size:17px}
  .x-nav-cta{width:100%}
}
/* ---------- Mobile (Elementor breakpoint 767) ---------- */
@media(max-width:767px){
  .x-stat{border-left:0!important}
  .x-hero-full,.x-pagehero{min-height:0!important}
  .x-wa-float{right:14px;bottom:14px}
  .elementor-widget-counter .elementor-counter-number-wrapper{font-size:40px}
  .x-marquee .elementor-heading-title{animation-duration:22s}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .elementor-invisible{visibility:visible!important;opacity:1!important}
}

/* ---------- Fallback pages (posts, 404, anything not built with Elementor) ---------- */
.site-header,.site-footer{padding:20px 24px;border-bottom:1px solid var(--x-line)}
.site-footer{border:0;border-top:1px solid var(--x-line);text-align:center;font-size:14px}
.site-header .in{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-title{font-family:var(--x-display);font-weight:800;font-size:22px;color:var(--x-ink);text-decoration:none}
.site-header ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap}
.site-header a{text-decoration:none;color:var(--x-ink)}
.entry{max-width:780px;margin:48px auto;padding:0 24px;line-height:1.7}
.entry h1,.entry h2{font-family:var(--x-display);color:var(--x-ink)}