.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#BDBDBD;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;color:#F1F5F9;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.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 *//* =========================================================
   GLOBAL WEBSITE STYLES
   Project: Premium Dark UI
   Notes:
   - Fully organized & optimized
   - Easy to edit in future
   - Reusable variables added
   - Proper spacing & comments included
========================================================= */





/* =========================================================
   ROOT VARIABLES
   Change colors here globally
========================================================= */

:root {

  /* Background Colors */
  --bg-dark: #050505;

  /* Primary Gradient */
  --primary-gradient: linear-gradient(
    135deg,
    #FFF2B2 0%,
    #FFC247 15%,
    #FF6B3D 32%,
    #E11D8A 55%,
    #7C3AED 78%,
    #2563EB 100%
  );

  /* Text Gradient */
  --text-gradient: linear-gradient(
    135deg,
    #E8D9A8 0%,
    #D9A441 18%,
    #C96A4A 38%,
    #A13C7A 60%,
    #6A42C2 82%,
    #3B5FA8 100%
  );

  /* Counter Gradient */
  --counter-gradient: linear-gradient(
    to right,
    #ffd86b,
    #d9b8ff,
    #7dd3fc
  );

  /* Site Glow Background */
  --site-glow:
    radial-gradient(circle at top left,
      rgba(124, 58, 237, 0.18),
      transparent 30%),

    radial-gradient(circle at bottom right,
      rgba(6, 182, 212, 0.12),
      transparent 30%);

  /* Glass Effect */
  --glass-bg: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  --glass-border: 1px solid rgba(255,255,255,0.08);

  --glass-shadow:
    0 10px 40px rgba(0,0,0,0.35);

  /* Hover Glow */
  --hover-glow:
    0 0 15px rgba(255, 107, 61, 0.35),
    0 0 30px rgba(124, 58, 237, 0.25);

}





/* =========================================================
   BODY STYLING
========================================================= */

body {
  background: var(--bg-dark);
  position: relative;
}





/* =========================================================
   GLOBAL BACKGROUND GLOW EFFECT
========================================================= */

body::before {

  content: '';

  position: fixed;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  background: var(--site-glow);

}





/* =========================================================
   CTA SECTION BACKGROUND
========================================================= */

.cta {
  background: var(--site-glow);
}





/* =========================================================
   NAVIGATION LINK HOVER EFFECT
========================================================= */

.nav-links a {
  position: relative;
}





/* Animated underline */
.nav-links a::after {

  content: '';

  position: absolute;

  left: 0;
  bottom: 8px;

  width: 0%;
  height: 2px;

  background: var(--primary-gradient);

  transition: width 0.5s ease;

}





/* Hover effect only on desktop */
@media (min-width: 769px) {

  .nav-links a:hover::after {
    width: 100%;
  }

}





/* Disable underline on mobile */
@media (max-width: 768px) {

  .nav-links a::after {
    display: none;
  }

}





/* =========================================================
   ICON STYLES
========================================================= */

.head-icon .elementor-icon {

  background: var(--primary-gradient);

}


.ser-icon span.elementor-icon
{
    background: var(--primary-gradient) !important;
}


/* Icon Hover Glow */
.head-icon .elementor-icon:hover {

  box-shadow: var(--hover-glow);

}





/* =========================================================
   GRADIENT TEXT
========================================================= */

.gradient-text {

  background: var(--text-gradient);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  display: inline-block;

}





/* =========================================================
   COUNTER NUMBER GRADIENT
========================================================= */

.elementor-counter-number-wrapper {

  background: var(--counter-gradient);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  display: inline-block;

}





/* =========================================================
   GLASSMORPHISM CARD
========================================================= */

.glass {

  position: relative;
  overflow: hidden;

  background: var(--glass-bg);

  border: var(--glass-border);

  backdrop-filter: blur(22px);

  box-shadow: var(--glass-shadow);

}





/* Animated shine effect */
.glass::before {

  content: '';

  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.08),
    transparent 70%
  );

  transform: translateX(-100%);

  transition: transform 1s ease;

}





/* Shine animation on hover */
.glass:hover::before {

  transform: translateX(100%);

}





/* =========================================================
   SECONDARY BUTTON
========================================================= */

.btn-sec a.elementor-button.elementor-button-link.elementor-size-sm {

  background: rgba(255, 255, 255, 0.03) !important;

}





/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary a.elementor-button.elementor-button-link.elementor-size-sm {

  background: var(--primary-gradient);

}





/* Primary button hover effect */
.btn-primary a.elementor-button.elementor-button-link.elementor-size-sm:hover {

  box-shadow: var(--hover-glow);

}





/* =========================================================
   PERFORMANCE OPTIMIZATION NOTES
========================================================= */

/*

1. Variables added for easy editing
   → Change colors globally from :root

2. Duplicate CTA styles removed

3. Reusable gradients created

4. Organized sections for:
   - Body
   - Navigation
   - Buttons
   - Cards
   - Typography

5. Easier future maintenance

6. Cleaner spacing for readability

*//* End custom CSS */