/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =====================================================================
   EDWIN LOPEZ: ONE-PAGER SHELL

   CONTENTS
     1. Variables
     2. Page behaviour + section containers
     3. Fixed background
     4. Left sidebar (desktop)
     5. Right nav: dots + mouse button
     6. Social icons
     7. Mobile elements (hidden on desktop)
     8. Home
     9. About
    10. Services
    11. RESPONSIVE: tablet + mobile (all media queries live here)
    12. Reduced motion

   Section containers in Elementor need:
     Advanced > CSS ID     : home, about, projects, landing-page, newsletters,
                             banner-design, services, process, contact
     Advanced > CSS Classes: elx-section
   ===================================================================== */


/* =====================================================================
   1. VARIABLES
   ===================================================================== */
:root{
  --elx-bg:#02030a;
  --elx-text:#ffffff;
  --elx-dim:rgba(255,255,255,.6);       /* inactive menu text */
  --elx-sidebar-w:280px;
  --elx-overlay-home:.65;               /* lighter on Home (0 = no tint, 1 = solid dark) */
  --elx-overlay-rest:.88;               /* darker on every other section */
  --elx-fade:.9s;                       /* overlay transition speed */
  --elx-move:30px;                      /* background mouse-parallax distance */

  /* theme colours */
  --elx-primary:#3B9EFF;                /* electric blue */
  --elx-secondary:#FF8A3D;              /* orange */
  --elx-accent:#FF8A3D;
  --elx-white:#fff;
  --elx-black:#1d1d1d;
}


/* =====================================================================
   2. PAGE BEHAVIOUR + SECTION CONTAINERS
   ===================================================================== */
html{ scroll-behavior:smooth; scroll-snap-type:y proximity; }
body{ background:var(--elx-bg); }

/* every Elementor section container: full screen, snaps, clears the sidebar */
.elx-section{
  min-height:100vh;
  scroll-snap-align:start;
  box-sizing:border-box;
  position:relative;
  z-index:1;
}
@media (min-width:1025px){
  .elx-section{ padding-left:var(--elx-sidebar-w) !important; padding-right:80px !important; }
}


/* =====================================================================
   3. FIXED BACKGROUND (light on Home, dark on the rest)
   ===================================================================== */
.elx-bg{
  position:fixed;
  /* oversized by 1.5x the max shift so edges never show */
  top:calc(var(--elx-move) * -1.5);
  right:calc(var(--elx-move) * -1.5);
  bottom:calc(var(--elx-move) * -1.5);
  left:calc(var(--elx-move) * -1.5);
  z-index:0;
  pointer-events:none;
  will-change:transform;
  background-color:var(--elx-bg);
  background-image:url("/wp-content/uploads/2026/10/edwinlopez-bg.webp");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.elx-bg::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background:#02030a;
  opacity:var(--elx-overlay-rest);
  transition:opacity var(--elx-fade) ease;
}
.elx-bg.is-home::after{ opacity:var(--elx-overlay-home); }


/* =====================================================================
   4. LEFT SIDEBAR (desktop)
   ===================================================================== */
.elx-sidebar{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--elx-sidebar-w);
  z-index:999;
  pointer-events:none;           /* only the children are clickable */
  font-family:inherit;
}
.elx-sidebar > *{ pointer-events:auto; }

.elx-logo{ position:absolute; top:48px; left:28px; display:block; line-height:0; }
.elx-logo img{ width:110px; height:auto; display:block; }

