/* ========================================
   THEME 6: LIGHT ELEGANT THEME
   Light colored theme with elegant design,
   different fonts for titles and content,
   and modern content sections
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Source+Sans+Pro:wght@300;400;600;700&family=Merriweather:wght@300;400;700&display=swap');

/* ========================================
   GLOBAL RESET & BASE
   ======================================== */

html, body {
    overflow-x: hidden;
    overflow-y: auto !important; /* Ensure vertical scrolling is enabled */
    max-width: 100vw;
    scroll-behavior: smooth;
    height: auto !important; /* Don't constrain height */
    min-height: 100vh; /* Allow content to extend beyond viewport */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    touch-action: pan-y; /* Enable vertical panning on touch devices */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========================================
   THEME 6 COLOR SYSTEM - LIGHT & ELEGANT
   ======================================== */

.dark {
    /* Light Color Palette */
    --background: #f8f9fa;
    --foreground: #1a1a1a;
    --card: #ffffff;
    --card-foreground: #2d2d2d;
    --popover: #ffffff;
    --popover-foreground: #1a1a1a;
    
    /* Primary - Elegant Teal */
    --primary: #2c7873;
    --primary-dark: #1e5552;
    --primary-light: #4a9d97;
    --primary-foreground: #ffffff;
    
    /* Secondary - Warm Brown */
    --secondary: #8b6f47;
    --secondary-dark: #6b5535;
    --secondary-light: #a6895f;
    --secondary-foreground: #ffffff;
    
    /* Accent - Soft Gold */
    --accent: #d4af37;
    --accent-dark: #b8941f;
    --accent-light: #e8c85a;
    --accent-foreground: #1a1a1a;
    
    /* Muted Colors */
    --muted: #e9ecef;
    --muted-foreground: #6c757d;
    
    /* Destructive */
    --destructive: #dc3545;
    --destructive-foreground: #ffffff;
    
    /* Borders & Inputs */
    --border: #dee2e6;
    --input: #ffffff;
    --ring: #2c7873;
    
    /* Hover States */
    --primary-hover: #1e5552;
    --secondary-hover: #6b5535;
    --accent-hover: #b8941f;
    --muted-hover: #d6d9dc;
    
    /* Typography - Different fonts for titles vs content */
    --font-title: 'Playfair Display', Georgia, serif;  /* Elegant serif for titles */
    --font-content: 'Merriweather', Georgia, serif;     /* Readable serif for content */
    --font-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SF Mono", Monaco, monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Line Heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tighter: -0.02em;
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.01em;
    --letter-spacing-wider: 0.02em;
    --letter-spacing-widest: 0.05em;
    
    /* Spacing */
    --spacing-0: 0px;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
    
    /* Border Radius - Subtle rounding */
    --radius-none: 0px;
    --radius-sm: 0.25rem;
    --radius-base: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;
    
    /* Shadows - Subtle and elegant */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.18);
    
    /* Container Styles */
    --container-style: shadow;
    --container-border-radius: 0.5rem;
    --container-padding: 2rem;
    --container-margin: 0 auto 3rem auto;
    --container-border: 1px solid var(--border);
    --container-shadow: var(--shadow-md);
    --container-glow: none;
    --container-backdrop: none;
    --container-transition: all 0.3s ease;
    
    /* Button Styles */
    --button-style: solid;
    --button-border-radius: 0.375rem;
    --button-padding: 0.875rem 2rem;
    --button-font-size: 1rem;
    --button-font-weight: 600;
    --button-letter-spacing: 0.025em;
    --button-text-transform: none;
    --button-transition: all 0.3s ease;
    --button-shadow: var(--shadow-sm);
    --button-hover-shadow: var(--shadow-md);
    --button-hover-transform: translateY(-2px);
    
    /* Section Title Color */
    --section-title-color: #1a1a1a;
    
    /* Z-Index */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-auto: auto;
    
    /* Animation */
    --transition-all: all 0.3s ease;
    --transition-colors: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    --transition-opacity: opacity 0.3s ease;
    --transition-shadow: box-shadow 0.3s ease;
    --transition-transform: transform 0.3s ease;
}

