/*
==============================================================================
REUSABLE BOOTSTRAP 5 CSS TEMPLATE
==============================================================================

This CSS file is designed to be easily copied and reused across projects.
Simply update the variables in :root and customize as needed.

INSTRUCTIONS FOR NEW PROJECTS:
1. Copy this file to your new project
2. Update the variables in :root section
3. Customize component styles as needed
4. Remove unused sections
==============================================================================
*/

/* ===== FONT IMPORTS ===== */
/* Add your Google Fonts or local font imports here */
/* Example: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

/* ===== LOCAL FONT DEFINITIONS ===== */
/* Gilroy Font Family - Multiple weights */
/* Uncomment and modify the paths if you have Gilroy font files locally */

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy-font/Gilroy-Light.eot'),
         url('../fonts/gilroy-font/Gilroy-Light.ttf') format('truetype'),
         url('../fonts/gilroy-font/Gilroy-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy-font/Gilroy-Regular.eot'),
         url('../fonts/gilroy-font/Gilroy-Regular.ttf') format('truetype'),
         url('../fonts/gilroy-font/Gilroy-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy-font/Gilroy-Medium.eot'),
         url('../fonts/gilroy-font/Gilroy-Medium.ttf') format('truetype'),
         url('../fonts/gilroy-font/Gilroy-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy-font/Gilroy-SemiBold.eot'),
         url('../fonts/gilroy-font/Gilroy-SemiBold.ttf') format('truetype'),
         url('../fonts/gilroy-font/Gilroy-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy-font/Gilroy-Bold.eot'),
         url('../fonts/gilroy-font/Gilroy-Bold.ttf') format('truetype'),
         url('../fonts/gilroy-font/Gilroy-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
Additional font definitions template:
@font-face {
    font-family: 'YourFont';
    src: url('fonts/YourFont-Regular.woff2') format('woff2'),
         url('fonts/YourFont-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/


/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
/*
HOW TO USE IN NEW PROJECTS:
1. Copy this :root section
2. Update the values to match your brand/design
3. Use these variables throughout your CSS instead of hardcoded values
4. Change one variable = updates entire design consistently
*/
:root {
    /* ===== BRAND COLORS ===== */
    --primary-color: #007bff;        /* Main brand color */
    --secondary-color: #6c757d;      /* Secondary brand color */
    --accent-color: #007bff;         /* Accent/highlight color */

    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #000000;            /* Primary background (black) */
    --bg-secondary: #0C0C0C;          /* Secondary background (dark gray) */
    --bg-section: #0C0C0C;            /* Section background */
    --bg-banner: transparent;         /* Banner background */
    --bg-card: rgba(255, 255, 255, 0.05); /* Card background */
    --bg-hover: rgba(255, 255, 255, 0.1); /* Hover background */
    
    /* ===== TEXT COLORS ===== */
    --text-primary: #ffffff;          /* Primary text (white) */
    --text-secondary: #9C9DA1;        /* Secondary text (gray) */
    --text-muted: #6c757d;            /* Muted text */
    --text-dark: #212529;            /* Dark text for light backgrounds */
    --text-link: #0063E3;             /* Link color */
    --text-highlight: #ffffff;        /* Highlighted/emphasized text (white) */
    --text-management-span: #ffffff;  /* Management icon span text color */
    
    /* ===== BORDER COLORS ===== */
    --border-color: rgba(255, 255, 255, 0.12); /* Border color */
    --border-color-strong: rgba(255, 255, 255, 0.4); /* Strong border */
    
    /* ===== GRADIENT COLORS ===== */
    --gradient-primary-start: #0063E3;  /* Gradient start */
    --gradient-primary-end: #625AFA;    /* Gradient end */

    /* ===== FONT FAMILIES ===== */
    --font-primary: 'Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

    /* ===== FONT SIZES ===== */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */

    /* ===== FONT WEIGHTS ===== */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===== SPACING ===== */
    --spacing-1: 0.25rem;    /* 4px */
    --spacing-2: 0.5rem;     /* 8px */
    --spacing-3: 0.75rem;    /* 12px */
    --spacing-4: 1rem;       /* 16px */
    --spacing-5: 1.25rem;    /* 20px */
    --spacing-6: 1.5rem;     /* 24px */
    --spacing-8: 2rem;       /* 32px */
    --spacing-10: 2.5rem;    /* 40px */
    --spacing-12: 3rem;      /* 48px */

    /* ===== BORDERS & RADIUS ===== */
    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.375rem;  /* 6px */
    --border-radius-lg: 0.5rem;    /* 8px */
    --border-radius-xl: 0.75rem;   /* 12px */
    --border-radius-full: 9999px;  /* Fully rounded */

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== BREAKPOINTS ===== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/*
==============================================================================
COMPONENT OVERRIDES
==============================================================================
Copy and modify these sections for your project's components.
Remove unused sections to keep your CSS clean.
==============================================================================
*/

/* ===== BOOTSTRAP COMPONENT OVERRIDES ===== */
.btn {
    border-radius: var(--border-radius-md);
    transition: var(--transition-normal);
    font-weight: var(--font-weight-medium);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ===== NAVIGATION COMPONENTS ===== */
.navbar-brand {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.navbar-nav .nav-link {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-xl);
    letter-spacing: 0%;
    color: var(--text-primary) !important;
    padding: var(--spacing-3) var(--spacing-4);
    transition: var(--transition-normal);
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--text-accent) !important;
    transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
    color: var(--text-accent) !important;
    font-weight: var(--font-weight-semibold);
}

/*
==============================================================================
UTILITY CLASSES
==============================================================================
Copy these utility classes to new projects as needed.
*/

/* ===== SPACING UTILITIES ===== */
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }

.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }

/* ===== BORDER RADIUS UTILITIES ===== */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* ===== SHADOW UTILITIES ===== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.ll-underline { text-decoration: underline !important; }



/* Simple numeric weight aliases */
.ll-fw-400 { font-weight: 400 !important; }
.ll-fw-500 { font-weight: 500 !important; }
.ll-fw-600 { font-weight: 600 !important; }
.ll-fw-700 { font-weight: 700 !important; }

/* Tailwind-like font weight aliases */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/*
==============================================================================
COMPONENT ENHANCEMENTS
==============================================================================
*/

/* ===== PREMIUM BUTTON STYLES ===== */
/* Always use 'll-' prefix for custom classes to avoid conflicts */

/* Primary Premium Button */
.ll-btnprimary {
    background: linear-gradient(180deg, rgba(113, 47, 255, 0.12) 0%, #0862e5 0%, #0962e5 32%);
    border: none;
    color: white;
    padding: 8px 24px;
    border-radius: var(--border-radius-lg);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: middle;
    /* leading-trim: none; /* Experimental CSS property */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.ll-btnprimary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.ll-btnprimary:hover {
    box-shadow: var(--shadow-xl);
    background: linear-gradient(0deg, rgba(113, 47, 255, 0.18), rgba(113, 47, 255, 0.18)),
                linear-gradient(180deg, rgba(60, 8, 126, 0) 0%, rgba(60, 8, 126, 0.45) 100%);
}

.ll-btnprimary:hover::before {
    left: 100%;
}

.ll-btnprimary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

/* Secondary Premium Button */
.ll-btnsecondary {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-normal);
    backdrop-filter: blur(10px);
    position: relative;
}

.ll-btnsecondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.ll-btnsecondary:active {
    transform: translateY(0);
}

/* Success Premium Button */
.ll-btnsuccess {
    background: linear-gradient(135deg, var(--success-color), #28a745);
    border: none;
    color: white;
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
}
.ll-btnlink {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    /* leading-trim: none; /* Experimental CSS property */
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--text-primary);
    text-decoration: none;
}
.ll-btnlink:hover {
    color: var(--text-accent);
    transform: translateY(-1px);
}
.ll-btnsuccess:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, #28a745, var(--success-color));
}

.ll-btnsuccess:active {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

/* Danger Premium Button */
.ll-btndanger {
    background: linear-gradient(135deg, var(--danger-color), #dc3545);
    border: none;
    color: white;
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.ll-btndanger:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, #dc3545, var(--danger-color));
}

.ll-btndanger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

/* Large Premium Buttons */
.ll-btnprimary.ll-btnlg,
.ll-btnsecondary.ll-btnlg,
.ll-btnsuccess.ll-btnlg,
.ll-btndanger.ll-btnlg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-xl);
}

/* Small Premium Buttons */
.ll-btnprimary.ll-btnsm,
.ll-btnsecondary.ll-btnsm,
.ll-btnsuccess.ll-btnsm,
.ll-btndanger.ll-btnsm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-md);
}

/* ===== CARDS ===== */
.card {
    transition: var(--transition-normal);
    border: none;
    border-radius: var(--border-radius-lg);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* ===== FORMS ===== */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ===== BACK TO TOP BUTTON ===== */
#back-to-top {
    border-radius: var(--border-radius-full);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-normal);
}

#back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* ===== ANIMATIONS ===== */
.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.observe-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* ===== NAVIGATION ENHANCEMENTS ===== */
.navbar-toggler {
    border: none;
    margin-left: 10px;
    padding: 0;
    .navbar-toggler-icon {
        width: 20px;
        height: 20px;
    filter: invert(1);
    }
}

.navbar-toggler:focus {
    box-shadow: var(--shadow-sm);
}

/* Nav-link underline animation */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--text-accent);
    transition: var(--transition-normal);
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

/* ===== RESPONSIVE NAVIGATION ===== */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        padding: var(--spacing-2) var(--spacing-4);
        text-align: center;
    }
    .navbar-brand img{
        width: 90px;
    }
    .navbar-nav .nav-link.active {
        background-color: rgba(0, 123, 255, 0.1);
    }
}

@media (min-width: 992px) {
    /* Desktop Navbar Pill Design */
    .ll-navbar .navbar-nav {
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border-color);
        border-radius: 50px;
        padding: 5px 10px;
        backdrop-filter: blur(10px);
        margin: 0 auto;
    }

    .ll-navbar .nav-link {
        color: var(--text-secondary) !important;
        padding: 8px 24px !important;
        transition: color 0.3s ease;
        border-radius: 50px;
    }

    .ll-navbar .nav-link:hover,
    .ll-navbar .nav-link.active {
        color: var(--text-primary) !important;
    }
    
    /* Remove underline animation for the pill design */
    .ll-navbar .navbar-nav .nav-link::after {
        display: none;
    }
}

/*
==============================================================================
TYPOGRAPHY & FONTS
==============================================================================
*/

/* ===== BASE TYPOGRAPHY ===== */
body {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
}

