/**
 * Custom CSS for SP Page Builder - Artolio Template
 * Auto-generated from vanse-page-config.json
 * 
 * To regenerate this CSS, run: php working-generator.php
 */

/* ===================================
   THEME VARIABLES
   =================================== */

:root {
    --primary-color: #FF3600;
    --secondary-color: #CC2B00;
    --background-color: #FFFFFF;
    --text-color: #333333;
    --light-grey: #F1F1F1;
}

.body {
    background-color: var(--light-grey);
}

/* ===================================
   FORM RESET - OVERRIDE TEMPLATE.CSS
   =================================== */

/* Reset all form inputs to ensure custom styles work */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select,
.form-control,
.sppb-form-control,
.sppb-form-group input:not([type="checkbox"]):not([type="radio"]),
.sppb-form-group textarea,
.sppb-form-group select {
    /* Override template.css with higher specificity */
    padding: 14px 16px !important;
    background-color: #f8f9fa !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--text-color) !important;
    width: 100% !important;
    display: block !important;
    background-image: none !important;
    transition: all 0.3s ease !important;
}

/* Hover states with !important to override template.css */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover,
.form-control:hover,
.sppb-form-control:hover {
    background-color: #ffffff !important;
    border-color: #e1e5e9 !important;
}

/* Focus states with !important to override template.css */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.sppb-form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: none !important;
    border: 2px solid var(--primary-color) !important;
}

/* ===================================
   SELECT FIELD SPECIFIC STYLING
   =================================== */

/* Fix select field appearance to match other inputs */
select,
.sppb-form-group select,
.form-control select,
.sppb-form-control select,
select.form-control,
select.sppb-form-control,
select.sppb-form-control:not([size]):not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 45px !important;
    /* Override template.css height calc(2.25rem + 2px) */
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
    /* Fix text being cut off */
    overflow: visible !important;
}

/* Select field hover state */
select:hover,
.sppb-form-group select:hover,
select.form-control:hover,
select.sppb-form-control:hover {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* Select field focus state */
select:focus,
.sppb-form-group select:focus,
select.form-control:focus,
select.sppb-form-control:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* Fix for select options dropdown being cut off */
select option {
    padding: 8px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 16px !important;
}

/* Ensure select container doesn't clip dropdown */
.sppb-form-group:has(select),
.form-group:has(select) {
    overflow: visible !important;
    position: relative !important;
    z-index: 1;
}

/* Additional fix for SP Page Builder form containers */
.sppb-addon-form-builder,
.sppb-addon-form-builder-form,
.sppb-form-builder {
    overflow: visible !important;
}

/* Ensure parent containers don't clip */
.sppb-addon-content:has(select),
.sppb-column:has(select) {
    overflow: visible !important;
}

/* ===================================
   EXPLORE VANSE PRODUCTS SECTION
   =================================== */

/* Main feature cards styling */
.explore-vanse-products .sppb-addon.sppb-addon-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    border-radius: 0px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.explore-vanse-products .sppb-addon.sppb-addon-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Product card images - full width spanning */
.explore-vanse-products .sppb-addon-feature .sppb-img-container,
.explore-vanse-products .sppb-addon-feature .sppb-icon-container {
    height: 120px;
    width: 205px;
    /* margin: -1rem -1rem 1rem -1rem; */
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #E7E7E7 0%, #FFF 100%);
}
#sppb-dynamic-content-a856ffa0-d124-4fbd-9546-c4c393c83841 > .sppb-dynamic-content-collection__item {
    border-radius: 0px !important;
    padding: 20px;
}

#sppb-dynamic-content-a856ffa0-d124-4fbd-9546-c4c393c83841 > .sppb-dynamic-content-collection__item {
    text-align: center;
}

.our-advantages .sppb-addon-feature {
    border-radius: 12px 12px 2px 2px;
    background: #FFF;
    box-shadow: 0 2px 4px 0 rgba(12, 24, 30, 0.20);
    overflow: hidden;
}
.our-advantages .sppb-addon-feature .sppb-img-container {
    height: 233px;
    align-self: stretch;
    border-bottom: 6px solid #FF3600;
}