/* ========================================
   BASE STYLES
   ======================================== */

body {
    font-family: var(--font-content);
    background: var(--background);
    color: var(--foreground);
    line-height: var(--line-height-normal);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: auto !important; /* Ensure body can scroll vertically */
    position: relative !important; /* Don't use fixed positioning on body */
    height: auto !important; /* Allow body to grow with content */
}

/* ========================================
   LAYOUT & CONTAINERS
   ======================================== */

.content-container {
    background: var(--card);
    border-radius: var(--container-border-radius);
    border: var(--container-border);
    box-shadow: var(--container-shadow);
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    margin: var(--container-margin);
    padding: var(--container-padding);
    transition: var(--container-transition);
    text-align: left !important; /* Force left alignment for container content */
}

.content-container:hover {
    box-shadow: var(--shadow-lg);
}

/* ========================================
   TYPOGRAPHY - Different fonts for titles vs content
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--foreground);
    margin-bottom: var(--spacing-4);
    letter-spacing: var(--letter-spacing-tight);
}

h1 {
    font-size: var(--font-size-5xl);
    color: var(--primary-dark);
    font-weight: var(--font-weight-extrabold);
}

h2 {
    font-size: var(--font-size-4xl);
    color: var(--primary-dark);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: var(--font-size-3xl);
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
}

h4 {
    font-size: var(--font-size-2xl);
    color: var(--foreground);
}

h5 {
    font-size: var(--font-size-xl);
    color: var(--foreground);
}

h6 {
    font-size: var(--font-size-lg);
    color: var(--muted-foreground);
}

p {
    font-family: var(--font-content);
    margin-bottom: var(--spacing-4);
    color: var(--card-foreground);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-base);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-colors);
    font-weight: var(--font-weight-semibold);
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

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

.btn,
button {
    display: inline-block;
    padding: var(--button-padding);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    font-family: var(--font-sans);
    letter-spacing: var(--button-letter-spacing);
    text-transform: var(--button-text-transform);
    border-radius: var(--button-border-radius);
    border: none;
    cursor: pointer;
    transition: var(--button-transition);
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--button-shadow);
}

.btn:hover,
button:hover {
    transform: var(--button-hover-transform);
    box-shadow: var(--button-hover-shadow);
    background: var(--primary-dark);
}

.btn:active,
button:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-secondary:hover {
    background: var(--secondary-dark);
}

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

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

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

.card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

/* ========================================
   SECTION TITLES
   ======================================== */

.section-title {
    font-family: var(--font-title);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--section-title-color);
    margin-bottom: var(--spacing-8);
    text-align: center;
    position: relative;
    padding-bottom: var(--spacing-6);
    letter-spacing: var(--letter-spacing-tight);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--primary);
    border-radius: var(--radius-full);
}

/* ========================================
   HEADER CONTAINER - Logo on Left, Menu on Right
   ======================================== */

.logo-container {
    background: transparent !important;
    border-bottom: none !important;
    padding: var(--spacing-3) 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-50);
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.logo-container .logo {
    text-align: left;
    padding: 0;
    margin: 0;
    padding-left: var(--spacing-6);
    flex-shrink: 0;
}

.logo-container .logo-link {
    text-decoration: none;
    display: inline-block;
    transition: var(--transition-transform);
}

.logo-container .logo-link-image {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.logo-container .logo-link-text {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
}

.logo-container .logo-title {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 0, 0, 0.3);
    display: block;
    position: relative;
    white-space: nowrap;
}

.logo-container .logo-tagline {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: #ffffff;
    margin: 6px 0 0 0;
    padding: 0;
    line-height: 1.4;
    text-transform: uppercase;
    text-shadow: 
        1px 1px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.5);
    opacity: 0.95;
    display: block;
    text-align: left;
    letter-spacing: 0.1em;
    word-spacing: 0.15em;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

.logo-container .logo-link-text:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
}

.logo-container .logo-link:hover .logo-tagline {
    opacity: 1;
}

