/*
* Unified CSS System
* - Spacing utilities (margins, paddings)
* - Border radius utilities
* - Shadow utilities
* - Section management for Elementor
* - Responsive paddings and section control
*/

/* ===== CSS VARIABLES ===== */
:root {
  /* Spacing scale variables */
  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.75rem;   /* 12px */
  --space-s: 1rem;       /* 16px */
  --space-m: 1.5rem;     /* 24px */
  --space-l: 2rem;       /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */

  /* Border-radius variables */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-round: 50%;

  /* Shadow variables */
  --shadow-s: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-m: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-l: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
  
  /* Global Padding Variables - Editable */
  /* Left and Right Padding All Sections/Containers */
  --fluid-side-padding-min: 1.25rem; /* 20px */
  --fluid-side-padding-max: 5rem;   /* 80px */

  /* Top and Bottom Padding All Containers */
  --section-xxl-padding-min: 9.375rem; /* 150px */
  --section-xxl-padding-max: 10rem; /* 160px */ 

  --section-xl-padding-min: 6.875rem; /* 110px */
  --section-xl-padding-max: 7.5rem; /* 120px */

  --section-l-padding-min: 5.625rem; /* 90px */
  --section-l-padding-max: 6.25rem; /* 100px */

  --section-m-padding-min: 5rem; /* 80px */
  --section-m-padding-max: 5rem; /* 80px */

  --section-s-padding-min: 3.75rem; /* 60px */
  --section-s-padding-max: 3.75rem; /* 60px */

  --section-xs-padding-min: 2.5rem; /* 40px */
  --section-xs-padding-max: 2.5rem; /* 40px */

  --section-xxs-padding-min: 1.5rem; /* 24px */
  --section-xxs-padding-max: 1.5rem; /* 24px */
  
  --section-header-padding-min: 1.25rem; /* 20px */
  --section-header-padding-max: 1.25rem; /* 20px */

  /* Hero Sections Height Variable */
  --section-hero-height: 100vh; /* 100% the screen height */

  /* Offset Padding for Overlay Headers */
  --section-offset-header: 80px; /* Adjust to the overlay header's negative margin */

  /* Width For Narrow Sections */
  --section-narrow: 62.5rem; /* 1000px */
  --section-narrow-xs: 45rem; /* 720px */
}

/* ===== MARGINS ===== */
/* All sides margins */
.margin-0 { margin: 0 !important; }
.margin-3xs { margin: var(--space-3xs) !important; }
.margin-2xs { margin: var(--space-2xs) !important; }
.margin-xs { margin: var(--space-xs) !important; }
.margin-s { margin: var(--space-s) !important; }
.margin-m { margin: var(--space-m) !important; }
.margin-l { margin: var(--space-l) !important; }
.margin-xl { margin: var(--space-xl) !important; }
.margin-2xl { margin: var(--space-2xl) !important; }
.margin-3xl { margin: var(--space-3xl) !important; }

/* Top margins */
.margin-top-0 { margin-top: 0 !important; }
.margin-top-3xs { margin-top: var(--space-3xs) !important; }
.margin-top-2xs { margin-top: var(--space-2xs) !important; }
.margin-top-xs { margin-top: var(--space-xs) !important; }
.margin-top-s { margin-top: var(--space-s) !important; }
.margin-top-m { margin-top: var(--space-m) !important; }
.margin-top-l { margin-top: var(--space-l) !important; }
.margin-top-xl { margin-top: var(--space-xl) !important; }
.margin-top-2xl { margin-top: var(--space-2xl) !important; }
.margin-top-3xl { margin-top: var(--space-3xl) !important; }

/* Right margins */
.margin-right-0 { margin-right: 0 !important; }
.margin-right-3xs { margin-right: var(--space-3xs) !important; }
.margin-right-2xs { margin-right: var(--space-2xs) !important; }
.margin-right-xs { margin-right: var(--space-xs) !important; }
.margin-right-s { margin-right: var(--space-s) !important; }
.margin-right-m { margin-right: var(--space-m) !important; }
.margin-right-l { margin-right: var(--space-l) !important; }
.margin-right-xl { margin-right: var(--space-xl) !important; }
.margin-right-2xl { margin-right: var(--space-2xl) !important; }
.margin-right-3xl { margin-right: var(--space-3xl) !important; }

