.elementor-kit-6{--e-global-color-primary:#000000;--e-global-color-secondary:#DD11DD11;--e-global-color-text:#FFFFFF;--e-global-color-accent:#32AAE6;--e-global-typography-primary-font-family:"Artemus";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Artemus";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto Condensed";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Artemus";--e-global-typography-accent-font-weight:500;background-color:#000000;color:#FFFFFF;font-family:"Roboto Condensed", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#D1D1D1;}.elementor-kit-6 h1{color:#FFFFFF;font-family:"Artemus", Sans-serif;}.elementor-kit-6 h2{color:#FFFFFF;font-family:"Artemus", Sans-serif;}.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);}@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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================
   Custom Scrollbar Colors
   Track: #000000
   Thumb: #32AAE6
   ========================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #32AAE6 #000000; /* thumb | track */
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: #000000;
}

::-webkit-scrollbar-thumb {
  background-color: #32AAE6;
  border-radius: 10px;
  border: 2px solid #000000; /* inset look */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b2a190; /* subtle hover lift */
}

/* =========================
  HEADER NAVIGATION
   ========================= */
   
/* Base: visible on load */
.header_v3 {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 99999;
  box-sizing: border-box;
  background: transparent !important;

  /* Visible by default */
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* We only "arm" the slide behavior after threshold */
.header_v3.v3_armed {
  transform: translateY(-110%);
}

/* When revealed (after threshold), slide into view */
.header_v3.v3_armed.v3_on {
  transform: translateY(0);
}

/* Dark glass blur layer (OFF by default) */
.header_v3::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  background: rgba(14, 14, 18, 0.74);

  opacity: 0;
  transition: opacity 220ms ease;
}

/* Sheen + border (OFF by default) */
.header_v3::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.00) 100%
  );
  border-bottom: 1px solid rgba(255,255,255,0.10);

  opacity: 0;
  transition: opacity 220ms ease;
}

/* Glass turns ON only when active */
.header_v3.v3_on::before,
.header_v3.v3_on::after {
  opacity: 1;
}

/* Ensure header contents sit above pseudo layers */
.header_v3 > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
GRADIENT OVERLAYS FOR HEADERS - DO NOT DELETE
   ========================================================= */
   
/* === GRADIENT TEXT v1 === */

.gradient-title {
  background: linear-gradient(90deg, #32AAE6 0%, #C451F1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.white-text {
  background: none; /* removes gradient */
  -webkit-text-fill-color: #ffffff; /* override for Safari/Chrome */
  color: #ffffff; /* fallback */
}

/* =========================================================
GLASS BLURR CONTAINER BACKGROUND
   ========================================================= */
   
/* === GRADIENT TEXT v1 === */

.glass-card {
  position: relative;
  padding: 30px;
  border-radius: 20px;
  color: #ffffff;

  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 10px 40px rgba(0, 0, 0, 0.25);

  overflow: hidden;

  /* Hover motion */
  transform: translateZ(0);
  transition: transform 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

/* Gradient 1px border */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;

  background: linear-gradient(135deg, #C451F1, #32AAE6);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

/* Reflective shimmer layer */
.glass-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 999px;

  /* Reflection streak */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 60%
  );

  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}

/* Hover behavior */
.glass-card:hover {
  transform: scale(1.02) translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 16px 55px rgba(0, 0, 0, 0.32);
  background: rgba(255, 255, 255, 0.075);
}

/* Shimmer sweep on hover */
.glass-card:hover::after {
  opacity: 1;
  animation: glassShimmer 900ms ease forwards;
}

@keyframes glassShimmer {
  0%   { transform: translateX(-70%) rotate(12deg); }
  100% { transform: translateX(70%)  rotate(12deg); }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-card:hover {
    transition: none;
    transform: none;
  }
  .glass-card:hover::after {
    animation: none;
    opacity: 0;
  }
}

/* ===================================== */
/*   GLASS CARD – REVERSE BORDER VERSION */
/* ===================================== */

.glass-card-reverse {
  position: relative;
  padding: 0px; /* as requested */
  overflow: hidden;

  color: #ffffff;

  /* Glass background */
  background: rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);

  /* Subtle internal glass lighting */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 10px 40px rgba(0, 0, 0, 0.25);

  transition: transform 260ms ease, box-shadow 260ms ease;
}

/* =============================== */
/*   REVERSED GRADIENT BORDER      */
/* =============================== */

.glass-card-reverse::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* 1px stroke */

  background: linear-gradient(
    135deg,
    #32AAE6,
    #C451F1
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

/* =============================== */
/*   REFLECTIVE SHIMMER LAYER      */
/* =============================== */

.glass-card-reverse::after {
  content: "";
  position: absolute;
  inset: -40%;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 60%
  );

  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}

