/* Simplified Layout CSS */

:root{
    --font-sans: "Peyda", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --bg:#0f0c29;
    --panel:rgba(255, 255, 255, 0.06);
    --ink:#ffffff;
    --ink-2:rgba(255, 255, 255, 0.8);
    --brand:#5b43ea;
    --danger:#f59e0b;
    --purple:#6f42c1;
    --gold:#f59f00;
    --success:#26c281;
    --info:#3b82f6;
    --warning:#ffb020;
    --accent:rgba(255, 255, 255, 0.1);
    --radius:16px;
    --radius-sm:12px;
    --shadow-sm:0 4px 12px rgba(0,0,0,.3);
    --shadow-md:0 8px 24px rgba(0,0,0,.4);
    
    /* Active state variables */
    --active-bg: rgba(91,67,234,.15);
    --active-border: var(--brand);
    --active-shadow: 0 0 0 1px rgba(91,67,234,.3);
    
    /* Service Card Colors */
    --card-bg: rgba(15, 12, 41, 0.85);
    --card-bg-hover: rgba(15, 12, 41, 0.95);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.65);
    
    /* Interactive Elements */
    --interactive-bg: rgba(255, 255, 255, 0.02);
    --interactive-bg-hover: rgba(255, 255, 255, 0.04);
    --interactive-border: rgba(255, 255, 255, 0.08);
    --interactive-border-hover: rgba(255, 255, 255, 0.12);
    
    /* Basic Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    
    /* Basic Shadows */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.2);
    
    /* Status Colors */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-info: #3b82f6;
    
    /* Typography Scale */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    
    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    
    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    
    /* Responsive heading scale */
    --heading-1: clamp(24px, 2.6vw + 8px, 34px);
    --heading-2: clamp(20px, 2.2vw + 6px, 28px);
    --heading-3: clamp(18px, 1.8vw + 4px, 22px);
    --heading-4: clamp(16px, 1.6vw + 2px, 18px);
    --heading-5: clamp(14px, 1.2vw + 2px, 16px);
    --heading-6: clamp(13px, 1vw + 1px, 14px);
}




*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background: #1f1a38;
    line-height:1.6;
    position: relative;
    overflow-x: hidden;
}

/* Apply font to all text elements */
h1,h2,h3,h4,h5,h6,p,a,li,label,small,strong,em,span,div{font-family:var(--font-sans)}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}

/* Ensure font is applied to all interactive elements */
button, input, select, textarea, label, a, span, div, p, h1, h2, h3, h4, h5, h6, li, ul, ol, table, th, td, caption, blockquote, cite, code, pre, kbd, samp, var, mark, time, small, sub, sup, b, i, u, s, del, ins, abbr, acronym, dfn, em, strong, q, code, pre, tt, kbd, samp, var, mark, time, small, sub, sup, b, i, u, s, del, ins, abbr, acronym, dfn, em, strong, q {
    font-family: var(--font-sans) !important;
}

/* Global responsive headings */
h1,h2,h3,h4,h5,h6{
    color: var(--text-primary);
    margin: 0 0 var(--space-md);
    text-wrap: balance;
}

h1{font-size:var(--heading-1);line-height:var(--leading-snug);font-weight:800}
h2{font-size:var(--heading-2);line-height:var(--leading-snug);font-weight:800}
h3{font-size:var(--heading-3);line-height:var(--leading-normal);font-weight:700}
h4{font-size:var(--heading-4);line-height:var(--leading-normal);font-weight:700}
h5{font-size:var(--heading-5);line-height:var(--leading-relaxed);font-weight:600}

/* Utility class to hide horizontal scrollbars */
.hide-horizontal-scroll {
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-horizontal-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Alternative class for specific elements that need horizontal scroll but hidden scrollbar */
.scroll-horizontal-hidden {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-horizontal-hidden::-webkit-scrollbar {
    display: none;
}


.carousel-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(91, 67, 234, 0.8), rgba(124, 92, 240, 0.8), transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(91, 67, 234, 0.4);
  }