.our-advantages .sppb-addon-feature img.sppb-img-responsive {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.our-advantages .sppb-addon-feature a {
    color: rgba(0, 0, 0, 0.50);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.our-advantages .sppb-addon-feature .sppb-btn-link {
   padding: 8px 0px 10px 0px;
   border: none;
}


.our-advantages .sppb-addon-feature .sppb-addon-title {
    color: #CC2B00;
    font-size: 29.531px;
    font-weight: 700;
    line-height: 120%;
}

.our-advantages .sppb-addon-text {
    min-height: 12em;
}

.exclusive-offer .sppb-addon-feature {
    border-radius: 12px 12px 2px 2px;
    background: #FFF;
    box-shadow: 0 2px 4px 0 rgba(12, 24, 30, 0.20);
    overflow: hidden;
}
.exclusive-offer .sppb-addon-feature .sppb-img-container {
    height: 233px;
    align-self: stretch;
    border-bottom: 6px solid #FF3600;
}

.exclusive-offer .sppb-addon-feature img.sppb-img-responsive {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.exclusive-offer .sppb-addon-feature a {
    color: #FF3600;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.exclusive-offer .sppb-addon-feature .sppb-btn-link {
   padding: 8px 0px 10px 0px;
   border: none;
}


.exclusive-offer .sppb-addon-feature .sppb-addon-title {
    color: #212529;
    font-size: 29.531px;
    font-weight: 700;
    line-height: 120%;
}

.exclusive-offer .sppb-addon-text {
    min-height: 5em;
}

.explore-vanse-products .sppb-addon-feature .sppb-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Text styling */
.explore-vanse-products .sppb-addon-feature .sppb-addon-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding: 0;
    text-align: center;
    color: #333;
    line-height: 1.3;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* min-height: 2.6rem; Ensures consistent height for 2 lines at 1.3 line-height */
}

/* .explore-vanse-products .sppb-addon-feature .sppb-addon-text {
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: center;
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    min-height: 4.2rem; /* Ensures consistent height for ~3 lines */


/* Remove default margins from paragraphs */
.explore-vanse-products .sppb-addon-feature .sppb-addon-text p {
    margin: 0;
    padding: 0;
}

/* Button positioning */
.explore-vanse-products .sppb-addon-feature .sppb-btn {
    margin-top: auto;
    margin-bottom: 0;
    align-self: center;
    flex-shrink: 0;
}

/* Responsive grid for equal heights */
.explore-vanse-products .sppb-row-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}

.explore-vanse-products .sppb-column {
    display: flex;
    flex-direction: column;
}

.explore-vanse-products .sppb-column-addons {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Addon content wrapper */
.explore-vanse-products .sppb-addon-feature .sppb-addon-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow: 1;
    padding: 0;
}

/* Media content wrapper */
.explore-vanse-products .sppb-addon-feature .sppb-media-content {
    min-height: 61px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    justify-content: center;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 992px) {
    .explore-vanse-products .sppb-row-container {
        gap: 20px;
    }
    
    .explore-vanse-products .sppb-addon-feature {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .explore-vanse-products .sppb-row-container {
        gap: 15px;
    }
    
    .explore-vanse-products .sppb-addon-feature .sppb-img-container {
        height: 100px;
    }
    
    .explore-vanse-products .sppb-addon-feature .sppb-addon-title {
        font-size: 13px;
    }
    
    .explore-vanse-products .sppb-addon-feature .sppb-addon-text {
        font-size: 13px;
    }
    .explore-vanse-products .sppb-addon-feature {
        margin-bottom: 8px;
    }
}


@media (max-width: 578px) {
    .explore-vanse-products .sppb-addon-feature .sppb-img-container {
         width: 100% !important;
    }

    .explore-vanse-products .sppb-addon-feature .sppb-addon-content {
        width: 128px !important;
    }
    .explore-vanse-products .sppb-addon-feature {
        margin-bottom: 0px;
    }
}
/* ===================================
   UTILITIES
   =================================== */

/* Section spacing */
.section-spacing {
    padding: 60px 0;
}

@media (max-width: 768px) {
    .section-spacing {
        padding: 40px 0;
    }
}

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ===================================
   ENHANCED BUTTON STYLING
   =================================== */

/* Override all sppb-btn-link padding */
.sppb-btn-link {
    padding: 0 !important;
}

/* Primary buttons with brand colors */
.explore-vanse-products .sppb-btn-primary,
.explore-vanse-products .sppb-btn.sppb-btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 0;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.explore-vanse-products .sppb-btn-primary:hover,
.explore-vanse-products .sppb-btn.sppb-btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
    transform: translateY(-1px);
    text-decoration: none;
}

/* ===================================
   ADDITIONAL SECTIONS STYLING
   =================================== */

/* Hero Section Enhancements */
.hero-section {
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(35, 35, 35, 0.65) 5%, rgba(255, 255, 255, 0.20) 23.08%, rgba(0, 0, 0, 0.00) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-section > * {
    position: relative;
    z-index: 2;
}

/* Hide sppb-positioned-addon in product-category when p is empty */
.product-category .sppb-positioned-addon {
    display: none !important;
}

/* Show when paragraph has content - multiple approaches for better compatibility */
.product-category .sppb-positioned-addon:has(p:not(:empty)) {
    display: block !important;
}

/* Alternative approach using child combinator if p is direct child */
.product-category .sppb-positioned-addon:has(> p:not(:empty)) {
    display: block !important;
}

/* Another alternative for deeper nesting */
.product-category .sppb-positioned-addon:has(.addon-root-dynamic-content-text p:not(:empty)) {
    display: block !important;
}

.hero-section .sppb-btn-primary,
.sppb-section.hero-section .sppb-btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 0;
    transition: all 0.3s ease;
}

.hero-section .sppb-btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 54, 0, 0.3);
}

/* ===================================
   FORM STYLING ENHANCEMENTS
   =================================== */

/* Form container styling */
.sppb-form-builder,
.sppb-addon-form-builder,
.contact-form {
    /* background: #ffffff; */
    padding: 1rem;
    border-radius: 8px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); */
}

/* Form group spacing */
.sppb-form-group,
.form-group {
    margin-bottom: 24px;
    position: relative;
}


/* Label styling */
.sppb-form-group label,
.form-group label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Required field indicator */
.sppb-form-group label .required,
.form-group label .required {
    color: var(--primary-color);
    margin-left: 4px;
}

/* Input field styling */
.sppb-form-group input:not([type="checkbox"]):not([type="radio"]),
.sppb-form-group textarea,
.sppb-form-group select,
.form-control,
.sppb-form-control {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    background-color: #f8f9fa;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Input hover state */
/* .sppb-form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.sppb-form-group textarea:hover,
.sppb-form-group select:hover,
.form-control:hover,
.sppb-form-control:hover {
    background-color: #ffffff;
    border-color: #e1e5e9;
} */

/* Input focus state */
.sppb-form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.sppb-form-group textarea:focus,
.sppb-form-group select:focus,
.form-control:focus,
.sppb-form-control:focus {
    background-color: #ffffff;
    border-color: var(--primary-color);
    outline: none;
    box-shadow: none;
    border: 2px solid var(--primary-color);
}

/* Textarea specific styling */
.sppb-form-group textarea,
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}