/* Logo Image Styles */
.logo-container .logo-image {
    max-height: 60px;
    width: auto;
    transition: var(--transition-transform);
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.logo-container .logo-link:hover .logo-image {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Mobile: Center logo */
@media (max-width: 768px) {
    .logo-container {
        justify-content: center;
    }
    
    .logo-container .logo {
        text-align: center;
        padding-left: 0;
    }
    
    .logo-container .logo-title {
        font-size: 1.5rem;
    }
    
    .logo-container .logo-tagline {
        font-size: 0.65rem;
    }
}

/* ========================================
   MENU CONTAINER - Top Right of Header
   ======================================== */

.menu-container {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: var(--z-50);
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    pointer-events: none;
}

.menu-container > * {
    pointer-events: all;
}

/* Menu container is now inside logo-container, so no gap needed */

/* Fix hamburger menu button positioning */
.menu-container .jl-hamburger-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0;
    cursor: pointer !important;
    z-index: var(--z-50) !important;
}

.menu-container .jl-hamburger-btn i {
    font-size: 20px !important;
    line-height: 1 !important;
    display: block !important;
    pointer-events: none;
}

/* Fix sidebar menu positioning - keep it fixed for overlay */
.jl-sidebar-menu {
    position: fixed !important;
    top: 0 !important;
    right: -300px !important;
    z-index: 10000 !important;
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

/* Mobile scroll fix - ensure main element doesn't prevent scrolling */
main {
    overflow-y: visible !important;
    height: auto !important;
    position: relative !important;
}

main {
    padding: 0;
    min-height: calc(100vh - 200px);
    background: var(--background);
}

/* ========================================
   SLIDER TEXT COLORS - Match light theme
   ======================================== */

/* Default Slider Text Colors */
.default-slider-8473 .hero-content {
    color: #1a1a1a !important;
}

.default-slider-8473 .hero-content .title {
    color: #2c7873 !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}

.default-slider-8473 .hero-content .name {
    color: #1a1a1a !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}

.default-slider-8473 .hero-content .description {
    color: #4a4a4a !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

.default-slider-8473 .hero-content-bg {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(44, 120, 115, 0.2);
}

/* Modern Card Slider Text Colors */
.modern-card-content-9284 {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(44, 120, 115, 0.3) !important;
    color: #1a1a1a !important;
}

.modern-card-title-9284 {
    color: #2c7873 !important;
    background: none !important;
    -webkit-text-fill-color: #2c7873 !important;
}

.modern-card-subtitle-9284 {
    color: #8b6f47 !important;
}

.modern-card-description-9284 {
    color: #4a4a4a !important;
}

.modern-card-btn-9284 {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.modern-card-btn-9284:hover {
    background: var(--primary-dark) !important;
}

/* ========================================
   CONTENT SECTIONS - Different Design
   ======================================== */

.fresh-content-section {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-md);
    transition: var(--transition-all);
    text-align: left !important; /* Force left alignment for entire section */
}

.fresh-content-section:hover {
    box-shadow: var(--shadow-lg);
    transform: translateX(4px);
}

.fresh-content-title {
    font-family: var(--font-title) !important;
    font-size: var(--font-size-3xl) !important;
    color: var(--primary-dark) !important;
    font-weight: var(--font-weight-bold) !important;
    text-transform: none !important;
    letter-spacing: var(--letter-spacing-tight) !important;
    margin-bottom: var(--spacing-6) !important;
    text-align: left !important;
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: var(--spacing-3);
}

.fresh-content-title::after {
    display: none !important;
}

.fresh-text {
    font-family: var(--font-content);
    color: var(--card-foreground);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-lg);
    text-align: left !important; /* Force left alignment */
}

.fresh-text p {
    margin-bottom: var(--spacing-4);
    color: var(--card-foreground);
    text-align: left !important; /* Force left alignment for paragraphs */
}

/* ========================================
   LIST STYLES - Theme 6 Elegant Design
   ======================================== */
.fresh-text ul,
.fresh-text ol {
    margin: 1.5rem 0;
    padding-left: 0;
    list-style: none;
    text-align: left !important;
}

.fresh-text ul li,
.fresh-text ol li {
    margin-bottom: 0.75rem;
    color: var(--foreground);
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2rem;
    background: rgba(44, 120, 115, 0.05) !important; /* Light teal background matching theme */
    border-left: 3px solid var(--primary) !important; /* Teal border matching primary color */
    font-weight: 400;
    transition: all 0.3s ease;
    text-align: left !important;
    border-radius: 4px;
    line-height: var(--line-height-normal);
    font-family: var(--font-content);
}

.fresh-text ul li:hover,
.fresh-text ol li:hover {
    background: rgba(44, 120, 115, 0.1) !important; /* Slightly darker teal on hover */
    transform: translateX(3px);
    border-left-color: var(--primary-dark) !important;
}

/* Bullet points for unordered lists */
.fresh-text ul li::before {
    content: '▪';
    color: var(--primary) !important;
    font-weight: 600;
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    font-size: 1.2em;
    line-height: 1;
}

/* Numbering for ordered lists */
.fresh-text ol {
    counter-reset: theme6-list-counter;
}

.fresh-text ol li {
    counter-increment: theme6-list-counter;
    padding-left: 2.5rem;
}

.fresh-text ol li::before {
    content: counter(theme6-list-counter) '.';
    color: var(--primary) !important;
    font-weight: 600;
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    font-size: 1em;
    line-height: 1;
}

.fresh-text h1,
.fresh-text h2,
.fresh-text h3,
.fresh-text h4,
.fresh-text h5,
.fresh-text h6 {
    text-align: left !important; /* Force left alignment for headings */
}

.fresh-text blockquote,
.fresh-text strong,
.fresh-text em {
    text-align: left !important; /* Force left alignment for other elements */
}

.fresh-btn {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-base);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: normal;
    margin-top: var(--spacing-4);
    margin-left: auto !important; /* Center the button */
    margin-right: auto !important; /* Center the button */
    display: block; /* Change to block so margin auto works */
    transition: var(--transition-all);
    text-align: center !important; /* Center button text */
}

.fresh-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

@media (max-width: 768px) {
    .dark {
        --container-padding: 1.5rem;
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
        --button-padding: 0.875rem 1.5rem;
    }
    
    .content-container {
        border-radius: var(--radius-md);
        margin: 0 1rem 2rem 1rem;
    }
    
    .section-title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-6);
    }
    
    .logo-container .logo img {
        max-height: 60px;
    }
    
    .fresh-content-section {
        padding: var(--spacing-6);
        text-align: left !important; /* Force left alignment on mobile */
    }
    
    .fresh-text {
        text-align: left !important; /* Force left alignment on mobile */
    }
    
    .fresh-text p,
    .fresh-text ul,
    .fresh-text ol,
    .fresh-text li,
    .fresh-text h1,
    .fresh-text h2,
    .fresh-text h3,
    .fresh-text h4,
    .fresh-text h5,
    .fresh-text h6 {
        text-align: left !important; /* Force left alignment on mobile */
    }
    
    .fresh-btn {
        text-align: center !important; /* Center buttons on mobile */
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    .fresh-content-title {
        font-size: var(--font-size-2xl) !important;
    }
}

@media (max-width: 480px) {
    .dark {
        --container-padding: 1rem;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --button-padding: 0.75rem 1.25rem;
        --button-font-size: 0.875rem;
    }
    
    .content-container {
        border-radius: var(--radius-base);
        margin: 0 0.5rem 1.5rem 0.5rem;
        text-align: left !important; /* Force left alignment on small mobile */
    }
    
    .fresh-content-section {
        padding: var(--spacing-4);
        border-left-width: 3px;
        text-align: left !important; /* Force left alignment on small mobile */
    }
    
    .fresh-text {
        text-align: left !important; /* Force left alignment on small mobile */
    }
    
    .fresh-btn {
        text-align: center !important; /* Center buttons on small mobile */
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}

/* ========================================
   FOOTER STYLES - Light Theme
   ======================================== */

.footer {
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: var(--spacing-8) 0 var(--spacing-4) 0;
    margin-top: var(--spacing-8);
    width: 100%;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    overflow: visible;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    position: relative;
    overflow: visible;
}

.footer-section {
    padding: var(--spacing-4);
}

.footer-section h3 {
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    color: var(--primary-dark);
    margin-bottom: var(--spacing-4);
    font-weight: var(--font-weight-bold);
}

.footer-section p {
    font-family: var(--font-content);
    color: var(--card-foreground);
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-relaxed);
}

.footer-section strong {
    color: var(--primary-dark);
    font-weight: var(--font-weight-semibold);
}

.footer-contact {
    margin-bottom: var(--spacing-4);
}

.footer-address {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border);
}

.footer .social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    flex-wrap: wrap;
}

