/*
Theme Name: X1Techs 
Theme URI: https://x1techs.com/
Description: Child theme for Hello Elementor with light/dark mode foundations.
Author: X1Techs
Author URI: https://x1techs.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: x1techs-child
*/

/*
 * Keep this file for child-theme metadata and optional global overrides.
 * Core design tokens and base styles are loaded from assets/css/*.css.
 */


.light .header{
    background-color: white;
}
.dark .header{
    background-color: rgba(0,0,0,0.7);
   
    backdrop-filter: blur(60px);
}


.header-btn a{
    width: max-content;
}
.dark .header-menu a{
    color: var(--color-text-muted);
}
.dark .header-menu a:hover{
    color: white;
}
.dark .header-menu .elementor-item-active{
    color: white;
}
.dark .header-btn a{
    border-radius: 20px;
    background-color: var(--color-brand-green);
}
.light .header-btn a{
    border-radius: 20px;
    background-color: var(--color-light-ink);
}
.light .header-menu a{
    color: var(--color-text-muted);
}
.light .header-menu a:hover{
    color: black;
}
.light .header-menu .elementor-item-active{
    color: black;
}
.light .header-menu-tab .elementor-menu-toggle{
   
    background-color: var(--color-light-ink);
}
.header-menu-tab .elementor-menu-toggle svg{
    fill: white;
}
.dark .header-menu-tab .elementor-menu-toggle{
   
    background-color: var(--color-brand-green);
}

.dark .header-menu-tab .elementor-nav-menu{
    background-color: black;
}
.dark .header-menu-tab .elementor-nav-menu a{
   
    color: var(--color-text-muted);
}
.dark .header-menu-tab .current-menu-item a, .dark .header-menu-tab a:hover{
    color: white;
    background-color: var(--color-brand-green);
}
.light .header-menu-tab .current-menu-item a, .light .header-menu-tab a:hover {
    background-color: var(--color-light-ink);
}







/* ─── Hero base ─── */
.dark .hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 900px 600px at 20% 115%, rgba(16,185,129,0.18), transparent 60%),
    radial-gradient(ellipse 800px 550px at 80% 120%, rgba(5,150,105,0.14),  transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 110%, rgba(16,185,129,0.12), transparent 60%),
    radial-gradient(ellipse 500px 400px at 10%  90%, rgba(4,120,87,0.08),   transparent 60%),
    radial-gradient(ellipse 500px 400px at 90%  85%, rgba(16,185,129,0.07), transparent 60%),
    radial-gradient(ellipse 400px 300px at 50%  95%, rgba(5,150,105,0.06),  transparent 65%),
    linear-gradient(180deg, #000000 0%, #020806 40%, #050e09 70%, #080f0a 100%);
}

/* ─── Layer A — primary wave mesh ─── */
.dark .hero::before {
  content: "";
  position: absolute;
  inset: -220px;
  z-index: 0;
  background:
    radial-gradient(ellipse 1000px 700px at 15% 115%, rgba(16,185,129,0.26), transparent 62%),
    radial-gradient(ellipse  900px 650px at 85% 120%, rgba(5,150,105,0.20),  transparent 62%),
    radial-gradient(ellipse  800px 580px at 50% 108%, rgba(16,185,129,0.18), transparent 62%),
    radial-gradient(ellipse  650px 500px at  5%  90%, rgba(4,120,87,0.14),   transparent 62%),
    radial-gradient(ellipse  650px 500px at 95%  85%, rgba(16,185,129,0.12), transparent 62%),
    radial-gradient(ellipse  550px 420px at 40%  70%, rgba(5,150,105,0.10),  transparent 62%),
    radial-gradient(ellipse  500px 380px at 70%  65%, rgba(4,120,87,0.08),   transparent 62%),
    radial-gradient(ellipse  420px 340px at 25%  50%, rgba(16,185,129,0.06), transparent 62%),
    radial-gradient(ellipse  420px 340px at 75%  45%, rgba(5,150,105,0.05),  transparent 62%);
  filter: blur(70px);
  opacity: 0.75;
  animation: waveA 7s ease-in-out infinite;
}

/* ─── Layer B — counter-wave, offset rhythm ─── */
.dark .hero::after {
  content: "";
  position: absolute;
  inset: -200px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 750px 580px at 60% 108%, rgba(16,185,129,0.16), transparent 62%),
    radial-gradient(ellipse 650px 500px at 10%  82%, rgba(5,150,105,0.13),  transparent 62%),
    radial-gradient(ellipse 600px 460px at 90%  78%, rgba(16,185,129,0.11), transparent 62%),
    radial-gradient(ellipse 500px 380px at 35%  58%, rgba(4,120,87,0.08),   transparent 62%),
    radial-gradient(ellipse 450px 350px at 75%  52%, rgba(16,185,129,0.07), transparent 62%);
  filter: blur(85px);
  opacity: 0.55;
  animation: waveB 9s ease-in-out infinite;
}

/* ─── Noise overlay — add <div class="hero-noise"></div> inside .hero ─── */
.dark .hero .hero-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.6;
  animation: grainShift 1.6s steps(1) infinite;
}



.dark .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.home-hero h1{
    font-size: 5rem;
    font-weight: 800;
}
.dark .home-hero h1 .highlighted-text{
    color:var(--color-brand-green);
}

.button-primary a{
    padding: 16px 32px;
    border-radius: 50px;
    align-self: center;
    align-items: center;
    display: inline-flex;
}
.button-primary a:hover{
    transform: translateY(-5px);
}
.button-primary .elementor-button-text{
    align-self: center;
}
.button-primary a .elementor-button-icon{

    padding: 8px;
    border:1px solid;
    border-radius: 50px;
    transform: rotate(-45deg);
    transition:all 0.3s ease-in-out;
    
}
.button-primary a:hover .elementor-button-icon{
   scale: 1.05;
}
.dark .button-primary a{
    background-color: var(--color-brand-green);
    backdrop-filter: blur(20px);
}


.hero-counter-grid .hero-counter .elementor-counter-number{
    font-size:36px;
}



.hero-counter-grid .hero-counter .elementor-counter-number-suffix{
    font-size:27px;
}

.hero-counter-grid .hero-counter .elementor-counter-title{
    font-size:12px;
}
 .hero-counter-grid{
     border-radius: 24px;
     padding: 30px;
 }

.dark .hero-counter-grid{
    background-color: var(--color-dark-glass-1);
    backdrop-filter: blur(10px);
    
}
 .hero-counter-grid .hero-counter:not(:last-child){
     border-right: 1px solid white;
 }