/* Placeholder styling */
.sppb-form-group input::placeholder,
.sppb-form-group textarea::placeholder,
.form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Form validation states */
.sppb-form-group.has-error input,
.sppb-form-group.has-error textarea,
.sppb-form-group.has-error select {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.sppb-form-group.has-error input:focus,
.sppb-form-group.has-error textarea:focus,
.sppb-form-group.has-error select:focus {
    box-shadow: none;
    border: 2px solid #ef4444;
}

.sppb-form-group.has-success input,
.sppb-form-group.has-success textarea,
.sppb-form-group.has-success select {
    border-color: #10b981;
    background-color: #f0fdf4;
}

/* Error message styling */
.sppb-form-group .error-message,
.form-control-feedback {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

/* Success message styling */
.sppb-form-group .success-message {
    color: #10b981;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

/* Checkbox and radio container fix */

/* Fallback for browsers without :has() support */
/* .sppb-form-group.checkbox-group,
.sppb-form-group.radio-group,
.sppb-form-builder-checkbox,
.sppb-form-builder-radio {
    display: inline-block !important;
    width: auto !important;
    margin-right: 20px !important;
    margin-bottom: 10px !important;
} */

/* Checkbox and radio wrapper for inline display */
/* .sppb-form-check,
.form-check,
.checkbox-inline,
.radio-inline {
    display: inline-block !important;
    margin-right: 20px !important;
    width: auto !important;
} */

/* Fix checkbox/radio groups to display inline */
/* .sppb-addon-form-builder-form .sppb-form-group:has(input[type="checkbox"]),
.sppb-addon-form-builder-form .sppb-form-group:has(input[type="radio"]),
.sppb-ajaxt-contact-form .sppb-form-group:has(input[type="checkbox"]),
.sppb-ajaxt-contact-form .sppb-form-group:has(input[type="radio"]) {
    display: inline-block !important;
    width: auto !important;
    vertical-align: top !important;
} */

/* Checkbox and radio styling - Remove blue color completely */
/* .sppb-form-group input[type="checkbox"],
.sppb-form-group input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    /* Remove accent-color as it may cause blue color in some browsers */
    /* accent-color: unset !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    position: relative !important;
    transition: all 0.2s ease !important;
} */ 

/* Custom checkbox appearance */
/* .sppb-form-group input[type="checkbox"],
input[type="checkbox"] {
    border-radius: 4px !important;
}

.sppb-form-group input[type="checkbox"]:hover,
input[type="checkbox"]:hover {
    border-color: var(--primary-color) !important;
}

.sppb-form-group input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.sppb-form-group input[type="checkbox"]:checked::after,
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
} */

/* .sppb-form-group input[type="checkbox"]:focus,
input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 54, 0, 0.1) !important;
}

/* Custom radio button appearance */
/* .sppb-form-group input[type="radio"],
input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    border-radius: 50% !important;
    position: relative;
    transition: all 0.2s ease;
} */ */
/* 
.sppb-form-group input[type="radio"]:hover,
input[type="radio"]:hover {
    border-color: var(--primary-color) !important;
}

.sppb-form-group input[type="radio"]:checked,
input[type="radio"]:checked {
    border-color: var(--primary-color) !important;
}

.sppb-form-group input[type="radio"]:checked::after,
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color) !important;
} */

/* .sppb-form-group input[type="radio"]:focus,
input[type="radio"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 54, 0, 0.1) !important;
}

.sppb-form-group input[type="checkbox"] + label,
.sppb-form-group input[type="radio"] + label {
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
} */

/* Form submit buttons */
.sppb-form .sppb-btn[type="submit"],
.sppb-form button[type="submit"],
.sppb-form-builder-btn .sppb-btn {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 32px;
    width: 100%;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 1px;
}

.sppb-form .sppb-btn[type="submit"]:hover,
.sppb-form button[type="submit"]:hover,
.sppb-form-builder-btn .sppb-btn:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 54, 0, 0.3);
}

/* Secondary button styling */
.sppb-form .sppb-btn-secondary {
    background-color: transparent;
    border: 2px solid #e1e5e9;
    color: var(--text-color);
    padding: 14px 32px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.sppb-form .sppb-btn-secondary:hover {
    background-color: #f8f9fa;
    border-color: var(--text-color);
}

/* Form row for inline fields */
.sppb-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.sppb-form-row .sppb-form-group {
    flex: 1;
    margin-bottom: 0;
}

/* Responsive form adjustments */
@media (max-width: 768px) {
    .sppb-form-builder,
    .sppb-addon-form-builder {
        padding: 20px;
    }
    
    .sppb-form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .sppb-form-row .sppb-form-group {
        margin-bottom: 24px;
    }
    
    .sppb-form-group input,
    .sppb-form-group textarea,
    .sppb-form-group select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ===================================
   SECTION IMPROVEMENTS
   =================================== */
@media (max-width: 992px) {
    .logo-image {
        width: 128px;
        height: auto;
    }
}

@media (max-width: 576px) {
    .logo-image {
        width: 128px;
        height: auto !important;
    }
}

.burger-icon > span {
    background-color: #ffffff !important;
}

@media (max-width: 991px) {
    #sp-header {
        height: fit-content !important;
    }
    
    /* Prevent header from wrapping into 2 rows */
    #sp-header .align-items-center {
        flex-wrap: nowrap !important;
    }
    
    #sp-header .row {
        flex-wrap: nowrap !important;
    }
    
    /* Ensure logo and menu stay on same line */
    #sp-header .sp-column {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* Adjust logo container */
    #sp-logo {
        flex: 1 1 auto !important;
    }
    
    /* Adjust menu container */
    #sp-menu {
        flex: 0 0 auto !important;
    }
}
/* Section headers styling */
.sppb-section-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 1rem;
}

.sppb-section-subtitle {
    font-size: 18px;
    color: #666;
    text-align: center;
    margin-bottom: 3rem;
}

/* Dark sections styling */
.sppb-section.dark-section,
.exclusive-offers-section {
    background-color: #1a1a1a !important;
    color: white;
}

.dark-section .sppb-section-title,
.exclusive-offers-section .sppb-section-title {
    color: white;
}

.dark-section .sppb-section-subtitle,
.exclusive-offers-section .sppb-section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* ===================================
   ANIMATION ENHANCEMENTS
   =================================== */

/* Scroll-triggered animations - DISABLED */
/* @keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    animation: fadeInUp 0.6s ease forwards;
} */

/* Stagger animation for cards */
.explore-vanse-products .sppb-column:nth-child(1) .sppb-addon-feature {
    animation-delay: 0.1s;
}

.explore-vanse-products .sppb-column:nth-child(2) .sppb-addon-feature {
    animation-delay: 0.2s;
}

.explore-vanse-products .sppb-column:nth-child(3) .sppb-addon-feature {
    animation-delay: 0.3s;
}

.explore-vanse-products .sppb-column:nth-child(4) .sppb-addon-feature {
    animation-delay: 0.4s;
}

/* ===================================
   PRODUCT CARD STYLING
   =================================== */

/* Product card container */
.sppb-dynamic-content-collection__item {
    /* background-color: #FFFFFF;
    border-radius: 8px; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 300ms ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* border: 1px solid #e5e7eb; */
    position: relative;
    /* height: 200px; */
}

.sppb-dynamic-content-collection__item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Product image container */
.sppb-dynamic-content-collection__item .sppb-dynamic-content-image-wrapper {
    position: relative;
    overflow: hidden;
    background: white;
    padding: 20px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sppb-dynamic-content-collection__item .sppb-dynamic-content-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 300ms ease;
}

.sppb-dynamic-content-collection__item:hover .sppb-dynamic-content-image-wrapper img {
    transform: scale(1.02);
}

/* Best Seller Badge */
.sppb-dynamic-content-collection__item .best-seller-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #333333;
    color: white;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Product content area */
.sppb-dynamic-content-collection__item .sppb-addon-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #ffffff;
    justify-content: space-between;
}

/* Content order and spacing */
.sppb-dynamic-content-collection__item .sppb-addon-content > * {
    margin-bottom: 0;
}

.sppb-dynamic-content-collection__item .product-name + .product-subtitle {
    margin-top: 6px;
}