.footer .social-icons .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-all);
    box-shadow: var(--shadow-sm);
}

.footer .social-icons .social-icon:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.footer-bottom {
    background: var(--muted);
    border-top: 1px solid var(--border);
    padding: var(--spacing-4) 0;
    margin-top: var(--spacing-6);
    margin-left: calc(-1 * var(--spacing-4));
    margin-right: calc(-1 * var(--spacing-4));
    width: calc(100% + 2 * var(--spacing-4));
    text-align: center;
    grid-column: 1 / -1;
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.footer-bottom p {
    font-family: var(--font-content);
    color: var(--muted-foreground);
    font-size: var(--font-size-sm);
    margin: 0;
    flex: 1;
    text-align: left;
}

.footer-bottom-links {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-shrink: 0;
}

.footer-bottom-links a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.footer-bottom-links a:hover {
    color: var(--primary);
}

.footer-bottom-links .separator {
    color: var(--border);
    margin: 0 5px;
}

/* Mobile adjustments for footer bottom */
@media (max-width: 768px) {
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .footer-bottom p {
        text-align: center;
    }
    
    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ========================================
   SLIDER POSITIONING - No gaps
   ======================================== */

.default-slider-8473,
.modern-card-slider-9284,
.carousel-slider-container-7294,
.parallax-slider-container-8361,
.animated-slider-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ========================================
   FLOATING BUTTONS - Fixed Position
   ======================================== */

.floating-buttons {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 9998 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.floating-btn {
    width: 55px;
    height: 55px;
    color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(44, 120, 115, 0.3);
    cursor: pointer;
    position: relative;
    z-index: 9998 !important;
}

/* Hide floating buttons when menu is open */
.jl-sidebar-menu.active ~ .floating-buttons,
body:has(.jl-sidebar-menu.active) .floating-buttons,
.jl-menu-overlay.active ~ .floating-buttons {
    z-index: 9997 !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
}

.floating-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(44, 120, 115, 0.4);
}

/* Dynamic Button Colors */
.whatsapp-btn {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.facebook-btn {
    background: linear-gradient(135deg, #1877F2, #0D6EFD);
}

.twitter-btn {
    background: linear-gradient(135deg, #1DA1F2, #0D8BD9);
}

.linkedin-btn {
    background: linear-gradient(135deg, #0077B5, #005885);
}

.share-btn {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* Weather floating button */
.floating-btn.weather-floating-btn-8473 {
    position: relative !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .floating-buttons {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .floating-btn {
        width: 50px;
        height: 50px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-primary {
    color: var(--primary);
}

.bg-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* ========================================
   MOBILE SCROLL FIXES
   ======================================== */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        height: auto !important;
        position: relative !important;
    }
    
    body {
        overflow: visible !important;
    }
    
    main, #page-main {
        overflow: visible !important;
        height: auto !important;
        position: relative !important;
    }
    
    /* Ensure no fixed height containers prevent scrolling */
    .content-container,
    .fresh-content-section,
    .content-section-1 {
        overflow: visible !important;
        height: auto !important;
    }
    
    /* Fix: Sliders should not prevent page scrolling on mobile */
    .modern-card-slider-9284,
    .default-slider-8473,
    .animated-slider-container,
    .parallax-slider-container-8361,
    .carousel-slider-container-7294 {
        position: relative !important; /* Not fixed */
        height: 100vh !important;
        max-height: 100vh !important;
    }
    
    /* Ensure content after slider is visible and scrollable */
    main {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Universal fix: Ensure any page with a slider can scroll */
    body {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
}