/* ===== HEADINGS ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    margin-bottom: var(--spacing-4);
}

.display-4 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-4xl);
}


.ll-m-1px { margin: 1px !important; }
.ll-mt-1px { margin-top: 1px !important; }
.ll-mr-1px { margin-right: 1px !important; }
.ll-mb-1px { margin-bottom: 1px !important; }
.ll-ml-1px { margin-left: 1px !important; }
.ll-mx-1px { margin-left: 1px !important; margin-right: 1px !important; }
.ll-my-1px { margin-top: 1px !important; margin-bottom: 1px !important; }
.ll-m-2px { margin: 2px !important; }
.ll-mt-2px { margin-top: 2px !important; }
.ll-mr-2px { margin-right: 2px !important; }
.ll-mb-2px { margin-bottom: 2px !important; }
.ll-ml-2px { margin-left: 2px !important; }
.ll-mx-2px { margin-left: 2px !important; margin-right: 2px !important; }
.ll-my-2px { margin-top: 2px !important; margin-bottom: 2px !important; }
.ll-m-3px { margin: 3px !important; }
.ll-mt-3px { margin-top: 3px !important; }
.ll-mr-3px { margin-right: 3px !important; }
.ll-mb-3px { margin-bottom: 3px !important; }
.ll-ml-3px { margin-left: 3px !important; }
.ll-mx-3px { margin-left: 3px !important; margin-right: 3px !important; }
.ll-my-3px { margin-top: 3px !important; margin-bottom: 3px !important; }
.ll-m-4px { margin: 4px !important; }
.ll-mt-4px { margin-top: 4px !important; }
.ll-mr-4px { margin-right: 4px !important; }
.ll-mb-4px { margin-bottom: 4px !important; }
.ll-ml-4px { margin-left: 4px !important; }
.ll-mx-4px { margin-left: 4px !important; margin-right: 4px !important; }
.ll-my-4px { margin-top: 4px !important; margin-bottom: 4px !important; }
.ll-m-5px { margin: 5px !important; }
.ll-mt-5px { margin-top: 5px !important; }
.ll-mr-5px { margin-right: 5px !important; }
.ll-mb-5px { margin-bottom: 5px !important; }
.ll-ml-5px { margin-left: 5px !important; }
.ll-mx-5px { margin-left: 5px !important; margin-right: 5px !important; }
.ll-my-5px { margin-top: 5px !important; margin-bottom: 5px !important; }
.ll-m-6px { margin: 6px !important; }
.ll-mt-6px { margin-top: 6px !important; }
.ll-mr-6px { margin-right: 6px !important; }
.ll-mb-6px { margin-bottom: 6px !important; }
.ll-ml-6px { margin-left: 6px !important; }
.ll-mx-6px { margin-left: 6px !important; margin-right: 6px !important; }
.ll-my-6px { margin-top: 6px !important; margin-bottom: 6px !important; }
.ll-m-7px { margin: 7px !important; }
.ll-mt-7px { margin-top: 7px !important; }
.ll-mr-7px { margin-right: 7px !important; }
.ll-mb-7px { margin-bottom: 7px !important; }
.ll-ml-7px { margin-left: 7px !important; }
.ll-mx-7px { margin-left: 7px !important; margin-right: 7px !important; }
.ll-my-7px { margin-top: 7px !important; margin-bottom: 7px !important; }
.ll-m-8px { margin: 8px !important; }
.ll-mt-8px { margin-top: 8px !important; }
.ll-mr-8px { margin-right: 8px !important; }
.ll-mb-8px { margin-bottom: 8px !important; }
.ll-ml-8px { margin-left: 8px !important; }
.ll-mx-8px { margin-left: 8px !important; margin-right: 8px !important; }
.ll-my-8px { margin-top: 8px !important; margin-bottom: 8px !important; }
.ll-m-9px { margin: 9px !important; }
.ll-mt-9px { margin-top: 9px !important; }
.ll-mr-9px { margin-right: 9px !important; }
.ll-mb-9px { margin-bottom: 9px !important; }
.ll-ml-9px { margin-left: 9px !important; }
.ll-mx-9px { margin-left: 9px !important; margin-right: 9px !important; }
.ll-my-9px { margin-top: 9px !important; margin-bottom: 9px !important; }
.ll-m-10px { margin: 10px !important; }
.ll-mt-10px { margin-top: 10px !important; }
.ll-mr-10px { margin-right: 10px !important; }
.ll-mb-10px { margin-bottom: 10px !important; }
.ll-ml-10px { margin-left: 10px !important; }
.ll-mx-10px { margin-left: 10px !important; margin-right: 10px !important; }
.ll-my-10px { margin-top: 10px !important; margin-bottom: 10px !important; }
.ll-m-11px { margin: 11px !important; }
.ll-mt-11px { margin-top: 11px !important; }
.ll-mr-11px { margin-right: 11px !important; }
.ll-mb-11px { margin-bottom: 11px !important; }
.ll-ml-11px { margin-left: 11px !important; }
.ll-mx-11px { margin-left: 11px !important; margin-right: 11px !important; }
.ll-my-11px { margin-top: 11px !important; margin-bottom: 11px !important; }
.ll-m-12px { margin: 12px !important; }
.ll-mt-12px { margin-top: 12px !important; }
.ll-mr-12px { margin-right: 12px !important; }
.ll-mb-12px { margin-bottom: 12px !important; }
.ll-ml-12px { margin-left: 12px !important; }
.ll-mx-12px { margin-left: 12px !important; margin-right: 12px !important; }
.ll-my-12px { margin-top: 12px !important; margin-bottom: 12px !important; }
.ll-m-13px { margin: 13px !important; }
.ll-mt-13px { margin-top: 13px !important; }
.ll-mr-13px { margin-right: 13px !important; }
.ll-mb-13px { margin-bottom: 13px !important; }
.ll-ml-13px { margin-left: 13px !important; }
.ll-mx-13px { margin-left: 13px !important; margin-right: 13px !important; }
.ll-my-13px { margin-top: 13px !important; margin-bottom: 13px !important; }
.ll-m-14px { margin: 14px !important; }
.ll-mt-14px { margin-top: 14px !important; }
.ll-mr-14px { margin-right: 14px !important; }
.ll-mb-14px { margin-bottom: 14px !important; }
.ll-ml-14px { margin-left: 14px !important; }
.ll-mx-14px { margin-left: 14px !important; margin-right: 14px !important; }
.ll-my-14px { margin-top: 14px !important; margin-bottom: 14px !important; }
.ll-m-15px { margin: 15px !important; }
.ll-mt-15px { margin-top: 15px !important; }
.ll-mr-15px { margin-right: 15px !important; }
.ll-mb-15px { margin-bottom: 15px !important; }
.ll-ml-15px { margin-left: 15px !important; }
.ll-mx-15px { margin-left: 15px !important; margin-right: 15px !important; }
.ll-my-15px { margin-top: 15px !important; margin-bottom: 15px !important; }
.ll-m-16px { margin: 16px !important; }
.ll-mt-16px { margin-top: 16px !important; }
.ll-mr-16px { margin-right: 16px !important; }
.ll-mb-16px { margin-bottom: 16px !important; }
.ll-ml-16px { margin-left: 16px !important; }
.ll-mx-16px { margin-left: 16px !important; margin-right: 16px !important; }
.ll-my-16px { margin-top: 16px !important; margin-bottom: 16px !important; }
.ll-m-17px { margin: 17px !important; }
.ll-mt-17px { margin-top: 17px !important; }
.ll-mr-17px { margin-right: 17px !important; }
.ll-mb-17px { margin-bottom: 17px !important; }
.ll-ml-17px { margin-left: 17px !important; }
.ll-mx-17px { margin-left: 17px !important; margin-right: 17px !important; }
.ll-my-17px { margin-top: 17px !important; margin-bottom: 17px !important; }
.ll-m-18px { margin: 18px !important; }
.ll-mt-18px { margin-top: 18px !important; }
.ll-mr-18px { margin-right: 18px !important; }
.ll-mb-18px { margin-bottom: 18px !important; }
.ll-ml-18px { margin-left: 18px !important; }
.ll-mx-18px { margin-left: 18px !important; margin-right: 18px !important; }
.ll-my-18px { margin-top: 18px !important; margin-bottom: 18px !important; }
.ll-m-19px { margin: 19px !important; }
.ll-mt-19px { margin-top: 19px !important; }
.ll-mr-19px { margin-right: 19px !important; }
.ll-mb-19px { margin-bottom: 19px !important; }
.ll-ml-19px { margin-left: 19px !important; }
.ll-mx-19px { margin-left: 19px !important; margin-right: 19px !important; }
.ll-my-19px { margin-top: 19px !important; margin-bottom: 19px !important; }
.ll-m-20px { margin: 20px !important; }
.ll-mt-20px { margin-top: 20px !important; }
.ll-mr-20px { margin-right: 20px !important; }
.ll-mb-20px { margin-bottom: 20px !important; }
.ll-ml-20px { margin-left: 20px !important; }
.ll-mx-20px { margin-left: 20px !important; margin-right: 20px !important; }
.ll-my-20px { margin-top: 20px !important; margin-bottom: 20px !important; }
.ll-m-21px { margin: 21px !important; }
.ll-mt-21px { margin-top: 21px !important; }
.ll-mr-21px { margin-right: 21px !important; }
.ll-mb-21px { margin-bottom: 21px !important; }
.ll-ml-21px { margin-left: 21px !important; }
.ll-mx-21px { margin-left: 21px !important; margin-right: 21px !important; }
.ll-my-21px { margin-top: 21px !important; margin-bottom: 21px !important; }
.ll-m-22px { margin: 22px !important; }
.ll-mt-22px { margin-top: 22px !important; }
.ll-mr-22px { margin-right: 22px !important; }
.ll-mb-22px { margin-bottom: 22px !important; }
.ll-ml-22px { margin-left: 22px !important; }
.ll-mx-22px { margin-left: 22px !important; margin-right: 22px !important; }
.ll-my-22px { margin-top: 22px !important; margin-bottom: 22px !important; }
.ll-m-23px { margin: 23px !important; }
.ll-mt-23px { margin-top: 23px !important; }
.ll-mr-23px { margin-right: 23px !important; }
.ll-mb-23px { margin-bottom: 23px !important; }
.ll-ml-23px { margin-left: 23px !important; }
.ll-mx-23px { margin-left: 23px !important; margin-right: 23px !important; }
.ll-my-23px { margin-top: 23px !important; margin-bottom: 23px !important; }
.ll-m-24px { margin: 24px !important; }
.ll-mt-24px { margin-top: 24px !important; }
.ll-mr-24px { margin-right: 24px !important; }
.ll-mb-24px { margin-bottom: 24px !important; }
.ll-ml-24px { margin-left: 24px !important; }
.ll-mx-24px { margin-left: 24px !important; margin-right: 24px !important; }
.ll-my-24px { margin-top: 24px !important; margin-bottom: 24px !important; }
.ll-m-25px { margin: 25px !important; }
.ll-mt-25px { margin-top: 25px !important; }
.ll-mr-25px { margin-right: 25px !important; }
.ll-mb-25px { margin-bottom: 25px !important; }
.ll-ml-25px { margin-left: 25px !important; }
.ll-mx-25px { margin-left: 25px !important; margin-right: 25px !important; }
.ll-my-25px { margin-top: 25px !important; margin-bottom: 25px !important; }
.ll-m-26px { margin: 26px !important; }
.ll-mt-26px { margin-top: 26px !important; }
.ll-mr-26px { margin-right: 26px !important; }
.ll-mb-26px { margin-bottom: 26px !important; }
.ll-ml-26px { margin-left: 26px !important; }
.ll-mx-26px { margin-left: 26px !important; margin-right: 26px !important; }
.ll-my-26px { margin-top: 26px !important; margin-bottom: 26px !important; }
.ll-m-27px { margin: 27px !important; }
.ll-mt-27px { margin-top: 27px !important; }
.ll-mr-27px { margin-right: 27px !important; }
.ll-mb-27px { margin-bottom: 27px !important; }
.ll-ml-27px { margin-left: 27px !important; }
.ll-mx-27px { margin-left: 27px !important; margin-right: 27px !important; }
.ll-my-27px { margin-top: 27px !important; margin-bottom: 27px !important; }
.ll-m-28px { margin: 28px !important; }
.ll-mt-28px { margin-top: 28px !important; }
.ll-mr-28px { margin-right: 28px !important; }
.ll-mb-28px { margin-bottom: 28px !important; }
.ll-ml-28px { margin-left: 28px !important; }
.ll-mx-28px { margin-left: 28px !important; margin-right: 28px !important; }
.ll-my-28px { margin-top: 28px !important; margin-bottom: 28px !important; }
.ll-m-29px { margin: 29px !important; }
.ll-mt-29px { margin-top: 29px !important; }
.ll-mr-29px { margin-right: 29px !important; }
.ll-mb-29px { margin-bottom: 29px !important; }
.ll-ml-29px { margin-left: 29px !important; }
.ll-mx-29px { margin-left: 29px !important; margin-right: 29px !important; }
.ll-my-29px { margin-top: 29px !important; margin-bottom: 29px !important; }
.ll-m-30px { margin: 30px !important; }
.ll-mt-30px { margin-top: 30px !important; }
.ll-mr-30px { margin-right: 30px !important; }
.ll-mb-30px { margin-bottom: 30px !important; }
.ll-ml-30px { margin-left: 30px !important; }
.ll-mx-30px { margin-left: 30px !important; margin-right: 30px !important; }
.ll-my-30px { margin-top: 30px !important; margin-bottom: 30px !important; }
.ll-m-31px { margin: 31px !important; }
.ll-mt-31px { margin-top: 31px !important; }
.ll-mr-31px { margin-right: 31px !important; }
.ll-mb-31px { margin-bottom: 31px !important; }
.ll-ml-31px { margin-left: 31px !important; }
.ll-mx-31px { margin-left: 31px !important; margin-right: 31px !important; }
.ll-my-31px { margin-top: 31px !important; margin-bottom: 31px !important; }
.ll-m-32px { margin: 32px !important; }
.ll-mt-32px { margin-top: 32px !important; }
.ll-mr-32px { margin-right: 32px !important; }
.ll-mb-32px { margin-bottom: 32px !important; }
.ll-ml-32px { margin-left: 32px !important; }
.ll-mx-32px { margin-left: 32px !important; margin-right: 32px !important; }
.ll-my-32px { margin-top: 32px !important; margin-bottom: 32px !important; }
.ll-m-33px { margin: 33px !important; }
.ll-mt-33px { margin-top: 33px !important; }
.ll-mr-33px { margin-right: 33px !important; }
.ll-mb-33px { margin-bottom: 33px !important; }
.ll-ml-33px { margin-left: 33px !important; }
.ll-mx-33px { margin-left: 33px !important; margin-right: 33px !important; }
.ll-my-33px { margin-top: 33px !important; margin-bottom: 33px !important; }
.ll-m-34px { margin: 34px !important; }
.ll-mt-34px { margin-top: 34px !important; }
.ll-mr-34px { margin-right: 34px !important; }
.ll-mb-34px { margin-bottom: 34px !important; }
.ll-ml-34px { margin-left: 34px !important; }
.ll-mx-34px { margin-left: 34px !important; margin-right: 34px !important; }
.ll-my-34px { margin-top: 34px !important; margin-bottom: 34px !important; }
.ll-m-35px { margin: 35px !important; }
.ll-mt-35px { margin-top: 35px !important; }
.ll-mr-35px { margin-right: 35px !important; }
.ll-mb-35px { margin-bottom: 35px !important; }
.ll-ml-35px { margin-left: 35px !important; }
.ll-mx-35px { margin-left: 35px !important; margin-right: 35px !important; }
.ll-my-35px { margin-top: 35px !important; margin-bottom: 35px !important; }
.ll-m-36px { margin: 36px !important; }
.ll-mt-36px { margin-top: 36px !important; }
.ll-mr-36px { margin-right: 36px !important; }
.ll-mb-36px { margin-bottom: 36px !important; }
.ll-ml-36px { margin-left: 36px !important; }
.ll-mx-36px { margin-left: 36px !important; margin-right: 36px !important; }
.ll-my-36px { margin-top: 36px !important; margin-bottom: 36px !important; }
.ll-m-37px { margin: 37px !important; }
.ll-mt-37px { margin-top: 37px !important; }
.ll-mr-37px { margin-right: 37px !important; }
.ll-mb-37px { margin-bottom: 37px !important; }
.ll-ml-37px { margin-left: 37px !important; }
.ll-mx-37px { margin-left: 37px !important; margin-right: 37px !important; }
.ll-my-37px { margin-top: 37px !important; margin-bottom: 37px !important; }
.ll-m-38px { margin: 38px !important; }
.ll-mt-38px { margin-top: 38px !important; }
.ll-mr-38px { margin-right: 38px !important; }
.ll-mb-38px { margin-bottom: 38px !important; }
.ll-ml-38px { margin-left: 38px !important; }
.ll-mx-38px { margin-left: 38px !important; margin-right: 38px !important; }
.ll-my-38px { margin-top: 38px !important; margin-bottom: 38px !important; }
.ll-m-39px { margin: 39px !important; }
.ll-mt-39px { margin-top: 39px !important; }
.ll-mr-39px { margin-right: 39px !important; }
.ll-mb-39px { margin-bottom: 39px !important; }
.ll-ml-39px { margin-left: 39px !important; }
.ll-mx-39px { margin-left: 39px !important; margin-right: 39px !important; }
.ll-my-39px { margin-top: 39px !important; margin-bottom: 39px !important; }
.ll-m-40px { margin: 40px !important; }
.ll-mt-40px { margin-top: 40px !important; }
.ll-mr-40px { margin-right: 40px !important; }
.ll-mb-40px { margin-bottom: 40px !important; }
.ll-ml-40px { margin-left: 40px !important; }
.ll-mx-40px { margin-left: 40px !important; margin-right: 40px !important; }
.ll-my-40px { margin-top: 40px !important; margin-bottom: 40px !important; }
.ll-m-41px { margin: 41px !important; }
.ll-mt-41px { margin-top: 41px !important; }
.ll-mr-41px { margin-right: 41px !important; }
.ll-mb-41px { margin-bottom: 41px !important; }
.ll-ml-41px { margin-left: 41px !important; }
.ll-mx-41px { margin-left: 41px !important; margin-right: 41px !important; }
.ll-my-41px { margin-top: 41px !important; margin-bottom: 41px !important; }
.ll-m-42px { margin: 42px !important; }
.ll-mt-42px { margin-top: 42px !important; }
.ll-mr-42px { margin-right: 42px !important; }
.ll-mb-42px { margin-bottom: 42px !important; }
.ll-ml-42px { margin-left: 42px !important; }
.ll-mx-42px { margin-left: 42px !important; margin-right: 42px !important; }
.ll-my-42px { margin-top: 42px !important; margin-bottom: 42px !important; }
.ll-m-43px { margin: 43px !important; }
.ll-mt-43px { margin-top: 43px !important; }
.ll-mr-43px { margin-right: 43px !important; }
.ll-mb-43px { margin-bottom: 43px !important; }
.ll-ml-43px { margin-left: 43px !important; }
.ll-mx-43px { margin-left: 43px !important; margin-right: 43px !important; }
.ll-my-43px { margin-top: 43px !important; margin-bottom: 43px !important; }
.ll-m-44px { margin: 44px !important; }
.ll-mt-44px { margin-top: 44px !important; }
.ll-mr-44px { margin-right: 44px !important; }
.ll-mb-44px { margin-bottom: 44px !important; }
.ll-ml-44px { margin-left: 44px !important; }
.ll-mx-44px { margin-left: 44px !important; margin-right: 44px !important; }
.ll-my-44px { margin-top: 44px !important; margin-bottom: 44px !important; }
.ll-m-45px { margin: 45px !important; }
.ll-mt-45px { margin-top: 45px !important; }
.ll-mr-45px { margin-right: 45px !important; }
.ll-mb-45px { margin-bottom: 45px !important; }
.ll-ml-45px { margin-left: 45px !important; }
.ll-mx-45px { margin-left: 45px !important; margin-right: 45px !important; }
.ll-my-45px { margin-top: 45px !important; margin-bottom: 45px !important; }
.ll-m-46px { margin: 46px !important; }
.ll-mt-46px { margin-top: 46px !important; }
.ll-mr-46px { margin-right: 46px !important; }
.ll-mb-46px { margin-bottom: 46px !important; }
.ll-ml-46px { margin-left: 46px !important; }
.ll-mx-46px { margin-left: 46px !important; margin-right: 46px !important; }
.ll-my-46px { margin-top: 46px !important; margin-bottom: 46px !important; }
.ll-m-47px { margin: 47px !important; }
.ll-mt-47px { margin-top: 47px !important; }
.ll-mr-47px { margin-right: 47px !important; }
.ll-mb-47px { margin-bottom: 47px !important; }
.ll-ml-47px { margin-left: 47px !important; }
.ll-mx-47px { margin-left: 47px !important; margin-right: 47px !important; }
.ll-my-47px { margin-top: 47px !important; margin-bottom: 47px !important; }
.ll-m-48px { margin: 48px !important; }
.ll-mt-48px { margin-top: 48px !important; }
.ll-mr-48px { margin-right: 48px !important; }
.ll-mb-48px { margin-bottom: 48px !important; }
.ll-ml-48px { margin-left: 48px !important; }
.ll-mx-48px { margin-left: 48px !important; margin-right: 48px !important; }
.ll-my-48px { margin-top: 48px !important; margin-bottom: 48px !important; }
.ll-m-49px { margin: 49px !important; }
.ll-mt-49px { margin-top: 49px !important; }
.ll-mr-49px { margin-right: 49px !important; }
.ll-mb-49px { margin-bottom: 49px !important; }
.ll-ml-49px { margin-left: 49px !important; }
.ll-mx-49px { margin-left: 49px !important; margin-right: 49px !important; }
.ll-my-49px { margin-top: 49px !important; margin-bottom: 49px !important; }
.ll-m-50px { margin: 50px !important; }
.ll-mt-50px { margin-top: 50px !important; }
.ll-mr-50px { margin-right: 50px !important; }
.ll-mb-50px { margin-bottom: 50px !important; }
.ll-ml-50px { margin-left: 50px !important; }
.ll-mx-50px { margin-left: 50px !important; margin-right: 50px !important; }
.ll-my-50px { margin-top: 50px !important; margin-bottom: 50px !important; }
.ll-flex { display: flex !important; }
.ll-block { display: block !important; }
.ll-inline-flex { display: inline-flex !important; }
.ll-flex-row { flex-direction: row !important; }
.ll-flex-row-reverse { flex-direction: row-reverse !important; }
.ll-flex-col { flex-direction: column !important; }
.ll-flex-col-reverse { flex-direction: column-reverse !important; }
.ll-flex-wrap { flex-wrap: wrap !important; }
.ll-flex-nowrap { flex-wrap: nowrap !important; }
.ll-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.ll-justify-start { justify-content: flex-start !important; }
.ll-justify-center { justify-content: center !important; }
.ll-justify-end { justify-content: flex-end !important; }
.ll-justify-between { justify-content: space-between !important; }
.ll-justify-around { justify-content: space-around !important; }
.ll-justify-evenly { justify-content: space-evenly !important; }
.ll-items-start { align-items: flex-start !important; }
.ll-items-center { align-items: center !important; }
.ll-items-end { align-items: flex-end !important; }
.ll-items-baseline { align-items: baseline !important; }
.ll-items-stretch { align-items: stretch !important; }
.ll-content-start { align-content: flex-start !important; }
.ll-content-center { align-content: center !important; }
.ll-content-end { align-content: flex-end !important; }
.ll-content-between { align-content: space-between !important; }
.ll-content-around { align-content: space-around !important; }
.ll-content-evenly { align-content: space-evenly !important; }
.ll-self-auto { align-self: auto !important; }
.ll-self-start { align-self: flex-start !important; }
.ll-self-center { align-self: center !important; }
.ll-self-end { align-self: flex-end !important; }
.ll-self-stretch { align-self: stretch !important; }
.ll-p-1px { padding: 1px !important; }
.ll-pt-1px { padding-top: 1px !important; }
.ll-pr-1px { padding-right: 1px !important; }
.ll-pb-1px { padding-bottom: 1px !important; }
.ll-pl-1px { padding-left: 1px !important; }
.ll-px-1px { padding-left: 1px !important; padding-right: 1px !important; }
.ll-py-1px { padding-top: 1px !important; padding-bottom: 1px !important; }
.ll-p-2px { padding: 2px !important; }
.ll-pt-2px { padding-top: 2px !important; }
.ll-pr-2px { padding-right: 2px !important; }
.ll-pb-2px { padding-bottom: 2px !important; }
.ll-pl-2px { padding-left: 2px !important; }
.ll-px-2px { padding-left: 2px !important; padding-right: 2px !important; }
.ll-py-2px { padding-top: 2px !important; padding-bottom: 2px !important; }
.ll-p-3px { padding: 3px !important; }
.ll-pt-3px { padding-top: 3px !important; }
.ll-pr-3px { padding-right: 3px !important; }
.ll-pb-3px { padding-bottom: 3px !important; }
.ll-pl-3px { padding-left: 3px !important; }
.ll-px-3px { padding-left: 3px !important; padding-right: 3px !important; }
.ll-py-3px { padding-top: 3px !important; padding-bottom: 3px !important; }
.ll-p-4px { padding: 4px !important; }
.ll-pt-4px { padding-top: 4px !important; }
.ll-pr-4px { padding-right: 4px !important; }
.ll-pb-4px { padding-bottom: 4px !important; }
.ll-pl-4px { padding-left: 4px !important; }
.ll-px-4px { padding-left: 4px !important; padding-right: 4px !important; }
.ll-py-4px { padding-top: 4px !important; padding-bottom: 4px !important; }
.ll-p-5px { padding: 5px !important; }
.ll-pt-5px { padding-top: 5px !important; }
.ll-pr-5px { padding-right: 5px !important; }
.ll-pb-5px { padding-bottom: 5px !important; }
.ll-pl-5px { padding-left: 5px !important; }
.ll-px-5px { padding-left: 5px !important; padding-right: 5px !important; }
.ll-py-5px { padding-top: 5px !important; padding-bottom: 5px !important; }
.ll-p-6px { padding: 6px !important; }
.ll-pt-6px { padding-top: 6px !important; }
.ll-pr-6px { padding-right: 6px !important; }
.ll-pb-6px { padding-bottom: 6px !important; }
.ll-pl-6px { padding-left: 6px !important; }
.ll-px-6px { padding-left: 6px !important; padding-right: 6px !important; }
.ll-py-6px { padding-top: 6px !important; padding-bottom: 6px !important; }
.ll-p-7px { padding: 7px !important; }
.ll-pt-7px { padding-top: 7px !important; }
.ll-pr-7px { padding-right: 7px !important; }
.ll-pb-7px { padding-bottom: 7px !important; }
.ll-pl-7px { padding-left: 7px !important; }
.ll-px-7px { padding-left: 7px !important; padding-right: 7px !important; }
.ll-py-7px { padding-top: 7px !important; padding-bottom: 7px !important; }
.ll-p-8px { padding: 8px !important; }
.ll-pt-8px { padding-top: 8px !important; }
.ll-pr-8px { padding-right: 8px !important; }
.ll-pb-8px { padding-bottom: 8px !important; }
.ll-pl-8px { padding-left: 8px !important; }
.ll-px-8px { padding-left: 8px !important; padding-right: 8px !important; }
.ll-py-8px { padding-top: 8px !important; padding-bottom: 8px !important; }
.ll-p-9px { padding: 9px !important; }
.ll-pt-9px { padding-top: 9px !important; }
.ll-pr-9px { padding-right: 9px !important; }
.ll-pb-9px { padding-bottom: 9px !important; }
.ll-pl-9px { padding-left: 9px !important; }
.ll-px-9px { padding-left: 9px !important; padding-right: 9px !important; }
.ll-py-9px { padding-top: 9px !important; padding-bottom: 9px !important; }
.ll-p-10px { padding: 10px !important; }
.ll-pt-10px { padding-top: 10px !important; }
.ll-pr-10px { padding-right: 10px !important; }
.ll-pb-10px { padding-bottom: 10px !important; }
.ll-pl-10px { padding-left: 10px !important; }
.ll-px-10px { padding-left: 10px !important; padding-right: 10px !important; }
.ll-py-10px { padding-top: 10px !important; padding-bottom: 10px !important; }
.ll-p-11px { padding: 11px !important; }
.ll-pt-11px { padding-top: 11px !important; }
.ll-pr-11px { padding-right: 11px !important; }
.ll-pb-11px { padding-bottom: 11px !important; }
.ll-pl-11px { padding-left: 11px !important; }
.ll-px-11px { padding-left: 11px !important; padding-right: 11px !important; }
.ll-py-11px { padding-top: 11px !important; padding-bottom: 11px !important; }
.ll-p-12px { padding: 12px !important; }
.ll-pt-12px { padding-top: 12px !important; }
.ll-pr-12px { padding-right: 12px !important; }
.ll-pb-12px { padding-bottom: 12px !important; }
.ll-pl-12px { padding-left: 12px !important; }
.ll-px-12px { padding-left: 12px !important; padding-right: 12px !important; }
.ll-py-12px { padding-top: 12px !important; padding-bottom: 12px !important; }
.ll-p-13px { padding: 13px !important; }
.ll-pt-13px { padding-top: 13px !important; }
.ll-pr-13px { padding-right: 13px !important; }
.ll-pb-13px { padding-bottom: 13px !important; }
.ll-pl-13px { padding-left: 13px !important; }
.ll-px-13px { padding-left: 13px !important; padding-right: 13px !important; }
.ll-py-13px { padding-top: 13px !important; padding-bottom: 13px !important; }
.ll-p-14px { padding: 14px !important; }
.ll-pt-14px { padding-top: 14px !important; }
.ll-pr-14px { padding-right: 14px !important; }
.ll-pb-14px { padding-bottom: 14px !important; }
.ll-pl-14px { padding-left: 14px !important; }
.ll-px-14px { padding-left: 14px !important; padding-right: 14px !important; }
.ll-py-14px { padding-top: 14px !important; padding-bottom: 14px !important; }
.ll-p-15px { padding: 15px !important; }
.ll-pt-15px { padding-top: 15px !important; }
.ll-pr-15px { padding-right: 15px !important; }
.ll-pb-15px { padding-bottom: 15px !important; }
.ll-pl-15px { padding-left: 15px !important; }
.ll-px-15px { padding-left: 15px !important; padding-right: 15px !important; }
.ll-py-15px { padding-top: 15px !important; padding-bottom: 15px !important; }
.ll-p-16px { padding: 16px !important; }
.ll-pt-16px { padding-top: 16px !important; }
.ll-pr-16px { padding-right: 16px !important; }
.ll-pb-16px { padding-bottom: 16px !important; }
.ll-pl-16px { padding-left: 16px !important; }
.ll-px-16px { padding-left: 16px !important; padding-right: 16px !important; }
.ll-py-16px { padding-top: 16px !important; padding-bottom: 16px !important; }
.ll-p-17px { padding: 17px !important; }
.ll-pt-17px { padding-top: 17px !important; }
.ll-pr-17px { padding-right: 17px !important; }
.ll-pb-17px { padding-bottom: 17px !important; }
.ll-pl-17px { padding-left: 17px !important; }
.ll-px-17px { padding-left: 17px !important; padding-right: 17px !important; }
.ll-py-17px { padding-top: 17px !important; padding-bottom: 17px !important; }
.ll-p-18px { padding: 18px !important; }
.ll-pt-18px { padding-top: 18px !important; }
.ll-pr-18px { padding-right: 18px !important; }
.ll-pb-18px { padding-bottom: 18px !important; }
.ll-pl-18px { padding-left: 18px !important; }
.ll-px-18px { padding-left: 18px !important; padding-right: 18px !important; }
.ll-py-18px { padding-top: 18px !important; padding-bottom: 18px !important; }
.ll-p-19px { padding: 19px !important; }
.ll-pt-19px { padding-top: 19px !important; }
.ll-pr-19px { padding-right: 19px !important; }
.ll-pb-19px { padding-bottom: 19px !important; }
.ll-pl-19px { padding-left: 19px !important; }
.ll-px-19px { padding-left: 19px !important; padding-right: 19px !important; }
.ll-py-19px { padding-top: 19px !important; padding-bottom: 19px !important; }
.ll-p-20px { padding: 20px !important; }
.ll-pt-20px { padding-top: 20px !important; }
.ll-pr-20px { padding-right: 20px !important; }
.ll-pb-20px { padding-bottom: 20px !important; }
.ll-pl-20px { padding-left: 20px !important; }
.ll-px-20px { padding-left: 20px !important; padding-right: 20px !important; }
.ll-py-20px { padding-top: 20px !important; padding-bottom: 20px !important; }
.ll-p-21px { padding: 21px !important; }
.ll-pt-21px { padding-top: 21px !important; }
.ll-pr-21px { padding-right: 21px !important; }
.ll-pb-21px { padding-bottom: 21px !important; }
.ll-pl-21px { padding-left: 21px !important; }
.ll-px-21px { padding-left: 21px !important; padding-right: 21px !important; }
.ll-py-21px { padding-top: 21px !important; padding-bottom: 21px !important; }
.ll-p-22px { padding: 22px !important; }
.ll-pt-22px { padding-top: 22px !important; }
.ll-pr-22px { padding-right: 22px !important; }
.ll-pb-22px { padding-bottom: 22px !important; }
.ll-pl-22px { padding-left: 22px !important; }
.ll-px-22px { padding-left: 22px !important; padding-right: 22px !important; }
.ll-py-22px { padding-top: 22px !important; padding-bottom: 22px !important; }
.ll-p-23px { padding: 23px !important; }
.ll-pt-23px { padding-top: 23px !important; }
.ll-pr-23px { padding-right: 23px !important; }
.ll-pb-23px { padding-bottom: 23px !important; }
.ll-pl-23px { padding-left: 23px !important; }
.ll-px-23px { padding-left: 23px !important; padding-right: 23px !important; }
.ll-py-23px { padding-top: 23px !important; padding-bottom: 23px !important; }
.ll-p-24px { padding: 24px !important; }
.ll-pt-24px { padding-top: 24px !important; }
.ll-pr-24px { padding-right: 24px !important; }
.ll-pb-24px { padding-bottom: 24px !important; }
.ll-pl-24px { padding-left: 24px !important; }
.ll-px-24px { padding-left: 24px !important; padding-right: 24px !important; }
.ll-py-24px { padding-top: 24px !important; padding-bottom: 24px !important; }
.ll-p-25px { padding: 25px !important; }
.ll-pt-25px { padding-top: 25px !important; }
.ll-pr-25px { padding-right: 25px !important; }
.ll-pb-25px { padding-bottom: 25px !important; }
.ll-pl-25px { padding-left: 25px !important; }
.ll-px-25px { padding-left: 25px !important; padding-right: 25px !important; }
.ll-py-25px { padding-top: 25px !important; padding-bottom: 25px !important; }
.ll-p-26px { padding: 26px !important; }
.ll-pt-26px { padding-top: 26px !important; }
.ll-pr-26px { padding-right: 26px !important; }
.ll-pb-26px { padding-bottom: 26px !important; }
.ll-pl-26px { padding-left: 26px !important; }
.ll-px-26px { padding-left: 26px !important; padding-right: 26px !important; }
.ll-py-26px { padding-top: 26px !important; padding-bottom: 26px !important; }
.ll-p-27px { padding: 27px !important; }
.ll-pt-27px { padding-top: 27px !important; }
.ll-pr-27px { padding-right: 27px !important; }
.ll-pb-27px { padding-bottom: 27px !important; }
.ll-pl-27px { padding-left: 27px !important; }
.ll-px-27px { padding-left: 27px !important; padding-right: 27px !important; }
.ll-py-27px { padding-top: 27px !important; padding-bottom: 27px !important; }
.ll-p-28px { padding: 28px !important; }
.ll-pt-28px { padding-top: 28px !important; }
.ll-pr-28px { padding-right: 28px !important; }
.ll-pb-28px { padding-bottom: 28px !important; }
.ll-pl-28px { padding-left: 28px !important; }
.ll-px-28px { padding-left: 28px !important; padding-right: 28px !important; }
.ll-py-28px { padding-top: 28px !important; padding-bottom: 28px !important; }
.ll-p-29px { padding: 29px !important; }
.ll-pt-29px { padding-top: 29px !important; }
.ll-pr-29px { padding-right: 29px !important; }
.ll-pb-29px { padding-bottom: 29px !important; }
.ll-pl-29px { padding-left: 29px !important; }
.ll-px-29px { padding-left: 29px !important; padding-right: 29px !important; }
.ll-py-29px { padding-top: 29px !important; padding-bottom: 29px !important; }
.ll-p-30px { padding: 30px !important; }
.ll-pt-30px { padding-top: 30px !important; }
.ll-pr-30px { padding-right: 30px !important; }
.ll-pb-30px { padding-bottom: 30px !important; }
.ll-pl-30px { padding-left: 30px !important; }
.ll-px-30px { padding-left: 30px !important; padding-right: 30px !important; }
.ll-py-30px { padding-top: 30px !important; padding-bottom: 30px !important; }
.ll-p-31px { padding: 31px !important; }
.ll-pt-31px { padding-top: 31px !important; }
.ll-pr-31px { padding-right: 31px !important; }
.ll-pb-31px { padding-bottom: 31px !important; }
.ll-pl-31px { padding-left: 31px !important; }
.ll-px-31px { padding-left: 31px !important; padding-right: 31px !important; }
.ll-py-31px { padding-top: 31px !important; padding-bottom: 31px !important; }
.ll-p-32px { padding: 32px !important; }
.ll-pt-32px { padding-top: 32px !important; }
.ll-pr-32px { padding-right: 32px !important; }
.ll-pb-32px { padding-bottom: 32px !important; }
.ll-pl-32px { padding-left: 32px !important; }
.ll-px-32px { padding-left: 32px !important; padding-right: 32px !important; }
.ll-py-32px { padding-top: 32px !important; padding-bottom: 32px !important; }
.ll-p-33px { padding: 33px !important; }
.ll-pt-33px { padding-top: 33px !important; }
.ll-pr-33px { padding-right: 33px !important; }
.ll-pb-33px { padding-bottom: 33px !important; }
.ll-pl-33px { padding-left: 33px !important; }
.ll-px-33px { padding-left: 33px !important; padding-right: 33px !important; }
.ll-py-33px { padding-top: 33px !important; padding-bottom: 33px !important; }
.ll-p-34px { padding: 34px !important; }
.ll-pt-34px { padding-top: 34px !important; }
.ll-pr-34px { padding-right: 34px !important; }
.ll-pb-34px { padding-bottom: 34px !important; }
.ll-pl-34px { padding-left: 34px !important; }
.ll-px-34px { padding-left: 34px !important; padding-right: 34px !important; }
.ll-py-34px { padding-top: 34px !important; padding-bottom: 34px !important; }
.ll-p-35px { padding: 35px !important; }
.ll-pt-35px { padding-top: 35px !important; }
.ll-pr-35px { padding-right: 35px !important; }
.ll-pb-35px { padding-bottom: 35px !important; }
.ll-pl-35px { padding-left: 35px !important; }
.ll-px-35px { padding-left: 35px !important; padding-right: 35px !important; }
.ll-py-35px { padding-top: 35px !important; padding-bottom: 35px !important; }
.ll-p-36px { padding: 36px !important; }
.ll-pt-36px { padding-top: 36px !important; }
.ll-pr-36px { padding-right: 36px !important; }
.ll-pb-36px { padding-bottom: 36px !important; }
.ll-pl-36px { padding-left: 36px !important; }
.ll-px-36px { padding-left: 36px !important; padding-right: 36px !important; }
.ll-py-36px { padding-top: 36px !important; padding-bottom: 36px !important; }
.ll-p-37px { padding: 37px !important; }
.ll-pt-37px { padding-top: 37px !important; }
.ll-pr-37px { padding-right: 37px !important; }
.ll-pb-37px { padding-bottom: 37px !important; }
.ll-pl-37px { padding-left: 37px !important; }
.ll-px-37px { padding-left: 37px !important; padding-right: 37px !important; }
.ll-py-37px { padding-top: 37px !important; padding-bottom: 37px !important; }
.ll-p-38px { padding: 38px !important; }
.ll-pt-38px { padding-top: 38px !important; }
.ll-pr-38px { padding-right: 38px !important; }
.ll-pb-38px { padding-bottom: 38px !important; }
.ll-pl-38px { padding-left: 38px !important; }
.ll-px-38px { padding-left: 38px !important; padding-right: 38px !important; }
.ll-py-38px { padding-top: 38px !important; padding-bottom: 38px !important; }
.ll-p-39px { padding: 39px !important; }
.ll-pt-39px { padding-top: 39px !important; }
.ll-pr-39px { padding-right: 39px !important; }
.ll-pb-39px { padding-bottom: 39px !important; }
.ll-pl-39px { padding-left: 39px !important; }
.ll-px-39px { padding-left: 39px !important; padding-right: 39px !important; }
.ll-py-39px { padding-top: 39px !important; padding-bottom: 39px !important; }
.ll-p-40px { padding: 40px !important; }
.ll-pt-40px { padding-top: 40px !important; }
.ll-pr-40px { padding-right: 40px !important; }
.ll-pb-40px { padding-bottom: 40px !important; }
.ll-pl-40px { padding-left: 40px !important; }
.ll-px-40px { padding-left: 40px !important; padding-right: 40px !important; }
.ll-py-40px { padding-top: 40px !important; padding-bottom: 40px !important; }
.ll-p-41px { padding: 41px !important; }
.ll-pt-41px { padding-top: 41px !important; }
.ll-pr-41px { padding-right: 41px !important; }
.ll-pb-41px { padding-bottom: 41px !important; }
.ll-pl-41px { padding-left: 41px !important; }
.ll-px-41px { padding-left: 41px !important; padding-right: 41px !important; }
.ll-py-41px { padding-top: 41px !important; padding-bottom: 41px !important; }
.ll-p-42px { padding: 42px !important; }
.ll-pt-42px { padding-top: 42px !important; }
.ll-pr-42px { padding-right: 42px !important; }
.ll-pb-42px { padding-bottom: 42px !important; }
.ll-pl-42px { padding-left: 42px !important; }
.ll-px-42px { padding-left: 42px !important; padding-right: 42px !important; }
.ll-py-42px { padding-top: 42px !important; padding-bottom: 42px !important; }
.ll-p-43px { padding: 43px !important; }
.ll-pt-43px { padding-top: 43px !important; }
.ll-pr-43px { padding-right: 43px !important; }
.ll-pb-43px { padding-bottom: 43px !important; }
.ll-pl-43px { padding-left: 43px !important; }
.ll-px-43px { padding-left: 43px !important; padding-right: 43px !important; }
.ll-py-43px { padding-top: 43px !important; padding-bottom: 43px !important; }
.ll-p-44px { padding: 44px !important; }
.ll-pt-44px { padding-top: 44px !important; }
.ll-pr-44px { padding-right: 44px !important; }
.ll-pb-44px { padding-bottom: 44px !important; }
.ll-pl-44px { padding-left: 44px !important; }
.ll-px-44px { padding-left: 44px !important; padding-right: 44px !important; }
.ll-py-44px { padding-top: 44px !important; padding-bottom: 44px !important; }
.ll-p-45px { padding: 45px !important; }
.ll-pt-45px { padding-top: 45px !important; }
.ll-pr-45px { padding-right: 45px !important; }
.ll-pb-45px { padding-bottom: 45px !important; }
.ll-pl-45px { padding-left: 45px !important; }
.ll-px-45px { padding-left: 45px !important; padding-right: 45px !important; }
.ll-py-45px { padding-top: 45px !important; padding-bottom: 45px !important; }
.ll-p-46px { padding: 46px !important; }
.ll-pt-46px { padding-top: 46px !important; }
.ll-pr-46px { padding-right: 46px !important; }
.ll-pb-46px { padding-bottom: 46px !important; }
.ll-pl-46px { padding-left: 46px !important; }
.ll-px-46px { padding-left: 46px !important; padding-right: 46px !important; }
.ll-py-46px { padding-top: 46px !important; padding-bottom: 46px !important; }
.ll-p-47px { padding: 47px !important; }
.ll-pt-47px { padding-top: 47px !important; }
.ll-pr-47px { padding-right: 47px !important; }
.ll-pb-47px { padding-bottom: 47px !important; }
.ll-pl-47px { padding-left: 47px !important; }
.ll-px-47px { padding-left: 47px !important; padding-right: 47px !important; }
.ll-py-47px { padding-top: 47px !important; padding-bottom: 47px !important; }
.ll-p-48px { padding: 48px !important; }
.ll-pt-48px { padding-top: 48px !important; }
.ll-pr-48px { padding-right: 48px !important; }
.ll-pb-48px { padding-bottom: 48px !important; }
.ll-pl-48px { padding-left: 48px !important; }
.ll-px-48px { padding-left: 48px !important; padding-right: 48px !important; }
.ll-py-48px { padding-top: 48px !important; padding-bottom: 48px !important; }
.ll-p-49px { padding: 49px !important; }
.ll-pt-49px { padding-top: 49px !important; }
.ll-pr-49px { padding-right: 49px !important; }
.ll-pb-49px { padding-bottom: 49px !important; }
.ll-pl-49px { padding-left: 49px !important; }
.ll-px-49px { padding-left: 49px !important; padding-right: 49px !important; }
.ll-py-49px { padding-top: 49px !important; padding-bottom: 49px !important; }
.ll-p-50px { padding: 50px !important; }
.ll-pt-50px { padding-top: 50px !important; }
.ll-pr-50px { padding-right: 50px !important; }
.ll-pb-50px { padding-bottom: 50px !important; }
.ll-pl-50px { padding-left: 50px !important; }
.ll-px-50px { padding-left: 50px !important; padding-right: 50px !important; }
.ll-py-50px { padding-top: 50px !important; padding-bottom: 50px !important; }
.ll-fs-1px { font-size: 1px !important; }
.ll-fs-2px { font-size: 2px !important; }
.ll-fs-3px { font-size: 3px !important; }
.ll-fs-4px { font-size: 4px !important; }
.ll-fs-5px { font-size: 5px !important; }
.ll-fs-6px { font-size: 6px !important; }
.ll-fs-7px { font-size: 7px !important; }
.ll-fs-8px { font-size: 8px !important; }
.ll-fs-9px { font-size: 9px !important; }
.ll-fs-10px { font-size: 10px !important; }
.ll-fs-11px { font-size: 11px !important; }
.ll-fs-12px { font-size: 12px !important; }
.ll-fs-13px { font-size: 13px !important; }
.ll-fs-14px { font-size: 14px !important; }
.ll-fs-15px { font-size: 15px !important; }
.ll-fs-16px { font-size: 16px !important; }
.ll-fs-17px { font-size: 17px !important; }
.ll-fs-18px { font-size: 18px !important; }
.ll-fs-19px { font-size: 19px !important; }
.ll-fs-20px { font-size: 20px !important; }
.ll-fs-21px { font-size: 21px !important; }
.ll-fs-22px { font-size: 22px !important; }
.ll-fs-23px { font-size: 23px !important; }
.ll-fs-24px { font-size: 24px !important; }
.ll-fs-25px { font-size: 25px !important; }
.ll-fs-26px { font-size: 26px !important; }
.ll-fs-27px { font-size: 27px !important; }
.ll-fs-28px { font-size: 28px !important; }
.ll-fs-29px { font-size: 29px !important; }
.ll-fs-30px { font-size: 30px !important; }
.ll-fs-31px { font-size: 31px !important; }
.ll-fs-32px { font-size: 32px !important; }
.ll-fs-33px { font-size: 33px !important; }
.ll-fs-34px { font-size: 34px !important; }
.ll-fs-35px { font-size: 35px !important; }
.ll-fs-36px { font-size: 36px !important; }
.ll-fs-37px { font-size: 37px !important; }
.ll-fs-38px { font-size: 38px !important; }
.ll-fs-39px { font-size: 39px !important; }
.ll-fs-40px { font-size: 40px !important; }
.ll-fs-41px { font-size: 41px !important; }
.ll-fs-42px { font-size: 42px !important; }
.ll-fs-43px { font-size: 43px !important; }
.ll-fs-44px { font-size: 44px !important; }
.ll-fs-45px { font-size: 45px !important; }
.ll-fs-46px { font-size: 46px !important; }
.ll-fs-47px { font-size: 47px !important; }
.ll-fs-48px { font-size: 48px !important; }
.ll-fs-49px { font-size: 49px !important; }
.ll-fs-50px { font-size: 50px !important; }
.ll-lh-1px { line-height: 1px !important; }
.ll-lh-2px { line-height: 2px !important; }
.ll-lh-3px { line-height: 3px !important; }
.ll-lh-4px { line-height: 4px !important; }
.ll-lh-5px { line-height: 5px !important; }
.ll-lh-6px { line-height: 6px !important; }
.ll-lh-7px { line-height: 7px !important; }
.ll-lh-8px { line-height: 8px !important; }
.ll-lh-9px { line-height: 9px !important; }
.ll-lh-10px { line-height: 10px !important; }
.ll-lh-11px { line-height: 11px !important; }
.ll-lh-12px { line-height: 12px !important; }
.ll-lh-13px { line-height: 13px !important; }
.ll-lh-14px { line-height: 14px !important; }
.ll-lh-15px { line-height: 15px !important; }
.ll-lh-16px { line-height: 16px !important; }
.ll-lh-17px { line-height: 17px !important; }
.ll-lh-18px { line-height: 18px !important; }
.ll-lh-19px { line-height: 19px !important; }
.ll-lh-20px { line-height: 20px !important; }
.ll-lh-21px { line-height: 21px !important; }
.ll-lh-22px { line-height: 22px !important; }
.ll-lh-23px { line-height: 23px !important; }
.ll-lh-24px { line-height: 24px !important; }
.ll-lh-25px { line-height: 25px !important; }
.ll-lh-26px { line-height: 26px !important; }
.ll-lh-27px { line-height: 27px !important; }
.ll-lh-28px { line-height: 28px !important; }
.ll-lh-29px { line-height: 29px !important; }
.ll-lh-30px { line-height: 30px !important; }
.ll-lh-31px { line-height: 31px !important; }
.ll-lh-32px { line-height: 32px !important; }
.ll-lh-33px { line-height: 33px !important; }
.ll-lh-34px { line-height: 34px !important; }
.ll-lh-35px { line-height: 35px !important; }
.ll-lh-36px { line-height: 36px !important; }
.ll-lh-37px { line-height: 37px !important; }
.ll-lh-38px { line-height: 38px !important; }
.ll-lh-39px { line-height: 39px !important; }
.ll-lh-40px { line-height: 40px !important; }
.ll-lh-41px { line-height: 41px !important; }
.ll-lh-42px { line-height: 42px !important; }
.ll-lh-43px { line-height: 43px !important; }
.ll-lh-44px { line-height: 44px !important; }
.ll-lh-45px { line-height: 45px !important; }
.ll-lh-46px { line-height: 46px !important; }
.ll-lh-47px { line-height: 47px !important; }
.ll-lh-48px { line-height: 48px !important; }
.ll-lh-49px { line-height: 49px !important; }
.ll-lh-50px { line-height: 50px !important; }

/* Gap Utilities */
.ll-gap-1px { gap: 1px !important; }
.ll-gap-2px { gap: 2px !important; }
.ll-gap-3px { gap: 3px !important; }
.ll-gap-4px { gap: 4px !important; }
.ll-gap-5px { gap: 5px !important; }
.ll-gap-6px { gap: 6px !important; }
.ll-gap-7px { gap: 7px !important; }
.ll-gap-8px { gap: 8px !important; }
.ll-gap-9px { gap: 9px !important; }
.ll-gap-10px { gap: 10px !important; }
.ll-gap-11px { gap: 11px !important; }
.ll-gap-12px { gap: 12px !important; }
.ll-gap-13px { gap: 13px !important; }
.ll-gap-14px { gap: 14px !important; }
.ll-gap-15px { gap: 15px !important; }
.ll-gap-16px { gap: 16px !important; }
.ll-gap-17px { gap: 17px !important; }
.ll-gap-18px { gap: 18px !important; }
.ll-gap-19px { gap: 19px !important; }
.ll-gap-20px { gap: 20px !important; }
.ll-gap-21px { gap: 21px !important; }
.ll-gap-22px { gap: 22px !important; }
.ll-gap-23px { gap: 23px !important; }
.ll-gap-24px { gap: 24px !important; }
.ll-gap-25px { gap: 25px !important; }
.ll-gap-26px { gap: 26px !important; }
.ll-gap-27px { gap: 27px !important; }
.ll-gap-28px { gap: 28px !important; }
.ll-gap-29px { gap: 29px !important; }
.ll-gap-30px { gap: 30px !important; }
.ll-gap-31px { gap: 31px !important; }
.ll-gap-32px { gap: 32px !important; }
.ll-gap-33px { gap: 33px !important; }
.ll-gap-34px { gap: 34px !important; }
.ll-gap-35px { gap: 35px !important; }
.ll-gap-36px { gap: 36px !important; }
.ll-gap-37px { gap: 37px !important; }
.ll-gap-38px { gap: 38px !important; }
.ll-gap-39px { gap: 39px !important; }
.ll-gap-40px { gap: 40px !important; }
.ll-gap-41px { gap: 41px !important; }
.ll-gap-42px { gap: 42px !important; }
.ll-gap-43px { gap: 43px !important; }
.ll-gap-44px { gap: 44px !important; }
.ll-gap-45px { gap: 45px !important; }
.ll-gap-46px { gap: 46px !important; }
.ll-gap-47px { gap: 47px !important; }
.ll-gap-48px { gap: 48px !important; }
.ll-gap-49px { gap: 49px !important; }
.ll-gap-50px { gap: 50px !important; }