.sppb-dynamic-content-collection__item .product-price {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 16px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    background: rgba(255, 54, 0, 0.02);
}

.sppb-dynamic-content-collection__item .operating-weight,
.sppb-dynamic-content-collection__item .dimension,
.sppb-dynamic-content-collection__item .horsepower {
    margin-bottom: 0;
}

/* Product header section */
.sppb-dynamic-content-collection__item .product-header {
    margin-bottom: 16px;
}

/* Product title/name */


/* Sale option badge */


/* Price styling with "Starting at" label */




/* Operating Weight styling */





/* Action buttons container */
.sppb-dynamic-content-collection__item .product-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

/* Primary button (BUILD & QUOTE) */
.sppb-dynamic-content-collection__item .btn-primary,
.sppb-dynamic-content-collection__item .sppb-btn-primary {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: all 200ms ease;
    letter-spacing: 0.5px;
}

.sppb-dynamic-content-collection__item .btn-primary:hover,
.sppb-dynamic-content-collection__item .sppb-btn-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Secondary button (DETAILS) */
.sppb-dynamic-content-collection__item .btn-secondary,
.sppb-dynamic-content-collection__item .sppb-btn-secondary,
.sppb-dynamic-content-collection__item .view-detail-btn {
    background-color: var(--primary-color);
    border: none;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: all 200ms ease;
    letter-spacing: 0.5px;
}

.sppb-dynamic-content-collection__item .btn-secondary:hover,
.sppb-dynamic-content-collection__item .sppb-btn-secondary:hover,
.sppb-dynamic-content-collection__item .view-detail-btn:hover {
    background-color: var(--secondary-color);
}

/* Compare checkbox */
/* .sppb-dynamic-content-collection__item .compare-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
    font-size: 14px;
    color: #333;
} */

/* .sppb-dynamic-content-collection__item .compare-checkbox input[type="checkbox"] {
    margin-left: 8px;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
} */

/* Grid layout for product cards */
.sppb-dynamic-content-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sppb-dynamic-content-collection {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .sppb-dynamic-content-collection__item .sppb-addon-content {
        padding: 24px 20px 20px 20px;
    }
    
    /* .sppb-dynamic-content-collection__item .sppb-dynamic-content-image-wrapper {
        margin: 16px;
    }
     */
     #sppb-dynamic-content-a856ffa0-d124-4fbd-9546-c4c393c83841 > .sppb-dynamic-content-collection__item {
        padding: 12px;
    }

    .our-advantages .sppb-addon-text {
        min-height: 10em;
    }
    
    .sppb-dynamic-content-collection__item .product-name,
    .sppb-dynamic-content-collection__item [data-field="Name"] {
        font-size: 16px;
    }
    
    .sppb-dynamic-content-collection__item .product-price,
    .sppb-dynamic-content-collection__item [data-field="Price"] {
        font-size: 20px;
    }
}
@media (max-width: 576px) {
    .our-advantages .sppb-addon-text {
        min-height: 3em;
    }
}
/* ===================================
   COLOR UTILITIES
   =================================== */

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }

/* ===================================
   HERO SECTION BACKGROUND IMAGE FIX
   =================================== */

/* Fix background image display for hero section */
#section-id-1629272628186 {
    background-size: cover !important;
    background-position: 0px -200px !important;
    background-repeat: no-repeat !important;
}




@media (max-width: 1200px) {
    #section-id-1629272628186 {
        background-size: cover !important;
        background-position: 0px -160px !important;
    }
}

@media (max-width: 992px) {
    #section-id-1629272628186 {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (max-width: 768px) {
    #section-id-1629272628186 {
        background-size: cover !important;
        background-position: center center !important;
        min-height: 400px; /* Ensure minimum height on mobile */
    }
}

@media (max-width: 576px) {
    #section-id-1629272628186 {
        background-size: cover !important;
        background-position: -240px 0 !important;
        min-height: 350px; /* Adjusted height for small screens */
    }
}

/* Alternative background-size option: contain (if you want to see the full image) */
/* Uncomment the following if you prefer to see the entire image without cropping */
/*
#section-id-1629272628186 {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
*/

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* Enable GPU acceleration for transforms */
.explore-vanse-products .sppb-addon-feature,
.sppb-btn {
    will-change: transform;
    backface-visibility: hidden;
}

/* Optimize image rendering */
.explore-vanse-products .sppb-img-container img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

div#column-id-75ca28f1-9011-4a2e-a5e6-1233ed250b87 {
    background: linear-gradient(90deg, rgba(132, 132, 132, 0.00) 37.98%, rgba(68, 68, 68, 0.48) 55.29%, rgba(30, 30, 30, 0.60) 100%);
    backdrop-filter: blur(2.5px);
}

.rent-equipment .sppb-column-addons {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


/* Distributon Section */

.distributor-section .location-chip .sppb-addon-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.distributor-section .location-chip .sppb-addon-content h3 {
    margin-bottom: 4px !important;
}

.distributor-section .location-chip .sppb-addon-content p {
    margin-bottom: 0 !important;
}

div#column-id-339cd657-c377-4d7a-9967-fa505c92c804 .sppb-column-addons {
    display: flex;
    flex-direction: column;
    height: 100%;
}

div#column-id-339cd657-c377-4d7a-9967-fa505c92c804 .sppb-column-addons > :last-child {
    margin-top: auto;
}

#sppb-addon-b8165912-9ab7-496a-99e1-39941be4f113 #btn-b8165912-9ab7-496a-99e1-39941be4f113.sppb-btn-custom {
    width: 100%;
}

/* Inquiry Section */

.inquiry-section div#sppb-addon-711a2c3b-ae88-43d0-b5aa-544784ad114c {
    min-height: 600px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

.inquiry-section div#sppb-addon-711a2c3b-ae88-43d0-b5aa-544784ad114c:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
}

body.gmem4bt.b1g49gfi.tax84oi.c1v45mk4 {
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* Newsletter Section */
.newsletter-section .sppb-column-addons {
    margin-top: auto;
    margin-bottom: auto;
}

.newsletter-section .sppb-row-container {
    max-width: unset;
    padding: 0;
}

.newsletter-section div#column-wrap-id-e0486efe-2037-4a8f-8fd0-41d67a1bec6b {
    padding: 0;
}

.newsletter-section .sppb-addon-content {
    height: 100%;
}

div#sppb-addon-wrapper-8fe39260-2ada-49ea-93d9-d2de2dbd81a1 {
    height: 100%;
}

div#sppb-addon-8fe39260-2ada-49ea-93d9-d2de2dbd81a1 {
    height: 100%;
}

