/*
 * Global CSS Variables
 * These variables define design tokens for consistent styling across the site.
 * Adjust these values to modify your site's appearance.
 */
:root {
  /* --- Elementor Section & Container Padding --- */

  /* Global Side Padding (Left & Right) for all Sections/Containers */
  --fluid-side-padding-min: 1.25rem; /* 20px */
  --fluid-side-padding-max: 5rem; /* 80px */

  /* Top and Bottom Padding for Containers (Smallest to Largest) */
  --section-xxs-padding-min: 1.5rem; /* 24px */
  --section-xxs-padding-max: 1.5rem; /* 24px */

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

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

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

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

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

  --section-xxl-padding-min: 9.375rem; /* 150px */
  --section-xxl-padding-max: 10rem; /* 160px */

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

  /* Section Heights */
  --section-hero-height: 100vh; /* Page Hero Sections Height */
  --section-fullh-height: 100vh; /* Full Height Sections (100% screen height) */

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

  /* Widths for Narrow Sections / Containers (Smallest to Largest) */
  --section-slim-t: 32rem; /* 560px */
  --section-slim-s: 37rem; /* 640px */
  --section-slim-m: 45rem; /* 720px */
  --section-slim-l: 62.5rem; /* 1000px */
  --section-slim-xl: 75rem; /* 1200px - New XL slim width */

  /* --- Border Radius (Smallest to Largest) --- */
  --ev-border-radius-0: 0px;
  --ev-border-radius-s: 4px;
  --ev-border-radius-m: 8px;
  --ev-border-radius-l: 16px;
  --ev-border-radius-xl: 30px;
  --ev-border-radius-1: 9999px; /* Renamed from --ev-border-radius-full */

  /* --- Border Width (Smallest to Largest) --- */
  --ev-border-width-0: 0px;
  --ev-border-width-s: 0.5px;
  --ev-border-width-m: 1px;
  --ev-border-width-l: 2px;
  --ev-border-width-xl: 4px;

  /* --- Default Border Style & Color --- */
  --ev-default-border-style: solid;
  --ev-default-border-color: #ccc;

  /* --- Box Shades (Shadows) (Smallest to Largest) --- */
  --ev-shade-0: none;
  --ev-shade-s: 0px 0px 3px 0px rgba(26, 26, 26, 0.2);
  --ev-shade-m: 0px 0px 4px 0px rgba(26, 26, 26, 0.24);
  --ev-shade-l: 0px 4px 8px -2px rgba(26, 26, 26, 0.32);
  --ev-shade-xl: 0px 8px 16px -4px rgba(26, 26, 26, 0.48);
}

/*
 * Utility Classes
 * These classes apply specific styles to elements using the variables defined above.
 * Do not edit these classes directly; adjust the variables in the :root block.
 */

/* Breakpoints for Responsive Utility Classes */
/*
 * xs: Extra Small (Mobile, default/base styles, no suffix)
 * sm: Small (min-width: 576px)
 * md: Medium (min-width: 768px)
 * lg: Large (min-width: 1024px)
 * xl: Extra Large (min-width: 1280px)
 *
 * Naming Convention:
 * - [class-name]: Applies to xs and all larger breakpoints (mobile-first).
 * - [class-name]-[breakpoint]: Applies to the specified breakpoint and all larger breakpoints.
 * (e.g., .text-center-md will center text from 768px upwards; below 768px, it will revert to its default or an earlier applied style.)
 */


/* Elementor Section & Container Padding Classes */
/* These classes apply fluid padding to Elementor sections and containers, ensuring consistent spacing across different screen sizes. */

/* Section/Container Padding - Fluid Variants (Smallest to Largest) */
.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-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-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, .section-m { /* .section now also uses the medium padding */
  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-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-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-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-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;
}

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

/* General Padding Utilities */
.pad-t {
  padding: var(--fluid-side-padding-min);
}
.pad-b {
  padding: 1.25rem;
}


/* Elementor Section Height & Width Classes */
/* These classes control the height and maximum width of Elementor sections for different layout needs. */