/* Bottom margins */
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-3xs { margin-bottom: var(--space-3xs) !important; }
.margin-bottom-2xs { margin-bottom: var(--space-2xs) !important; }
.margin-bottom-xs { margin-bottom: var(--space-xs) !important; }
.margin-bottom-s { margin-bottom: var(--space-s) !important; }
.margin-bottom-m { margin-bottom: var(--space-m) !important; }
.margin-bottom-l { margin-bottom: var(--space-l) !important; }
.margin-bottom-xl { margin-bottom: var(--space-xl) !important; }
.margin-bottom-2xl { margin-bottom: var(--space-2xl) !important; }
.margin-bottom-3xl { margin-bottom: var(--space-3xl) !important; }

/* Left margins */
.margin-left-0 { margin-left: 0 !important; }
.margin-left-3xs { margin-left: var(--space-3xs) !important; }
.margin-left-2xs { margin-left: var(--space-2xs) !important; }
.margin-left-xs { margin-left: var(--space-xs) !important; }
.margin-left-s { margin-left: var(--space-s) !important; }
.margin-left-m { margin-left: var(--space-m) !important; }
.margin-left-l { margin-left: var(--space-l) !important; }
.margin-left-xl { margin-left: var(--space-xl) !important; }
.margin-left-2xl { margin-left: var(--space-2xl) !important; }
.margin-left-3xl { margin-left: var(--space-3xl) !important; }