.sppb-addon.sppb-addon-single-image.sppb-addon-image-shape {
    height: 100%;
}

/* ===================================
   HEADER & NAVIGATION CUSTOMIZATIONS
   =================================== */

/* Language Switcher Styling - COMMENTED OUT DUE TO CONFLICTS
#sp-top1 .mod-languages,
#sp-top1 .mod-languages__list {
    display: inline-flex !important;
    align-items: center;
    margin: 0;
    padding: 0;
} */

#sp-top1 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#sp-top1 .sp-column {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Language list styling - COMMENTED OUT DUE TO CONFLICTS
.mod-languages__list {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
} */

/* COMMENTED OUT DUE TO CONFLICTS
.mod-languages__list li {
    display: inline-block;
    margin: 0;
} */

/* Language link styling - COMMENTED OUT DUE TO CONFLICTS
.mod-languages__list a {
    color: #ffffff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
} */

/* COMMENTED OUT DUE TO CONFLICTS
.mod-languages__list a:hover {
    background-color: rgba(255, 255, 255, 0.1);
} */

/* Active language - COMMENTED OUT DUE TO CONFLICTS
.mod-languages__list .lang-active a {
    background-color: var(--primary-color);
    color: white;
} */

/* Ensure language switcher shows properly beside menu */
#sp-header .header-modules {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Add language switcher to header beside menu */
#sp-menu .sp-column {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Hide social wrap in menu to save space */
#sp-menu .social-wrap {
    display: none !important;
}

/* Language switcher - Simple dropdown style */
.language-switcher-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

div.mod-languages ul li.lang-active {
    background-color: transparent !important;
}

.language-switcher-wrapper .mod-languages {
    display: inline-block !important;
    position: relative;
}

/* Create dropdown container */
.language-switcher-wrapper .mod-languages {
    position: relative;
}

.language-switcher-wrapper .mod-languages__list {
    position: relative;
}

/* Position dropdown menu absolutely on hover - COMMENTED OUT DUE TO CONFLICTS
.language-switcher-wrapper .mod-languages:hover .mod-languages__list,
#sp-menu .mod-languages:hover .mod-languages__list {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
} */

/* Special styling for FullwidthCenter header */
.full-header-center .language-switcher-wrapper {
    margin: 0 15px;
}

.full-header-center #sp-menu .sp-column {
    justify-content: center;
}

.full-header-center .menu-with-offcanvas {
    justify-content: center !important;
}

/* Simple dropdown styling - COMMENTED OUT DUE TO CONFLICTS
.language-switcher-wrapper .mod-languages__list,
#sp-menu .mod-languages__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
} */

/* Initially hide all items except active - COMMENTED OUT DUE TO CONFLICTS
.language-switcher-wrapper .mod-languages__list li,
#sp-menu .mod-languages__list li {
    margin: 0;
    display: none;
    list-style: none;
} */

/* Show only the active language by default - COMMENTED OUT DUE TO CONFLICTS
.language-switcher-wrapper .mod-languages__list li.lang-active,
#sp-menu .mod-languages__list li.lang-active {
    display: block !important;
} */

/* Style the language links - ensure white text */
.language-switcher-wrapper .mod-languages__list a,
#sp-menu .mod-languages__list a,
.mod-languages ul.lang-block a,
div.mod-languages a {
    color: #FFFFFF !important;
    padding: 8px 25px 8px 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    border: none;
    transition: all 0.3s ease;
    display: block;
    position: relative;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

/* Add dropdown arrow only to active language - white arrow */
.language-switcher-wrapper .mod-languages__list li.lang-active a::after,
#sp-menu .mod-languages__list li.lang-active a::after,
.mod-languages ul.lang-block li.lang-active a::after,
div.mod-languages li.lang-active a::after {
    content: "▼";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #FFFFFF !important;
}

/* Dropdown container on hover */
.language-switcher-wrapper .mod-languages__list:hover,
#sp-menu .mod-languages__list:hover,
.mod-languages ul.lang-block:hover,
div.mod-languages:hover ul {
    background-color: rgba(0, 0, 0, 0.95);
    border-radius: 4px;
    padding: 5px 0;
    min-width: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Show all languages on hover */
.language-switcher-wrapper .mod-languages__list:hover li,
#sp-menu .mod-languages__list:hover li,
.mod-languages ul.lang-block:hover li,
div.mod-languages:hover ul.lang-block li {
    display: block !important;
}

/* Hover effect on individual items */
.language-switcher-wrapper .mod-languages__list li:hover a,
#sp-menu .mod-languages__list li:hover a,
.mod-languages ul.lang-block li:hover a,
div.mod-languages li:hover a {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
}

/* Active language in dropdown */
.language-switcher-wrapper .mod-languages__list:hover li.lang-active a,
#sp-menu .mod-languages__list:hover li.lang-active a,
.mod-languages ul.lang-block:hover li.lang-active a,
div.mod-languages:hover li.lang-active a {
    background-color: rgba(255, 54, 0, 0.2);
    color: #FFFFFF !important;
}

/* Remove arrow from non-active items when dropdown is open */
.language-switcher-wrapper .mod-languages__list:hover li:not(.lang-active) a::after,
#sp-menu .mod-languages__list:hover li:not(.lang-active) a::after {
    content: "";
    display: none;
}

/* ===================================
   ENHANCED LANGUAGE SWITCHER STYLES 
   For ul.lang-block class
   =================================== */
.mod-languages {
    position: relative;
    display: inline-block;
}

.mod-languages ul.lang-block {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    transition: all 0.3s ease;
}

/* Initially hide ALL items by default */
.mod-languages ul.lang-block li {
    display: none !important;
    margin: 0;
}

/* Show ONLY the active language by default */
.mod-languages ul.lang-block li.lang-active {
    display: block !important;
}

/* Also ensure non-active items are hidden */
.mod-languages ul.lang-block li:not(.lang-active) {
    display: none !important;
}

/* On hover, transform the container into dropdown */
.mod-languages:hover ul.lang-block {
    background-color: rgba(0, 0, 0, 0.95);
    border-radius: 4px;
    padding: 5px 0;
    min-width: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 9999;
}

/* Show all items on hover */
.mod-languages:hover ul.lang-block li,
.mod-languages:hover ul.lang-block li:not(.lang-active) {
    display: block !important;
}

/* Ensure white text in all states */
.mod-languages ul.lang-block a,
.mod-languages ul.lang-block li a {
    color: #FFFFFF !important;
    display: block;
    padding: 8px 25px 8px 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    position: relative;
}

/* Add white arrow to active item */
.mod-languages ul.lang-block li.lang-active a::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #FFFFFF !important;
}

