/* variables (edit here)*/

:root {
    /* 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 */
    /* Text Colors */
    --text-color: #666666; /* Paragraph and plain text color */
}

/* CSS Template (do not edit below) */

/* 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;
}

/* Remove left and right padding on desktop only */
@media (min-width: 1024px) {
    .section-xxl,
    .section-xl,
    .section-l,
    .section-m,
    .section-s,
    .section-xs,
    .section-xxs,
    .section-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 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));
}

/* ============================================
   BUTTON STYLES
   ============================================ */

/* Button Color Variables (Design System) */
:root {
    /* Primary buttons (default, hero, link, outline) */
    --primary: #DC8100;
    --primary-foreground: #FFFFFF;
    
    /* Secondary button */
    --secondary: #3E9906;
    --secondary-foreground: #FFFFFF;
    
    /* Destructive button */
    --destructive: #EF4444;
    --destructive-foreground: #FFFFFF;
    
    /* Ghost button */
    --foreground: #1F1F1F;
    --accent: #FFF8E6;
    
    /* HeroOutline button */
    --card: #FFFFFF;
    
    /* Button shadows */
    --btn-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --btn-shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.2);
    --btn-hero-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    --btn-hero-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.3);
    --btn-glow: 0 0 20px rgba(220, 129, 0, 0.5);
    
    /* Legacy variable names for compatibility */
    --btn-primary-bg: var(--primary);
    --btn-primary-hover: #E0951F;
    --btn-primary-text: var(--primary-foreground);
    --btn-secondary-bg: var(--secondary);
    --btn-secondary-hover: #45A049;
    --btn-destructive-bg: var(--destructive);
    --btn-destructive-hover: #DC3A3A;
    --btn-outline-border: var(--primary);
    --btn-outline-hover-bg: var(--primary);
    --btn-hero-gradient-start: var(--primary);
    --btn-hero-gradient-end: #E0951F;
}

/* Base Button Styles - text can wrap when long */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.btn:focus {
    outline: 2px solid var(--btn-primary-bg);
    outline-offset: 2px;
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */

/* Default - Primary bg, white text, shadow, hover glow */
.btn-default {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-shadow);
}

.btn-default:hover {
    background-color: var(--btn-primary-hover);
    box-shadow: var(--btn-shadow-hover), var(--btn-glow);
    transform: translateY(-2px);
}

/* Destructive - Red bg for delete/danger actions */
.btn-destructive {
    background-color: var(--btn-destructive-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-shadow);
}

.btn-destructive:hover {
    background-color: var(--btn-destructive-hover);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-2px);
}

/* Outline - Transparent with primary border, fills on hover */
.btn-outline {
    background-color: transparent;
    color: var(--btn-outline-border);
    border: 2px solid var(--btn-outline-border);
    box-shadow: none;
}

.btn-outline:hover {
    background-color: var(--btn-outline-hover-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-shadow);
}

/* Secondary - Secondary color bg with shadow */
.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-shadow);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-2px);
}

/* Ghost - No bg, subtle hover effect */
.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
    box-shadow: none;
}

.btn-ghost:hover {
    background-color: var(--accent);
}

/* Link - Text only with underline on hover */
.btn-link {
    background-color: transparent;
    color: var(--primary);
    box-shadow: none;
    text-decoration: none;
    border-radius: 12px;
    padding: 0.5rem 0;
}

.btn-link:hover {
    text-decoration: underline;
    background-color: transparent;
}

/* Ensure icons are preserved in link buttons */
/* .btn-link .elementor-button-icon,
.btn-link .elementor-icon,
.btn-link i,
.btn-link svg {
    display: inline-block !important;
    margin-right: 0.5rem;
} */

/* Hero - Gradient bg, larger shadow, scale animation */
.btn-hero {
    background: linear-gradient(135deg, var(--btn-hero-gradient-start) 0%, var(--btn-hero-gradient-end) 100%);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-hero-shadow);
}

.btn-hero:hover {
    box-shadow: var(--btn-hero-shadow-hover);
    transform: translateY(-3px) scale(1.05);
}

/* Hero Outline - Blurred card bg with border, for hero sections */
.btn-heroOutline {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--foreground);
    border: 2px solid rgba(31, 31, 31, 0.2);
    box-shadow: var(--btn-shadow);
}

.btn-heroOutline:hover {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(31, 31, 31, 0.3);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-2px);
}

/* Nav - Navigation style, no bg */
.btn-nav {
    background-color: transparent;
    color: rgba(31, 31, 31, 0.8);
    box-shadow: none;
    border-radius: 0;
}

.btn-nav:hover {
    color: var(--primary);
    background-color: transparent;
}

/* ============================================
   BUTTON SIZES
   ============================================ */

/* Small - 36px height, px-4 padding */
.btn-sm {
    height: 36px;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    font-size: 14px;
    font-weight: 600;
}

/* Default - min 44px height, px-5 padding (grows when text wraps) */
.btn-default-size,
.btn {
    min-height: 44px;
    padding-left: 1.25rem; /* px-5 */
    padding-right: 1.25rem; /* px-5 */
    font-size: 14px;
    font-weight: 600;
}

/* Large - min 48px height, px-8 padding */
.btn-lg {
    min-height: 48px;
    padding-left: 2rem; /* px-8 */
    padding-right: 2rem; /* px-8 */
    font-size: 14px;
    font-weight: 600;
}