/* Horizontal (inline) margins */
.margin-inline-0 { margin-left: 0 !important; margin-right: 0 !important; }
.margin-inline-3xs { margin-left: var(--space-3xs) !important; margin-right: var(--space-3xs) !important; }
.margin-inline-2xs { margin-left: var(--space-2xs) !important; margin-right: var(--space-2xs) !important; }
.margin-inline-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.margin-inline-s { margin-left: var(--space-s) !important; margin-right: var(--space-s) !important; }
.margin-inline-m { margin-left: var(--space-m) !important; margin-right: var(--space-m) !important; }
.margin-inline-l { margin-left: var(--space-l) !important; margin-right: var(--space-l) !important; }
.margin-inline-xl { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.margin-inline-2xl { margin-left: var(--space-2xl) !important; margin-right: var(--space-2xl) !important; }
.margin-inline-3xl { margin-left: var(--space-3xl) !important; margin-right: var(--space-3xl) !important; }

/* Vertical (block) margins */
.margin-block-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.margin-block-3xs { margin-top: var(--space-3xs) !important; margin-bottom: var(--space-3xs) !important; }
.margin-block-2xs { margin-top: var(--space-2xs) !important; margin-bottom: var(--space-2xs) !important; }
.margin-block-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.margin-block-s { margin-top: var(--space-s) !important; margin-bottom: var(--space-s) !important; }
.margin-block-m { margin-top: var(--space-m) !important; margin-bottom: var(--space-m) !important; }
.margin-block-l { margin-top: var(--space-l) !important; margin-bottom: var(--space-l) !important; }
.margin-block-xl { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
.margin-block-2xl { margin-top: var(--space-2xl) !important; margin-bottom: var(--space-2xl) !important; }
.margin-block-3xl { margin-top: var(--space-3xl) !important; margin-bottom: var(--space-3xl) !important; }

/* ===== PADDINGS ===== */
/* All sides paddings */
.padding-0 { padding: 0 !important; }
.padding-3xs { padding: var(--space-3xs) !important; }
.padding-2xs { padding: var(--space-2xs) !important; }
.padding-xs { padding: var(--space-xs) !important; }
.padding-s { padding: var(--space-s) !important; }
.padding-m { padding: var(--space-m) !important; }
.padding-l { padding: var(--space-l) !important; }
.padding-xl { padding: var(--space-xl) !important; }
.padding-2xl { padding: var(--space-2xl) !important; }
.padding-3xl { padding: var(--space-3xl) !important; }

/* Top paddings */
.padding-top-0 { padding-top: 0 !important; }
.padding-top-3xs { padding-top: var(--space-3xs) !important; }
.padding-top-2xs { padding-top: var(--space-2xs) !important; }
.padding-top-xs { padding-top: var(--space-xs) !important; }
.padding-top-s { padding-top: var(--space-s) !important; }
.padding-top-m { padding-top: var(--space-m) !important; }
.padding-top-l { padding-top: var(--space-l) !important; }
.padding-top-xl { padding-top: var(--space-xl) !important; }
.padding-top-2xl { padding-top: var(--space-2xl) !important; }
.padding-top-3xl { padding-top: var(--space-3xl) !important; }

/* Right paddings */
.padding-right-0 { padding-right: 0 !important; }
.padding-right-3xs { padding-right: var(--space-3xs) !important; }
.padding-right-2xs { padding-right: var(--space-2xs) !important; }
.padding-right-xs { padding-right: var(--space-xs) !important; }
.padding-right-s { padding-right: var(--space-s) !important; }
.padding-right-m { padding-right: var(--space-m) !important; }
.padding-right-l { padding-right: var(--space-l) !important; }
.padding-right-xl { padding-right: var(--space-xl) !important; }
.padding-right-2xl { padding-right: var(--space-2xl) !important; }
.padding-right-3xl { padding-right: var(--space-3xl) !important; }

/* Bottom paddings */
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-3xs { padding-bottom: var(--space-3xs) !important; }
.padding-bottom-2xs { padding-bottom: var(--space-2xs) !important; }
.padding-bottom-xs { padding-bottom: var(--space-xs) !important; }
.padding-bottom-s { padding-bottom: var(--space-s) !important; }
.padding-bottom-m { padding-bottom: var(--space-m) !important; }
.padding-bottom-l { padding-bottom: var(--space-l) !important; }
.padding-bottom-xl { padding-bottom: var(--space-xl) !important; }
.padding-bottom-2xl { padding-bottom: var(--space-2xl) !important; }
.padding-bottom-3xl { padding-bottom: var(--space-3xl) !important; }

/* Left paddings */
.padding-left-0 { padding-left: 0 !important; }
.padding-left-3xs { padding-left: var(--space-3xs) !important; }
.padding-left-2xs { padding-left: var(--space-2xs) !important; }
.padding-left-xs { padding-left: var(--space-xs) !important; }
.padding-left-s { padding-left: var(--space-s) !important; }
.padding-left-m { padding-left: var(--space-m) !important; }
.padding-left-l { padding-left: var(--space-l) !important; }
.padding-left-xl { padding-left: var(--space-xl) !important; }
.padding-left-2xl { padding-left: var(--space-2xl) !important; }
.padding-left-3xl { padding-left: var(--space-3xl) !important; }

/* Horizontal (inline) paddings */
.padding-inline-0 { padding-left: 0 !important; padding-right: 0 !important; }
.padding-inline-3xs { padding-left: var(--space-3xs) !important; padding-right: var(--space-3xs) !important; }
.padding-inline-2xs { padding-left: var(--space-2xs) !important; padding-right: var(--space-2xs) !important; }
.padding-inline-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.padding-inline-s { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; }
.padding-inline-m { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; }
.padding-inline-l { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; }
.padding-inline-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.padding-inline-2xl { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }
.padding-inline-3xl { padding-left: var(--space-3xl) !important; padding-right: var(--space-3xl) !important; }

/* Vertical (block) paddings */
.padding-block-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.padding-block-3xs { padding-top: var(--space-3xs) !important; padding-bottom: var(--space-3xs) !important; }
.padding-block-2xs { padding-top: var(--space-2xs) !important; padding-bottom: var(--space-2xs) !important; }
.padding-block-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.padding-block-s { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; }
.padding-block-m { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; }
.padding-block-l { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; }
.padding-block-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.padding-block-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
.padding-block-3xl { padding-top: var(--space-3xl) !important; padding-bottom: var(--space-3xl) !important; }

/* ===== BORDER RADIUS ===== */
.radius-0 { border-radius: 0 !important; }
.radius-xs { border-radius: var(--radius-xs) !important; }
.radius-s { border-radius: var(--radius-s) !important; }
.radius-m { border-radius: var(--radius-m) !important; }
.radius-l { border-radius: var(--radius-l) !important; }
.radius-xl { border-radius: var(--radius-xl) !important; }
.radius-round { border-radius: var(--radius-round) !important; }

/* ===== SHADOWS ===== */
.shadow-none { box-shadow: none !important; }
.shadow-s { box-shadow: var(--shadow-s) !important; }
.shadow-m { box-shadow: var(--shadow-m) !important; }
.shadow-l { box-shadow: var(--shadow-l) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* ===== ELEMENTOR SECTION CLASSES ===== */
/* Section/Container Padding - Fluid Variants */
.section-xxl {
  padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

.section-xl {
  padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

.section-l {
  padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

.section-m {
  padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

.section-s {
  padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

.section-xs {
  padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

.section-xxs {
  padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

.section-header {
  padding-top: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

/* ===== SECTION LAYOUT CONTROLS ===== */
/* Hero Container/Sections Height */
.section-hero {
  min-height: var(--section-hero-height)!important;
}

.section-hero .e-con-inner {
  justify-content: center!important;
}

/* Full Width Sections - No Side Padding */
.section-full div {
  max-width: 100%!important;
}

/* Narrow Sections */
.section-narrow .e-con-inner {
  max-width: var(--section-narrow)!important;
}

.section-narrow-xs .e-con-inner {
  max-width: var(--section-narrow-xs)!important;
}

/* Offset Padding for Overlay Headers */
.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}

/* ===== ELEMENTOR SECTION ALIGNMENT & STRUCTURE ===== */
/* Apply utility classes to Elementor elements */
.elementor-section.margin-0,
.elementor-widget-container.margin-0 { margin: 0 !important; }
.elementor-section.padding-0,
.elementor-widget-container.padding-0 { padding: 0 !important; }

/* Section structure control */
.elementor-section {
  position: relative;
}

/* Overflow control */
.section-overflow-hidden {
  overflow: hidden !important;
}

.section-overflow-visible {
  overflow: visible !important;
}

/* Section column alignment */
.section-columns-top .elementor-row {
  align-items: flex-start !important;
}

.section-columns-center .elementor-row {
  align-items: center !important;
}

.section-columns-bottom .elementor-row {
  align-items: flex-end !important;
}

.section-columns-stretch .elementor-row {
  align-items: stretch !important;
}

/* Section content alignment */
.section-content-start .elementor-container {
  justify-content: flex-start !important;
}

.section-content-center .elementor-container {
  justify-content: center !important;
}

.section-content-end .elementor-container {
  justify-content: flex-end !important;
}

.section-content-space-between .elementor-container {
  justify-content: space-between !important;
}

/* ===== RESPONSIVE UTILITIES FOR SECTIONS ===== */
@media (max-width: 767px) {
  .section-hide-mobile {
    display: none !important;
  }
  
  .section-stack-mobile .elementor-row {
    flex-direction: column !important;
  }
  
  .section-reverse-mobile .elementor-row {
    flex-direction: column-reverse !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .section-hide-tablet {
    display: none !important;
  }
  
  .section-stack-tablet .elementor-row {
    flex-direction: column !important;
  }
  
  .section-reverse-tablet .elementor-row {
    flex-direction: column-reverse !important;
  }
}

/* Apply border radius to sections */
.elementor-section.radius-s,
.elementor-widget-container.radius-s {
  border-radius: var(--radius-s) !important;
  overflow: hidden;
}

.elementor-section.radius-m,
.elementor-widget-container.radius-m {
  border-radius: var(--radius-m) !important;
  overflow: hidden;
}

.elementor-section.radius-l,
.elementor-widget-container.radius-l {
  border-radius: var(--radius-l) !important;
  overflow: hidden;
}

/* Apply shadows to sections */
.elementor-section.shadow-s,
.elementor-widget-container.shadow-s {
  box-shadow: var(--shadow-s) !important;
}

.elementor-section.shadow-m,
.elementor-widget-container.shadow-m {
  box-shadow: var(--shadow-m) !important;
}

.elementor-section.shadow-l,
.elementor-widget-container.shadow-l {
  box-shadow: var(--shadow-l) !important;
}

/* ===== ADVANCED SECTION FEATURES ===== */
/* Section with overlay */
.section-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.section-overlay-light::before {
  background-color: rgba(255, 255, 255, 0.7);
}

.section-overlay-dark::before {
  background-color: rgba(0, 0, 0, 0.7);
}

.section-overlay > .elementor-container {
  position: relative;
  z-index: 2;
}

/* Section sticky behaviors */
.section-sticky-top {
  position: sticky !important;
  top: 0;
  z-index: 100;
}

.section-sticky-offset {
  position: sticky !important;
  top: var(--section-offset-header);
  z-index: 100;
}

/* Z-index control */
.section-z-index-1 {
  z-index: 1 !important;
}

.section-z-index-2 {
  z-index: 2 !important;
}

.section-z-index-3 {
  z-index: 3 !important;
}

/* Z-index control */
.section-z-index-10 {
  z-index: 10 !important;
}

.section-z-index-100 {
  z-index: 100 !important;
}

/* ===== COLUMN CONTROL ===== */
/* Column gap control */
.section-column-gap-none .elementor-row {
  gap: 0 !important;
}

.section-column-gap-3xs .elementor-row {
  gap: var(--space-3xs) !important;
}

.section-column-gap-2xs .elementor-row {
  gap: var(--space-2xs) !important;
}

.section-column-gap-xs .elementor-row {
  gap: var(--space-xs) !important;
}

.section-column-gap-s .elementor-row {
  gap: var(--space-s) !important;
}

.section-column-gap-m .elementor-row {
  gap: var(--space-m) !important;
}

.section-column-gap-l .elementor-row {
  gap: var(--space-l) !important;
}

/* Equal height columns */
.section-columns-equal-height .elementor-column {
  height: 100%;
}

.section-columns-equal-height .elementor-column-wrap,
.section-columns-equal-height .elementor-widget-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-columns-equal-height .elementor-widget-wrap {
  flex-grow: 1;
}

/* ===== BACKGROUND CONTROL ===== */
/* Section background control */
.section-bg-fixed {
  background-attachment: fixed !important;
}

.section-bg-cover {
  background-size: cover !important;
  background-position: center center !important;
}

.section-bg-contain {
  background-size: contain !important;
  background-position: center center !important;
}

.section-bg-repeat {
  background-repeat: repeat !important;
}

.section-bg-no-repeat {
  background-repeat: no-repeat !important;
}

/* ===== SECTION SHAPES AND DIVIDERS ===== */
/* Section dividers */
.section-divider-bottom {
  position: relative;
}

.section-divider-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 50px;
  background-size: 100% 100%;
  z-index: 1;
}

.section-divider-top {
  position: relative;
}

.section-divider-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 50px;
  background-size: 100% 100%;
  z-index: 1;
}

/* ===== WIDGET CONTROL WITHIN SECTIONS ===== */
/* Widget alignment */
.widget-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.widget-left {
  margin-right: auto !important;
  text-align: left !important;
}

.widget-right {
  margin-left: auto !important;
  text-align: right !important;
}

/* Content width in widgets */
.content-width-narrow {
  max-width: var(--section-narrow-xs) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== SECTION SPECIFIC CONTROLS ===== */
/* Header section specific */
.section-header-transparent {
  background-color: transparent !important;
}

.section-header-sticky {
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

/* Footer section specific */
.section-footer {
  position: relative;
  z-index: 10;
}

/* ===== RESPONSIVE SPACING OVERRIDES ===== */
@media (max-width: 767px) {
  /* Mobile spacing resets */
  .mobile-padding-reset {
    padding: var(--space-s) !important;
  }
  
  .mobile-margin-reset {
    margin: 0 !important;
  }
  
  /* Mobile specific spacing */
  .mobile-padding-s {
    padding: var(--space-s) !important;
  }
  
  .mobile-padding-inline-s {
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important;
  }
  
  .mobile-padding-block-s {
    padding-top: var(--space-s) !important;
    padding-bottom: var(--space-s) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet spacing resets */
  .tablet-padding-reset {
    padding: var(--space-m) !important;
  }
  
  .tablet-margin-reset {
    margin: 0 !important;
  }
  
  /* Tablet specific spacing */
  .tablet-padding-m {
    padding: var(--space-m) !important;
  }
  
  .tablet-padding-inline-m {
    padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important;
  }
  
  .tablet-padding-block-m {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
  }
}

/* ===== SECTION TRANSITIONS ===== */
.section-transition {
  transition: all 0.3s ease-in-out;
}

.section-transition-slow {
  transition: all 0.6s ease-in-out;
}

.section-transition-fast {
  transition: all 0.15s ease-in-out;
}

/* ===== ELEMENT STATE CLASSES ===== */
/* These can be toggled with JavaScript for interactive effects */
.is-visible {
  opacity: 1;
  visibility: visible;
}

.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.is-active {
  display: block;
}

.is-inactive {
  display: none;
}

/* ===== HELPER CLASSES ===== */
/* Position helpers */
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

/* Display helpers */
.display-block {
  display: block !important;
}

.display-inline-block {
  display: inline-block !important;
}

.display-flex {
  display: flex !important;
}

.display-none {
  display: none !important;
}

/* Overflow helpers */
.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-auto {
  overflow: auto !important;
}

/* Text alignment */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* Width and height helpers */
.width-100 {
  width: 100% !important;
}

.height-100 {
  height: 100% !important;
}

.min-height-100vh {
  min-height: 100vh !important;
}

/* Flex helpers */
.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== ELEMENTOR SPECIFIC OVERRIDES ===== */
/* Remove excess margins from Elementor defaults */
.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/* Fix for Elementor containers */
.e-con {
  --margin-top: var(--e-con-margin-top, 0);
  --margin-right: var(--e-con-margin-right, 0);
  --margin-bottom: var(--e-con-margin-bottom, 0);
  --margin-left: var(--e-con-margin-left, 0);
  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}