/* Hover effect on items */
.mod-languages ul.lang-block li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Highlight active item in dropdown */
.mod-languages:hover ul.lang-block li.lang-active a {
    background-color: rgba(255, 54, 0, 0.3);
}

/* Remove arrow from non-active items */
.mod-languages:hover ul.lang-block li:not(.lang-active) a::after {
    content: "";
    display: none;
}

/* ===================================
   LANGUAGE DROPDOWN - STABLE VERSION
   No position changes, pure visibility
   =================================== */

/* Main container */
div.mod-languages {
    position: relative !important;
    display: inline-block !important;
}

/* The list ALWAYS absolute to prevent layout shifts */
div.mod-languages ul.lang-block {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
    min-width: fit-content !important;
}

/* Default state - transparent bg, normal size */
div.mod-languages ul.lang-block {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hover state - add background and padding */
div.mod-languages:hover ul.lang-block {
    background: rgba(0, 0, 0, 0.95) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    padding: 4px !important;
    min-width: 120px !important;
}

/* All list items visible but transparent when inactive */
div.mod-languages ul.lang-block li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

/* Hide non-active items using height/opacity */
div.mod-languages ul.lang-block li:not(.lang-active) {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Show non-active on hover */
div.mod-languages:hover ul.lang-block li:not(.lang-active) {
    max-height: 50px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

/* Links styling */
div.mod-languages ul.lang-block a {
    display: block !important;
    padding: 8px 30px 8px 10px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    position: relative !important;
}

/* Add arrow to active language - only when dropdown is closed */
div.mod-languages ul.lang-block li.lang-active a::after {
    content: "▼" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: #FFFFFF !important;
}

/* Remove arrow from active item when dropdown is open */
div.mod-languages:hover ul.lang-block li.lang-active a::after {
    content: "" !important;
    display: none !important;
}

/* Hover effect on items */
div.mod-languages ul.lang-block li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
}

/* Active item in dropdown */
div.mod-languages:hover ul.lang-block li.lang-active a {
    background: rgba(255, 54, 0, 0.2) !important;
}

/* Reserve space for the language switcher */
div.mod-languages::before {
    content: "";
    display: inline-block;
    width: 60px;
    height: 30px;
    visibility: hidden;
}

/* ===================================
   MOBILE - LANGUAGE SWITCHER HANDLING
   Different module instances for desktop/mobile
   =================================== */

/* Style for offcanvas language switcher */
.offcanvas-menu .mod-languages,
.offcanvas-inner .mod-languages,
[name="offcanvas"] .mod-languages,
[name="offcanvas-modules"] .mod-languages {
    display: block !important;
    margin: 20px 0;
    position: relative !important;
}

/* Reset absolute positioning for offcanvas */
.offcanvas-menu .mod-languages ul.lang-block,
.offcanvas-inner .mod-languages ul.lang-block {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Show all languages as list in offcanvas */
.offcanvas-menu .mod-languages ul.lang-block li,
.offcanvas-inner .mod-languages ul.lang-block li {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 !important;
}

/* Remove dropdown arrow in offcanvas */
.offcanvas-menu .mod-languages ul.lang-block li.lang-active a::after,
.offcanvas-inner .mod-languages ul.lang-block li.lang-active a::after {
    display: none !important;
}

/* Style language links in offcanvas */
.offcanvas-menu .mod-languages ul.lang-block a,
.offcanvas-inner .mod-languages ul.lang-block a {
    padding: 15px 20px !important;
    color: #FFFFFF !important;
    display: block !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

/* Hover effect in offcanvas */
.offcanvas-menu .mod-languages ul.lang-block li a:hover,
.offcanvas-inner .mod-languages ul.lang-block li a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Active language highlight in offcanvas - removed background */
.offcanvas-menu .mod-languages ul.lang-block li.lang-active a,
.offcanvas-inner .mod-languages ul.lang-block li.lang-active a {
    background: transparent !important;
    font-weight: bold !important;
    color: white !important;
}

/* Remove the space reservation in offcanvas */
.offcanvas-menu .mod-languages::before,
.offcanvas-inner .mod-languages::before {
    display: none !important;
}

/* Ensure no hover effects in offcanvas */
.offcanvas-menu .mod-languages:hover ul.lang-block,
.offcanvas-inner .mod-languages:hover ul.lang-block {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hide header language switcher on mobile when burger menu shows */
@media (max-width: 991px) {
    /* Hide desktop language switcher on mobile */
    .language-switcher-wrapper,
    .language-switcher-wrapper .mod-languages,
    #sp-menu .mod-languages,
    #sp-top1 .mod-languages,
    .header-modules .mod-languages {
        display: none !important;
    }
}

/* ===================================
   LANGUAGE SWITCHER TEXT CUSTOMIZATION
   =================================== */

/* Removed custom text modifications - using original language text */

/* Remove background colors from language switcher */
div.mod-languages ul.lang-block li a {
    background: transparent !important;
}

/* Remove active language background */
div.mod-languages ul.lang-block li.lang-active a,
div.mod-languages:hover ul.lang-block li.lang-active a {
    background: transparent !important;
}

/* Keep hover effect subtle */
div.mod-languages ul.lang-block li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Remove background from dropdown container - keep only on hover */
div.mod-languages ul.lang-block {
    background: transparent !important;
}

/* Add background only when dropdown is shown */
div.mod-languages:hover ul.lang-block {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* Language text styling */
.language-switcher-wrapper .mod-languages__list a,
#sp-menu .mod-languages__list a {
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Override any inline styles */
.language-switcher-wrapper .mod-languages__list li[style],
#sp-menu .mod-languages__list li[style] {
    display: none !important;
}

.language-switcher-wrapper .mod-languages__list li.lang-active[style],
#sp-menu .mod-languages__list li.lang-active[style] {
    display: block !important;
}

.language-switcher-wrapper .mod-languages__list:hover li[style],
#sp-menu .mod-languages__list:hover li[style] {
    display: block !important;
}

/* Ensure visibility */
.language-switcher-wrapper .mod-languages {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Top bar styling adjustments */
#sp-top-bar {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
}

/* Mobile responsiveness for language switcher */
@media (max-width: 991px) {
    .language-switcher-wrapper {
        display: inline-block !important;
        margin: 0 10px;
    }
    
    .language-switcher-wrapper .mod-languages {
        display: inline-block !important;
    }
    
    /* Show on mobile too */
    .language-switcher-wrapper.d-none.d-lg-flex {
        display: inline-block !important;
    }
    
    /* Adjust dropdown position on mobile */
    .language-switcher-wrapper .mod-languages__list:hover,
    #sp-menu .mod-languages__list:hover {
        right: 0;
        left: auto;
    }
}

/* ===================================
   MOBILE OFFCANVAS LANGUAGE SWITCHER - EXPANDED VIEW
   =================================== */
/* Target the correct mobile language switcher structure */
.sp-module.mobile-lang .mod-languages ul.lang-block li,
.sp-module.mobile-lang .sp-module-content .mod-languages .lang-block li {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Force all language items to be visible (not just active) */
.sp-module.mobile-lang .mod-languages ul.lang-block li:not(.lang-active),
.sp-module.mobile-lang .mod-languages ul.lang-block li.ltr {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Bright white text color for all language links */
.sp-module.mobile-lang .mod-languages a,
.sp-module.mobile-lang .mod-languages ul.lang-block a,
.sp-module.mobile-lang .mod-languages ul.lang-block li a,
.sp-module.mobile-lang .mod-languages ul.lang-block li.ltr a,
.sp-module.mobile-lang .mod-languages ul.lang-block li.lang-active a {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* Override any inherited link colors */
.sp-module.mobile-lang .mod-languages a:link,
.sp-module.mobile-lang .mod-languages a:visited,
.sp-module.mobile-lang .mod-languages a:hover,
.sp-module.mobile-lang .mod-languages a:active {
    color: #FFFFFF !important;
}

/* Active language styling - bold white */
.sp-module.mobile-lang .mod-languages ul.lang-block li.lang-active a {
    color: #FFFFFF !important;
    font-weight: bold !important;
    background: transparent !important;
}

/* Remove dropdown arrows */
.sp-module.mobile-lang .mod-languages ul.lang-block li a::after,
.sp-module.mobile-lang .mod-languages ul.lang-block li.lang-active a::after {
    display: none !important;
    content: "" !important;
}

/* Proper spacing for language items */
.sp-module.mobile-lang .mod-languages ul.lang-block li {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Language link padding */
.sp-module.mobile-lang .mod-languages ul.lang-block li a {
    padding: 15px 20px !important;
    display: block !important;
}

/* Remove last border */
.sp-module.mobile-lang .mod-languages ul.lang-block li:last-child {
    border-bottom: none;
}

/* Hover effect */
.sp-module.mobile-lang .mod-languages ul.lang-block li a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
}

/* Also target offcanvas structure if present */
@media (max-width: 991px) {
    /* Additional targeting for offcanvas menu */
    .offcanvas-menu .sp-module.mobile-lang .mod-languages ul.lang-block li,
    .offcanvas-inner .sp-module.mobile-lang .mod-languages ul.lang-block li,
    .offcanvas-menu .mod-languages ul.lang-block li,
    .offcanvas-inner .mod-languages ul.lang-block li {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* Ensure non-active languages are visible */
    .offcanvas-menu .mod-languages ul.lang-block li:not(.lang-active),
    .offcanvas-inner .mod-languages ul.lang-block li:not(.lang-active) {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    /* White text for offcanvas */
    .offcanvas-menu .mod-languages a,
    .offcanvas-inner .mod-languages a {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }
}

/* Menu with offcanvas - align to end */
.menu-with-offcanvas,
.menu-with-offcanvas .sp-megamenu-wrapper,
#sp-menu.menu-with-offcanvas .sp-megamenu-wrapper {
    justify-content: end !important;
    justify-content: flex-end !important; /* Fallback for older browsers */
}

/* Default menu items styling — on pages WITHOUT the header-classic overlay
   (i.e. no hero image behind the header), header background is solid white
   (header_bg_color param), so nav text must be dark to be readable. #252525
   matches the site's own configured --sppb-menu-text-color. On header-classic
   pages (transparent header overlapping a hero), template.css's own
   body.header-classic .sp-megamenu-parent>li>a{color:#fff} rule applies instead —
   scope this override to NOT fight that. */
body:not(.header-classic) #sp-header .sp-megamenu-parent > li > a {
    color: #252525 !important;
    font-size: 18px !important;
}

/* Sticky header menu items styling */
body:not(.header-classic) #sp-header.header-sticky .sp-megamenu-parent > li > a {
    color: #252525 !important;
    font-size: 18px !important;
}

/* Remove menu numbers */
.spmenu-number {
    display: none !important;
}

/* Hide offcanvas toggler on desktop */
@media (min-width: 992px) {
    .offcanvas-toggler,
    #offcanvas-toggler,
    .offcanvas-toggler-secondary,
    .offcanvas-toggle-btn {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Ensure it shows on mobile/tablet */
@media (max-width: 991px) {
    .offcanvas-toggler,
    #offcanvas-toggler,
    .offcanvas-toggler-secondary,
    .offcanvas-toggle-btn {
        display: flex !important;
        visibility: visible !important;
        align-items: center;
    }
}

/* Hide products initially when category filter is present in URL */
body.category-filter-pending .sppb-addon-articles-wrap,
body.category-filter-pending .sppb-dynamic-content-wrap,
body.category-filter-pending .product-listing,
body.category-filter-pending [class*="product-grid"],
body.category-filter-pending [class*="collection-item"] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show products after filter is applied */
body.category-filter-applied .sppb-addon-articles-wrap,
body.category-filter-applied .sppb-dynamic-content-wrap,
body.category-filter-applied .product-listing,
body.category-filter-applied [class*="product-grid"],
body.category-filter-applied [class*="collection-item"] {
    opacity: 1;
    visibility: visible;
}

/* Optional: Add a loading indicator */
body.category-filter-pending::before {
    content: "Applying filter...";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    font-size: 16px;
    color: #333;
}

/* ===================================
   CATEGORY FILTER STYLING
   =================================== */

/* Custom checkbox/radio styling */
/* .category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    vertical-align: middle;
} */

/* Hover state */
        /* .category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input:hover {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 54, 0, 0.1);
        } */

/* Checked state */
/* .category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input.checked,
.category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input[data-checked="true"] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
} */

/* Checkmark icon for checked state */
/* .category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input.checked::after,
.category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input[data-checked="true"]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
} */

/* Radio button variant (if needed) */
/* .category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input.radio {
    border-radius: 50%;
} */

.category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input.radio.checked::after,
.category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input.radio[data-checked="true"]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
    border: none;
}

/* Focus state for accessibility */
.category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 54, 0, 0.2);
}

/* Disabled state */
.category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input:disabled,
.category-filter .sppb-addon-dynamic-content-filter-fake-checkbox-input.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

/* Label styling if needed */
.category-filter .filter-label {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.category-filter .filter-label:hover {
    color: var(--primary-color);
}

/* ===================================
   HIDDEN FORM FIELDS
   =================================== */

/* Hide the email template textarea and honeypot fields */
textarea[name="email_template"],
textarea[aria-label="Not For Read"],
textarea[aria-label*="Not for Read"],
textarea[aria-label*="not for read"],
input[aria-label*="Not for Read"],
input[aria-label*="not for read"],
[name*="sppb-hpt"],
[name*="honeypot"],
.sppb-honeypot,
.honeypot-field,
.hp-field {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


#sp-footer .container {
    max-width: 100%;
}

#sp-footer #sp-footer1 {
    padding: 0;
}

@media (max-width: 768px) {
    #sp-footer .container {
        max-width: 100% !important;
    }
}


#sp-footer .contact-info .sppb-addon-text-block p {
    margin-bottom: 0 !important;
  }


/* Dynamic zebra striping - works with filtered content */
#spec-list .spec-item.is-odd { background-color: #f7f7f7 !important; }
#spec-list .spec-item.is-even { background-color: #ffffff !important; }

.key-spec .spec-item.is-odd { background-color: #f7f7f7 !important; }
.key-spec .spec-item.is-even { background-color: #ffffff !important; }

/* Hover effect for spec items */
#spec-list .spec-item:hover,
.key-spec .spec-item:hover {
  background-color: #e8f4f8 !important;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.sp-dropdown.sp-dropdown-main.sp-menu-right {
    background-color: #fff;
    border-radius: 4px;
}

/* ===================================
   ACTIVE MENU ITEM STYLING
   =================================== */

/* Menu item base styling - moved from template.css */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  display: inline-block;
  padding: 0;
  margin: 0 16px;
  line-height: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #F1F1F1;
}

/* Override template.css - Active menu item styling. Base color (#F1F1F1)
   is for the header-classic overlay state (white text over the hero) —
   scoped overrides below switch it to dark on pages/states with a solid
   white header background, same pattern as the regular (non-active) nav
   links above. */
.sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a,
.sp-megamenu-parent > li.active.current-item > a {
    font-weight: 700 !important;
    border-bottom: 2px solid #FF3600 !important;
    color: #F1F1F1 !important;
    padding-bottom: 8px !important;
    transition: all 0.3s ease !important;
}

/* Ensure the border shows on hover too */
.sp-megamenu-parent > li.active > a:hover,
#sp-header .sp-megamenu-parent > li.active > a:hover {
    border-bottom: 2px solid #FF3600 !important;
    color: #FFFFFF !important;
}

/* For sticky header active items */
#sp-header.header-sticky .sp-megamenu-parent > li.active > a {
    font-weight: 700 !important;
    border-bottom: 3px solid #FF3600 !important;
}