/* =============================== */
/*   HOVER EFFECT                  */
/* =============================== */

.glass-card-reverse:hover {
  transform: scale(1.02) translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 16px 55px rgba(0, 0, 0, 0.32);
}

.glass-card-reverse:hover::after {
  opacity: 1;
  animation: glassShimmerReverse 900ms ease forwards;
}

@keyframes glassShimmerReverse {
  0%   { transform: translateX(-70%) rotate(12deg); }
  100% { transform: translateX(70%) rotate(12deg); }
}

/* ============================= */
/*  Container Gradient Border   */
/* ============================= */

.container-gradient-border {
  position: relative;
  overflow: hidden; /* keeps scaled image inside */

  border: 1px solid transparent;

  background:
    linear-gradient(
    60deg,
     #32AAE6 0%,
      #6100FF 33%,
      rgba(50, 170, 230, 0) 50%,
      rgba(50, 170, 230, 0) 100%
    ) border-box;

/* ============================= */
/*  Image Setup                  */
/* ============================= */

.container-gradient-border img {
  display: block;
  width: 100%;
  height: auto;

  transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
}

/* ============================= */
/*  Hover Effect                 */
/* ============================= */

.container-gradient-border:hover img {
  transform: scale(1.07);
}

/* ===================================== */
/*      LOGO GLASS CONTAINER (CIRCLE)   */
/* ===================================== */

.logo-glass-container {
  position: relative;
  overflow: hidden;

  /* Perfect circle */
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  /* Control size here */
  width: 220px; /* Adjust as needed */

  display: flex;
  align-items: center;
  justify-content: center;

  /* Glass background */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 10px 40px rgba(0, 0, 0, 0.25);

  transition: transform 260ms ease, box-shadow 260ms ease;
}

/* 1px Gradient Border */
.logo-glass-container::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 50%;

  background: linear-gradient(135deg, #C451F1, #32AAE6);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

/* Reflective shimmer */
.logo-glass-container::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 60%
  );

  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}

/* Hover Effect */
.logo-glass-container:hover {
  transform: scale(1.05);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 18px 60px rgba(0, 0, 0, 0.35);
}

.logo-glass-container:hover::after {
  opacity: 1;
  animation: logoGlassShimmer 900ms ease forwards;
}

@keyframes logoGlassShimmer {
  0%   { transform: translateX(-70%) rotate(12deg); }
  100% { transform: translateX(70%) rotate(12deg); }
}

html {
  scroll-behavior: smooth;
}

#contact-form {
  scroll-margin-top: 120px;
}

/* =========================================
   Elementor Floating Labels (Robust)
   Enabled only on groups marked by JS: .xf-float--on
   Applies only to input/textarea (NOT selects)
   ========================================= */

/* New wrapper class (replace your old .float-label) */
.xf-floatwrap .elementor-field-group.xf-float--on{
  position: relative;
}

/* Make room for label inside the field */
.xf-floatwrap .elementor-field-group.xf-float--on input.elementor-field,
.xf-floatwrap .elementor-field-group.xf-float--on textarea.elementor-field{
  padding-top: 20px;
  padding-left: 16px; /* indent like placeholder */
  box-sizing: border-box;
  width: 100%;
}

/* Label: sit inside field by default */
.xf-floatwrap .elementor-field-group.xf-float--on .elementor-field-label{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  pointer-events: none;
  opacity: 0.75;
  transition: all 180ms ease;
  z-index: 2;
}

/* Float label when focused OR filled */
.xf-floatwrap .elementor-field-group.xf-float--on.xf-focus .elementor-field-label,
.xf-floatwrap .elementor-field-group.xf-float--on.xf-filled .elementor-field-label{
  top: -10px;
  left: 10px;
  transform: translateY(0);
  opacity: 1;
}

/* (Optional) If you want select styling, keep it under the new wrapper class.
   Note: your JS ignores selects, and these rules are unrelated to floating labels. */

/* Hide placeholder option from dropdown list */
.xf-floatwrap select.elementor-field option[value=""]{
  display: none;
}

/* Make empty state text slightly muted (optional aesthetic) */
.xf-floatwrap select.elementor-field:invalid{
  color: #888;
}

/* Restore normal color when real option selected */
.xf-floatwrap select.elementor-field:valid{
  color: inherit;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Artemus';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://nextplaypro.ai/wp-content/uploads/2026/03/Artemus.ttf') format('truetype');
}
@font-face {
	font-family: 'Artemus';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://nextplaypro.ai/wp-content/uploads/2026/03/Artemus.woff') format('woff');
}
/* End Custom Fonts CSS */