/*
==============================================================================
PROJECT-SPECIFIC STYLES
==============================================================================
Add your custom styles below. This section is for project-specific overrides
that don't fit into the reusable template above.
*/

/* ===== CUSTOM PROJECT STYLES ===== */
/* Example: Dark theme body background */
.ll-bodybg {
    background: var(--bg-primary);
    font-family: var(--font-secondary);
    color: var(--text-secondary);
}

/* ===== HERO SECTION ===== */
#home {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Mobile First - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    /* Add small device styles here */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* Add medium device styles here */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Add large device styles here */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Add extra large device styles here */
}

/*
==============================================================================
HOW TO USE THIS TEMPLATE IN NEW PROJECTS:
==============================================================================

1. COPY this entire file to your new project
2. UPDATE the :root variables to match your brand
3. REMOVE unused sections to keep CSS clean
4. ADD your project-specific styles in the section above
5. IMPORT additional fonts if needed
6. CUSTOMIZE component styles as required

EXAMPLE WORKFLOW:
- Keep: Variables, Typography, Navigation, Utilities
- Remove: Unused component sections
- Add: Your custom components and overrides

This template ensures consistent design across all your projects!
==============================================================================
*/
.ll-navbar::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}
.ll-navbar {
    padding: 19px 0;
    border-bottom: 1px solid rgba(11, 6, 6, 0);
}

