.elementor-kit-6{--e-global-color-primary:#E0E0E0;--e-global-color-secondary:#05DCD5;--e-global-color-text:#FFFFFF;--e-global-color-accent:#C0087F;--e-global-color-afd85f1:#C9035F;--e-global-typography-primary-font-family:"Aptos Light";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Jura";--e-global-typography-secondary-font-weight:900;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Orbitron";--e-global-typography-accent-font-weight:500;background-color:transparent;color:#E0E0E0;font-family:"Jura", Sans-serif;font-size:1em;font-weight:400;background-image:radial-gradient(at bottom left, #16191E 61%, #2E3D48 100%);overscroll-behavior:none;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-secondary );}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:"Orbitron", Sans-serif;font-size:3.4em;font-weight:800;}.elementor-kit-6 h2{color:var( --e-global-color-primary );font-family:"Orbitron", Sans-serif;font-size:3.2em;font-weight:700;}.elementor-kit-6 h3{font-family:"Orbitron", Sans-serif;font-size:21px;font-weight:700;}.elementor-kit-6 h4{font-family:"Jura", Sans-serif;font-size:1.7em;font-weight:100;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:3em;}.elementor-kit-6 h2{font-size:3em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* This targets the unique class we just made */
.my-blur-box {
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
}




/* --- 1. Your Scrolling Logo Banner --- */
.scrolling-logo-banner {
    
  /* --- CUSTOMIZE 1: Your Logo URL --- */
  /* This !important is often needed to override 
     conflicts from other plugins */
  background-image: url('https://yoyotech.co.uk/wp-content/uploads/2025/11/yoyo-black-with-gaop.png') !important;
  
  /* --- CUSTOMIZE 2: Your Logo Height --- */
  background-size: auto 25px; 
  min-height: 35px;
  background-repeat: repeat-x;
  background-position: 0 50%; 
  
  /* --- CUSTOMIZE 3: Animation Speed --- */
  animation: scroll-logo 150s linear infinite;
}

/* --- 2. The Animation --- */
@keyframes scroll-logo {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: -2000px 50%; 
  }
}

/* --- 1. The animation definition --- */
@keyframes move-gradient {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}

/* --- 2. Setup the button --- */
.animated-button .elementor-button {
  position: relative; /* Needed for pseudo-elements */
  z-index: 1; /* Keep text on top */
  border: none !important; /* Remove any default border */
  
  /* --- This is the button's NORMAL background color --- */
  background-color: #05DCD5 !important; 
  
  /* Smoothly fade the original background */
  transition: background-color 0.4s ease !important;
}