/* Dark active-item text on solid-white header backgrounds: sticky/scrolled
   state (any page), and any page that never had header-classic to begin with. */
#sp-header.header-sticky .sp-megamenu-parent > li.active > a,
#sp-header.header-sticky .sp-megamenu-parent > li.current-item > a,
#sp-header.header-sticky .sp-megamenu-parent > li.active.current-item > a,
#sp-header.header-sticky .sp-megamenu-parent > li.active > a:hover,
body:not(.header-classic) .sp-megamenu-parent > li.active > a,
body:not(.header-classic) .sp-megamenu-parent > li.current-item > a,
body:not(.header-classic) .sp-megamenu-parent > li.active.current-item > a,
body:not(.header-classic) .sp-megamenu-parent > li.active > a:hover {
    color: #252525 !important;
}


#sppb-addon-eef7137c-35a9-4a30-a10d-c51277d99f96,
#sppb-addon-eef7137c-35a9-4a30-a10d-c51277d99f96 {
    max-height: 400px;
}

@media (max-width: 989px) {
    #sppb-addon-eef7137c-35a9-4a30-a10d-c51277d99f96,
    #sppb-addon-eef7137c-35a9-4a30-a10d-c51277d99f96 {
    max-height: 100%;
}
}

.calendly-badge-widget {
    left: 20px !important;
    right: unset;
}