/* Mobile Navbar Full Window Styles */
@media (max-width: 991.98px) {
    body.navbar-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    .ll-navbar .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        z-index: 1050;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .ll-navbar .navbar-collapse.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .ll-navbar .navbar-nav {
width: 100%;
        max-width: 600px;
        text-align: center;
        padding: 2rem;
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: auto;
    }
    
    .ll-navbar .navbar-nav .nav-item {
        margin: 0;
        opacity: 0;
        transform: translateY(30px);
        animation: navItemFadeIn 0.6s ease forwards;
    }
    
    .ll-navbar .navbar-collapse.show .navbar-nav .nav-item:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .ll-navbar .navbar-collapse.show .navbar-nav .nav-item:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .ll-navbar .navbar-collapse.show .navbar-nav .nav-item:nth-child(3) {
        animation-delay: 0.3s;
    }
    
    .ll-navbar .navbar-collapse.show .navbar-nav .nav-item:nth-child(4) {
        animation-delay: 0.4s;
    }
    
    .ll-navbar .nav-link {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-secondary) !important;
        padding: 1rem 2rem !important;
        border-radius: 12px;
        transition: all 0.3s ease;
        display: inline-block;
        position: relative;
        overflow: hidden;
    }
    
    .ll-navbar .nav-link:hover,
    .ll-navbar .nav-link.active {
        color: var(--text-primary) !important;
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }
    
    .ll-navbar .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }
    
    .ll-navbar .nav-link:hover::before {
        left: 100%;
    }
    
    .ll-navbar .ll-btnlink:hover,
    .ll-navbar .ll-btnprimary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    /* Close button for mobile menu */
    .ll-navbar .navbar-collapse.show::before {
        content: '✕';
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 16px;
        color: var(--text-primary);
        cursor: pointer;
        z-index: 1052;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }
    
    .ll-navbar .navbar-collapse.show::before:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: rotate(90deg);
    }
}

