.elementor-kit-9{--e-global-color-primary:#F4F2FE;--e-global-color-secondary:#1A1A1C;--e-global-color-text:#1A1A1C;--e-global-color-accent:#FCFCFC;--e-global-color-555f476:#7C3AED;--e-global-color-00f5704:#F59E0B;--e-global-color-d8fd568:#EF4444;--e-global-color-374be83:#000000;--e-global-color-70cb32c:#F9FAFB;--e-global-color-aa03262:#E5E7EB;--e-global-color-ee7095a:#6B7280;--e-global-color-ebf1cef:#000000;--e-global-color-9c6ed00:#FFFFFF;--e-global-typography-primary-font-family:"Inter Tight";--e-global-typography-primary-font-size:1px;--e-global-typography-primary-font-weight:normal;--e-global-typography-secondary-font-family:"next-sass";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"next-sass";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"next-sass";--e-global-typography-accent-font-weight:500;--e-global-typography-b04b7e5-font-family:"Inter Tight";}.elementor-kit-9 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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@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 *//**
 * NextSaaS Global Site CSS
 * Complete CSS Framework for Elementor
 * Version: 1.0.0
 */

/* ==========================================================================
   GOOGLE FONTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   ICON FONT - NEXT-SASS
   ========================================================================== */
@font-face {
  font-family: next-sass;
  src: url("/wp-content/themes/nextsaas-elementor-theme/fonts/next-sass.woff") format("woff"),
       url("/wp-content/themes/nextsaas-elementor-theme/fonts/next-sass.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="ns-shape"], [class*=" ns-shape"] {
  font-family: next-sass !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.ns-shape-1::before { content: "\e900"; }
.ns-shape-2::before { content: "\e901"; }
.ns-shape-3::before { content: "\e902"; }
.ns-shape-4::before { content: "\e903"; }
.ns-shape-5::before { content: "\e904"; }
.ns-shape-6::before { content: "\e905"; }
.ns-shape-7::before { content: "\e906"; }
.ns-shape-8::before { content: "\e907"; }
.ns-shape-9::before { content: "\e908"; }
.ns-shape-10::before { content: "\e909"; }
.ns-shape-11::before { content: "\e90a"; }
.ns-shape-12::before { content: "\e90b"; }
.ns-shape-13::before { content: "\e90c"; }
.ns-shape-14::before { content: "\e90d"; }
.ns-shape-15::before { content: "\e90e"; }
.ns-shape-16::before { content: "\e90f"; }
.ns-shape-17::before { content: "\e910"; }
.ns-shape-18::before { content: "\e911"; }
.ns-shape-19::before { content: "\e912"; }
.ns-shape-20::before { content: "\e913"; }
.ns-shape-21::before { content: "\e914"; }
.ns-shape-22::before { content: "\e915"; }
.ns-shape-23::before { content: "\e916"; }
.ns-shape-24::before { content: "\e917"; }
.ns-shape-25::before { content: "\e918"; }
.ns-shape-26::before { content: "\e919"; }
.ns-shape-27::before { content: "\e91a"; }
.ns-shape-28::before { content: "\e91b"; }
.ns-shape-29::before { content: "\e91c"; }
.ns-shape-30::before { content: "\e91d"; }
.ns-shape-31::before { content: "\e91e"; }
.ns-shape-32::before { content: "\e91f"; }
.ns-shape-33::before { content: "\e920"; }
.ns-shape-34::before { content: "\e921"; }
.ns-shape-35::before { content: "\e922"; }
.ns-shape-36::before { content: "\e923"; }
.ns-shape-37::before { content: "\e924"; }
.ns-shape-38::before { content: "\e925"; }
.ns-shape-39::before { content: "\e926"; }
.ns-shape-40::before { content: "\e927"; }

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */
:root {
  /* Primary Colors */
  --ns-primary: #864FFE;
  --ns-primary-50: #f4f2fe;
  --ns-primary-100: #ece8ff;
  --ns-primary-200: #dcd4ff;
  --ns-primary-300: #c3b1ff;
  --ns-primary-400: #a585ff;
  --ns-primary-500: #864ffe;
  --ns-primary-600: #7c31f6;
  
  /* Secondary & Accent Colors */
  --ns-secondary: #1A1A1C;
  --ns-accent: #FCFCFC;
  --ns-white: #FFFFFF;
  --ns-black: #000000;
  
  /* Text Colors */
  --ns-text-muted: rgba(26, 26, 28, 0.6);
  --ns-text-muted-light: rgba(252, 252, 252, 0.6);
  
  /* Background Colors */
  --ns-background-light: #FCFCFC;
  --ns-background-white: #FFFFFF;
  --ns-bg-1: #fcfcfd;
  --ns-bg-2: #f9fafb;
  --ns-bg-3: #f4f5f8;
  --ns-bg-4: #f0f2f6;
  --ns-bg-5: #13171e;
  --ns-bg-6: #0f1217;
  --ns-bg-7: #181d26;
  --ns-bg-8: #070b10;
  --ns-bg-9: #1f252f;
  --ns-bg-12: #eaeceb;
  
  /* Accent Colors */
  --ns-yellow: #F9EB57;
  --ns-yellow-light: #FDF7BC;
  --ns-green: #c6f56f;
  --ns-red: #ffb9a2;
  --ns-cyan: #83e7ee;
  --ns-green-light: #e8fbc6;
  --ns-cyan-light: #cdf5f8;
  
  /* Stroke/Border Colors */
  --ns-border-light: rgba(26, 26, 28, 0.1);
  --ns-stroke-1: #dfe4eb;
  --ns-stroke-2: #e3e7ed;
  --ns-stroke-3: #d7dde5;
  --ns-stroke-4: #eceff4;
  --ns-stroke-5: #1b232f;
  --ns-stroke-6: #202731;
  --ns-stroke-7: #2a333e;
  --ns-stroke-8: #303b49;
  
  /* Typography - Font Family */
  --ns-font-family: 'Inter Tight', sans-serif;
  --ns-font-primary: 'Inter Tight', sans-serif;
  
  /* Typography - Font Weights */
  --ns-font-thin: 100;
  --ns-font-extralight: 200;
  --ns-font-light: 300;
  --ns-font-normal: 400;
  --ns-font-medium: 500;
  --ns-font-semibold: 600;
  --ns-font-bold: 700;
  --ns-font-extrabold: 800;
  --ns-font-black: 900;
  
  /* Typography Sizes - Headings */
  --ns-heading-1: 4.25rem;
  --ns-heading-1-lh: 110%;
  --ns-heading-2: 3.25rem;
  --ns-heading-2-lh: 120%;
  --ns-heading-3: 2.5rem;
  --ns-heading-3-lh: 120%;
  --ns-heading-4: 2rem;
  --ns-heading-4-lh: 130%;
  --ns-heading-5: 1.5rem;
  --ns-heading-5-lh: 140%;
  --ns-heading-6: 1.25rem;
  --ns-heading-6-lh: 140%;
  
  /* Typography Sizes - Body/Tagline */
  --ns-tagline-1: 1rem;
  --ns-tagline-1-lh: 150%;
  --ns-tagline-2: 0.875rem;
  --ns-tagline-2-lh: 150%;
  --ns-tagline-3: 0.75rem;
  --ns-tagline-3-lh: 150%;
  
  /* Text Sizes */
  --ns-text-xs: 0.75rem;
  --ns-text-sm: 0.875rem;
  --ns-text-base: 1rem;
  --ns-text-lg: 1.125rem;
  --ns-text-xl: 1.25rem;
  --ns-text-2xl: 1.5rem;
  --ns-text-3xl: 1.875rem;
  --ns-text-4xl: 2.25rem;
  --ns-text-5xl: 3rem;
  --ns-text-6xl: 3.75rem;
  --ns-text-7xl: 4.5rem;
  --ns-text-8xl: 6rem;
  
  /* Border Radius */
  --ns-radius-sm: 0.25rem;
  --ns-radius-md: 0.375rem;
  --ns-radius-lg: 0.5rem;
  --ns-radius-xl: 0.75rem;
  --ns-radius-2xl: 1rem;
  --ns-radius-3xl: 1.5rem;
  --ns-radius-4xl: 2rem;
  --ns-radius-full: 9999px;
  
  /* Spacing */
  --ns-spacing: 0.25rem;
  
  /* Shadows */
  --ns-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ns-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --ns-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ns-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ns-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --ns-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Gradients */
  --ns-gradient-1: linear-gradient(135deg, #a585ff 0%, #ffc2ad 100%);
  --ns-gradient-5: linear-gradient(165deg, rgba(255,255,255,0.5) 0.51%, rgba(255,255,255,0) 64.43%);
  --ns-gradient-6: linear-gradient(#83e7ee 0%, #c6f56f 100%);
  --ns-gradient-7: linear-gradient(#fff 0%, #83e7ee 100%);
  --ns-gradient-8: linear-gradient(156deg, #fff 32.92%, #a585ff 91%);
  --ns-gradient-9: linear-gradient(156deg, #dfb0ff 32.92%, #fdbedc 91%);
  --ns-gradient-11: linear-gradient(179deg, rgba(255,255,255,0) 0.68%, #fff 79.47%);
  --ns-gradient-12: radial-gradient(73.01% 80.77% at 19.23% 47.79%, #83e7ee 0%, rgba(134,79,254,0) 100%);
  
  /* Transitions */
  --ns-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ns-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ns-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --ns-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ns-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ns-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Container Widths */
  --ns-container-sm: 640px;
  --ns-container-md: 768px;
  --ns-container-lg: 1024px;
  --ns-container-xl: 1290px;
  --ns-container-2xl: 1440px;
  
  /* Z-Index */
  --ns-z-dropdown: 100;
  --ns-z-sticky: 200;
  --ns-z-fixed: 300;
  --ns-z-modal-backdrop: 400;
  --ns-z-modal: 500;
  --ns-z-popover: 600;
  --ns-z-tooltip: 700;
}

/* ==========================================================================
   BASE RESET & DEFAULTS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}



html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
      max-width: 100%;
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-base);
  font-weight: var(--ns-font-normal);
  line-height: 1.5;
  color: var(--ns-secondary);
  background-color: var(--ns-bg-3);
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   GLOBAL FONT RESET - APPLY TO ALL ELEMENTS
   ========================================================================== */
html,
body,
body.elementor-page,
body.elementor-kit-*,
.elementor,
.elementor *,
.elementor-widget,
.elementor-widget *,
.elementor-element,
.elementor-element * {
  font-family: var(--ns-font-family) !important;
}

/* All Headings */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
  font-family: var(--ns-font-family) !important;
}

/* All Text Elements */
p, span, a, li, label, input, textarea, select, button,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span,
.elementor-text-editor,
.elementor-text-editor p {
  font-family: var(--ns-font-family) !important;
}

/* Elementor Specific Widgets */
.elementor-widget-button .elementor-button,
.elementor-widget-button .elementor-button-text,
.elementor-button,
.elementor-button-text {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-icon-list-text {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-description {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-testimonial .elementor-testimonial-content,
.elementor-widget-testimonial .elementor-testimonial-name,
.elementor-widget-testimonial .elementor-testimonial-job {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-accordion .elementor-accordion-content,
.elementor-widget-toggle .elementor-toggle-title,
.elementor-widget-toggle .elementor-toggle-content {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-content {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-counter .elementor-counter-title {
  font-family: var(--ns-font-family) !important;
}

.elementor-widget-progress .elementor-title,
.elementor-widget-progress .elementor-progress-percentage {
  font-family: var(--ns-font-family) !important;
}

/* Form Elements */
.elementor-form .elementor-field,
.elementor-form .elementor-field-label,
.elementor-form .elementor-button,
.elementor-field-group label,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select {
  font-family: var(--ns-font-family) !important;
}

/* Navigation & Menu */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu--main .elementor-item,
.elementor-widget-nav-menu .elementor-nav-menu a,
.elementor-menu-toggle,
nav, nav a, nav li {
  font-family: var(--ns-font-family) !important;
}

/* Footer Widgets */
.elementor-location-footer,
.elementor-location-footer * {
  font-family: var(--ns-font-family) !important;
}

/* Header Widgets */
.elementor-location-header,
.elementor-location-header * {
  font-family: var(--ns-font-family) !important;
}

/* Popup/Modal */
.elementor-popup-modal,
.elementor-popup-modal * {
  font-family: var(--ns-font-family) !important;
}

/* WordPress Default Elements */
.wp-block,
.wp-block * {
  font-family: var(--ns-font-family) !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Headings */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--ns-font-primary) !important;
  font-weight: var(--ns-font-normal);
  margin: 0;
  padding: 0;
}

h1, .ns-h1 {
  font-size: var(--ns-heading-1);
  line-height: var(--ns-heading-1-lh);
}

h2, .ns-h2 {
  font-size: var(--ns-heading-2);
  line-height: var(--ns-heading-2-lh);
}

h3, .ns-h3 {
  font-size: var(--ns-heading-3);
  line-height: var(--ns-heading-3-lh);
}

h4, .ns-h4 {
  font-size: var(--ns-heading-4);
  line-height: var(--ns-heading-4-lh);
}

h5, .ns-h5 {
  font-size: var(--ns-heading-5);
  line-height: var(--ns-heading-5-lh);
}

h6, .ns-h6 {
  font-size: var(--ns-heading-6);
  line-height: var(--ns-heading-6-lh);
}

/* Paragraph & Body Text */
p, .ns-body {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-base);
  font-weight: var(--ns-font-normal);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Taglines */
.ns-tagline-1 {
  font-size: var(--ns-tagline-1);
  line-height: var(--ns-tagline-1-lh);
}

.ns-tagline-2 {
  font-size: var(--ns-tagline-2);
  line-height: var(--ns-tagline-2-lh);
}

.ns-tagline-3 {
  font-size: var(--ns-tagline-3);
  line-height: var(--ns-tagline-3-lh);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: var(--ns-transition);
}

a:hover {
  color: var(--ns-primary);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Base Button */
.ns-btn,
.btn {
  display: inline-block;
  position: relative;
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-sm);
  font-weight: var(--ns-font-normal);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--ns-radius-full);
  padding: 12px 24px;
  transition: var(--ns-transition-slow);
  overflow: hidden;
}

.ns-btn span:first-letter,
.btn span:first-letter {
  text-transform: uppercase;
}

.ns-btn:hover,
.btn:hover {
  transform: scale(1.02);
}

/* Arrow on hover */
.ns-btn::before,
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s var(--ns-ease-in-out);
}

.ns-btn:hover::before,
.btn:hover::before {
  width: 12px;
  height: 12px;
  transform: translateY(-50%) translateX(-16px);
  opacity: 1;
}

.ns-btn span,
.btn span {
  display: inline-block;
  transition: transform 0.3s var(--ns-ease-in-out);
}

.ns-btn:hover span,
.btn:hover span {
  transform: translateX(-8px);
}

/* Button Sizes */
.ns-btn-sm,
.btn-sm {
  padding: 8px 16px;
  font-size: var(--ns-text-xs);
}

.ns-btn-md,
.btn-md {
  padding: 12px 24px;
  font-size: var(--ns-text-sm);
}

.ns-btn-lg,
.btn-lg {
  padding: 16px 32px;
  font-size: var(--ns-text-base);
}

/* Button Variants */

/* Primary Button */
.ns-btn-primary,
.btn-primary {
  background-color: var(--ns-primary);
  border-color: var(--ns-primary);
  color: var(--ns-white);
}

.ns-btn-primary:hover,
.btn-primary:hover {
  background-color: var(--ns-primary-600);
  border-color: var(--ns-primary-600);
  color: var(--ns-white);
}

/* Secondary Button */
.ns-btn-secondary,
.btn-secondary {
  background-color: var(--ns-secondary);
  border-color: var(--ns-secondary);
  color: var(--ns-white);
}

.ns-btn-secondary:hover,
.btn-secondary:hover {
  background-color: var(--ns-primary);
  border-color: var(--ns-primary);
  color: var(--ns-white);
}

/* White Button */
.ns-btn-white,
.btn-white {
  background-color: var(--ns-white);
  border-color: var(--ns-white);
  color: var(--ns-secondary);
}

.ns-btn-white:hover,
.btn-white:hover {
  background-color: var(--ns-primary);
  border-color: var(--ns-primary);
  color: var(--ns-white);
}

/* Outline Button */
.ns-btn-outline,
.btn-outline {
  background-color: transparent;
  border-color: var(--ns-stroke-1);
  color: var(--ns-secondary);
}

.ns-btn-outline:hover,
.btn-outline:hover {
  background-color: var(--ns-secondary);
  border-color: var(--ns-secondary);
  color: var(--ns-white);
}

/* Ghost Button */
.ns-btn-ghost,
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--ns-secondary);
}

.ns-btn-ghost:hover,
.btn-ghost:hover {
  background-color: var(--ns-bg-4);
  color: var(--ns-secondary);
}

/* ==========================================================================
   CONTAINER / LAYOUT
   ========================================================================== */

/* Main Container */
.ns-container,
.main-container {
  width: 100%;
  max-width: var(--ns-container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .ns-container,
  .main-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Full Width Container */
.ns-container-full {
  width: 100%;
  max-width: 100%;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

/* Section Padding */
.ns-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (max-width: 1024px) {
  .ns-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

@media (max-width: 768px) {
  .ns-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Section Title */
.ns-section-title {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-heading-2);
  font-weight: var(--ns-font-normal);
  line-height: var(--ns-heading-2-lh);
  color: var(--ns-secondary);
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .ns-section-title {
    font-size: var(--ns-heading-3);
  }
}

/* Section Subtitle/Tagline */
.ns-section-tagline {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-tagline-2);
  font-weight: var(--ns-font-medium);
  line-height: var(--ns-tagline-2-lh);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ns-primary);
  margin-bottom: 16px;
}

/* Section Description */
.ns-section-description {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-base);
  font-weight: var(--ns-font-normal);
  line-height: 1.6;
  color: var(--ns-secondary);
  opacity: 0.8;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

/* Base Card */
.ns-card {
  background-color: var(--ns-white);
  border-radius: var(--ns-radius-2xl);
  border: 1px solid var(--ns-stroke-1);
  padding: 32px;
  transition: var(--ns-transition);
}

.ns-card:hover {
  border-color: var(--ns-stroke-3);
  box-shadow: var(--ns-shadow-lg);
}

/* Card Title */
.ns-card-title {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-heading-5);
  font-weight: var(--ns-font-normal);
  line-height: var(--ns-heading-5-lh);
  color: var(--ns-secondary);
  margin-bottom: 12px;
}

/* Card Description */
.ns-card-description {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-base);
  font-weight: var(--ns-font-normal);
  line-height: 1.5;
  color: var(--ns-secondary);
  opacity: 0.7;
}

/* ==========================================================================
   BADGES / TAGS
   ========================================================================== */

.ns-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-xs);
  font-weight: var(--ns-font-medium);
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--ns-radius-full);
  background-color: var(--ns-primary-100);
  color: var(--ns-primary);
}

.ns-badge-primary {
  background-color: var(--ns-primary);
  color: var(--ns-white);
}

.ns-badge-secondary {
  background-color: var(--ns-secondary);
  color: var(--ns-white);
}

.ns-badge-outline {
  background-color: transparent;
  border: 1px solid var(--ns-stroke-1);
  color: var(--ns-secondary);
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

/* Input Fields */
.ns-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-base);
  font-weight: var(--ns-font-normal);
  line-height: 1.5;
  color: var(--ns-secondary);
  background-color: var(--ns-white);
  border: 1px solid var(--ns-stroke-1);
  border-radius: var(--ns-radius-lg);
  padding: 12px 16px;
  width: 100%;
  transition: var(--ns-transition);
}

.ns-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ns-primary);
  box-shadow: 0 0 0 3px var(--ns-primary-100);
}

.ns-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ns-secondary);
  opacity: 0.5;
}

/* Labels */
.ns-label,
label {
  font-family: var(--ns-font-primary) !important;
  font-size: var(--ns-text-sm);
  font-weight: var(--ns-font-medium);
  line-height: 1.5;
  color: var(--ns-secondary);
  margin-bottom: 8px;
  display: block;
}

/* ==========================================================================
   IMAGES
   ========================================================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ns-img-rounded {
  border-radius: var(--ns-radius-2xl);
}

.ns-img-circle {
  border-radius: var(--ns-radius-full);
}

/* ==========================================================================
   LISTS
   ========================================================================== */

.ns-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ns-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ns-list-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ns-list-check {
  width: 20px;
  height: 20px;
  background-color: var(--ns-primary-100);
  border-radius: var(--ns-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ns-list-check svg {
  width: 12px;
  height: 12px;
  color: var(--ns-primary);
}

/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.ns-divider {
  width: 100%;
  height: 1px;
  background-color: var(--ns-stroke-1);
  margin: 24px 0;
}

.ns-divider-vertical {
  width: 1px;
  height: 20px;
  background-color: var(--ns-stroke-1);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Text Colors */
.ns-text-primary { color: var(--ns-primary) !important; }
.ns-text-secondary { color: var(--ns-secondary) !important; }
.ns-text-white { color: var(--ns-white) !important; }
.ns-text-muted { color: var(--ns-secondary); opacity: 0.6; }

/* Background Colors */
.ns-bg-primary { background-color: var(--ns-primary) !important; }
.ns-bg-secondary { background-color: var(--ns-secondary) !important; }
.ns-bg-white { background-color: var(--ns-white) !important; }
.ns-bg-light { background-color: var(--ns-bg-3) !important; }
.ns-bg-transparent { background-color: transparent !important; }

/* Text Alignment */
.ns-text-left { text-align: left !important; }
.ns-text-center { text-align: center !important; }
.ns-text-right { text-align: right !important; }

/* Font Weights */
.ns-font-light { font-weight: var(--ns-font-light) !important; }
.ns-font-normal { font-weight: var(--ns-font-normal) !important; }
.ns-font-medium { font-weight: var(--ns-font-medium) !important; }
.ns-font-semibold { font-weight: var(--ns-font-semibold) !important; }
.ns-font-bold { font-weight: var(--ns-font-bold) !important; }

/* Display */
.ns-hidden { display: none !important; }
.ns-block { display: block !important; }
.ns-inline { display: inline !important; }
.ns-inline-block { display: inline-block !important; }
.ns-flex { display: flex !important; }
.ns-inline-flex { display: inline-flex !important; }
.ns-grid { display: grid !important; }

/* Flexbox */
.ns-flex-row { flex-direction: row !important; }
.ns-flex-col { flex-direction: column !important; }
.ns-flex-wrap { flex-wrap: wrap !important; }
.ns-flex-nowrap { flex-wrap: nowrap !important; }
.ns-items-start { align-items: flex-start !important; }
.ns-items-center { align-items: center !important; }
.ns-items-end { align-items: flex-end !important; }
.ns-justify-start { justify-content: flex-start !important; }
.ns-justify-center { justify-content: center !important; }
.ns-justify-end { justify-content: flex-end !important; }
.ns-justify-between { justify-content: space-between !important; }
.ns-gap-1 { gap: 4px !important; }
.ns-gap-2 { gap: 8px !important; }
.ns-gap-3 { gap: 12px !important; }
.ns-gap-4 { gap: 16px !important; }
.ns-gap-5 { gap: 20px !important; }
.ns-gap-6 { gap: 24px !important; }
.ns-gap-8 { gap: 32px !important; }
.ns-gap-10 { gap: 40px !important; }
.ns-gap-12 { gap: 48px !important; }

/* Spacing - Margin */
.ns-m-0 { margin: 0 !important; }
.ns-mt-0 { margin-top: 0 !important; }
.ns-mb-0 { margin-bottom: 0 !important; }
.ns-mt-4 { margin-top: 16px !important; }
.ns-mb-4 { margin-bottom: 16px !important; }
.ns-mt-6 { margin-top: 24px !important; }
.ns-mb-6 { margin-bottom: 24px !important; }
.ns-mt-8 { margin-top: 32px !important; }
.ns-mb-8 { margin-bottom: 32px !important; }
.ns-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Spacing - Padding */
.ns-p-0 { padding: 0 !important; }
.ns-p-4 { padding: 16px !important; }
.ns-p-6 { padding: 24px !important; }
.ns-p-8 { padding: 32px !important; }
.ns-px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.ns-py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.ns-px-6 { padding-left: 24px !important; padding-right: 24px !important; }
.ns-py-6 { padding-top: 24px !important; padding-bottom: 24px !important; }

/* Width */
.ns-w-full { width: 100% !important; }
.ns-w-auto { width: auto !important; }
.ns-max-w-full { max-width: 100% !important; }

/* Border Radius */
.ns-rounded { border-radius: var(--ns-radius-md) !important; }
.ns-rounded-lg { border-radius: var(--ns-radius-lg) !important; }
.ns-rounded-xl { border-radius: var(--ns-radius-xl) !important; }
.ns-rounded-2xl { border-radius: var(--ns-radius-2xl) !important; }
.ns-rounded-3xl { border-radius: var(--ns-radius-3xl) !important; }
.ns-rounded-full { border-radius: var(--ns-radius-full) !important; }

/* Position */
.ns-relative { position: relative !important; }
.ns-absolute { position: absolute !important; }
.ns-fixed { position: fixed !important; }
.ns-sticky { position: sticky !important; }

/* Overflow */
.ns-overflow-hidden { overflow: hidden !important; }
.ns-overflow-auto { overflow: auto !important; }
.ns-overflow-visible { overflow: visible !important; }

/* ==========================================================================
   ELEMENTOR SPECIFIC OVERRIDES
   ========================================================================== */

/* Reset Elementor defaults */
.elementor-widget {
  margin-bottom: 0;
}

.elementor-element {
  --widgets-spacing: 0px;
}

/* Elementor Section */
.elementor-section {
  padding: 0;
}

/* Elementor Container */
.e-con {
  --container-max-width: var(--ns-container-xl);
}

/* Elementor Headings */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ns-font-primary) !important;
  font-weight: var(--ns-font-normal);
  margin: 0;
  padding: 0;
}

/* Elementor Text Editor */
.elementor-widget-text-editor p {
  font-family: var(--ns-font-primary) !important;
  margin: 0;
}

/* Elementor Button */
.elementor-widget-button .elementor-button {
  font-family: var(--ns-font-primary) !important;
  border-radius: var(--ns-radius-full);
  transition: var(--ns-transition);
}

/* Elementor Image */
.elementor-widget-image img {
  max-width: 100%;
  height: auto;
}

/* Elementor Icon */
.elementor-widget-icon .elementor-icon {
  transition: var(--ns-transition);
}

/* Elementor Divider */
.elementor-widget-divider .elementor-divider {
  padding: 0;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* Fade In */
@keyframes ns-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ns-animate-fadeIn {
  animation: ns-fadeIn 0.5s ease forwards;
}

/* Fade In Up */
@keyframes ns-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ns-animate-fadeInUp {
  animation: ns-fadeInUp 0.5s ease forwards;
}

/* Fade In Down */
@keyframes ns-fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ns-animate-fadeInDown {
  animation: ns-fadeInDown 0.5s ease forwards;
}

/* Scale In */
@keyframes ns-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ns-animate-scaleIn {
  animation: ns-scaleIn 0.5s ease forwards;
}

/* Pulse */
@keyframes ns-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.ns-animate-pulse {
  animation: ns-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --ns-heading-1: 3.5rem;
    --ns-heading-2: 2.75rem;
    --ns-heading-3: 2.25rem;
    --ns-heading-4: 1.75rem;
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --ns-heading-1: 2.5rem;
    --ns-heading-2: 2rem;
    --ns-heading-3: 1.75rem;
    --ns-heading-4: 1.5rem;
    --ns-heading-5: 1.25rem;
    --ns-heading-6: 1.125rem;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  :root {
    --ns-heading-1: 2rem;
    --ns-heading-2: 1.75rem;
    --ns-heading-3: 1.5rem;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'next-sass';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://app.theonlineagency.website/wp-content/uploads/2026/01/next-sass.eot');
	src: url('https://app.theonlineagency.website/wp-content/uploads/2026/01/next-sass.eot?#iefix') format('embedded-opentype'),
		url('https://app.theonlineagency.website/wp-content/uploads/2026/01/next-sass.woff') format('woff'),
		url('https://app.theonlineagency.website/wp-content/uploads/2026/01/next-sass.ttf') format('truetype'),
		url('https://app.theonlineagency.website/wp-content/uploads/2026/01/next-sass.svg#next-sass') format('svg');
}
/* End Custom Fonts CSS */