/* Hero Sections Height */
.section-hero {
  min-height: var(--section-hero-height) !important;
}
.section-hero .e-con-inner {
  justify-content: center !important;
}

/* Full Height Sections Height */
.section-fullh {
  min-height: var(--section-fullh-height) !important;
}
.section-fullh .e-con-inner {
  justify-content: center !important;
}

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

/* Narrow Sections (Content Width) (Smallest to Largest) */
/* These classes ensure the content within sections/containers is centered and has a specific max-width. */
.ev-slim div {
  max-width: 20rem !important; /* Specific narrow content utility, kept here for context */
}

/* Section Slim Widths (Applies to the Elementor container or its inner content wrapper) */

.section-slim-t .e-con-inner { /* Targeting both the class itself and its inner Elementor container */
  max-width: var(--section-slim-t) !important;
}

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

.section-slim .e-con-inner, .section-slim-m .e-con-inner { /* .section-slim now also uses the medium slim width */
  max-width: var(--section-slim-m) !important;
}

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

.section-slim-xl .e-con-inner { /* New XL slim width for sections */
  max-width: var(--section-slim-xl) !important;
}


/* Container Width Classes */
/* These classes provide standalone max-width utilities that can be applied directly to any div or container element. */

/* Container Slim Widths (Smallest to Largest) */
.div-slim-t {
  max-width: var(--section-slim-t) !important;
}
.div-slim-s {
  max-width: var(--section-slim-s) !important;
}
.div-slim, .div-slim-m { /* .div-slim now also uses the medium slim width */
  max-width: var(--section-slim-m) !important;
}
.div-slim-l {
  max-width: var(--section-slim-l) !important;
}
.div-slim-xl { /* New XL slim width for containers */
  max-width: var(--section-slim-xl) !important;
}


/* Framework & Utility Classes */
/* These classes provide reusable styles for border radius, border width, box shades (shadows), and text alignment. */

/* Border Radius Classes (br) (Smallest to Largest) */
.br-0 {
  border-radius: var(--ev-border-radius-0);
}
.br-s {
  border-radius: var(--ev-border-radius-s);
}
.br-m {
  border-radius: var(--ev-border-radius-m);
}
.br-l {
  border-radius: var(--ev-border-radius-l);
}
.br-xl {
  border-radius: var(--ev-border-radius-xl);
}
.br-1 { /* Renamed from .br-full */
  border-radius: var(--ev-border-radius-1);
}

/* Border Width Classes (bw) (Smallest to Largest) */
.bw-0 {
  border-width: var(--ev-border-width-0);
  border-style: none; /* No border style when width is 0 */
  border-color: transparent; /* No border color when width is 0 */
}
.bw-s {
  border-width: var(--ev-border-width-s);
  border-style: var(--ev-default-border-style);
  border-color: var(--ev-default-border-color);
}
.bw-m {
  border-width: var(--ev-border-width-m);
  border-style: var(--ev-default-border-style);
  border-color: var(--ev-default-border-color);
}
.bw-l {
  border-width: var(--ev-border-width-l);
  border-style: var(--ev-default-border-style);
  border-color: var(--ev-default-border-color);
}
.bw-xl {
  border-width: var(--ev-border-width-xl);
  border-style: var(--ev-default-border-style);
  border-color: var(--ev-default-border-color);
}

/* Box Shade Classes (Smallest to Largest) */
.shade-0 {
  box-shadow: var(--ev-shade-0);
}
.shade-s {
  box-shadow: var(--ev-shade-s);
}
.shade, .shade-m {
  box-shadow: var(--ev-shade-m);
}
.shade-l {
  box-shadow: var(--ev-shade-l);
}
.shade-xl {
  box-shadow: var(--ev-shade-xl);
}


/* Text Alignment Classes (text) */
.text-left {
  text-align: left !important; /* Ensure !important for higher specificity */
}
.text-right {
  text-align: right !important; /* Ensure !important for higher specificity */
}
.text-center {
  text-align: center !important; /* Ensure !important for higher specificity */
}
.ev-text-center {
  text-align: center !important; /* Ensure !important for higher specificity */
}
.text-justify {
  text-align: justify !important; /* Ensure !important for higher specificity */
}