@keyframes navItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.ll-bannertile {
    max-width: 904px;
    text-align: center;
    margin: 0 auto 23px auto;
    position: relative;
    z-index: 5;

    h1 {
        font-size: 64px;
        text-align: center;
        line-height: 76px;
        color: white;

    }

    @media (max-width: 768px) {
        h1 {
            font-size: 48px;
            line-height: 56px;
            margin: 0;
        }
    }

    @media (max-width: 576px) {
        h1 {
            font-size: 33px;
            line-height: 36px;
        }
    }

    p {
        font-family: Inter;
        margin: 20px 0 0;
        font-weight: 300;
    }
}
.ll-bannerwrapper{
    padding: 40px 20px 0;
}
.ll-gradient-text {
    background: linear-gradient(90deg, #0063E3 0%, #625AFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}
.ll-gradient-text-soft {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}
.ll-btnoutline {
    border: none;
    color: white;
    padding: 16px 36px;
    border-radius: var(--border-radius-lg);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    border: 1.4px solid white;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: middle;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: all 0.4s ease;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: visible; /* Changed from hidden to allow glow to show */
    background: transparent;
    z-index: 1;
}

.ll-btnoutline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(90deg, #0063E3, #625AFA);
    margin: -1.4px; /* Matches border width */
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ll-btnoutline:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(98, 90, 250, 0.6);
}

.ll-btnoutline:hover::before {
    opacity: 1;
}
.inline-flex {
    display: inline-flex;
}

.ll-link{
    color: #0063E3;
    text-decoration: none;
    font-weight: 500;
    line-height: 30px;
    font-size: 20px;
    font-family: var(--font-primary);
    
}
.ll-bannerdesc{
    position: relative;
    z-index: 2;
    p{
       color: var(--text-secondary);
       @media (max-width: 575px) {
              font-size:16px !important;
          }
    }
}
.ll-managesection{
    background: #0C0C0C;
    min-height: 703px;
}
.ll-bannerinfo {
    max-width: 1240px;
    display: flex;
     margin: -350px auto 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--font-primary);
    color: var(--text-secondary);
    font-weight: 500;
    padding: 60px;
    gap: 16px;
    background: linear-gradient(180deg, rgb(12 12 12) 0%, rgb(0 0 0) 100%);
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: rgba(248, 248, 248, 0.4);
    box-shadow: inset 0px 0.5px 0px rgba(255, 255, 255, 0.5);
    filter: drop-shadow(0px -2px 10px rgba(255, 255, 255, 0.3)) drop-shadow(0px -2px 40px rgba(255, 255, 255, 0.14));
    border-radius: 20px 20px 0px 0px;
     @media (max-width: 991px) {
         margin: -200px auto 0 auto;
     }
    @media (max-width: 640px) {
            margin: -290px auto 0 auto;
                padding: 20px;

    } 
    @media (max-width: 575px) {
            margin: -210px auto 0 auto;
    }
}
.ll-animation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(98, 90, 250, 0) 0%,
    rgba(0, 99, 227, 0.25) 35%,
    rgba(0, 99, 227, 1) 50%,
    rgba(98, 90, 250, 1) 55%,
    rgba(0, 99, 227, 0.25) 65%,
    rgba(98, 90, 250, 0) 100%
  );

  background-size: 400% 100%;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  filter:
    blur(0.4px)
    drop-shadow(0 0 10px rgba(98, 90, 250, 0.6))
    drop-shadow(0 0 20px rgba(0, 99, 227, 0.45));

  animation: border-glow 8s ease-in-out infinite;
}