#sp-footer .container-inner {
    border-top: none !important;
    padding: 0 !important;
}

#sp-footer ul {
    flex-direction: column !important;
    gap: 0 !important;
}

/* Sticky header background — was hardcoded dark gray as a patch for the
   undefined --sppb-bg-primary CSS variable (never defined anywhere in the
   theme's preset vars). The theme's own configured header_bg_color is
   #ffffff, and header-classic's sticky-state rules (logo filter:none,
   nav color:unset) both assume a light/white sticky background — dark gray
   made the (already dark, unfiltered) logo/text unreadable against it. */
#sp-header.header-sticky {
    background-color: #ffffff !important;
}

#sppb-addon-80d62b1a-b455-478b-818c-b1d0dcfe1321 .sppb-icons-group-list {
    flex-direction: row !important;
    gap: 24px !important;
}

/* @media (min-width: 992px) {
    body .sppb-btn, body .btn {
        padding: 13px 28px !important;
    }
}

@media (min-width: 768px) {
    body .sppb-btn, body .btn {
        padding: 12px 24px !important;
    }
}

body.sppb-btn, body.btn {
    padding: 10px 16px !important;
    border-radius: 4px !important;
} */

#offcanvas-toggler:after {
    display: none !important;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a,
.offcanvas-menu .offcanvas-inner ul.menu>li>span {
    color: white !important;
    padding: 1rem 0 !important;
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler {
    margin-left: 180px !important;
}

.offcanvas-menu .offcanvas-inner ul.menu>li.active>a {
    border-bottom: 2px solid #FF3600 !important;
}

body {
    margin-bottom: 0 !important;
}

.sp-megamenu-parent>li:last-child>a {
    padding: 0 !important;
}

/* Logo: use the real two-tone (white text + red triangle) logo asset only in
   the homepage's transparent-overlay state (header-classic, not yet
   scrolled/sticky). The base "invert" filter used elsewhere on this same
   element (brightness(0) -> invert(100%)) flattens the whole logo to solid
   white, losing the red triangle accent - fine for a monochrome effect, but
   Barry wants the red kept at the top of the homepage specifically. All
   other states (scrolled/sticky, and every other page) keep the original
   dark logo.png unfiltered, unaffected by this rule. */
body.header-classic #sp-header:not(.header-sticky) #sp-logo .logo-image {
    content: url('/images/logo-white.png');
    filter: none !important;
}