.elx-menu{
  position:absolute; left:28px; top:50%; transform:translateY(-50%);
  list-style:none; margin:0; padding:0;
}
.elx-menu li{ margin:0 0 18px; padding:0; }
.elx-menu a{
  display:flex; align-items:center; gap:14px;
  color:var(--elx-dim); text-decoration:none;
  font-size:16px; letter-spacing:.02em;
  transition:color .25s ease;
}
.elx-menu .elx-ico{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.3);
  transition:background .25s ease, transform .25s ease;
  flex:0 0 34px;
}
.elx-menu svg{
  width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease;
}
.elx-menu a:hover{ color:#fff; }
.elx-menu a:hover .elx-ico{ transform:scale(1.08); }
.elx-menu a.is-active{ color:#fff; }
.elx-menu a.is-active .elx-ico{ background:#fff; }
.elx-menu a.is-active svg{ stroke:#2a2d36; }

.elx-credit{
  position:absolute; left:28px; bottom:40px; margin:0;
  color:rgba(255,255,255,.75); font-size:14px; line-height:1.55;
  text-transform:uppercase; letter-spacing:.02em;
}
.elx-credit strong{ color:#fff; font-weight:700; }


/* =====================================================================
   5. RIGHT NAV: dots + mouse button (centered as one group)
   ===================================================================== */
.elx-rightnav{
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:999;
  width:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:64px;               /* space between the dots and the mouse */
}

/* dots */
.elx-dots{ list-style:none; margin:0; padding:0; }
.elx-dots li{ margin:6px 0; padding:0; height:25px; display:flex; align-items:center; justify-content:center; }
.elx-dots a{
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.35); transition:all .25s ease;
}
.elx-dots a.is-active{
  width:12px; height:12px;
  background:var(--elx-primary);
  box-shadow:0 0 10px rgba(59,158,255,.65);
}
.elx-dots a:hover{ background:var(--elx-primary); }

/* mouse-style next-section button */
.elx-mouse,
.elx-mouse:hover,
.elx-mouse:focus,
.elx-mouse:active{
  background:transparent !important;   /* kills the theme's default button hover fill */
  color:inherit !important;
  box-shadow:none;
  text-decoration:none;
}
.elx-mouse{
  position:relative;
  flex:0 0 auto;
  width:26px;
  height:44px;
  padding:0 !important;
  min-width:0;
  font-size:0;
  line-height:0;
  border:2px solid rgba(255,255,255,.8) !important;
  border-radius:20px;
  cursor:pointer;
  transition:border-color .25s ease, transform .5s ease;
}
.elx-mouse:hover,
.elx-mouse:focus-visible{ border-color:var(--elx-accent) !important; }
.elx-mouse:focus{ outline:none; }
.elx-mouse:focus-visible{ outline:2px solid var(--elx-accent); outline-offset:3px; }

.elx-mouse-dot{
  position:absolute;
  left:50%;
  top:8px;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--elx-accent);
  box-shadow:0 0 8px rgba(255,138,61,.7);
  animation:elx-mouse-dot 1.8s ease-in-out infinite;
}
@keyframes elx-mouse-dot{
  0%   { transform:translateY(0);    opacity:0; }
  25%  { opacity:1; }
  75%  { opacity:1; }
  100% { transform:translateY(18px); opacity:0; }
}

/* last section: the button flips, so the dot runs upward (click = back to Home) */
.elx-mouse.is-last{ transform:rotate(180deg); }


/* =====================================================================
   6. SOCIAL ICONS (bottom right)
   ===================================================================== */
.elx-social{
  position:fixed; right:28px; bottom:34px; z-index:999;
  display:flex; gap:22px; margin:0; padding:0; list-style:none;
}
.elx-social a{
  color:rgba(255,255,255,.7); text-decoration:none;
  font:700 26px/1 Arial,Helvetica,sans-serif; transition:color .25s;
}
.elx-social a:hover{ color:#fff; }


/* =====================================================================
   7. MOBILE ELEMENTS (hidden on desktop, shown in section 11)
   ===================================================================== */
.elx-topbar,
.elx-burger,
.elx-backdrop{ display:none; }


/* =====================================================================
   8. HOME
   ===================================================================== */

/* typing effect */
.elx-typing{ font-size: 2rem; margin:0; color:#fff; font-weight:300; }

.elx-type{
  display:inline-block;
  min-height:1.2em;          /* stops the layout jumping when the text is empty */
  white-space:nowrap;
  vertical-align:bottom;
}
.elx-type-text{ color:var(--elx-white); }

.elx-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:3px;
  vertical-align:-0.12em;
  background:var(--elx-accent);
  animation:elx-blink 1s steps(1) infinite;
}
.elx-type.is-typing .elx-cursor{ animation:none; opacity:1; }  /* solid while moving, blinks while idle */

@keyframes elx-blink{
  0%,50%      { opacity:1; }
  50.01%,100% { opacity:0; }
}

/* video: no controls, ever */
.elx-video{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  pointer-events:none;
}
.elx-video::-webkit-media-controls,
.elx-video::-webkit-media-controls-enclosure,
.elx-video::-webkit-media-controls-panel,
.elx-video::-webkit-media-controls-overlay-enclosure,
.elx-video::-webkit-media-controls-start-playback-button{
  display:none !important;
  opacity:0 !important;
  -webkit-appearance:none;
}

/* "Get started" button */
.elx-button .elementor-button,
.elx-button .elementor-button:visited,
.elx-button .elementor-button:hover,
.elx-button .elementor-button:focus,
.elx-button .elementor-button:active{
  background:transparent !important;      /* no fill, ever */
}
.elx-button .elementor-button{
  display:inline-flex;
  align-items:center;
  padding:14px 28px;
  color:rgba(255,255,255,.9);
  font-size:15px;
  font-weight:400;
  line-height:1;
  letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  box-shadow:none;
  transition:color .25s ease, border-color .25s ease,
             transform .25s ease, box-shadow .25s ease;
}
.elx-button .elementor-button:hover,
.elx-button .elementor-button:focus{
  color:#fff;
  border-color:var(--elx-primary);
  box-shadow:0 0 14px rgba(59,158,255,.35);
  transform:translateY(-2px);
}
.elx-button .elementor-button:focus-visible{
  outline:2px solid var(--elx-primary);
  outline-offset:3px;
}
.elx-button .elementor-button-content-wrapper{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.elx-button .elementor-button-text{
  display:block;
  line-height:1;
  padding:0;
}

/* thin arrow: hide Elementor's heavy icon and draw a 1.2px line arrow instead */
.elx-button .elementor-button-icon{
  display:block;
  flex:0 0 auto;
  width:12px;
  height:18px;
  margin:0 !important;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 1v15M1.5 11.5L6 16l4.5-4.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 1v15M1.5 11.5L6 16l4.5-4.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s ease;
}
.elx-button .elementor-button-icon svg{ display:none; }
.elx-button .elementor-button:hover .elementor-button-icon{ transform:translateY(3px); }


/* =====================================================================
   9. ABOUT
   ===================================================================== */

/* inline link with the animated underline */
.elx-link{
  color:var(--elx-secondary);
  text-decoration:none;
  padding-bottom:2px;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:100% 100%;      /* idle: collapsed on the right */
  background-size:0 1px;
  transition:color .25s ease, background-size .35s ease, background-position 0s .35s;
}
.elx-link:hover,
.elx-link:focus-visible{
  color:var(--elx-primary);
  background-position:0 100%;         /* hover: grows from the left */
  background-size:100% 1px;
  transition:color .25s ease, background-size .35s ease;
}

/* Tools & Technologies chips */
.elx-tools-title{
  margin:0 0 20px;
  color:#fff;
  font-size:22px;
  font-weight:300;
  letter-spacing:.02em;
}
.elx-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.elx-chips li{
  --brand:59,158,255;                        /* default: electric blue (RGB so tint + glow can share it) */
  margin:0;
  padding:9px 18px;
  color:rgba(255,255,255,.85);
  font-size:14px;
  font-weight:400;
  line-height:1;
  letter-spacing:.03em;
  white-space:nowrap;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;                       /* pill shape */
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  cursor:default;
  transition:color .25s ease, background .25s ease,
             border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* brand colours (branded chips override the default blue) */
.elx-chips .b-html     { --brand:227,79,38;  }   /* HTML/CSS     */
.elx-chips .b-js       { --brand:247,223,30; }   /* JS           */
.elx-chips .b-php      { --brand:119,123,180;}   /* PHP          */
.elx-chips .b-wp       { --brand:51,153,204; }   /* WordPress    */
.elx-chips .b-wpforms  { --brand:244,166,72; }   /* WPForms      */
.elx-chips .b-elementor{ --brand:226,48,110; }   /* Elementor    */
.elx-chips .b-woo      { --brand:150,88,138; }   /* WooCommerce  */
.elx-chips .b-webflow  { --brand:67,83,255;  }   /* Webflow      */
.elx-chips .b-seo      { --brand:46,204,113; }   /* SEO          */
.elx-chips .b-mailchimp{ --brand:255,224,27; }   /* Mailchimp    */
.elx-chips .b-figma{ --brand:162,89,255; }  	 /* Figma purple */
.elx-chips .b-ps       { --brand:49,168,255; }   /* Photoshop    */
.elx-chips .b-ai       { --brand:255,154,0;  }   /* Illustrator  */
.elx-chips .b-id       { --brand:255,51,102; }   /* InDesign     */

/* core stack: tinted by default, no glow */
.elx-chips li.is-core{
  color:#fff;
  background:rgba(var(--brand), .12);
  border-color:rgba(var(--brand), .6);
}

/* hover: full glow + lift (every chip) */
.elx-chips li:hover{
  color:#fff;
  background:rgba(var(--brand), .2);
  border-color:rgb(var(--brand));
  box-shadow:0 0 14px rgba(var(--brand), .4);
  transform:translateY(-2px);
}

/* =====================================================================
   PROJECTS
   Classes in Elementor:
     carousel widget      : elx-projects-carousel
     screenshot (image)   : elx-project-shot
     details card (cont.) : elx-project-details
     description (cont.)  : elx-desc        (inside the card, the only part that scrolls)
   ===================================================================== */
:root{
  --elx-shot-h:clamp(340px, calc(100vh - 320px), 580px);    /* screenshot frame height */
  --elx-card-w:clamp(360px, 30vw, 400px);                   /* details card width */
  --elx-card-bottom:10px;                                   /* 0 = flush with the frame bottom */
  --elx-card-max:495px;                                     /* hard cap for the card height */
  --elx-card-pad-y:20px;                                    /* card top / bottom padding */
  --elx-card-max-eff:min(var(--elx-card-max), calc(var(--elx-shot-h) - 24px));   /* never taller than the screenshot */
}

/* ---------- carousel ---------- */
.elx-projects-carousel{
  width:100% !important;
  max-width:1240px;
}

/* slide container: the card positions against this, no side padding */
.e-con:has(> .e-con-inner > .elx-project-shot){
  position:relative;
  padding-left:0 !important;
  padding-right:0 !important;
}
.e-con-inner:has(> .elx-project-shot){
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}

/* ---------- screenshot frame ---------- */
/* narrower by 1/3 of the card, so the card can hang out past its right edge */
.e-con-inner > .elx-project-shot{
  margin:0 !important;
  align-self:flex-start !important;
}
.elx-project-shot{
  width:calc(100% - var(--elx-card-w) / 3) !important;
  height:var(--elx-shot-h);
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 34px -18px rgba(0,0,0,.6);      /* negative spread: shadow only falls downward */
}
.elx-project-shot .elementor-widget-container{ height:auto; }
.elx-project-shot img{
  display:block;
  width:100% !important;
  height:auto !important;                           /* beats the Height setting in the Image widget */
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  transform:translateY(0);
  transition:transform 7s cubic-bezier(.45,.05,.4,1);
}
.elx-project-shot:hover img{
  transform:translateY(calc(var(--elx-shot-h) - 100%));    /* glides until the image bottom meets the frame */
}

/* ---------- details card: bottom right ---------- */
.elx-project-details{
  position:absolute !important;
  right:0;
  bottom:var(--elx-card-bottom);
  z-index:3;
  width:var(--elx-card-w) !important;
  max-width:none;
  max-height:var(--elx-card-max-eff);
  box-sizing:border-box;
  padding:var(--elx-card-pad-y) 22px !important;
  overflow:visible;
  background:rgba(10,12,24,.96) !important;         /* near solid: no see-through smear */
  border:1px solid rgba(255,255,255,.14);
  border-top-color:rgba(255,255,255,.26);           /* hairline highlight along the top edge */
  border-radius:16px;
  box-shadow:0 18px 30px -14px rgba(0,0,0,.6);
  transition:opacity .35s ease;
}

/* card layout: works whether the card is Boxed (has .e-con-inner) or Full Width */
.elx-project-details,
.elx-project-details > .e-con-inner{
  display:flex !important;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
}
.elx-project-details > .e-con-inner{
  width:100%;
  max-width:none;
  max-height:none;
  padding:0 !important;
}
.elx-project-details > *,
.elx-project-details > .e-con-inner > *{
  flex:0 0 auto;
  min-width:0;
  margin:0;
}

/* description: capped by --elx-desc-max (set by the script), scrolls when longer */
.elx-project-details .elx-desc{
  flex:0 0 auto;
  max-height:var(--elx-desc-max, 150px);       /* fallback until the script runs */
  overflow-y:auto;
  padding:0 15px 0 0 !important;
  gap:8px;
  overscroll-behavior:contain;
}
.elx-desc > .elementor-widget{ flex-shrink:0; }

.elx-project-details .elementor-widget-button{
  width:auto;
  align-self:flex-start;
}

/* fade at the bottom while there's more text below */
.elx-desc.is-scrollable:not(.is-end){
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
}

/* card fades while the pointer is over the screenshot, so the full design shows */
@media (hover:hover){
  .elx-project-shot:hover ~ .elx-project-details{
    opacity:.12;
    pointer-events:none;
  }
}

/* heading + text */
.elx-project-details .elementor-heading-title{
  margin:0;
  color:#fff;
  font-size:clamp(22px, 1.2vw + 1vh, 28px);
  font-weight:400;
  letter-spacing:.01em;
}
.elx-project-details .elementor-widget-text-editor,
.elx-project-details .elementor-widget-text-editor p{
  margin:0;
  color:rgba(255,255,255,.75);
  font-size:14px;
  line-height:1.5;
}
.elx-project-details .elementor-widget-text-editor p + p{ margin-top:8px; }

/* always-visible scrollbar in Chrome / Edge / Safari */
.elx-desc::-webkit-scrollbar{ width:6px; }
.elx-desc::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:3px; }
.elx-desc::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:3px; min-height:30px; }
.elx-desc::-webkit-scrollbar-thumb:hover{ background:rgba(59,158,255,.8); }

/* Firefox only: thin standard bar */
@supports (-moz-appearance:none){
  .elx-project-details > .e-con-inner > .elx-desc{
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.35) transparent;
  }
}

/* pills */
.elx-chips--sm{ gap:8px; margin:0; }
.elx-chips--sm li{ padding:7px 14px; font-size:12.5px; }
.elx-chips--brand li{
  color:#fff;
  background:rgba(var(--brand), .12);
  border-color:rgba(var(--brand), .55);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* "View Live" button */

.elx-project-details .elementor-button,
.elx-project-details .elementor-button:visited,
.elx-project-details .elementor-button:hover,
.elx-project-details .elementor-button:focus{ background:transparent !important; }
.elx-project-details .elementor-button{
  display:inline-flex;
  align-items:center;
  padding:8px 24px;
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:500;
  line-height:1;
  letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  box-shadow:none;
  transition:color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.elx-project-details .elementor-button:hover,
.elx-project-details .elementor-button:focus-visible{
  color:#fff;
  border-color:var(--elx-primary);
  box-shadow:0 0 14px rgba(59,158,255,.35);
  transform:translateY(-2px);
}
.elx-project-details .elementor-button-content-wrapper{ display:inline-flex; align-items:center; gap:10px; }
.elx-project-details .elementor-button-icon{ margin:0; line-height:0; }
.elx-project-details .elementor-button-icon svg{ width:14px; height:14px; fill:currentColor; }
.elx-project-details .elementor-button-text{ line-height:1; }

/* ---------- carousel: prev / next buttons ---------- */
.elx-projects-carousel .elementor-swiper-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  box-sizing:border-box;
  padding:0;
  border-radius:50%;
  color:#fff;
  background:rgba(59,158,255,.18);                  /* visible blue tint at rest */
  border:1.5px solid rgba(255,255,255,.65);
  box-shadow:0 0 0 0 rgba(59,158,255,.45);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease,
             box-shadow .25s ease, transform .25s ease;
}
/* thicker line chevron */
.elx-projects-carousel .elementor-swiper-button svg{ display:none; }
.elx-projects-carousel .elementor-swiper-button::before{
  content:"";
  width:20px;
  height:20px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s ease;
}
.elx-projects-carousel .elementor-swiper-button-next::before{ transform:scaleX(-1); }

/* hover: solid blue fill, dark arrow, glow */
.elx-projects-carousel .elementor-swiper-button:hover{
  color:#02030a;
  background:var(--elx-primary);
  border-color:var(--elx-primary);
  box-shadow:0 0 18px rgba(59,158,255,.55);
  transform:translateY(-2px);
}
.elx-projects-carousel .elementor-swiper-button-prev:hover::before{ transform:translateX(-2px); }
.elx-projects-carousel .elementor-swiper-button-next:hover::before{ transform:scaleX(-1) translateX(-2px); }
.elx-projects-carousel .elementor-swiper-button:focus-visible{
  outline:2px solid var(--elx-primary);
  outline-offset:3px;
}
.elx-projects-carousel .elementor-swiper-button.swiper-button-disabled{
  opacity:.35;
  pointer-events:none;
}

/* gentle attention pulse on the next button, stops after three cycles */
@keyframes elx-nav-pulse{
  0%   { box-shadow:0 0 0 0 rgba(59,158,255,.5); }
  70%  { box-shadow:0 0 0 14px rgba(59,158,255,0); }
  100% { box-shadow:0 0 0 0 rgba(59,158,255,0); }
}
.elx-projects-carousel .elementor-swiper-button-next{
  animation:elx-nav-pulse 2.2s ease-out 3;
}

/* ---------- carousel: pagination dots (fixed-size boxes, so nothing shifts) ---------- */
.elx-projects-carousel .swiper-pagination{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:calc(100% - var(--elx-card-w) / 3);   /* same width as the screenshot */
  height:14px;                                /* fixed, so the row never changes height */
  margin-top:18px;
}
.elx-projects-carousel .swiper-pagination-bullet{
  position:relative;
  flex:0 0 14px;
  width:14px;                                 /* same box for every dot, active or not */
  height:14px;
  margin:0 !important;
  padding:0;
  background:none !important;
  box-shadow:none !important;
  opacity:1;
  cursor:pointer;
}
.elx-projects-carousel .swiper-pagination-bullet::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(1);                         /* size changes use transform, which never moves layout */
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.elx-projects-carousel .swiper-pagination-bullet:hover::before{ background:var(--elx-primary); }
.elx-projects-carousel .swiper-pagination-bullet-active::before{
  background:var(--elx-primary);
  transform:scale(2);                         /* 6px grows to 12px visually */
  box-shadow:0 0 6px rgba(59,158,255,.65);
}

/* icons */
.elx-svc-icon{ width:56px; height:56px; display:block; margin:0 auto; color:rgba(255,255,255,.9); }
.elx-svc-icon *{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.elx-svc-icon .a{ stroke:var(--elx-primary); }
.elx-svc-icon .af{ fill:var(--elx-primary); stroke:none; }

/* label above the heading (class elx-eyebrow) */
.elx-eyebrow, .elx-eyebrow *{
  color:rgba(255,255,255,.6) !important;
  font-size:14px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* intro paragraph (class elx-lead) */
.elx-lead, .elx-lead *{ color:rgba(255,255,255,.78); line-height:1.65; }

/* cards (class services-list sits on each icon box widget) */
.services-list{
  transition:transform .3s ease, border-color .3s ease,
             box-shadow .3s ease, background-color .3s ease;
  will-change:transform;
}
.services-list .elx-svc-icon{
  width:58px;
  height:58px;
  transition:transform .3s ease;
}
.services-list .elx-svc-icon .a,
.services-list .elx-svc-icon .af{ transition:stroke .3s ease, fill .3s ease; }

.services-list .elementor-icon-box-title{
  margin:0 0 8px;
  color:#fff;
  font-size:22px;
  font-weight:400;
  letter-spacing:.01em;
}
.services-list .elementor-icon-box-description{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.6;
  transition:color .3s ease;
}

/* hover: lift + blue glow (same family as the tool chips) */
.elementor .services-list:hover{
  transform:translateY(-4px);
  border-color:var(--elx-primary);
  background-color:rgba(59,158,255,.08) !important;   /* delete this line to keep the background unchanged */
  box-shadow:0 0 18px rgba(59,158,255,.35),
             0 14px 30px rgba(0,0,0,.35);
}
.services-list:hover .elx-svc-icon{ transform:scale(1.06); }
.services-list:hover .elx-svc-icon .a{ stroke:var(--elx-secondary); }
.services-list:hover .elx-svc-icon .af{ fill:var(--elx-secondary); }
.services-list:hover .elementor-icon-box-description{ color:rgba(255,255,255,.88); }


/* =====================================================================
   PROCESS  (class elx-process sits on each step container)
   ===================================================================== */
.elx-process{
  transition:transform .3s ease, border-color .3s ease,
             box-shadow .3s ease, background-color .3s ease;
  will-change:transform;
}

/* icon: left aligned, sits above the title */
.elx-process .elx-svc-icon{
  width:52px;
  height:52px;
  margin:0 0 10px;                 /* overrides the auto-centering used on Services */
  transition:transform .3s ease;
}
.elx-process .elx-svc-icon .a,
.elx-process .elx-svc-icon .af{ transition:stroke .3s ease, fill .3s ease; }

/* text */
.elx-process .elementor-heading-title{
  color:#fff;
  letter-spacing:.01em;
}
.elx-process .elementor-widget-text-editor,
.elx-process .elementor-widget-text-editor p{
  color:rgba(255,255,255,.72);
  line-height:1.6;
  transition:color .3s ease;
}

/* hover: lift + blue glow (same as Services and the tool chips) */
.elementor .elx-process:hover{
  transform:translateY(-4px);
  border-color:var(--elx-primary);
  background-color:rgba(59,158,255,.08) !important;   /* delete this line to keep your background */
  box-shadow:0 0 18px rgba(59,158,255,.35),
             0 14px 30px rgba(0,0,0,.35);
}
.elx-process:hover .elx-svc-icon{ transform:scale(1.06); }
.elx-process:hover .elx-svc-icon .a{ stroke:var(--elx-secondary); }
.elx-process:hover .elx-svc-icon .af{ fill:var(--elx-secondary); }
.elx-process:hover .elementor-widget-text-editor,
.elx-process:hover .elementor-widget-text-editor p{ color:rgba(255,255,255,.88); }

/* ---------- Process: arrow connector on cards 1 to 3 ---------- */
.elx-process:not(:last-child){
  position:relative;
  z-index:2;                      /* arrow sits above the next card's border */
}

.elx-process:not(:last-child)::after{
  content:"";
  position:absolute;
  top:var(--elx-arrow-top, 98px);
  right:-17px;
  width:34px;
  height:34px;
  box-sizing:border-box;
  border-radius:50%;
  border:1px solid rgba(59,158,255,.55);
  background-color:#0b0d16;                           /* solid base hides the card gap behind it */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(rgba(59,158,255,.2), rgba(59,158,255,.2));   /* blue tint layer */
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
  background-size:16px 16px, 100% 100%;
  pointer-events:none;
  transition:border-color .3s ease, box-shadow .3s ease,
             transform .3s ease, background-color .3s ease;
}

/* hover: fills solid blue, dark arrow, nudges right */
.elementor .elx-process:not(:last-child):hover::after{
  background-color:var(--elx-primary);
  border-color:var(--elx-primary);
  box-shadow:0 0 14px rgba(59,158,255,.5);
  transform:translateX(3px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%2302030a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(transparent, transparent);
}

/* =====================================================================
   CONTACT  (two slides: information / message)
   ===================================================================== */
.elx-contact-viewport{
  width:70%;
  overflow:hidden;
}
.elx-contact-track{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  width:200% !important;
  max-width:none !important;
  padding:0 !important;
  gap:0 !important;
  transform:translateX(0);
  transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.elx-contact-track.is-message{ transform:translateX(-50%); }

.elx-contact-slide{
  flex:0 0 50% !important;
  width:50% !important;
  max-width:50% !important;
  box-sizing:border-box;
  justify-content:center;                 /* vertically centre each slide's content */
  transition:opacity .5s ease;
}
.elx-contact-slide[aria-hidden="true"]{ opacity:0; }

/* ---------- Contact form ---------- */
#contact .elementor-form .elementor-field-group{ margin-bottom:14px; }

#contact .elementor-field-label{
  display:block;
  margin-bottom:8px;
  color:rgba(255,255,255,.6);
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* inputs + textarea: dark glass, same family as the chips */
#contact .elementor-field-textual{
  width:100%;
  box-sizing:border-box;
  padding:14px 18px;
  color:#fff;
  font-size:16px;
  line-height:1.4;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  box-shadow:none;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
#contact textarea.elementor-field-textual{
  min-height:130px;
  resize:vertical;
}
#contact .elementor-field-textual::placeholder{ color:rgba(255,255,255,.35); }

#contact .elementor-field-textual:hover{ border-color:rgba(255,255,255,.35); }
#contact .elementor-field-textual:focus{
  outline:none;
  color:#fff;
  background:rgba(59,158,255,.08);
  border-color:var(--elx-primary);
  box-shadow:0 0 14px rgba(59,158,255,.3);
}

/* browsers repaint autofilled fields white, so keep them dark */
#contact .elementor-field-textual:-webkit-autofill,
#contact .elementor-field-textual:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
  box-shadow:0 0 0 1000px #121524 inset;
}

/* Send button: primary call to action, orange pill */
#contact .e-form__buttons .elementor-button,
#contact .e-form__buttons .elementor-button:visited{
  width:100%;
  padding:15px 28px;
  color:#0b0d16;
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1;
  background:var(--elx-secondary);
  border:1px solid var(--elx-secondary);
  border-radius:999px;
  box-shadow:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
#contact .e-form__buttons .elementor-button:hover,
#contact .e-form__buttons .elementor-button:focus{
  color:#0b0d16;
  background:#ff9b5a;
  border-color:#ff9b5a;
  box-shadow:0 0 16px rgba(255,138,61,.45);
  transform:translateY(-2px);
}

/* validation + status messages */
#contact .elementor-field-group.elementor-error .elementor-field-textual{
  border-color:#ff5a6e;
  box-shadow:0 0 12px rgba(255,90,110,.25);
}
#contact .elementor-message{
  margin-top:12px;
  padding:12px 16px;
  font-size:14px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
}
#contact .elementor-message-success{ color:#2ee6a6; border:1px solid rgba(46,230,166,.4); }
#contact .elementor-message-danger { color:#ff7a8a; border:1px solid rgba(255,90,110,.4); }

/* ---------- Contact details (email / phone) ---------- */
.elx-contact-item{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  text-decoration:none;
}
.elx-contact-ico{
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  transition:border-color .25s ease, box-shadow .25s ease,
             background .25s ease, transform .25s ease;
}
.elx-contact-ico svg{
  width:24px;
  height:24px;
  color:rgba(255,255,255,.9);
}
.elx-contact-ico svg *{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.elx-contact-ico svg .a{ stroke:var(--elx-primary); transition:stroke .25s ease; }

.elx-contact-text{ display:flex; flex-direction:column; gap:2px; }
.elx-contact-label{
  color:var(--elx-primary);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.elx-contact-value{
  color:rgba(255,255,255,.85);
  font-size:17px;
  transition:color .25s ease;
}

.elx-contact-item:hover .elx-contact-ico{
  background:rgba(59,158,255,.12);
  border-color:var(--elx-primary);
  box-shadow:0 0 14px rgba(59,158,255,.35);
  transform:translateY(-2px);
}
.elx-contact-item:hover .elx-contact-ico svg .a{ stroke:var(--elx-secondary); }
.elx-contact-item:hover .elx-contact-value{ color:#fff; }

/* =====================================================================
   11. RESPONSIVE: TABLET + MOBILE
   ===================================================================== */

/* ---------- tablet and below (max 1024px): sidebar becomes a slide-in drawer ---------- */
@media (max-width:1024px){

  html{ scroll-snap-type:none; }          /* snap feels fiddly on touch */
  html.elx-lock{ overflow:hidden; }       /* page stays put while the drawer is open */

  /* hidden on small screens */
  .elx-rightnav,
  .elx-social{ display:none; }

  /* ---------- fixed top bar: logo left, burger right, gradient fades in once scrolled ---------- */
  /* keep every section's content below the fixed top bar */
	.elx-section{
	  padding-top:112px !important;           
	  padding-bottom:48px !important;
	}	
  .elx-topbar{
    display:block;
    position:fixed; top:0; left:0; right:0;
    z-index:1003;                         /* above the drawer, so the logo stays visible when it opens */
    height:120px;
    pointer-events:none;
  }
  .elx-topbar::before{                    /* gradient layer: dark at the top, fading downward */
    content:"";
    position:absolute; top:0; right:0; bottom:0; left:0;
      background:linear-gradient(to bottom,
              rgba(2,3,10,1)    0%,
              rgba(2,3,10,.98)  45%,
              rgba(2,3,10,.80)  65%,
              rgba(2,3,10,.40)  85%,
              rgba(2,3,10,0)    100%);
    opacity:0;                            /* hidden at the top of the page */
    transition:opacity .3s ease;
  }
  .elx-topbar.is-scrolled::before{ opacity:1; }
  html.elx-lock .elx-topbar::before{ opacity:0; }     /* no gradient while the drawer is open */

  .elx-topbar-logo{
    position:absolute; top:4px; left:24px;
    pointer-events:auto;
    line-height:0;
  }
  .elx-topbar-logo img{ width:84px; height:auto; display:block; }

  /* ---------- hamburger button (beats the theme's default button hover fill) ---------- */
  .elx-burger,
  .elx-burger:hover,
  .elx-burger:focus,
  .elx-burger:active{ background:transparent !important; box-shadow:none; }
  .elx-burger{
    display:block;
    position:fixed; top:32px; right:24px;
    z-index:1004;                         /* above the top bar */
    width:30px; height:20px; padding:0 !important; min-width:0;
    border:0 !important; cursor:pointer;
  }
  .elx-burger span{
    position:absolute; right:0; height:2px; background:#fff;
    transition:transform .3s ease, width .3s ease, top .3s ease, opacity .2s ease;
  }
  .elx-burger span:nth-child(1){ top:2px;  width:30px; }
  .elx-burger span:nth-child(2){ top:9px;  width:22px; }
  .elx-burger span:nth-child(3){ top:16px; width:14px; }
  .elx-burger:hover span{ width:30px; }
  .elx-burger:focus-visible{ outline:2px solid var(--elx-primary); outline-offset:6px; }

  .elx-burger.is-open span:nth-child(1){ top:9px; width:26px; transform:rotate(45deg); }
  .elx-burger.is-open span:nth-child(2){ opacity:0; }
  .elx-burger.is-open span:nth-child(3){ top:9px; width:26px; transform:rotate(-45deg); }

  /* ---------- the drawer = the same sidebar, slid in from the left ---------- */
  .elx-sidebar{
    width:min(300px, 82vw);
    z-index:1001;
    background:rgba(6,8,18,.97);
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:12px 0 40px rgba(0,0,0,.45);
    pointer-events:auto;
    transform:translateX(-102%);
    visibility:hidden;
    transition:transform .35s ease, visibility 0s linear .35s;
  }
  .elx-sidebar.is-open{
    transform:none;
    visibility:visible;
    transition:transform .35s ease, visibility 0s;
  }
  .elx-sidebar .elx-logo{ display:none; }             /* the top bar carries the logo on tablet and mobile */

  /* dimmed backdrop behind the drawer */
  .elx-backdrop{
    display:block;
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;
    background:rgba(2,3,10,.65);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .elx-backdrop.is-open{
    opacity:1; visibility:visible;
    transition:opacity .3s ease, visibility 0s;
  }

  /* ---------- Process: tablet (2 x 2), arrows on the left column only ---------- */
  .elx-process:nth-child(2n)::after{ display:none !important; }

  /* ---------- Contact: one 6vw margin, nothing else adds to it ---------- */
  #contact,
  #contact .e-con-inner,
  #contact .elx-contact-viewport,
  #contact .elx-contact-track{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #contact .elx-contact-viewport{
    width:100% !important;
    max-width:100% !important;
  }
  /* the slide is the only layer with side padding */
  #contact .elx-contact-slide{
    padding-left:6vw !important;
    padding-right:6vw !important;
  }
  /* inner containers (Slide B's intro + form): full width, stacked, no extra padding */
  #contact .elx-contact-slide > .e-con{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    flex-direction:column;
  }
  /* widgets fill the slide instead of keeping their desktop widths */
  #contact .elx-contact-slide .elementor-widget{
    width:100% !important;
    max-width:100% !important;
  }

  /* ---------- Projects ---------- */
  :root{ --elx-shot-h:min(60vh, 460px); }

  .elx-projects-carousel{ max-width:100%; }
  .elx-project-shot{ width:100% !important; }

  .elx-project-details{
    position:static !important;
    width:100% !important;
    max-height:none;
    margin-top:16px;
  }
  .elx-project-details .elx-desc{
    max-height:none;
    overflow:visible;
    padding-right:0 !important;
  }

  .elx-projects-carousel .swiper-pagination{ width:100%; }
  .elx-projects-carousel .elementor-swiper-button{ width:44px; height:44px; }

  @media (hover:none){
    .elx-project-shot:hover img{ transform:none; }
  }
	
	
}
/* ---------- mobile (max 767px) ---------- */
@media (max-width:767px){

  .elx-typing{ font-size:1.5rem; }

  /* Home button */
  .elx-button .elementor-button{ padding:12px 22px; font-size:14px; }

  /* About chips */
  .elx-chips{ gap:8px; }
  .elx-chips li{ padding:8px 14px; font-size:13px; }

  /* Services */
  .services-list .elx-svc-icon{ width:48px; height:48px; }

  /* Process: cards stack, so no side arrows */
  .elx-process::after{ display:none !important; }
  .elx-process .elx-svc-icon{ width:44px; height:44px; margin-bottom:10px; }

 
}


/* Project details card fix (up to 1024px) */
/* Desktop / Default Scroll rule  */
.elx-projects-carousel .elx-project-details .elx-desc{
  flex: 1 1 0 !important;
  min-height: 140px;
  max-height: none !important;
  overflow-y: auto !important;
  padding-right: 10px !important;
}

/* Tablet (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .e-con-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .elementor-element.elx-project-shot {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-bottom: 0;
  }

  .elementor-element.elx-project-details {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
    margin-top: -30% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
  }
  
  /* Enforce scrollability on tablet */
  .elementor-element.elx-project-details .elx-desc {
    max-height: 160px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
  }

  .elementor-element.elementor-element-3431ad3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  .elx-projects-carousel .swiper-navigation {
    position: static !important;
    display: flex;
    gap: 8px;
    margin-top: 0 !important;
  }
}

/* Standard Mobile (481px to 767.98px) */
@media (min-width: 481px) and (max-width: 767.98px) {
  .elx-projects-carousel .swiper-pagination { 
    margin-top: 0px; 
  }
  
  .e-con-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .elementor-element.elx-project-shot {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-bottom: 0;
  }

  .elementor-element.elx-project-details {
    position: relative;
    z-index: 2;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin-top: -34% !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
  }

  /* Enforce scrollability on mobile */
  .elementor-element.elx-project-details .elx-desc {
    max-height: 140px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
  }

  .elementor-element.elementor-element-3431ad3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .elx-projects-carousel .swiper-navigation {
    position: static !important;
    display: flex;
    gap: 8px;
    margin-top: 0 !important;
  }
}

/* Extra Small Screens / Compact Mobile (480px and below) */
@media (max-width: 480px) {
  .elx-projects-carousel .swiper-pagination { 
    margin-top: 0px; 
  }

  .e-con-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .elementor-element.elx-project-shot {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-bottom: 0;
  }

  .elementor-element.elx-project-details {
    position: relative;
    z-index: 2;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-top: -78% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
  }

  /* Compact Pill / Chip Buttons */
  .elx-project-details .elx-chips {
    gap: 4px 6px !important;
    margin-bottom: 10px !important;
  }

  .elx-project-details .elx-chips li {
    font-size: 11px !important;
    padding: 2px 8px !important;
    line-height: 1.3 !important;
    border-radius: 12px !important;
  }

  /* Enforce scrollability and a tighter max-height on the smallest screen */
  .elementor-element.elx-project-details .elx-desc {
    max-height: 170px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
  }

  /* Align View Live button and navigation arrows side-by-side */
  .elementor-element.elementor-element-3431ad3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .elx-projects-carousel .swiper-navigation {
    position: static !important;
    display: flex;
    gap: 6px;
    margin-top: 0 !important;
  }
}

/* =====================================================================
   12. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .elx-topbar::before{ transition:none; }
  .elx-mouse-dot{ animation:none; opacity:1; }
  .elx-cursor{ animation:none; }
  .elx-link{ transition:none; }
  .services-list,
  .services-list .elx-svc-icon{ transition:none; }
  .elementor .services-list:hover{ transform:none; }
  .elx-sidebar,
  .elx-backdrop,
  .elx-burger span{ transition:none; }
  .elx-process,
  .elx-process .elx-svc-icon{ transition:none; }
  .elementor .elx-process:hover{ transform:none; }
  .elx-process:not(:last-child)::after{ transition:none; }
	
  .elx-contact-ico, #contact .elementor-field-textual,
  #contact .e-form__buttons .elementor-button{ transition:none; }
  
  /* Projects */	
  
  .elx-project-shot img,
  .elx-project-details,
  .elx-project-details .elementor-button,
  .elx-projects-carousel .elementor-swiper-button,
  .elx-projects-carousel .elementor-swiper-button::before,
  .elx-projects-carousel .swiper-pagination-bullet::before{ transition:none; }

  .elx-projects-carousel .elementor-swiper-button-next{ animation:none; }
}

.site-footer { display: none; }