@keyframes border-glow {
  0% {
    background-position: 0% 50%;
    opacity: 0.3;
    filter: blur(0.4px) drop-shadow(0 0 8px rgba(98, 90, 250, 0.4)) drop-shadow(0 0 16px rgba(0, 99, 227, 0.3));
  }
  25% {
    opacity: 0.6;
    filter: blur(0.4px) drop-shadow(0 0 12px rgba(98, 90, 250, 0.6)) drop-shadow(0 0 24px rgba(0, 99, 227, 0.4));
  }
  50% {
    background-position: 50% 50%;
    opacity: 0.8;
    filter: blur(0.4px) drop-shadow(0 0 16px rgba(98, 90, 250, 0.8)) drop-shadow(0 0 32px rgba(0, 99, 227, 0.5));
  }
  75% {
    opacity: 0.6;
    filter: blur(0.4px) drop-shadow(0 0 12px rgba(98, 90, 250, 0.6)) drop-shadow(0 0 24px rgba(0, 99, 227, 0.4));
  }
  100% {
    background-position: 100% 50%;
    opacity: 0.3;
    filter: blur(0.4px) drop-shadow(0 0 8px rgba(98, 90, 250, 0.4)) drop-shadow(0 0 16px rgba(0, 99, 227, 0.3));
  }
}

.ll-pubtitle{
    h2{
        font-family: var(--font-primary);
        font-weight: 600;
        font-size: 36px;
        line-height: 49px;
        background: linear-gradient(180deg, rgba(248, 248, 248, 0.9) 0%, rgba(248, 248, 248, 0.3) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom  : 19px;
        text-fill-color: transparent;
    }
    p{
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        font-family: var(--font-primary);
        margin-top: 19px;
       color: var(--text-secondary);
        margin: 0;
    }
    p + p {
        margin-top: 19px;
        margin-bottom: 0;
    }
}
.ll-managesection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
}

.ll-managesection img {
    width: 50%;
    max-width: 100%;
    max-height: 678px;
    height: auto;
    object-fit: contain;
}

.ll-pubtitle {
    width: 50%;
    padding: 0 20px;
}

.ll-pubtitle h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #f8f8f8;
}

.ll-pubtitle p {
    margin-bottom: 1.25rem;
    color: #9c9da1;
    line-height: 1.6;
}

.ll-sectionwrapper{
    padding: 80px 100px;
}
.ll-section-title{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    max-width: 1020px;
    gap: 24px;
    h2{
        font-family: var(--font-primary);
        font-style: normal;
        font-weight: 500;
        font-size: 48px;
        line-height: 64px;
        margin: 0;
    }
    p{
        margin: 0;
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: var(--text-secondary)

    }
}
.ll-tagline{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 19px;
max-width: fit-content;
border: 1.23818px solid #625AFA;
border-radius: 61.9089px;
font-family: var(--font-secondary);
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
}
.ll-helplist {
    flex: 1;
    > span{
        font-family: var(--font-primary);
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;
        color: var(--text-secondary);
        margin-top: 16px;
        display: inline-block;
    }
}

.ll-helplist ul {
    list-style: none;
    flex-direction: column;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 14px;
}

.ll-helplist li {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--text-secondary);
    position: relative;
    padding-left: 20px;
    list-style: none;
}
.ll-helplist li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 19px;
}
.ll-helplist h4 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 49px;
    color: #fff;
    margin: 0 0 19px 0;
}

.ll-helplist p {
    font-family: 'Gilroy-Medium', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #9C9DA1;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ll-helplist ul {
        grid-template-columns: 1fr;
    }
}