/* Extra Large - min 56px height, px-10 padding */
.btn-xl {
    min-height: 56px;
    padding-left: 2.5rem; /* px-10 */
    padding-right: 2.5rem; /* px-10 */
    font-size: 14px;
    font-weight: 600;
}

/* Icon - 40x40px square */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon svg,
.btn-icon i {
    width: 20px;
    height: 20px;
}

/* ============================================
   BUTTON USAGE EXAMPLES
   ============================================ */
/* 
Usage:
<button class="btn btn-default btn-sm">Small Primary</button>
<button class="btn btn-destructive">Delete</button>
<button class="btn btn-outline btn-lg">Large Outline</button>
<button class="btn btn-hero btn-xl">Hero Button</button>
<button class="btn btn-icon btn-default"><svg>...</svg></button>
*/

/* ============================================
   ELEMENTOR BUTTON INTEGRATION
   ============================================ */

/* Apply button styles to Elementor buttons when custom classes are added */
/* Target the actual Elementor button structure: <a class="elementor-button elementor-button-link"> */
a.elementor-button.btn-default,
a.elementor-button-link.btn-default {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    box-shadow: var(--btn-shadow) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-default:hover,
a.elementor-button-link.btn-default:hover {
    background-color: #C57200 !important;
    box-shadow: var(--btn-shadow-hover), var(--btn-glow) !important;
    transform: translateY(-2px) !important;
}

a.elementor-button.btn-destructive,
a.elementor-button-link.btn-destructive {
    background-color: var(--destructive) !important;
    color: var(--destructive-foreground) !important;
    box-shadow: var(--btn-shadow) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-destructive:hover,
a.elementor-button-link.btn-destructive:hover {
    background-color: #DC3A3A !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

a.elementor-button.btn-outline,
a.elementor-button-link.btn-outline {
    background-color: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-outline:hover,
a.elementor-button-link.btn-outline:hover {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    box-shadow: var(--btn-shadow) !important;
}

a.elementor-button.btn-secondary,
a.elementor-button-link.btn-secondary {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    box-shadow: var(--btn-shadow) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-secondary:hover,
a.elementor-button-link.btn-secondary:hover {
    background-color: #368505 !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

a.elementor-button.btn-ghost,
a.elementor-button-link.btn-ghost {
    background-color: transparent !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-ghost:hover,
a.elementor-button-link.btn-ghost:hover {
    background-color: var(--accent) !important;
}

a.elementor-button.btn-link,
a.elementor-button-link.btn-link {
    background-color: transparent !important;
    color: var(--primary) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.5rem 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-link:hover,
a.elementor-button-link.btn-link:hover {
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* Preserve Elementor icons in link buttons */
/* a.elementor-button.btn-link .elementor-button-icon,
a.elementor-button-link.btn-link .elementor-button-icon,
a.elementor-button.btn-link .elementor-icon,
a.elementor-button-link.btn-link .elementor-icon,
a.elementor-button.btn-link i,
a.elementor-button-link.btn-link i,
a.elementor-button.btn-link svg,
a.elementor-button-link.btn-link svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-right: 0.5rem !important;
} */

a.elementor-button.btn-hero,
a.elementor-button-link.btn-hero {
    background: linear-gradient(135deg, var(--primary) 0%, #C57200 100%) !important;
    color: var(--primary-foreground) !important;
    box-shadow: var(--btn-hero-shadow) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-hero:hover,
a.elementor-button-link.btn-hero:hover {
    box-shadow: var(--btn-hero-shadow-hover) !important;
    transform: translateY(-3px) scale(1.05) !important;
}

a.elementor-button.btn-heroOutline,
a.elementor-button-link.btn-heroOutline {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: var(--foreground) !important;
    border: 2px solid rgba(31, 31, 31, 0.2) !important;
    box-shadow: var(--btn-shadow) !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-heroOutline:hover,
a.elementor-button-link.btn-heroOutline:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(31, 31, 31, 0.3) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

a.elementor-button.btn-nav,
a.elementor-button-link.btn-nav {
    background-color: transparent !important;
    color: rgba(31, 31, 31, 0.8) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

a.elementor-button.btn-nav:hover,
a.elementor-button-link.btn-nav:hover {
    color: var(--primary) !important;
    background-color: transparent !important;
}

/* Elementor Button Sizes - Override Elementor's default sizes */
a.elementor-button.btn-sm,
a.elementor-button-link.btn-sm {
    min-height: 36px !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border-radius: 12px !important;
}

a.elementor-button.btn-lg,
a.elementor-button-link.btn-lg {
    min-height: 48px !important;
    height: auto !important;
    padding: 0.75rem 2rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border-radius: 12px !important;
}

a.elementor-button.btn-xl,
a.elementor-button-link.btn-xl {
    min-height: 56px !important;
    height: auto !important;
    padding: 1rem 2.5rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border-radius: 12px !important;
}

a.elementor-button.btn-icon,
a.elementor-button-link.btn-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

a.elementor-button.btn-icon .elementor-button-icon,
a.elementor-button-link.btn-icon .elementor-button-icon {
    width: 20px !important;
    height: 20px !important;
}

a.elementor-button.btn-icon svg,
a.elementor-button-link.btn-icon svg,
a.elementor-button.btn-icon i,
a.elementor-button-link.btn-icon i {
    width: 20px !important;
    height: 20px !important;
}