/* --- 3. Create the gradient BORDER (hidden by default) --- */
.animated-button .elementor-button::before {
  content: '';
  position: absolute;
  z-index: -2; /* Furthest back */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* --- Your gradient colors --- */
  background: linear-gradient(to right, #23FBF3, #F54BFB, #23FBF3);
  background-size: 200% 100%;
  
  /* --- This is the button's border radius --- */
  border-radius: 35px; 
  
  /* Hide it */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* --- 4. Create the solid INSET (hidden by default) --- */
.animated-button .elementor-button::after {
  content: '';
  position: absolute;
  z-index: -1; /* Between gradient and text */
  
  /* --- This is your border thickness --- */
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  
  /* --- This is the button's HOVER background color --- */
  background-color: #1F2A32; 

  /* --- Corrected Radius Math --- */
  /* (35px - 3px = 32px) */
  border-radius: 32px;
  
  /* Hide it */
  opacity: 0;
  transition: opacity 0.4s ease;
}


/* --- 5. THE HOVER EFFECT --- */

/* 1. When hovering, fade out the button's original background */
.animated-button .elementor-button:hover {
  background-color: transparent !important; 
}

/* 2. Show the gradient layer */
.animated-button .elementor-button:hover::before {
  opacity: 0.9;
  animation: move-gradient 10s infinite linear;
}

/* 3. Show the solid inset layer */
.animated-button .elementor-button:hover::after {
  opacity: 1;
}

/* --- YOYOTECH NEON MENU (HIT AREA FIX) --- */

/* 1. THE WRAPPER (LI) */
.yoyo-neon-menu ul li {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 5px; /* Spacing between buttons */
    
    /* CRITICAL: Remove all padding from the wrapper */
    padding: 0 !important;
    
    /* Force wrapper to shrink-wrap the link */
    display: inline-flex !important;
    align-items: stretch !important;
    
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. THE LINK (A) - THE CLICKABLE BUTTON */
.yoyo-neon-menu a.elementor-item {
    position: relative !important;
    z-index: 50 !important; 
    
    background: transparent !important;
    border: none !important;
    
    /* CRITICAL: This puts the size INSIDE the link */
    padding: 10px 25px !important; 
    
    /* CRITICAL: This forces the link to behave like a physical block */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* 3. NEON GRADIENT (Background Layer 1) */
.yoyo-neon-menu ul li::before {
    content: "";
    position: absolute;
    z-index: -2 !important; 
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    
    background: linear-gradient(90deg, #23FBF3, #F54BFB, #23FBF3) !important;
    background-size: 200% 100% !important;
    border-radius: 30px !important;
    
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

/* 4. DARK INSET (Background Layer 2) */
.yoyo-neon-menu ul li::after {
    content: "";
    position: absolute;
    z-index: -1 !important;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    
    background-color: #1F2A32 !important;
    border-radius: 28px !important;
    
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

/* --- 5. HOVER EFFECTS --- */
.yoyo-neon-menu ul li:hover {
    transform: scale(1.05) !important;
}
.yoyo-neon-menu ul li:hover::before {
    opacity: 1 !important;
    animation: move-gradient 3s infinite linear;
}
.yoyo-neon-menu ul li:hover::after {
    opacity: 1 !important;
}
.yoyo-neon-menu ul li:hover a.elementor-item {
    color: #FFFFFF !important;
}

/* --- 6. ACTIVE STATE --- */
.yoyo-neon-menu ul li.current-menu-item::before,
.yoyo-neon-menu ul li.current_page_item::before {
    opacity: 1 !important;
    animation: move-gradient 3s infinite linear;
}
.yoyo-neon-menu ul li.current-menu-item::after,
.yoyo-neon-menu ul li.current_page_item::after {
    opacity: 1 !important;
}
.yoyo-neon-menu ul li.current-menu-item a,
.yoyo-neon-menu ul li.current_page_item a {
    color: #FFFFFF !important;
}

/* Animation */
@keyframes move-gradient {
    0% { background-position: 0% 0%; }
    100% { background-position: -200% 0%; }
}


/* 1. The Container (The Anchor) */
.glass-box {
    position: relative !important;
    z-index: 1 !important; /* Forces the text/icon to sit ON TOP of the glass */
    background: transparent !important; /* Ensure the container itself is clear */
    transform: translate3d(0,0,0); /* Force GPU Rendering */
}

/* 2. The Glass Sheet (The Magic Layer) */
.glass-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Forces the glass BEHIND the text */
    
    /* The Blur */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    /* The Color/Gradient */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.15), 
        rgba(255, 255, 255, 0.05)
    );

    /* The Shape & Borders */
    border-radius: 20px; /* Match this to your container radius */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}


/* Universal Glass Class */
.universal-glass {
    /* 1. STRUCTURAL SETUP (Crucial) */
    position: relative !important; /* Establishes anchor point */
    isolation: isolate !important; /* Forces a new stacking context */
    z-index: 10 !important; /* Ensures it sits above backgrounds */
    
    /* Clear default backgrounds so the glass shows */
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. THE GLASS LAYER (Using Pseudo-element to prevent conflicts) */
.universal-glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts the glass BEHIND your content */
    
    /* THE BLUR (The Magic) */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    
    /* HARDWARE ACCELERATION (Fixes the "One works, one fails" bug) */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);

    /* YOUR STYLE (Blue Bits) */
    /* I set opacity to 0.08 so you can definitely see it works. Adjust to 0.04 later. */
    background: linear-gradient(
        135deg, 
        rgba(16, 25, 32, 0.3), 
        rgba(16, 25, 32, 0.00) 
    );

    /* Borders */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);

    /* Shadow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 
                0 5px 15px rgba(0, 0, 0, 0.2); 

    /* Shape */
    border-radius: 30px;
}

/* Helper Class: Boosts background opacity for better readability */
.universal-glass.solid-mode::before {
    /* Much stronger white gradient (90% fading to 70%) */
    background: linear-gradient(
        135deg, 
        rgba(16, 25, 32, 0.85), 
        rgba(16, 25, 32, 0.85) 
    ) !important;
    
    
    
}


/* Universal Glass Class */
.universal-glass-mobile {
    /* 1. STRUCTURAL SETUP (Crucial) */
    isolation: isolate !important; /* Forces a new stacking context */
    z-index: 10 !important; /* Ensures it sits above backgrounds */
    
    /* Clear default backgrounds so the glass shows */
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. THE GLASS LAYER (Using Pseudo-element to prevent conflicts) */
.universal-glass-mobile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts the glass BEHIND your content */
    
    /* THE BLUR (The Magic) */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    
    /* HARDWARE ACCELERATION (Fixes the "One works, one fails" bug) */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);

    /* YOUR STYLE (Blue Bits) */
    /* I set opacity to 0.08 so you can definitely see it works. Adjust to 0.04 later. */
    background: linear-gradient(
        135deg, 
        rgba(16, 25, 32, 0.3), 
        rgba(16, 25, 32, 0.00) 
    );

    /* Borders */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);

    /* Shadow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 
                0 5px 15px rgba(0, 0, 0, 0.2); 

    /* Shape */
    border-radius: 30px;
}

/* Helper Class: Boosts background opacity for better readability */
.universal-glass-mobile.solid-mode::before {
    /* Much stronger white gradient (90% fading to 70%) */
    background: linear-gradient(
        135deg, 
        rgba(16, 25, 32, 0.75), 
        rgba(16, 25, 32, 0.75) 
    ) !important;
    
    
    
}
/* FIX: Forces 'Hidden' menus to actually take up ZERO space */
/* This overrides our glass code when the menu is supposed to be hidden *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Aptos Light';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://yoyotech.co.uk/wp-content/uploads/2025/11/Aptos-Light.ttf') format('truetype');
}
/* End Custom Fonts CSS */