.ll-helpscontainer{
    display: flex;
    gap: 30px;
    position: relative;
    padding-top: 140px;
    .ll-imagesm{
        width: 212px;
        height: 111px;
        z-index: 1;
    }
    .ll-imagelg{
 width: 368px;
        height: 376px;
        z-index: auto;
        transform: translate(100px, -80px);
    }
}
.ll-helpimagecontainer{
    display: flex;
    position: relative;
    flex-direction: column;
    margin-top: -40px;
    width: max-content;
    margin: 0 auto;
}
.ll-helpimgwraper{
    flex: 1;
}
.ll-sectionbg{
    background: #0C0C0C;
}
.ll-teamcontainer{
    padding: 70px 30px;
    max-width: 1298px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
}
.ll-teamcontent {
    h2{
        font-family: var(--font-primary);
        font-weight: 500;
        font-size: 36px;
        line-height: 49px;
        color: #fff;
    }
    p{
        font-family: var(--font-primary);
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: var(--text-secondary);
        margin: 0 0 21px 0;
    }
}
.ll-getfeatures{
    display: flex;
    flex-direction: column;
    span{
         font-family: var(--font-primary);
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: var(--text-secondary);
        margin: 0 0 15px 0;
    }
}
.ll-getfeatureslist{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    li{
       width: fit-content;
        display: block;
        align-items: center;
        padding: 12px 34px;
        border-radius: 30px;
        font-family: var(--font-secondary);
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        border: 1px solid rgba(248, 248, 248, 0.4);
        color: var(--text-secondary);
        box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
        float: left;
        &:hover{
            background: #fff;
            color: #000000;
        }
    }
}
.ll-sectionmanagement{
display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 60px;
    gap: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    overflow: hidden;
    box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.45), 0 -2px 10px rgba(233, 223, 255, 0.3), 0 -2px 40px rgba(187, 155, 255, 0.15);
    border-radius: 20px;
    .ll-section-title{
        max-width: 770px;
    }
}
.ll-mamangementicon {
    padding: 0 25px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
    border-radius: 12px; 

    &:hover {
        transform: translateY(-5px); 

        h4 {
            color: white;
            
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.8),
                         0 0 12px rgba(255, 255, 255, 0.4);
        }
        
        
        img, i, svg {
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
        }
    }

    h4 {
        font-family: var(--font-primary);
        font-weight: 500;
        font-size: 16px;
        line-height: 26px;
        color: var(--text-secondary);
        margin-top: 20px;
        transition: all 0.3s ease;

        span {
            color: white;
        }
    }
}
/* Container Layout */
.ll-mamangementlisting {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    position: relative; /* Anchor for the horizontal line */
}

/* THE HORIZONTAL LINE (Added) */
.ll-mamangementlisting::before {
    content: "";
    position: absolute;
    top: 50%; /* Places the line exactly between the two rows */
    left: 5%;
    right: 5%;
    height: 1px;
    /* Fades out at the left and right edges */
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.12) 50%, 
        rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

/* Individual Item Styles */
.ll-mamangementlisting li {
    flex: 0 0 33.33%; /* Top row items take 1/3 width */
    position: relative;
    display: flex;
    justify-content: center;
    padding: 28px 0; /* Vertical spacing for the horizontal line */
}

/* VERTICAL LINES */
.ll-hasline::after {
    content: "";
    position: absolute;
    width: 1px;
    right: 0px;
    top: 11%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
}

/* Remove vertical line from 3rd item (end of top row) and last item */
.ll-mamangementlisting li:nth-child(3)::after,
.ll-mamangementlisting li:last-child::after {
    display: none;
}

/* Ensure a vertical line exists between the two bottom items */
.ll-mamangementlisting li:nth-child(4)::after {
    display: block;
}



.ll-mamangementicon img {
    margin-bottom: 20px;
    height: 40px; 
}

.ll-mamangementicon h4 {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #a1a1a1; /* Greyish secondary text */
    margin: 0;
}

/* Highlighted White Text */
.ll-mamangementicon h4 span {
    color: var(--text-management-span);
}

/* Responsive adjustment for the bottom row */
@media (min-width: 768px) {
    .ll-mamangementlisting li:nth-child(n+4) {
        flex: 0 0 29%; /* Slightly wider items for the 2-item bottom row */
    }
     .ll-lionzaylisting li:nth-child(n+4) {
        flex: 0 0 25%; /* Slightly wider items for the 2-item bottom row */
    }
}
.ll-analyticsimgwraper{
    flex: 1;
    display: flex;
    gap: 68px;
    justify-content: center;
    align-items: center;
}
.ll-managemntcarditem {
    width: 231px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90.49deg, #0063E3 -1.71%, #625AFA 93.27%);
    mix-blend-mode: normal;
    opacity: 0.71;
    border-radius: 8px;
    padding: 25px;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.5s ease, opacity 0.5s ease, background 0.5s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    h6 {
        font-family: var(--font-primary);
        font-weight: 500;
        font-size: 14px;
        line-height: 26px;
        color: white;
        transition: transform 0.5s ease;
    }
    img {
        transition: transform 0.5s ease;
    }
    &:hover {
        opacity: 1;
        background: linear-gradient(90.49deg, #625AFA -1.71%, #0063E3 93.27%);
        transform: translateY(-15px) rotateX(6deg) scale(1.03);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 99, 227, 0.4);
        img {
            transform: translateZ(40px);
        }
        h6 {
            transform: translateZ(20px);
        }
    }
}
.ll-managemntcards{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 49px;
}
.ll-bannerimage{
    position: relative;
    > img{
        max-width: fit-content;
        margin: 0 auto;
        display: flex;
        object-fit: cover;
        justify-content: center;
        align-items: center;
        @media (max-width: 991px) {
            max-width: 550px;
        }
         @media (max-width: 767px) {
            max-width: 550px;
        }
        @media (max-width: 575px) {
            max-width:440px;
        }
         @media (max-width: 480px) {
            max-width:340px;
        }
    }
}

.ll-powerfullcontent {
padding: 25px 50px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
mix-blend-mode: normal;
border-radius: 16px;
& > span{
       font-family: var(--font-primary);
        font-weight: 400;
        font-size: 18px;
        line-height: 150%;
        color: white;
        margin: 0 0 15px 0;
 }
 & > ul {
    margin-top: 16px;
 }
 & > p{
    margin: 16px 0 0;
 }
}

.ll-powerfullcontent ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    list-style: none;
    padding: 0;
}

.ll-powerfullcontent li {
    display: flex;
    align-items: flex-start; /* Aligns icon with the first line of text */
    gap: 15px; /* Space between icon and text */
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
}

.ll-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1px solid #333333;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 8px;
}
.ll-powerfullmedia{
    display: flex;
    align-items: center;
    gap: 35px;
}
.text-left{
    text-align: left !important;
}
.ll-sectionmanagementsm{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding: 34px 40px;
    gap: 10px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    overflow: hidden;
    box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.45), 0 -2px 10px rgba(233, 223, 255, 0.3), 0 -2px 40px rgba(187, 155, 255, 0.15);
    border-radius: 20px;
    > h3{
        margin: 6px 0 0;
        font-family: var(--font-primary);
        font-weight: 600;
        font-size: 24px;
        line-height: 150%;
        color: var(--text-secondary);
    }
    > p{
               margin: 0;
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: var(--text-secondary);
    }
}
.ll-perfectlist {

    padding: 0;
    list-style: none;
    display: flex;
    width: 100%;
    gap: 24px;
}

/* Row 1 Logic */
.ll-perfectlist li:nth-child(1) {
    /* Subtract the gap from the total width calculation */
    width: calc(40% - 12px); 
    flex-grow: 1;
}

.ll-perfectlist li:nth-child(2) {
    width: calc(60% - 12px);
    flex-grow: 1;
}



.ll-perfectlist ~ .ll-perfectlist li:nth-child(1) {
    width: calc(60% - 12px);
    flex-grow: 1;
}

.ll-perfectlist ~ .ll-perfectlist li:nth-child(2) {
    width: calc(40% - 12px);
    flex-grow: 1;
}

/* Ensure images/cards inside don't shrink weirdly */
.ll-perfectlist li {
    box-sizing: border-box;
}
.ll-perfectlistwrap{
    display: flex;
    flex-direction: column;
    gap: 33px;
        margin: 64px 0 0;
}
.ll-lionzaygivesyou{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &> p {
        margin-top: 60px;
        margin-bottom: 38px;

    }
}
.ll-lionzaylisting {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1260px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    position: relative;
    &> li {
    flex: 0 0 33.33%;
    position: relative;
    display: flex;
    justify-content: center;
    padding: 28px 0;
}
}
.ll-lionzaylisting::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}
/* Remove vertical line from 3rd item (end of top row) and last item */
.ll-lionzaylisting li:nth-child(3)::after,
.ll-lionzaylisting li:last-child::after {
    display: none;
}

/* Ensure a vertical line exists between the two bottom items */
.ll-lionzaylisting li:nth-child(4)::after {
    display: block;
}
.ll-easysteps{
        display: flex;
        padding: 20px;
        flex-direction: column;
        margin-top: 60px;
        &:hover {
    filter: brightness(85%); /* Slightly darkens the image */
    cursor: pointer;         /* Changes cursor to a hand */
}
        img {
            height: 360px;
            margin-bottom: 20px;
            width: 100%;
            object-fit: cover;
            border-radius: 20px 20px 0 0;
            transition: filter 0.3s ease, opacity 0.3s ease;
        }
    
        h3 {
            font-family: var(--font-primary);
            font-weight: 600;
            margin: 0;
            font-size: 24px;
            line-height: 150%;
            color: var(--text-secondary);
            padding-left: 20px;
            padding-right: 20px;
        }
    
        p {
            margin: 10px 0 0 ;
            font-family: var(--font-primary);
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;
            color: var(--text-secondary);
            padding-left: 20px;
            padding-right: 20px;
        }
}
.ll-easystepswrap {
    display: flex;
    gap: 56px;
    width: 100%; 

    > div { 
        flex: 1;          /* Grow and shrink equally */
        flex-basis: 0;    /* Ignore content size to ensure perfect equality */
        min-width: 0;     /* Prevents layout breaking if content is wide */
    }
}
.ll-stepscontent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 40px;
    max-width: 769px;
    margin: 42px auto 0;
    &>p{
        margin: 0;
    }
}
.ll-control {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.07) 100%);
    mix-blend-mode: normal;
    border-radius: 16px;
    padding: 40px;
    flex: 1;
    h3 {
        font-family: var(--font-primary);
        font-weight: 500;
        margin: 0;
        font-size: 32px;
        line-height: 39px;
        color: var(--text-secondary);
    }

    p {
        margin: 30px 0 0 ;
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: white;
    }
    .ll-getfeatureslist{
        margin-top: 34px;
        li{
            padding: 10px 34px;
            font-size: 16px;
        }
    }
}
.ll-controlitem{
    display: flex;
    gap: 40px;
    margin-top: 40px;
}
.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px; /* Space between links */
    list-style: none;
    margin: 0;
    padding: 36px 0 28px 0;
}

.footer-nav a {
    text-decoration: none;
    font-family: var(--font-secondary), sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    opacity: 0.9; /* Slightly dimmed by default */
    transition: all 0.3s ease;
}

/* Hover State */
.footer-nav a:hover {
    opacity: 1; /* Brightens on hover */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); /* Subtle glow effect */
}
.ll-footerwrsp{
    display: flex;
    padding: 50px 20px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 736px;
    margin: 0 auto;
    > span {
        font-size: 14px;
        line-height: 20px;
        font-family: var(--font-secondary);
        color: white;
        margin-top: 34px;
        display: block;
        text-align: center;
    }
}
.ll-socialslink{
    width: 100%;
    margin: 0;
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    li{
        padding: 10px;
    }
}
.ll-blureffect {
    position: relative;
    overflow: hidden; /* Keeps the massive glow from causing scrollbars */
}

.ll-blureffect::after {
    position: absolute;
    content: '';
    width: 1180px;
    height: 1180px;
   left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    
    /* Enhanced Gradient with a "core" glow */
    background: radial-gradient(
        circle at center, 
        rgba(0, 99, 227, 0.4) 0%, 
        rgba(0, 99, 227, 0.1) 40%, 
        rgba(0, 200, 255, 0.05) 70%, 
        transparent 100%
    );

    /* The Secret Sauce: Multiple animations */
    filter: blur(60px);
   
    /* Mix blend mode makes it react with content behind it */
    mix-blend-mode: screen; 
    transition: left 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
                top 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.ll-bannerwrapper.ll-blureffect::after{
    top: 0;

}
/* Responsive adjustments */
@media (max-width: 1100px) {
    .ll-powerfullcontent {
        padding: 20px;
    }

    .ll-powerfullcontent ul {
        grid-template-columns: auto;
    }
    .ll-easystepswrap{
        gap: 20px;
    }
}
@media (max-width: 991px) {
    .ll-tagline{
        font-size: 15px;
            line-height: 16px;

    }
    .ll-helpscontainer .ll-imagelg{
        transform: translate(0px);
    }
    .ll-managesection img{
        width: 100%;
    }
    .ll-lionzaylisting::before{
        display: none;
    }
    .ll-easysteps{
        margin-top: 0;
    }
    .ll-control{
        padding: 20px;
    }
    .ll-control {
        h3 {
            font-size: 25px;
            line-height: 29px;
        }
    }
    .footer-nav{
        gap: 20px;
    }
    .ll-easystepswrap {
        flex-wrap: wrap;
        flex-direction: column;
        >div {
            min-width: auto;
            padding: 10px 0;
        }
    }
.ll-easysteps {
    h3{
        padding: 0;
    }
    p{
        padding: 0;
    }
    }
    .ll-sectionwrapper {
        padding: 40px 20px;
    }

    .ll-section-title {
        max-width: 100%;
    }

    .ll-helpscontainer {
        flex-direction: column;
        padding-top: 50px;
    }

    .ll-managesection {
        flex-direction: column;
        text-align: center;
    }

    .ll-powerfullmedia {
        flex-direction: column;
    }

    .ll-managesection img {
        height: auto;
    }

    .ll-pubtitle {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        padding-bottom: 40px;

        .ll-link {
            text-align: center;
            width: max-content;
            margin: 0 auto;
        }
    }

    .ll-pubtitle {
        margin-top: 40px;
    }

    .ll-section-title {
        gap: 10px;

        h2 {
            font-size: 38px;
            line-height: 54px;
        }
    }
    .ll-controlitem{
        flex-direction: column;
    }
    .ll-teamcontainer {
        flex-direction: column;
        padding: 0 0;
    }

    .ll-teamwraper~.ll-teamwraper {
        order: -1;
        margin-top: 30px;
    }
    .ll-sectionmanagement{
        padding: 30px 20px;
    }
}
@media (max-width: 767px) {
    .ll-navbar .ll-btnprimary{
        padding: 0;
        background: transparent;
    }
    .ll-perfectlist{
        flex-direction: column;
    }
    .ll-analyticsimgwraper img{
        width: 100%;
        height: auto;
    }
    .ll-perfectlist ~ .ll-perfectlist li:nth-child(1),
    .ll-perfectlist ~ .ll-perfectlist li:nth-child(2),
    .ll-perfectlist li:nth-child(2),
    .ll-perfectlist li:nth-child(1){
        width: 100%;
    }
    .ll-helplist h4,
    .ll-teamcontent h2{
            font-size: 28px;
            line-height: 37px;
        
    } 
    .ll-section-title {
        h2 {
            font-size: 28px;
            line-height: 37px;
        }
    }

    .ll-lionzaylisting {
        &>li {
            flex: 0 0 auto;
        }
     
        .ll-lionzaylisting li:nth-child(4)::after{
            display: none;
        }
    }
    .ll-hasline::after {
        display: none !important;
    }
       .ll-mamangementlisting::before{
        display: none;
       }
       .ll-mamangementlisting li{
         flex: auto;
       }
       .ll-control .ll-getfeatureslist li,
       .ll-getfeatureslist {
            li {
                padding: 5px 23px;
                font-weight: 400;
                font-size: 14px;
                line-height: 22px;
            }
        }
}

/* For very small devices */
@media (max-width: 576px) {
    .ll-sectionmanagementsm{
        padding: 20px;
    }
    .ll-pubtitle h2 {
        font-size: 2rem;
    }
    .ll-teamwraper img{
        width: 100%;
        height: auto;
    }
    .ll-navbar {
    padding: 9px 0;
    }
}
@media (max-width: 480px) {
.ll-bannerinfo {
    margin: -110px auto 0 auto;
}
}
@media (max-width: 480px) {
    .ll-bannerimage {
        & > img{
            max-width: 270px;
        } 
    }
}

/* ==============================================================================
   LIGHT MODE IMPLEMENTATION
   ==============================================================================
   To activate light mode, add class "light-mode" to the <html> or <body> tag.
   Example: <html class="light-mode"> or <body class="light-mode">
   ============================================================================== */

[data-theme="light"] {
    /* ===== BACKGROUND COLORS (Light Mode) ===== */
    --bg-primary: #FFFFFF;            /* Primary background (white) */
    --bg-secondary: #F8F8F8;          /* Secondary background (light gray) */
    --bg-section: #F5F5F5;            /* Section background */
    --bg-banner: transparent;         /* Banner background */
    --bg-card: rgba(0, 0, 0, 0.03);   /* Card background */
    --bg-hover: rgba(0, 0, 0, 0.05);  /* Hover background */

    /* ===== TEXT COLORS (Light Mode) ===== */
    --text-primary: #000000;          /* Primary text (black) */
    --text-secondary: #4A4A4A;        /* Secondary text (dark gray) */
    --text-muted: #6c757d;            /* Muted text */
    --text-dark: #212529;             /* Dark text */
    --text-link: #0063E3;             /* Link color (same) */
    --text-highlight: #000000;        /* Highlighted/emphasized text (black) */
    --text-management-span: #000000;  /* Management icon span text color (black in light mode) */

    /* ===== BORDER COLORS (Light Mode) ===== */
    --border-color: rgba(0, 0, 0, 0.12); /* Border color */
    --border-color-strong: rgba(0, 0, 0, 0.2); /* Strong border */

    /* ===== GRADIENT COLORS (Light Mode - same) ===== */
    --gradient-primary-start: #0063E3;  /* Gradient start */
    --gradient-primary-end: #625AFA;    /* Gradient end */

    /* ===== BODY BACKGROUND ===== */
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Light Mode - Management Icon Images Invert Filter */
[data-theme="light"] .ll-mamangementicon img {
    filter: invert(1) !important;
}

/* Light Mode - Easy Steps Images Invert Filter */
[data-theme="light"] .ll-easysteps img {
    filter: invert(1) !important;
}

/* Light Mode - Analytics Image Wrapper Invert Filter */
[data-theme="light"] .ll-analyticsimgwraper img {
    filter: invert(1) !important;
}

/* Light Mode - Team Wrapper Images Invert Filter */
[data-theme="light"] .ll-teamwraper img {
    filter: invert(1) !important;
}

/* Light Mode - Help Image Container Invert Filter */
[data-theme="light"] .ll-helpimagecontainer img {
    filter: invert(1) !important;
}

/* Light Mode - Body Background */
[data-theme="light"] .ll-bodybg {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Light Mode - Banner Wrapper */
[data-theme="light"] .ll-bannerwrapper {
    background: var(--bg-banner);
}

/* Light Mode - Section Backgrounds */
[data-theme="light"] .ll-sectionbg,
[data-theme="light"] .ll-managesection {
    background: var(--bg-section) !important;
}

/* Light Mode - Banner Info Card */
[data-theme="light"] .ll-bannerinfo {
    background: linear-gradient(180deg, rgb(248, 248, 248) 0%, rgb(255, 255, 255) 100%) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: inset 0px 0.5px 0px rgba(0, 0, 0, 0.1), 0px -2px 10px rgba(0, 0, 0, 0.05), 0px -2px 40px rgba(0, 0, 0, 0.02) !important;
}

/* Light Mode - Gradient Text (Soft) */
[data-theme="light"] .ll-gradient-text-soft {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Light Mode - Text Colors */
[data-theme="light"] .ll-bannerdesc p,
[data-theme="light"] .ll-pubtitle p,
[data-theme="light"] .ll-section-title p,
[data-theme="light"] .ll-helplist span,
[data-theme="light"] .ll-helplist li,
[data-theme="light"] .ll-helplist p,
[data-theme="light"] .ll-teamcontent p,
[data-theme="light"] .ll-getfeatures span,
[data-theme="light"] .ll-mamangementicon h4,
[data-theme="light"] .ll-easysteps h3,
[data-theme="light"] .ll-easysteps p,
[data-theme="light"] .ll-control h3,
[data-theme="light"] .ll-control p,
[data-theme="light"] .ll-sectionmanagementsm h3,
[data-theme="light"] .ll-sectionmanagementsm p {
    color: var(--text-secondary) !important;
}

/* Light Mode - Headings */
[data-theme="light"] .ll-helplist h4,
[data-theme="light"] .ll-teamcontent h2,
[data-theme="light"] .ll-pubtitle h2,
[data-theme="light"] .ll-section-title h2 {
    color: var(--text-primary) !important;
}

/* Light Mode - Navbar */
[data-theme="light"] .ll-navbar::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0) 100%) !important;
}

[data-theme="light"] .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

/* Light Mode - Mobile Navbar */
[data-theme="light"] .ll-navbar .navbar-collapse {
    background: rgba(255, 255, 255, 0.98) !important;
}

[data-theme="light"] .ll-navbar .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .ll-navbar .navbar-nav {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .ll-navbar .nav-link:hover,
[data-theme="light"] .ll-navbar .nav-link.active {
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Light Mode - Buttons */
[data-theme="light"] .ll-btnoutline {
    color: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
}

[data-theme="light"] .ll-btnoutline:hover {
    color: white !important;
}

[data-theme="light"] .ll-btnlink {
    color: var(--text-link) !important;
}

/* Light Mode - Link */
[data-theme="light"] .ll-link {
    color: var(--text-link) !important;
}

/* Light Mode - Cards and Containers */
[data-theme="light"] .ll-powerfullcontent,
[data-theme="light"] .ll-sectionmanagement,
[data-theme="light"] .ll-sectionmanagementsm,
[data-theme="light"] .ll-control {
    background: var(--bg-card) !important;
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1), 0 -2px 10px rgba(0, 0, 0, 0.05), 0 -2px 40px rgba(0, 0, 0, 0.02) !important;
}

/* Light Mode - Feature Lists */
[data-theme="light"] .ll-getfeatureslist li {
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-secondary) !important;
    box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .ll-getfeatureslist li:hover {
    background: var(--text-primary) !important;
    color: var(--bg-primary) !important;
}

/* Light Mode - Tagline */
[data-theme="light"] .ll-tagline {
    border-color: var(--gradient-primary-end) !important;
    color: var(--text-primary) !important;
}

/* Light Mode - Management Cards */
[data-theme="light"] .ll-managemntcarditem h6 {
    color: #ffffff !important; /* Keep white on gradient cards */
}

/* Light Mode - Horizontal Lines */
[data-theme="light"] .ll-mamangementlisting::before,
[data-theme="light"] .ll-lionzaylisting::before,
[data-theme="light"] .ll-hasline::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Light Mode - Footer */
[data-theme="light"] .footer-nav a {
    color: var(--text-primary) !important;
}

[data-theme="light"] .ll-footerwrsp span {
    color: var(--text-primary) !important;
}

/* Light Mode - Icon Container */
[data-theme="light"] .ll-icon {
    border-color: rgba(0, 0, 0, 0.2) !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: var(--text-primary) !important;
}

/* Light Mode - Powerfull Content */
[data-theme="light"] .ll-powerfullcontent > span,
[data-theme="light"] .ll-powerfullcontent li {
    color: var(--text-primary) !important;
}

/* Light Mode - Easy Steps */
[data-theme="light"] .ll-easysteps:hover {
    filter: brightness(1.1) !important;
}

/* Light Mode - Blur Effect */
[data-theme="light"] .ll-blureffect::after {
    /* Enhanced Light Mode Glow - Multiple layers for depth */
    background: radial-gradient(circle at center, rgba(0, 99, 227, 0.15) 0%, rgb(0 99 227 / 87%) 30%, rgba(98, 90, 250, 0.06) 50%, rgba(0, 200, 255, 0.04) 70%, transparent 100%) !important;

    /* Light mode specific blend mode */
    mix-blend-mode: overlay !important;

    /* Enhanced filter for light mode */
    filter: blur(50px) !important;
}

[data-theme="light"] .ll-bannerwrapper.ll-blureffect::after {
    /* Banner-specific positioning for light mode */
    top: 0 !important;
}

/* Light Mode - Animation Border */
[data-theme="light"] .ll-animation::before {
    background: linear-gradient(
        90deg,
        rgba(98, 90, 250, 0) 0%,
        rgba(0, 99, 227, 0.3) 35%,
        rgba(0, 99, 227, 1) 50%,
        rgba(98, 90, 250, 1) 55%,
        rgba(0, 99, 227, 0.3) 65%,
        rgba(98, 90, 250, 0) 100%
    ) !important;
    
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    
    filter:
        blur(0.4px)
        drop-shadow(0 0 8px rgba(0, 99, 227, 0.4))
        drop-shadow(0 0 16px rgba(98, 90, 250, 0.3)) !important;
}



/* Light Mode - Management Icon Span */
[data-theme="light"] .ll-mamangementicon h4 span {
    color: var(--text-management-span) !important;
}

/* Light Mode - Management Icon Hover */
[data-theme="light"] .ll-mamangementicon:hover h4 {
    color: var(--text-primary) !important;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .ll-mamangementicon:hover h4 span {
    color: var(--text-management-span) !important;
}


/* Light Mode - Pub Title Gradient */
[data-theme="light"] .ll-pubtitle h2 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}