html, body { /* Use `clip` instead of `hidden`: clipping prevents horizontal scroll like `hidden` does, but — crucially — does NOT create a scroll container. A scroll container on would break `position: sticky` on the header wrapper (sticky would stick within body's scrollport instead of the viewport). `clip` keeps the header pinned on scroll. */ overflow-x: clip !important; max-width: 100% !important; } :root { /* Brand Colors */ --bruntab-red: #F20000; --bruntab-blue: #00378B; --bruntab-warm-grey: #AAA096; /* Semantic Colors */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-dark: #1a1e2d; --text-primary: #2d3748; --text-secondary: #4a5568; --text-light: #e2e8f0; --brand-text-color: var(--bruntab-blue); --brand-link-color: var(--bruntab-blue); /* Typography */ --font-fa: 'Vazirmatn', Tahoma, sans-serif; --font-en: 'Inter', Roboto, sans-serif; /* Unified fluid type scale (clamp = responsive, no media-query drift). Sizes flow from a small mobile floor to a large desktop ceiling so headings scale smoothly without snapping at fixed breakpoints. */ --fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); --fs-h1: clamp(1.9rem, 1.45rem + 1.8vw, 2.6rem); --fs-h2: clamp(1.55rem, 1.25rem + 1.2vw, 2.05rem); --fs-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.5rem); --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); --fs-h5: 1.1rem; --fs-body: clamp(0.95rem, 0.92rem + 0.12vw, 1.02rem); --fs-body-sm: 0.9rem; --fs-caption: 0.8rem; --fs-micro: 0.75rem; /* Standardized line heights */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.55; --lh-loose: 1.65; /* Effects & Transitions */ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --shadow-hover: 0 25px 35px -5px rgba(0, 55, 139, 0.15); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --radius: 8px; --radius-lg: 16px; --card-bg: #ffffff; --header-bg: rgba(255, 255, 255, 0.85); --border-color: rgba(0,0,0,0.05); /* Advanced Tokens */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.3); --glow-shadow: 0 0 20px rgba(0, 55, 139, 0.4); } [data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-dark: #0b1120; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-light: #94a3b8; --brand-text-color: #60a5fa; --brand-link-color: #93c5fd; --card-bg: #1e293b; --header-bg: rgba(15, 23, 42, 0.95); --border-color: rgba(255,255,255,0.05); --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5); --shadow-hover: 0 25px 35px -5px rgba(242, 0, 0, 0.15); /* Advanced Tokens */ --glass-bg: rgba(15, 23, 42, 0.75); --glass-border: rgba(255, 255, 255, 0.05); --glow-shadow: 0 0 20px rgba(242, 0, 0, 0.3); } /* Base Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Form elements default to a system font (Tahoma/Arial) instead of the body font. Force them to inherit so FA/EN typography stays consistent on buttons, inputs, textareas and selects site-wide. */ button, input, textarea, select, optgroup { font-family: inherit; font-size: inherit; } /* Responsive media: never let images/video/iframe overflow their container. SVG icons are excluded (they use explicit width/height attributes). */ img, video, iframe { max-width: 100%; height: auto; } html { scroll-behavior: smooth; overflow-x: clip; } body { background-color: var(--bg-primary); color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-loose); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .sticky-header-wrapper { position: sticky; top: 0; z-index: 1000; width: 100%; } /* Typography switching based on lang */ body.lang-fa { font-family: var(--font-fa); } body.lang-en { font-family: var(--font-en); } a { color: var(--brand-link-color); text-decoration: none; transition: var(--transition); } a:hover { color: var(--bruntab-red); } ul { list-style: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ==================================================== BUTTONS ==================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 2px solid transparent; position: relative; overflow: hidden; z-index: 1; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.1); transform: translate(-50%, -50%) scale(0); border-radius: 50%; transition: transform 0.6s ease-out; z-index: -1; } .btn:hover::after { transform: translate(-50%, -50%) scale(1); } .btn-primary { background-color: var(--bruntab-blue); color: white; box-shadow: 0 4px 15px rgba(0, 55, 139, 0.2); } .btn-primary:hover { background-color: var(--bruntab-red); color: white; transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 25px rgba(242, 0, 0, 0.3); } @keyframes pulse-btn { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 0, 0, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(242, 0, 0, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 0, 0, 0); } } .btn-animated-pulse { animation: pulse-btn 2s infinite; } .btn-secondary { background-color: var(--bruntab-warm-grey); color: white; } .btn-secondary.outline { background-color: transparent; border-color: white; color: white; } .btn-secondary.outline:hover { background-color: white; color: var(--bruntab-blue); } .btn-light { background-color: white; color: var(--bruntab-blue); } .btn-light:hover { background-color: var(--bg-secondary); } .btn-link { color: var(--bruntab-red); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .btn-link:hover { color: var(--bruntab-blue); transform: translateX(calc(-1 * 5px)); /* RTL logic, will need adjustments */ } html[dir="ltr"] .btn-link:hover { transform: translateX(5px); } /* ==================================================== HEADER & NAVIGATION ==================================================== */ .top-bar { background-color: var(--bruntab-blue) !important; color: var(--text-light); font-size: var(--fs-caption); padding: 8px 0; } .top-bar-inner { display: flex; justify-content: space-between; align-items: center; } .contact-info { display: flex; gap: 20px; } .contact-item { color: var(--text-light); display: flex; align-items: center; gap: 6px; } .lang-switcher { display: flex !important; align-items: center !important; gap: 4px !important; } .lang-switcher a { color: var(--bruntab-warm-grey); } .lang-switcher a.active, .lang-switcher a:hover { color: white; } .lang-switcher .separator { margin: 0 8px; color: var(--bruntab-warm-grey); } .main-header { background: #f1f1f1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--border-color); } .nav-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; } .logo img { height: 40px; } .nav-menu { display: flex; align-items: center; gap: 24px; } .nav-menu > li > a { color: var(--text-primary) !important; font-weight: 700 !important; font-size: var(--fs-body-sm); padding: 8px 18px !important; border-radius: 50px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-block !important; position: relative; } .nav-menu > li > a:hover { background: #ffffff !important; color: var(--bruntab-blue) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; } .nav-menu > li > a::after { display: none !important; /* Hide old bottom underline */ } .has-dropdown { position: relative; } .caret { font-size: var(--fs-micro); margin-inline-start: 4px; transition: var(--transition); } /* Premium Split Dropdowns with Illustrations */ .dropdown-split-layout { position: absolute !important; top: 100% !important; inset-inline-start: 0 !important; display: flex !important; flex-direction: row !important; min-width: 520px !important; padding: 0 !important; overflow: hidden !important; border-radius: var(--radius-lg) !important; background: #ffffff !important; border-top: 4px solid var(--bruntab-blue) !important; box-shadow: var(--shadow-lg) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: var(--transition) !important; z-index: 100 !important; pointer-events: none !important; /* Prevents interaction when hidden */ } .has-dropdown:hover > .dropdown-split-layout { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; /* Enable interaction when shown */ } /* Mirror direction automatically in Persian RTL layout */ html[dir="rtl"] .dropdown-split-layout { flex-direction: row-reverse !important; } .dropdown-image-side { width: 200px !important; min-width: 200px !important; position: relative !important; overflow: hidden !important; /* Elegant blueprint grid placeholder background (matching Hero cover) */ background-color: #f1f5f9 !important; background-image: radial-gradient(circle at 10% 20%, rgba(0, 55, 139, 0.05) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(242, 0, 0, 0.04) 0%, transparent 40%), linear-gradient(rgba(0, 55, 139, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 55, 139, 0.04) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px !important; background-position: center !important; } [data-theme="dark"] .dropdown-image-side { background-color: #070a13 !important; background-image: radial-gradient(circle at 10% 20%, rgba(96, 165, 250, 0.12) 0%, transparent 45%), radial-gradient(circle at 90% 80%, rgba(239, 68, 68, 0.08) 0%, transparent 45%), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px !important; background-position: center !important; } .dropdown-links-side { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; padding: 15px 10px !important; margin: 0 !important; list-style: none !important; } .dropdown-links-side li { width: 100% !important; } .dropdown-links-side li a { display: block !important; border-bottom: none !important; padding: 10px 20px !important; font-weight: 700 !important; color: var(--text-slate-700) !important; transition: var(--transition) !important; font-size: var(--fs-body-sm) !important; } .dropdown-links-side li a:hover { background-color: var(--neutral-100) !important; color: var(--bruntab-blue) !important; border-radius: 8px !important; padding-inline-start: 25px !important; } /* ==================================================== MODERN GROUPED MEGA MENU PANELS ==================================================== */ .dropdown-mega-layout { min-width: 820px !important; /* Expanded wide panel size for 2 columns */ left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(10px) !important; /* Center align relative to parent menu item */ } /* Solutions mega menu: slightly wider than the other two */ .dropdown-mega-wide { min-width: 920px !important; } /* Ensure the center alignment persists during hover translation animation */ .has-dropdown:hover > .dropdown-mega-layout { transform: translateX(-50%) translateY(0) !important; } .dropdown-mega-columns { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; padding: 24px !important; flex-grow: 1 !important; list-style: none !important; margin: 0 !important; } .mega-column { display: flex !important; flex-direction: column !important; } .mega-column-title { font-size: var(--fs-body-sm) !important; font-weight: 800 !important; color: var(--bruntab-blue) !important; margin-bottom: 12px !important; padding-bottom: 6px !important; border-bottom: 1px solid rgba(0, 55, 139, 0.08) !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; font-family: inherit !important; } [data-theme="dark"] .mega-column-title { color: #60a5fa !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } .mega-column-links { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .mega-column-links li { width: 100% !important; } .mega-column-links li a { display: block !important; padding: 8px 12px !important; font-size: var(--fs-caption) !important; font-weight: 700 !important; color: var(--text-slate-700) !important; text-decoration: none !important; transition: all 0.2s ease !important; border-radius: 6px !important; white-space: nowrap !important; /* Force subitem contents on a single line on desktop */ } .mega-column-links li a:hover { background-color: var(--neutral-100) !important; color: var(--bruntab-blue) !important; padding-inline-start: 16px !important; } [data-theme="dark"] .mega-column-links li a { color: #cbd5e1 !important; } [data-theme="dark"] .mega-column-links li a:hover { background-color: #1e293b !important; color: #60a5fa !important; } /* Consumption Management Platform Callout Card */ .platform-callout-card { transition: all 0.3s ease !important; } .platform-callout-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0, 55, 139, 0.04) !important; border-color: rgba(0, 55, 139, 0.18) !important; } [data-theme="dark"] .platform-callout-card { background: rgba(255, 255, 255, 0.02) !important; border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .platform-callout-card:hover { border-color: rgba(96, 165, 250, 0.25) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important; } .platform-link-btn { border-radius: 50px !important; transition: all 0.2s ease !important; } .platform-link-btn:hover { background: #002c73 !important; /* Darker blue */ transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 55, 139, 0.15) !important; } [data-theme="dark"] .platform-link-btn { background: #60a5fa !important; color: #0f172a !important; } [data-theme="dark"] .platform-link-btn:hover { background: #3b82f6 !important; box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25) !important; } /* Sub-dropdowns */ .dropdown-links-side .has-sub-dropdown { position: relative !important; } .dropdown-links-side .sub-dropdown { position: absolute !important; top: 0 !important; inset-inline-start: 100% !important; min-width: 240px !important; background: #ffffff !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(10px) !important; transition: var(--transition) !important; border-top: 3px solid var(--bruntab-red) !important; padding: 10px 0 !important; z-index: 110 !important; } .dropdown-links-side .has-sub-dropdown:hover > .sub-dropdown { opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; } /* Simple Dropdowns styling */ .dropdown-links-simple { position: absolute !important; top: 100% !important; inset-inline-start: 0 !important; min-width: 320px !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: var(--transition) !important; border-top: 4px solid var(--bruntab-blue) !important; padding: 15px 10px !important; z-index: 100 !important; pointer-events: none !important; } [data-theme="dark"] .dropdown-links-simple { background: #0f172a !important; border-top-color: var(--bruntab-blue) !important; } .has-dropdown:hover > .dropdown-links-simple { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; } .dropdown-links-simple ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .dropdown-links-simple ul li { width: 100% !important; } .dropdown-links-simple ul li a { display: block !important; padding: 10px 20px !important; font-weight: 700 !important; color: var(--text-slate-700) !important; transition: var(--transition) !important; font-size: var(--fs-body-sm) !important; border-bottom: none !important; } [data-theme="dark"] .dropdown-links-simple ul li a { color: #cbd5e1 !important; } .dropdown-links-simple ul li a:hover { background-color: var(--neutral-100) !important; color: var(--bruntab-blue) !important; border-radius: 8px !important; padding-inline-start: 25px !important; } [data-theme="dark"] .dropdown-links-simple ul li a:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; } /* Legacy simple dropdowns styling if any exist */ .dropdown:not(.dropdown-split-layout) { position: absolute; top: 100%; inset-inline-start: 0; min-width: 260px; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); padding: 10px 0; z-index: 100; border-top: 3px solid var(--bruntab-blue); } .mega-menu { position: absolute; top: 100%; left: 0; width: 100vw; background: var(--card-bg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); z-index: 100; border-top: 3px solid var(--bruntab-blue); padding: 0; } .mega-menu-item { position: static; } .mega-menu-inner { display: flex; justify-content: space-between; padding: 40px 20px; gap: 30px; } .mega-col { flex: 1; } .mega-col h4 { color: var(--bruntab-red); margin-bottom: 20px; font-size: var(--fs-h5); border-bottom: 1px solid var(--bg-secondary); padding-bottom: 10px; } .mega-col ul li a { display: block; padding: 8px 0; color: var(--text-secondary); transition: var(--transition); } .mega-col ul li a:hover { color: var(--bruntab-blue); padding-inline-start: 10px; } .has-dropdown:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown:not(.dropdown-split-layout):not(.mega-menu) li a { display: block; padding: 10px 20px; color: var(--text-secondary); font-size: var(--fs-body-sm); border-bottom: 1px solid var(--bg-secondary); } .dropdown:not(.dropdown-split-layout):not(.mega-menu) li:last-child a { border-bottom: none; } .dropdown:not(.dropdown-split-layout):not(.mega-menu) li a:hover { background-color: var(--bg-secondary); color: var(--bruntab-red); padding-inline-start: 25px; } /* Fallback sub-dropdowns */ .dropdown:not(.dropdown-split-layout) .sub-dropdown { position: absolute; top: 0; inset-inline-start: 100%; min-width: 240px; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateX(10px); transition: var(--transition); border-top: 3px solid var(--bruntab-red); } .dropdown:not(.dropdown-split-layout) .has-sub-dropdown:hover > .sub-dropdown { opacity: 1; visibility: visible; transform: translateX(0); } .mobile-menu-toggle { display: none; background: transparent; border: none; flex-direction: column; gap: 5px; cursor: pointer; } .mobile-menu-toggle span { width: 25px; height: 3px; background: var(--bruntab-blue); transition: var(--transition); } .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .back-to-top { position: fixed; bottom: 30px; inset-inline-start: 30px; background-color: var(--bruntab-red); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: var(--fs-h3); box-shadow: var(--shadow-lg); cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transition: var(--transition); border: none; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { background-color: var(--bruntab-blue); transform: translateY(-5px); } html[dir="ltr"] .back-to-top { inset-inline-start: 30px; inset-inline-end: auto; } /* ==================================================== TYPOGRAPHY & SECTIONS ==================================================== */ section { padding: 80px 0; } .section-header { margin-bottom: 50px; } .section-title { font-size: var(--fs-h1); font-weight: 700; color: var(--brand-text-color); margin-bottom: 10px; } .section-subtitle { color: var(--text-secondary); font-size: var(--fs-h5); } .brand-text { color: var(--bruntab-red); } .text-center { text-align: center; } .text-start { text-align: start; } .bg-light { background-color: var(--bg-secondary); } .divider { display: inline-flex; align-items: center; margin-top: 15px; } .line { height: 3px; display: block; border-radius: 3px; } .red-line { width: 30px; background-color: var(--bruntab-red); margin-inline-end: 5px; } .blue-line { width: 60px; background-color: var(--bruntab-blue); } /* ==================================================== HERO SECTION ==================================================== */ .hero-section { padding: 0; height: 85vh; min-height: 600px; max-height: 800px; position: relative; background-color: var(--bg-dark); } .hero-slider { width: 100%; height: 100%; position: relative; overflow: hidden; } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 1s ease-in-out, transform 8s linear; transform: scale(1); } .hero-slide.active { opacity: 1; visibility: visible; transform: scale(1.05); /* Ken Burns effect */ z-index: 1; } .slider-controls { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 50px; transform: translateY(-50%); z-index: 10; } .slider-prev, .slider-next { background: rgba(255,255,255,0.2); border: none; color: white; font-size: var(--fs-h2); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .slider-prev:hover, .slider-next:hover { background: var(--bruntab-blue); } .slider-indicators { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: var(--transition); } .dot.active { background: var(--bruntab-red); width: 24px; border-radius: 6px; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 55, 139, 0.7), rgba(0, 55, 139, 0.2)); z-index: 1; } html[dir="rtl"] .hero-overlay { background: linear-gradient(to left, rgba(0, 55, 139, 0.7), rgba(0, 55, 139, 0.2)); } .hero-content { position: relative; z-index: 2; color: white; } .hero-text { max-width: 600px; animation: slideUp 1s ease-out forwards; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero-text h1 { font-size: var(--fs-display); line-height: 1.2; margin-bottom: 20px; font-weight: 800; } .hero-text .highlight { color: var(--bruntab-red); } .hero-desc { font-size: var(--fs-h4); margin-bottom: 40px; opacity: 0.9; } .hero-actions { display: flex; gap: 15px; } /* ==================================================== CORE SERVICES ==================================================== */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; } .service-card { background: var(--card-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition); border: 1px solid var(--border-color); } .hover-lift:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); } .card-img-wrapper { height: 250px; overflow: hidden; } .card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .service-card:hover .card-img-wrapper img { transform: scale(1.05); } .card-content { padding: 30px; position: relative; } .icon-box { width: 60px; height: 60px; background: var(--bg-primary); border: 2px solid var(--bruntab-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-h3); position: absolute; top: -30px; inset-inline-end: 30px; box-shadow: var(--shadow-sm); color: var(--bruntab-blue); } .card-content h3 { margin-bottom: 15px; font-size: var(--fs-h3); color: var(--brand-text-color); } .card-content p { color: var(--text-secondary); margin-bottom: 20px; } /* ==================================================== SEGMENTS ==================================================== */ .segments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 40px; } .segment-card { background: var(--card-bg); padding: 30px 20px; text-align: center; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: var(--transition); border-bottom: 3px solid transparent; } .segment-card:hover { border-bottom-color: var(--bruntab-red); transform: translateY(-5px); } .segment-icon { font-size: var(--fs-h1); margin-bottom: 15px; } .segment-card h4 { font-size: var(--fs-h5); color: var(--brand-text-color); } /* ==================================================== WHY BRUNTAB ==================================================== */ .split-layout { display: flex; align-items: center; gap: 60px; } .split-layout > div { flex: 1; } .benefit-list { margin-top: 30px; } .benefit-list li { display: flex; gap: 20px; margin-bottom: 25px; } .check-icon { width: 30px; height: 30px; min-width: 30px; background: rgba(0, 55, 139, 0.1); color: var(--bruntab-blue); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; } .benefit-list strong { display: block; font-size: var(--fs-h5); color: var(--brand-text-color); margin-bottom: 5px; } .benefit-list p { color: var(--text-secondary); } .trust-badge-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .dashboard-preview { width: 100%; display: block; } .trust-badge { position: absolute; bottom: 20px; inset-inline-start: 20px; background: var(--bg-dark); color: white; padding: 10px 20px; border-radius: 30px; font-weight: bold; border-inline-start: 4px solid var(--bruntab-red); } /* ==================================================== PROJECTS ==================================================== */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .project-card { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .placeholder-img { height: 200px; background: var(--bg-dark) url('data:image/svg+xml;utf8,') no-repeat center; opacity: 0.8; } .project-info { padding: 20px; text-align: start; } .project-info h4 { color: var(--brand-text-color); margin-bottom: 5px; } .project-info p { color: var(--text-secondary); font-size: var(--fs-body-sm); } /* ==================================================== EV INFRASTRUCTURE ==================================================== */ .ev-infrastructure-section { padding: 0; } .ev-banner { background: linear-gradient(135deg, var(--bruntab-blue), #002255); border-radius: var(--radius-lg); padding: 60px; color: white; display: flex; align-items: center; position: relative; overflow: hidden; } /* Abstract EV background element */ .ev-banner::after { content: ''; position: absolute; top: -50%; inset-inline-end: -10%; width: 50%; height: 200%; background: rgba(255,255,255,0.05); transform: rotate(30deg); } .ev-content { position: relative; z-index: 2; max-width: 600px; } .badge { display: inline-block; background: var(--bruntab-red); color: white; padding: 4px 12px; border-radius: 20px; font-size: var(--fs-caption); font-weight: bold; margin-bottom: 15px; } .ev-content h2 { font-size: var(--fs-h1); margin-bottom: 20px; } .ev-content p { margin-bottom: 30px; font-size: var(--fs-h5); opacity: 0.9; } /* ==================================================== BLOG ==================================================== */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .blog-card { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); } .blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); } .blog-img { height: 180px; background-color: var(--bg-dark); } .blog-content { padding: 25px; text-align: start; } .blog-content h5 { font-size: var(--fs-h5); color: var(--text-primary); margin-bottom: 15px; line-height: 1.4; } .read-more { font-size: var(--fs-body-sm); font-weight: 600; } /* ==================================================== BRUNTAB APP SECTION ==================================================== */ .app-section { background-color: var(--bg-dark); color: white; overflow: hidden; } .app-section h2 { color: white; } .app-section .text-secondary { color: var(--text-light); opacity: 0.8; } .app-features { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; } .app-feature { display: flex; align-items: flex-start; gap: 15px; } .app-feature-icon { width: 40px; height: 40px; background: rgba(242, 0, 0, 0.1); color: var(--bruntab-red); display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: var(--fs-h4); } .app-screens-container img { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15)); transition: var(--transition); } @keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes floatDownUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } } .float-up-down { animation: floatUpDown 6s ease-in-out infinite; } .float-down-up { animation: floatDownUp 5s ease-in-out infinite; } /* ==================================================== TESTIMONIALS & LOGOS ==================================================== */ .testimonials-section { background-color: var(--bg-secondary); } .testimonial-card { background: var(--card-bg); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-top: 30px; position: relative; border-top: 4px solid var(--bruntab-blue); } .testimonial-quote { font-size: var(--fs-h5); font-style: italic; color: var(--text-secondary); margin-bottom: 20px; } .testimonial-author { display: flex; align-items: center; gap: 15px; } .author-info h4 { color: var(--brand-text-color); margin-bottom: 5px; } .logos-section { padding: 60px 0; background: var(--bg-primary); } .marquee-container { width: 100%; overflow: hidden; position: relative; padding: 10px 0; margin-top: 30px; } .marquee { display: flex; width: max-content; gap: 30px; } .marquee-right { animation: marqueeScrollRight 20s linear infinite; } .marquee-left { animation: marqueeScrollLeft 20s linear infinite; } .marquee:hover { animation-play-state: paused; } @keyframes marqueeScrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @keyframes marqueeScrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .logo-item { width: 120px; height: 80px; display: flex; justify-content: center; align-items: center; filter: grayscale(100%); opacity: 0.6; transition: var(--transition); } .logo-item:hover { filter: grayscale(0%); opacity: 1; } .logo-item svg, .logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ==================================================== NEWSLETTER ==================================================== */ .newsletter-section { background: linear-gradient(135deg, var(--bruntab-blue), #001a44); color: white; padding: 60px 0; } .newsletter-form { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 30px; } .newsletter-form input { padding: 12px 20px; border-radius: var(--radius); border: none; outline: none; min-width: 250px; font-family: inherit; } .newsletter-form .btn { padding: 12px 30px; } /* ==================================================== CTA SECTION ==================================================== */ .cta-section { background-color: var(--bg-primary); } .cta-section h2 { font-size: var(--fs-h1); color: var(--brand-text-color); margin-bottom: 20px; } .cta-section p { font-size: var(--fs-h4); color: var(--text-secondary); margin-bottom: 30px; } /* ==================================================== FOOTER ==================================================== */ .main-footer { background-color: var(--bg-dark); color: var(--text-light); padding-top: 60px; } .footer-inner { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr 1.3fr; gap: 40px; padding-bottom: 40px; } .footer-logo { height: 45px; margin-bottom: 20px; filter: brightness(0) invert(1); } .about-col p { opacity: 0.7; max-width: 300px; } .footer-col h3 { color: white; margin-bottom: 20px; font-size: var(--fs-h4); position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 30px; height: 2px; background-color: var(--bruntab-red); } .links-col ul li { margin-bottom: 12px; } .links-col a { color: var(--text-light); opacity: 0.7; } .links-col a:hover { opacity: 1; color: var(--bruntab-red); padding-inline-start: 5px; } .contact-col p { margin-bottom: 15px; opacity: 0.8; } .footer-bottom { background-color: #11141d; padding: 20px 0; text-align: center; font-size: var(--fs-body-sm); opacity: 0.6; } /* ==================================================== SUPPORT CHAT WIDGET ==================================================== */ /* chat-widget-container styles are managed below in the responsive/directional section */ /* Tooltip */ .chat-tooltip { background: var(--bg-dark); color: white; padding: 12px 20px; border-radius: var(--radius); margin-bottom: 15px; box-shadow: var(--shadow-lg); font-size: var(--fs-body-sm); position: relative; animation: bounce 2s infinite; max-width: 250px; text-align: center; } .chat-tooltip::after { content: ''; position: absolute; bottom: -8px; inset-inline-end: 30px; border-width: 8px 8px 0; border-style: solid; border-color: var(--bg-dark) transparent transparent transparent; } .chat-tooltip.hidden { display: none; } .tooltip-close { position: absolute; top: 2px; inset-inline-end: 6px; cursor: pointer; font-size: var(--fs-h5); color: var(--text-light); } .tooltip-close:hover { color: white; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* Chat Button */ .chat-trigger-btn { background: linear-gradient(135deg, var(--bruntab-blue), #002255); color: white; border: none; padding: 15px 25px; border-radius: 30px; font-size: var(--fs-h5); font-weight: 600; cursor: pointer; box-shadow: 0 5px 20px rgba(0, 55, 139, 0.4); display: flex; align-items: center; gap: 10px; transition: var(--transition); animation: pulse 2s infinite; } .chat-trigger-btn:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 55, 139, 0.6); background: linear-gradient(135deg, var(--bruntab-red), #cc0000); } .chat-icon-main { font-size: var(--fs-h3); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 55, 139, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(0, 55, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 55, 139, 0); } } /* Chat Panel */ .chat-panel { position: absolute; bottom: 80px; inset-inline-end: 0; width: 370px; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); overflow: hidden; transform-origin: bottom right; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 1; transform: scale(1); } .chat-panel.hidden { opacity: 0; transform: scale(0.8); pointer-events: none; visibility: hidden; } .chat-header { background: var(--bg-dark); padding: 20px; display: flex; justify-content: space-between; align-items: flex-start; color: white; } .chat-header-info { display: flex; align-items: center; gap: 15px; } .chat-logo { width: 40px; height: 40px; background: white; padding: 5px; border-radius: 50%; object-fit: contain; } .chat-header h4 { margin: 0; font-size: var(--fs-h5); } .chat-header p { margin: 0; font-size: var(--fs-caption); color: var(--bruntab-warm-grey); } .close-chat-btn { background: transparent; border: none; color: white; font-size: var(--fs-h3); cursor: pointer; line-height: 1; opacity: 0.7; transition: var(--transition); } .close-chat-btn:hover { opacity: 1; transform: scale(1.1); } .chat-body { padding: 20px; background: var(--bg-primary); } .chat-welcome-msg { background: var(--bg-secondary); padding: 15px; border-radius: var(--radius) var(--radius) var(--radius) 0; font-size: var(--fs-body-sm); color: var(--text-primary); margin-bottom: 20px; border-inline-start: 4px solid var(--bruntab-blue); } html[dir="rtl"] .chat-welcome-msg { border-radius: var(--radius) var(--radius) 0 var(--radius); } .chat-options { display: flex; flex-direction: column; gap: 10px; } .chat-option { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); text-decoration: none; transition: var(--transition); } .chat-option:hover { border-color: var(--bruntab-blue); background: var(--card-bg); transform: translateX(calc(-1 * 5px)); } html[dir="ltr"] .chat-option:hover { transform: translateX(5px); } .chat-icon-img img { width: 24px; height: 24px; } .chat-icon-emoji { font-size: var(--fs-h3); } .chat-option-text { display: flex; flex-direction: column; } .chat-option-text strong { color: var(--brand-text-color); font-size: var(--fs-body); } .chat-option-text span { color: var(--text-secondary); font-size: var(--fs-caption); } .chat-footer { padding: 20px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); } .chat-lead-form { display: flex; flex-direction: column; gap: 10px; } .chat-lead-form input { width: 100%; padding: 10px 15px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-primary); color: var(--text-primary); font-family: inherit; } .chat-lead-form input:focus { outline: none; border-color: var(--bruntab-blue); } .chat-lead-form .btn { width: 100%; } /* ==================================================== RESPONSIVE DESIGN ==================================================== */ @media (max-width: 992px) { .nav-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--header-bg); padding: 20px; box-shadow: var(--shadow-md); gap: 15px; backdrop-filter: blur(16px); } .nav-menu.active { display: flex; } .nav-menu > li > a { display: block; padding: 10px; border-bottom: 1px solid var(--border-color); } .mega-menu, .dropdown { position: static; opacity: 1; visibility: visible; box-shadow: none; transform: none; display: none; background: transparent; border: none; padding: 10px; } .has-dropdown.active .dropdown, .has-dropdown.active .mega-menu { display: block; } .mega-menu-inner { flex-direction: column; gap: 20px; padding: 10px; } .mobile-menu-toggle { display: flex; } .split-layout { flex-direction: column; } .footer-inner { grid-template-columns: 1fr; } .hero-text h1 { font-size: var(--fs-h1); } .ev-banner { padding: 40px 20px; } } /* ==================================================== ADDITIONS FOR BRAND RESTRUCTURE & DOMAIN SCHEMES ==================================================== */ :root { --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-dark: rgba(15, 23, 42, 0.75); --glass-border: rgba(255, 255, 255, 0.4); --glass-border-dark: rgba(255, 255, 255, 0.08); } [data-theme="dark"] { --glass-bg: rgba(30, 41, 59, 0.7); --glass-border: rgba(255, 255, 255, 0.08); } /* Glass Card Premium Styling */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 8px 32px 0 rgba(0, 55, 139, 0.06); transition: var(--transition); } .glass-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px 0 rgba(0, 55, 139, 0.12); border-color: rgba(0, 55, 139, 0.25); } [data-theme="dark"] .glass-card:hover { border-color: rgba(242, 0, 0, 0.25); box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.4); } /* Business Domains Grid Layout */ .business-domains-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 40px; } .domain-card { display: flex; flex-direction: column; padding: 35px 25px; position: relative; overflow: hidden; } .domain-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--bruntab-red), var(--bruntab-blue)); opacity: 0.8; } .domain-card-icon { font-size: var(--fs-h1); margin-bottom: 20px; color: var(--bruntab-blue); display: inline-flex; } .domain-card h3 { font-size: var(--fs-h4); font-weight: 700; color: var(--brand-text-color); margin-bottom: 15px; line-height: 1.4; } .domain-card p { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: 25px; flex-grow: 1; } .domain-card ul { list-style: none; padding: 0; margin: 0 0 25px 0; } .domain-card ul li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--text-secondary); margin-bottom: 8px; } .domain-card ul li::before { content: "•"; color: var(--bruntab-red); font-weight: bold; font-size: var(--fs-h4); } .domain-card .btn-link { font-size: var(--fs-body-sm); font-weight: 600; color: var(--bruntab-blue); text-decoration: none; display: inline-flex; align-items: center; transition: var(--transition); } .domain-card:hover .btn-link { color: var(--bruntab-red); } /* Sectors Bento Grid Layout */ .sectors-bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 25px; margin-top: 40px; } .sector-bento-card { grid-column: span 4; display: flex; flex-direction: column; padding: 30px; position: relative; border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: var(--transition); overflow: hidden; } .sector-bento-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(0, 55, 139, 0.15); } /* Specific Bento Grid Sizing for 7 items */ .sector-bento-card.wide { grid-column: span 6; } .sector-bento-card.full-width { grid-column: span 12; } .sector-header-flex { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .sector-icon-wrapper { width: 50px; height: 50px; border-radius: 12px; background: rgba(0, 55, 139, 0.05); display: flex; align-items: center; justify-content: center; color: var(--bruntab-blue); flex-shrink: 0; } .sector-bento-card:hover .sector-icon-wrapper { background: var(--bruntab-blue); color: white; transition: all 0.3s ease; } .sector-bento-card h4 { font-size: var(--fs-h5); font-weight: 700; color: var(--brand-text-color); margin: 0; } .sector-bento-card p { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: 20px; flex-grow: 1; } .sector-badge { position: absolute; top: 15px; inset-inline-end: 15px; font-size: var(--fs-micro); padding: 2px 8px; background: rgba(170, 160, 150, 0.15); color: var(--text-secondary); border-radius: 10px; } /* Responsive Overrides */ @media (max-width: 1200px) { .business-domains-grid { grid-template-columns: repeat(2, 1fr); } .sector-bento-card { grid-column: span 6 !important; } } @media (max-width: 768px) { .business-domains-grid { grid-template-columns: 1fr; } .sectors-bento-grid { grid-template-columns: 1fr; } .sector-bento-card { grid-column: span 12 !important; } } /* ==================================================== AESTHETIC ACCESSIBILITY & CONTRAST WIDGETS ==================================================== */ /* Scroll appearance logic for chat widget container */ .chat-widget-container { position: fixed; bottom: 30px; z-index: 9999; display: flex; flex-direction: column; opacity: 0 !important; visibility: hidden !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; pointer-events: none !important; } .chat-widget-container.visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* RTL (Farsi) Layout: Chat left side, Go-to-top right side */ html[dir="rtl"] .chat-widget-container { left: 15px !important; right: auto !important; align-items: flex-end !important; } html[dir="rtl"] .chat-panel { left: 0 !important; right: auto !important; transform-origin: bottom left !important; } html[dir="rtl"] .back-to-top { right: 15px !important; left: auto !important; } /* LTR (English) Layout: Chat right side, Go-to-top left side */ html[dir="ltr"] .chat-widget-container { right: 15px !important; left: auto !important; align-items: flex-end !important; } html[dir="ltr"] .chat-panel { right: 0 !important; left: auto !important; transform-origin: bottom right !important; } html[dir="ltr"] .back-to-top { left: 15px !important; right: auto !important; } /* Responsive Mobile Widget containment to prevent overflow layout breaks */ @media (max-width: 480px) { .chat-widget-container { bottom: 15px !important; } html[dir="rtl"] .chat-widget-container { left: 15px !important; right: auto !important; } html[dir="ltr"] .chat-widget-container { right: 15px !important; left: auto !important; } .chat-panel { width: calc(100vw - 30px) !important; max-width: 340px !important; bottom: 70px !important; } .chat-trigger-btn { padding: 10px 18px !important; font-size: var(--fs-body-sm) !important; } .back-to-top { bottom: 15px !important; width: 45px !important; height: 45px !important; font-size: var(--fs-h4) !important; } html[dir="rtl"] .back-to-top { right: 15px !important; left: auto !important; } html[dir="ltr"] .back-to-top { left: 15px !important; right: auto !important; } } /* ==================================================== AESTHETIC ACCESSIBILITY: DARK MODE CONTRAST OVERRIDES ==================================================== */ [data-theme="dark"] .main-header { background: #0b1120 !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .nav-menu > li > a { color: #f1f5f9 !important; } [data-theme="dark"] .nav-menu > li > a:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } [data-theme="dark"] .dropdown-split-layout { background: #111827 !important; border-top-color: var(--bruntab-red) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important; } [data-theme="dark"] .dropdown-links-side li a { color: #f1f5f9 !important; } [data-theme="dark"] .dropdown-links-side li a:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--bruntab-red) !important; } [data-theme="dark"] .dropdown-image-side { background: #030712 !important; } [data-theme="dark"] .chat-panel { background: #111827 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f8fafc !important; } [data-theme="dark"] .chat-body { background: #0f172a !important; } [data-theme="dark"] .chat-lead-form input { background: #1e293b !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } [data-theme="dark"] .chat-welcome-msg { color: #e2e8f0 !important; } [data-theme="dark"] .chat-option { background: #1e293b !important; border-color: rgba(255, 255, 255, 0.05) !important; color: #f1f5f9 !important; } [data-theme="dark"] .chat-option:hover { background: #334155 !important; } [data-theme="dark"] .chat-option-text span { color: #94a3b8 !important; } /* Ensure clean aesthetic for dark bento grids and text domains */ [data-theme="dark"] .sector-bento-card { background: #111827 !important; border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .sector-badge { background: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; } [data-theme="dark"] .sector-bento-card h4 { color: #ffffff !important; } [data-theme="dark"] .sector-bento-card p { color: #94a3b8 !important; } /* ==================================================== AESTHETIC ACCESSIBILITY: PREMIUM DARK CONTRASTS ==================================================== */ /* Turn sub-dropdown panels dark to prevent white-on-white text */ [data-theme="dark"] .dropdown-links-side .sub-dropdown { background: #111827 !important; border-top-color: var(--bruntab-red) !important; border-left: 1px solid rgba(255, 255, 255, 0.08) !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; } [data-theme="dark"] .dropdown-links-side .sub-dropdown li a { color: #f1f5f9 !important; } [data-theme="dark"] .dropdown-links-side .sub-dropdown li a:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--bruntab-red) !important; } /* High-contrast premium primary buttons in dark mode */ [data-theme="dark"] .btn-primary { background-color: var(--bruntab-red) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 4px 15px rgba(242, 0, 0, 0.3) !important; } [data-theme="dark"] .btn-primary:hover { background-color: #ff3333 !important; box-shadow: 0 15px 25px rgba(242, 0, 0, 0.5) !important; transform: translateY(-4px) scale(1.02) !important; } /* High-contrast market toggles in dark mode */ [data-theme="dark"] .market-toggle-item.active { background: var(--bruntab-red) !important; color: #FFFFFF !important; box-shadow: 0 4px 15px rgba(242, 0, 0, 0.4) !important; } [data-theme="dark"] .market-toggle-wrapper-hero .market-toggle-item.active { background: var(--bruntab-red) !important; color: #FFFFFF !important; box-shadow: 0 2px 10px rgba(242, 0, 0, 0.3) !important; } /* Sky-blue high-contrast links and icons in dark mode */ [data-theme="dark"] .domain-card-icon { color: #60a5fa !important; } [data-theme="dark"] .domain-card .btn-link { color: #60a5fa !important; } [data-theme="dark"] .sector-icon-wrapper { color: #60a5fa !important; } /* Premium service bento buttons in dark mode */ [data-theme="dark"] .service-premium-card:hover .service-premium-btn { background: var(--bruntab-red) !important; color: white !important; } /* ==================================================== MODERN HIGH-END SAAS HOME REBUILD OVERRIDES ==================================================== */ /* 1. Timed Chat Widget & Go-To-Top Dynamic Coordinates */ .chat-widget-container { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .back-to-top { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* 2. Neon Pulse Glowing Dot for Monitoring */ .pulse-glow-dot { width: 8px; height: 8px; background-color: #00ff66; border-radius: 50%; box-shadow: 0 0 10px #00ff66, 0 0 20px #00ff66; animation: neonPulse 1.5s infinite; display: inline-block; } @keyframes neonPulse { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(0, 255, 102, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(0, 255, 102, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(0, 255, 102, 0); } } /* 3. Sticky Menu Blur & Alignment */ .sticky-header-wrapper { position: sticky !important; top: 0 !important; z-index: 1000 !important; } .main-header { background: rgba(241, 241, 241, 0.9) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: var(--transition); } [data-theme="dark"] .main-header { background: rgba(11, 17, 32, 0.9) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* 4. SVW Waved Motion Background for Consultation Capsule */ .header-consultation-capsule { display: inline-block; position: relative; overflow: hidden; border-radius: 50px; padding: 2px; background: linear-gradient(90deg, var(--bruntab-red), var(--bruntab-blue)); box-shadow: 0 4px 15px rgba(242, 0, 0, 0.25); transition: var(--transition); } .header-consultation-capsule:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(242, 0, 0, 0.4); } .consultation-link { display: flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 50px; background: var(--bg-primary); color: var(--bruntab-blue) !important; font-weight: 800; font-size: var(--fs-body-sm); position: relative; overflow: hidden; z-index: 1; transition: var(--transition); } .consultation-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(242, 0, 0, 0.05), rgba(0, 55, 139, 0.05)); z-index: -2; } .wave-bg-svg { position: absolute; bottom: -5px; left: 0; width: 200%; height: 100%; z-index: -1; opacity: 0.15; animation: waveMove 4s linear infinite; pointer-events: none; transition: var(--transition); } .header-consultation-capsule:hover .wave-bg-svg { opacity: 0.85; animation: waveMove 1.5s linear infinite; } .header-consultation-capsule:hover .consultation-link { color: #ffffff !important; } .consultation-text { position: relative; z-index: 2; transition: color 0.3s ease; } @keyframes waveMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* 5. Mobile slide-in menu drawer */ @media (max-width: 992px) { .mobile-menu-toggle { display: flex !important; z-index: 1001 !important; position: relative; } .nav-menu { display: flex !important; flex-direction: column; position: fixed !important; top: 0 !important; bottom: 0 !important; width: 300px !important; max-width: 80% !important; background: var(--header-bg) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: 80px 30px 40px !important; box-shadow: -10px 0 30px rgba(0,0,0,0.15) !important; gap: 20px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 999 !important; overflow-y: auto; } html[dir="rtl"] .nav-menu { right: 0 !important; left: auto !important; transform: translateX(100%) !important; box-shadow: -10px 0 30px rgba(0,0,0,0.15) !important; } html[dir="ltr"] .nav-menu { left: 0 !important; right: auto !important; transform: translateX(-100%) !important; box-shadow: 10px 0 30px rgba(0,0,0,0.15) !important; } html[dir="rtl"] .nav-menu.active, html[dir="ltr"] .nav-menu.active { transform: translateX(0) !important; } .nav-menu > li > a { border-bottom: 1px solid rgba(0,0,0,0.05); padding: 12px 10px !important; width: 100%; display: block !important; } [data-theme="dark"] .nav-menu > li > a { border-bottom: 1px solid rgba(255,255,255,0.05); } .dropdown-split-layout { position: static !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; transform: none !important; display: none !important; background: transparent !important; border: none !important; padding: 10px !important; min-width: 100% !important; } .has-dropdown.active .dropdown-split-layout { display: block !important; } .dropdown-image-side { display: none !important; } .dropdown-links-side { padding: 5px 0 !important; } .dropdown-links-side li a { padding: 8px 12px !important; } .sub-dropdown { position: static !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; transform: none !important; display: block !important; background: transparent !important; border: none !important; padding-inline-start: 20px !important; } } /* 6. Tehran Card Upward shift, spacing and industrial switch pulse animation */ .hero-main-card-content > div { display: flex; flex-direction: column; gap: 15px; transform: translateY(-20px); } .market-toggle-wrapper-hero .market-toggle-item:not(.active)#toggle-btn-industrial { animation: pulse-industrial-cue 2.5s infinite; } @keyframes pulse-industrial-cue { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 55, 139, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(0, 55, 139, 0.15); background: rgba(0, 55, 139, 0.05); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 55, 139, 0); } } /* 7. Services switch buttons visibility and card glows */ .services-tab-btn { background: #ffffff !important; border: 2px solid rgba(0, 55, 139, 0.15) !important; color: var(--bruntab-blue) !important; transition: var(--transition-premium) !important; } .services-tab-btn:hover { background: rgba(0, 55, 139, 0.05) !important; border-color: var(--bruntab-blue) !important; color: var(--bruntab-blue) !important; } .services-tab-btn.active { background: var(--bruntab-blue) !important; border-color: var(--bruntab-blue) !important; color: #FFFFFF !important; } [data-theme="dark"] .services-tab-btn { background: #0f172a !important; border: 2px solid rgba(255, 255, 255, 0.15) !important; color: #f1f5f9 !important; } [data-theme="dark"] .services-tab-btn:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: #ffffff !important; } [data-theme="dark"] .services-tab-btn.active { background: var(--bruntab-red) !important; border-color: var(--bruntab-red) !important; color: #FFFFFF !important; } .service-premium-card { border: 1px solid rgba(0, 55, 139, 0.08) !important; box-shadow: 0 10px 30px -10px rgba(0, 55, 139, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.02) !important; transition: var(--transition-premium) !important; } .service-premium-card:hover { border-color: var(--bruntab-blue) !important; box-shadow: 0 30px 60px -15px rgba(0, 55, 139, 0.15), 0 0 25px rgba(0, 55, 139, 0.08) !important; transform: translateY(-8px) !important; } [data-theme="dark"] .service-premium-card { border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .service-premium-card:hover { border-color: var(--bruntab-red) !important; box-shadow: 0 30px 60px -15px rgba(242, 0, 0, 0.2), 0 0 25px rgba(242, 0, 0, 0.12) !important; } /* 8. Symmetrical Achievements grid split-layout & Testimonial Slider styling */ .achievements-split-layout { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 40px; width: 100%; } .achievements-left-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 Stats cards on one horizontal row */ gap: 25px; width: 100%; } .testimonial-slider-card { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 40px 30px !important; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; position: relative; overflow: hidden; transition: var(--transition); width: 100%; max-width: 860px; margin: 0 auto; } .hero-stacked-card { position: relative; border-radius: 12px; flex: 1; min-height: 280px; /* Taller visual presence */ padding: 20px 0 0 0 !important; /* Top padding is good, left/right/bottom is zero */ background-size: cover; background-position: center; color: white; display: flex; flex-direction: column; justify-content: space-between; /* To push badge to top and inner content to bottom */ box-shadow: var(--card-shadow); transition: var(--transition-premium); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); z-index: 1; text-decoration: none; } .hero-stacked-card .hero-cover-badge { margin-inline-start: 20px !important; } .hero-stacked-card::before { content: none; /* Dark overlay removed per design */ } .hero-stacked-card:hover::before { content: none; } /* Semi-transparent Brand Blue overlay box for the smaller cards */ .hero-cover-card-inner { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 0 0 12px 12px !important; /* matches card outer radius */ background: rgba(0, 55, 139, 0.82) !important; /* deeper transparency */ backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 18px 20px !important; border: none !important; z-index: 2; transition: var(--transition-premium); display: flex; flex-direction: column; gap: 4px; } .hero-main-wide-card .hero-cover-card-inner { border-radius: 0 0 16px 16px !important; /* matches main card border-radius */ } .hero-cover-card-inner h3 { color: #FFFFFF !important; font-weight: 800; margin-bottom: 4px; } .hero-cover-card-inner p { color: rgba(255, 255, 255, 0.88) !important; } .hero-stacked-card:hover .hero-cover-card-inner, .hero-main-wide-card:hover .hero-cover-card-inner { background: rgba(0, 55, 139, 0.90) !important; border-color: rgba(255, 255, 255, 0.25); transform: none !important; } .testimonial-slider-card:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important; } .testimonial-card-title { font-size: var(--fs-h4) !important; font-weight: 800 !important; color: #ffffff !important; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; text-align: start; } .testimonial-slides-container { position: relative; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; } .testimonial-slide { display: none; animation: fadeEffect 0.6s ease-in-out forwards; text-align: start; } .testimonial-slide.active { display: block; } .testimonial-quote { font-size: var(--fs-body-sm) !important; line-height: 1.75 !important; color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 20px !important; font-style: italic; } /* Mobile: clamp long quotes to 4 lines with a بیشتر/More toggle */ .testimonial-quote.is-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-bottom: 10px !important; } .testimonial-quote-toggle { display: inline-block; margin-bottom: 16px; padding: 0; background: none; border: none; font-family: inherit; font-size: var(--fs-caption) !important; font-weight: 600; font-style: normal; color: var(--bruntab-red) !important; cursor: pointer; text-decoration: none; line-height: 1; } .testimonial-quote-toggle:hover, .testimonial-quote-toggle:focus { text-decoration: underline; opacity: 0.85; } /* Third Row: Summarized Empirical Results Callout Card */ .summary-text-block { width: 100%; } .summary-text { text-align: justify !important; text-align-last: start; line-height: 1.75; margin-bottom: 16px; } /* Mobile: clamp long summary text to 4 lines with a بیشتر/More toggle */ .summary-text.is-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-bottom: 10px; } .summary-text-toggle { display: inline-block; margin-bottom: 16px; padding: 0; background: none; border: none; font-family: inherit; font-size: var(--fs-caption) !important; font-weight: 600; color: var(--bruntab-red) !important; cursor: pointer; text-decoration: none; line-height: 1; } .summary-text-toggle:hover, .summary-text-toggle:focus { text-decoration: underline; opacity: 0.85; } .testimonial-author { display: flex; flex-direction: column; gap: 4px; } .testimonial-author strong { color: #ffffff !important; font-size: var(--fs-body-sm) !important; font-weight: 700; } .testimonial-author span { color: rgba(255, 255, 255, 0.5) !important; font-size: var(--fs-caption) !important; } .testimonial-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 25px; } .testimonial-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: var(--transition); } .testimonial-dot.active { background: var(--bruntab-red); width: 18px; border-radius: 4px; } @keyframes fadeEffect { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 992px) { .achievements-split-layout { display: flex !important; flex-direction: column !important; gap: 30px !important; } .achievements-left-grid { grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablets */ } } @media (max-width: 600px) { .achievements-left-grid { grid-template-columns: 1fr !important; /* 1 column on mobile phones */ } } /* ==================================================== FOLLOW-UP AESTHETIC REBUILD REFINEMENTS ==================================================== */ /* 1. Fully readable Consultation Capsule text on hover */ .header-consultation-capsule:hover .consultation-link { background: transparent !important; color: #ffffff !important; } /* 2. Tightened spacing between partners and services */ .services-bundles-section { padding-top: 30px !important; } /* 3. Achievements section size and padding optimizations - Extremely Compact */ .achievements-section { padding: 45px 0 !important; } .achievements-section .section-subtitle { margin-bottom: 25px !important; } .achievement-card { padding: 18px 16px !important; /* Extremely tight and lightweight */ border-radius: 12px !important; } .achievement-stat { font-size: var(--fs-h2) !important; /* Smaller, elegant stats numbers */ margin-bottom: 5px !important; letter-spacing: -0.02em !important; } .achievement-label { font-size: var(--fs-caption) !important; /* Smaller label */ margin-bottom: 4px !important; font-weight: 800 !important; } .achievement-desc { font-size: var(--fs-micro) !important; /* Smaller description */ line-height: 1.45 !important; opacity: 0.82 !important; } .testimonial-slider-card { padding: 22px 20px !important; /* Smaller testimonial container box */ min-height: 250px !important; border-radius: 12px !important; } .testimonial-card-title { font-size: var(--fs-body) !important; margin-bottom: 10px !important; } .testimonial-quote { font-size: var(--fs-body) !important; /* Bigger, highly readable customer notes font */ line-height: 1.65 !important; margin-bottom: 12px !important; font-weight: 500 !important; } .testimonial-author strong { font-size: var(--fs-body-sm) !important; } .testimonial-author span { font-size: var(--fs-micro) !important; } .testimonial-slider-dots { margin-top: 12px !important; } /* 3.1. Fields of Activity Section (حوزه‌های فعالیت) */ .fields-activity-section { background: var(--bg-secondary) !important; padding: 80px 0 !important; border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .fields-activity-section { background: #0f172a !important; } .fields-activity-grid { display: grid; grid-template-columns: repeat(4, 1fr) !important; gap: 25px; margin-top: 40px; } .field-card { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important; padding: 30px 24px !important; text-align: center !important; transition: var(--transition-premium) !important; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .field-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: transparent; transition: var(--transition-premium); } .field-card:hover::before { background: var(--bruntab-red); } .field-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-md) !important; border-color: rgba(242, 0, 0, 0.15) !important; } .field-icon-wrapper { width: 65px; height: 65px; border-radius: 16px !important; /* Premium rounded square */ background: rgba(0, 55, 139, 0.05); color: var(--bruntab-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: var(--transition-premium); border: 1px solid rgba(0, 55, 139, 0.1); } [data-theme="dark"] .field-icon-wrapper { background: rgba(255, 255, 255, 0.03); color: #60a5fa; border-color: rgba(255, 255, 255, 0.05); } .field-card:hover .field-icon-wrapper { background: var(--bruntab-blue); color: white; box-shadow: 0 4px 15px rgba(0, 55, 139, 0.2); transform: scale(1.05); } [data-theme="dark"] .field-card:hover .field-icon-wrapper { background: var(--bruntab-red); color: white; box-shadow: 0 4px 15px rgba(242, 0, 0, 0.3); } .field-card:hover .field-icon-wrapper svg { stroke: #ffffff !important; /* Recolor stroke to solid white on hover for perfect visibility */ } .field-card h3 { font-size: var(--fs-body) !important; font-weight: 800 !important; color: var(--text-primary) !important; margin-bottom: 12px !important; line-height: 1.45 !important; min-height: 2.9em; display: flex; flex-direction: column; justify-content: center; align-items: center; } .field-card p { font-size: var(--fs-caption) !important; line-height: 1.65 !important; color: var(--text-secondary) !important; margin: 0 !important; text-align: justify !important; flex-grow: 1; } @media (max-width: 992px) { .fields-activity-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 576px) { .fields-activity-grid { grid-template-columns: 1fr !important; } } /* 4. Premium Intercom-style Chat Widget Styling */ .chat-header-premium { background: linear-gradient(135deg, var(--bruntab-blue), #0b1120); padding: 20px; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .chat-header-top { display: flex; justify-content: space-between; align-items: center; } .online-advisors { display: flex; align-items: center; gap: 15px; } .advisor-avatars { display: flex; position: relative; width: 48px; height: 32px; } .avatar-dot { width: 28px; height: 28px; background: rgba(255,255,255,0.15); border: 2px solid var(--bruntab-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-h5); position: absolute; transition: var(--transition); } .avatar-1 { left: 0; z-index: 2; } .avatar-2 { left: 18px; z-index: 1; } .online-glow-badge { width: 10px; height: 10px; background: #00ff66; border: 2px solid var(--bruntab-blue); border-radius: 50%; position: absolute; bottom: 2px; right: 0; z-index: 3; box-shadow: 0 0 8px #00ff66; } .advisor-status h4 { margin: 0; font-size: var(--fs-body-sm); font-weight: 800; letter-spacing: -0.01em; } .advisor-status p { margin: 2px 0 0 0; font-size: var(--fs-micro); color: #00ff66; font-weight: 600; display: flex; align-items: center; gap: 4px; } .close-chat-premium-btn { background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-size: var(--fs-h3); cursor: pointer; line-height: 1; transition: var(--transition); } .close-chat-premium-btn:hover { color: white; transform: scale(1.1); } .chat-body-premium { padding: 16px; background: var(--bg-primary); display: flex; flex-direction: column; gap: 12px; max-height: 520px; overflow-y: auto; } .chat-welcome-box { background: var(--bg-secondary); padding: 15px; border-radius: 12px; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-primary); border-inline-start: 4px solid var(--bruntab-red); } .chat-options-premium { display: flex; flex-direction: row; gap: 8px; } .premium-chat-option { flex: 1; } .premium-chat-option { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; text-decoration: none; transition: var(--transition); } .premium-chat-option:hover { border-color: var(--bruntab-blue); background: var(--card-bg); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 55, 139, 0.06); } .opt-icon img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; } .opt-desc { display: flex; flex-direction: column; gap: 2px; } .opt-desc h5 { margin: 0; font-size: var(--fs-body-sm); font-weight: 700; color: var(--brand-text-color); } .opt-desc span { font-size: var(--fs-micro); color: var(--text-secondary); } .chat-lead-box-premium { background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px solid var(--border-color); } .chat-lead-box-premium h5 { margin: 0 0 10px 0; font-size: var(--fs-caption); font-weight: 800; color: var(--text-primary); } .chat-premium-form { display: flex; gap: 8px; } .chat-premium-form input { flex-grow: 1; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: var(--fs-caption); outline: none; background: var(--bg-primary); color: var(--text-primary); } .chat-premium-form input:focus { border-color: var(--bruntab-blue); } .chat-premium-form .btn { padding: 8px 14px; font-size: var(--fs-caption); border-radius: 8px; white-space: nowrap; } /* Floating bubble trigger button */ .chat-trigger-bubble-btn { background: linear-gradient(135deg, var(--bruntab-blue), #002255); color: white; border: none; padding: 12px 24px; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 55, 139, 0.4); display: flex; align-items: center; gap: 10px; font-size: var(--fs-body-sm); font-weight: 800; font-family: inherit !important; position: relative; transition: var(--transition); animation: floatBubble 3s ease-in-out infinite; } .chat-trigger-bubble-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 25px rgba(242, 0, 0, 0.5); background: linear-gradient(135deg, var(--bruntab-red), #cc0000); } .bubble-icon { display: flex; align-items: center; justify-content: center; } .bubble-pulse-ring { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50px; box-shadow: 0 0 0 0 rgba(0, 55, 139, 0.4); animation: ringPulse 2s infinite; } .chat-trigger-bubble-btn:hover .bubble-pulse-ring { box-shadow: 0 0 0 0 rgba(242, 0, 0, 0.4); animation: ringPulseRed 2s infinite; } @keyframes floatBubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 55, 139, 0.4); } 70% { box-shadow: 0 0 0 12px rgba(0, 55, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 55, 139, 0); } } @keyframes ringPulseRed { 0% { box-shadow: 0 0 0 0 rgba(242, 0, 0, 0.4); } 70% { box-shadow: 0 0 0 12px rgba(242, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 0, 0, 0); } } [data-theme="dark"] .chat-body-premium { background: #111827 !important; } [data-theme="dark"] .chat-welcome-box { background: #1f2937 !important; color: #e5e7eb !important; } [data-theme="dark"] .premium-chat-option { background: #1f2937 !important; border-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .premium-chat-option:hover { background: #374151 !important; border-color: var(--bruntab-red) !important; } [data-theme="dark"] .chat-lead-box-premium { background: #1f2937 !important; border-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .chat-premium-form input { background: #111827 !important; border-color: rgba(255,255,255,0.08) !important; color: #ffffff !important; } [data-theme="dark"] .avatar-dot { border-color: #111827 !important; } /* ==================================================== ADDITIONAL SAAS REBUILD AND VISUAL OVERRIDES ==================================================== */ /* 1. Precise Edge-Aligned Chat Tooltip to prevent shifting inward */ .chat-tooltip { max-width: 280px !important; width: max-content !important; margin-bottom: 15px !important; font-family: inherit !important; } html[dir="rtl"] .chat-tooltip { align-self: flex-end !important; } html[dir="rtl"] .chat-tooltip::after { left: 70px !important; right: auto !important; inset-inline-end: auto !important; transform: translateX(-50%) !important; } html[dir="ltr"] .chat-tooltip { align-self: flex-end !important; } html[dir="ltr"] .chat-tooltip::after { right: 70px !important; left: auto !important; inset-inline-start: auto !important; transform: translateX(50%) !important; } /* 2. Top bar white rounded capsule hovers for readability */ .top-bar a.contact-item, .top-bar .lang-switcher a { padding: 6px 16px !important; border-radius: 50px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-flex !important; align-items: center !important; text-decoration: none !important; } .top-bar a.contact-item:hover, .top-bar .lang-switcher a:hover, .top-bar .lang-switcher a.active { background: #ffffff !important; color: var(--bruntab-blue) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; text-decoration: none !important; } .top-bar a.contact-item:hover .text { color: var(--bruntab-blue) !important; } [data-theme="dark"] .top-bar a.contact-item:hover, [data-theme="dark"] .top-bar .lang-switcher a:hover, [data-theme="dark"] .top-bar .lang-switcher a.active { background: #ffffff !important; color: #0b1120 !important; } [data-theme="dark"] .top-bar a.contact-item:hover .text { color: #0b1120 !important; } /* 3. Slightly larger Switch toggles inside Hero card */ .market-toggle-wrapper-hero { padding: 6px !important; } .market-toggle-wrapper-hero .market-toggle-item { padding: 8px 22px !important; font-size: 0.65rem !important; } /* Desktop: make the toggle match the slogan's width and enlarge the font so each label sits on a single line. The top stack (holding the toggle and the slogan pill) is shrunk to fit its widest child, and both children stretch to that shared width. Scoped to >768px so the compact mobile layout (.hero-main-wide-card .market-toggle-wrapper-hero) is untouched. */ @media (min-width: 769px) { /* Shrink the column to the wider of its two children (the slogan pill), so the toggle ends up equal width. */ .hero-main-wide-card .hero-card-top-stack { width: max-content !important; max-width: 100% !important; align-items: stretch !important; } .hero-main-wide-card .market-toggle-wrapper-hero { width: 100% !important; align-self: stretch !important; } .hero-main-wide-card .market-toggle-wrapper-hero .market-toggle-item { flex: 1 1 0 !important; /* share the wrapper width evenly */ font-size: 0.82rem !important; /* larger, but still single-line */ padding: 8px 16px !important; white-space: nowrap !important; text-align: center !important; } } /* 4. Slightly larger Span Badge cover text sizes */ .hero-cover-badge { font-size: var(--fs-body-sm) !important; padding: 9px 22px !important; } /* 5. Live Chat Message Bubble Area */ .chat-messages-area { display: flex; flex-direction: column; gap: 10px; min-height: 260px; max-height: 320px; overflow-y: auto; padding: 10px 8px; background: rgba(0,55,139,0.03); border-radius: 8px; border: 1px solid rgba(0,55,139,0.1); scroll-behavior: smooth; } .chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; } .chat-msg.system { align-self: flex-start; } .chat-msg.user { align-self: flex-end; justify-content: flex-end; max-width: 80%; } .msg-avatar { width: 24px; height: 24px; background: #e2e8f0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); flex-shrink: 0; } .msg-bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--fs-caption); line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .chat-msg.system .msg-bubble { background: var(--bg-secondary); color: var(--text-primary); border-bottom-left-radius: 2px; border: 1px solid var(--border-color); } .chat-msg.user .msg-bubble { background: var(--bruntab-blue); color: white; border-bottom-right-radius: 2px; } .chat-divider-text { text-align: center; border-bottom: 1px solid var(--border-color); line-height: 0.1em; margin: 15px 0 10px; font-size: var(--fs-micro); color: var(--text-secondary); } .chat-divider-text span { background: var(--bg-primary); padding: 0 10px; } [data-theme="dark"] .chat-divider-text span { background: #111827 !important; } /* Typing indicator */ .typing-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); animation: typing 1.4s infinite; margin: 0 1px; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } [data-theme="dark"] .chat-messages-area { background: rgba(0,0,0,0.2) !important; } [data-theme="dark"] .msg-avatar { background: #374151 !important; } /* 6. Achievements Section Size and padding optimizations */ .achievements-section { padding: 40px 0 !important; /* Highly tightened achievements section height */ } .achievements-section .section-header { margin-bottom: 22px !important; } .achievements-section .section-title { font-size: var(--fs-h2) !important; /* Compact titles */ margin-bottom: 6px !important; } .achievements-section .section-subtitle { font-size: var(--fs-body-sm) !important; /* Compact subtitle */ margin-bottom: 25px !important; } .achievement-card { padding: 16px 14px !important; /* Super tight statistical cards */ border-radius: 10px !important; } .achievement-stat { font-size: var(--fs-h2) !important; /* Compact stats numbers */ margin-bottom: 4px !important; } .achievement-label { font-size: var(--fs-body-sm) !important; /* Smaller text label */ margin-bottom: 4px !important; } .achievement-desc { font-size: var(--fs-micro) !important; /* Readable small description details */ line-height: 1.45 !important; } .testimonial-slider-card { padding: 20px 18px !important; /* Tight testimonial layout */ min-height: 240px !important; border-radius: 10px !important; } .testimonial-card-title { font-size: var(--fs-body) !important; margin-bottom: 8px !important; } .testimonial-quote { font-size: var(--fs-h5) !important; /* Premium larger customer notes font size */ line-height: 1.8 !important; /* Premium line-height spacing */ color: rgba(255, 255, 255, 0.9) !important; margin-bottom: 16px !important; font-weight: 500 !important; } .testimonial-author strong { font-size: var(--fs-body) !important; /* Highly readable author name */ font-weight: 700 !important; } .testimonial-author span { font-size: var(--fs-body-sm) !important; /* Highly readable author subtitle */ } .testimonial-slider-dots { margin-top: 10px !important; } /* ==================================================== MOBILE RESPONSIVENESS AND DYNAMIC CTA ACTIONS ==================================================== */ /* 1. Mobile top-bar layout refinements - Clean single-row space-saving pills */ @media (max-width: 768px) { .top-bar { font-size: var(--fs-micro) !important; padding: 5px 0 !important; } .top-bar-inner { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 6px !important; width: 100% !important; } .top-bar .contact-info { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; width: auto !important; justify-content: flex-start !important; } .top-bar .phone-second, .top-bar .top-bar-sep { display: none !important; /* Hide secondary phone and divider on mobile to fit screen */ } .top-bar .contact-item { padding: 4px 8px !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 50px !important; white-space: nowrap !important; font-size: var(--fs-micro) !important; display: inline-flex !important; align-items: center !important; } .top-bar .lang-switcher { display: flex !important; align-items: center !important; gap: 4px !important; width: auto !important; justify-content: flex-end !important; margin-top: 0 !important; } .top-bar .lang-switcher a { padding: 4px 8px !important; font-size: var(--fs-micro) !important; border-radius: 50px !important; } .top-bar .separator { display: none !important; /* Hide separator in lang switcher */ } } @media (max-width: 576px) { .top-bar-inner { flex-wrap: wrap !important; justify-content: center !important; gap: 8px 12px !important; } .top-bar .contact-info { flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; width: 100% !important; } .top-bar .lang-switcher { width: 100% !important; justify-content: center !important; } } /* Hide mobile menu header by default in desktop view */ .mobile-menu-header { display: none !important; } /* 2. Premium fixed slide-in mobile navigation drawer and active submenu overrides */ @media (max-width: 992px) { .mobile-menu-toggle { display: flex !important; position: relative !important; z-index: 100005 !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } .mobile-menu-toggle.active { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* CRITICAL: .main-header has backdrop-filter which creates a CSS containing block, making position:fixed children position relative to the header instead of viewport. We must remove backdrop-filter when mobile menu is open, OR position relative to header. Solution: Remove backdrop-filter on header when menu is active. */ html.nav-menu-active .main-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #f1f1f1 !important; } html.nav-menu-active[data-theme="dark"] .main-header { background: #0b1120 !important; } /* Set nav menu to a gorgeous, glassmorphic slide-out drawer starting below fixed header */ html[dir="rtl"] .nav-menu, html[dir="ltr"] .nav-menu { position: fixed !important; top: 0 !important; width: 320px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; overscroll-behavior: contain !important; /* Natively prevents scroll chaining to background page */ background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; z-index: 100000 !important; padding: 0 !important; display: block !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; /* Smooth iOS momentum scrolling */ box-shadow: 0 0 45px rgba(0,0,0,0.15) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; gap: 0 !important; } html[data-theme="dark"] .nav-menu { background: rgba(15, 23, 42, 0.96) !important; } /* Strict background scroll-locking for mobile touch screens when nav menu is active */ html.nav-menu-active, html.nav-menu-active body { overflow: hidden !important; height: 100vh !important; height: 100dvh !important; position: relative !important; } /* Off-screen and on-screen active transitions */ html[dir="rtl"] .nav-menu { right: 0 !important; left: auto !important; transform: translate3d(100%, 0, 0) !important; } html[dir="rtl"] .nav-menu.active { transform: translate3d(0, 0, 0) !important; box-shadow: -15px 0 45px rgba(0,0,0,0.22) !important; } html[dir="ltr"] .nav-menu { left: 0 !important; right: auto !important; transform: translate3d(-100%, 0, 0) !important; } html[dir="ltr"] .nav-menu.active { transform: translate3d(0, 0, 0) !important; box-shadow: 15px 0 45px rgba(0,0,0,0.22) !important; } /* Mobile Menu Header - Logo hidden (already visible in main header bar) */ .mobile-menu-header { position: sticky !important; top: 0 !important; z-index: 10 !important; background: #ffffff !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; padding: 12px 18px !important; border-bottom: 1px solid rgba(0, 55, 139, 0.08) !important; width: 100% !important; } [data-theme="dark"] .mobile-menu-header { background: #0f172a !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Hide logo in drawer - it's already in the sticky header bar */ .mobile-logo-row { display: none !important; } .mobile-brand-logo { display: none !important; } .mobile-menu-close-btn { background: rgba(0, 55, 139, 0.05) !important; border: none !important; border-radius: 50% !important; width: 38px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--text-primary) !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .mobile-menu-close-btn:hover { background: rgba(242, 0, 0, 0.1) !important; color: var(--bruntab-red) !important; transform: rotate(90deg) !important; } [data-theme="dark"] .mobile-menu-close-btn { background: rgba(255, 255, 255, 0.05) !important; color: #f8fafc !important; } [data-theme="dark"] .mobile-menu-close-btn:hover { background: rgba(242, 0, 0, 0.2) !important; color: #ff6b6b !important; } .mobile-menu-close-btn svg { width: 18px !important; height: 18px !important; } .nav-menu > li:not(.mobile-menu-header):not(.mobile-menu-footer) { display: block !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; border-bottom: 1px solid rgba(0, 55, 139, 0.04) !important; } [data-theme="dark"] .nav-menu > li:not(.mobile-menu-header):not(.mobile-menu-footer) { border-bottom-color: rgba(255, 255, 255, 0.04) !important; } .nav-menu > li:not(.mobile-menu-header):not(.mobile-menu-footer) > a { color: var(--text-primary) !important; font-size: var(--fs-body) !important; font-weight: 600 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 24px !important; border-radius: 0 !important; background: transparent !important; border: none !important; transition: all 0.25s ease !important; } .nav-menu > li:not(.mobile-menu-header):not(.mobile-menu-footer) > a:hover, .nav-menu > li:not(.mobile-menu-header):not(.mobile-menu-footer).active > a { background: rgba(0, 55, 139, 0.03) !important; color: var(--bruntab-blue) !important; } [data-theme="dark"] .nav-menu > li:not(.mobile-menu-header):not(.mobile-menu-footer) > a:hover, [data-theme="dark"] .nav-menu > li:not(.mobile-menu-header):not(.mobile-menu-footer).active > a { background: rgba(255, 255, 255, 0.02) !important; color: #60a5fa !important; } .nav-menu > li.has-dropdown .caret { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; display: inline-block !important; } .nav-menu > li.has-dropdown.active > a .caret { transform: rotate(180deg) !important; } /* Make dropdown items flow vertically inside the mobile drawer menu */ .dropdown-links-simple { position: static !important; width: 100% !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; display: none !important; background: rgba(0, 55, 139, 0.01) !important; border: none !important; box-shadow: none !important; padding: 6px 0 !important; pointer-events: auto !important; transform: none !important; } [data-theme="dark"] .dropdown-links-simple { background: rgba(255, 255, 255, 0.01) !important; } .has-dropdown.active > .dropdown-links-simple { display: block !important; } .dropdown-links-simple ul { padding: 0 !important; width: 100% !important; } .dropdown-links-simple ul li { width: 100% !important; margin-bottom: 0 !important; } .dropdown-links-simple ul li a { font-size: var(--fs-body-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; padding: 10px 36px !important; border-radius: 0 !important; display: block !important; background: transparent !important; border: none !important; transition: all 0.3s ease !important; } [data-theme="dark"] .dropdown-links-simple ul li a { color: #cbd5e1 !important; } .dropdown-links-simple ul li a:hover { background: rgba(0, 55, 139, 0.04) !important; color: var(--bruntab-blue) !important; padding-inline-start: 40px !important; } [data-theme="dark"] .dropdown-links-simple ul li a:hover { background: rgba(255, 255, 255, 0.04) !important; color: #60a5fa !important; } /* Make dropdown items flow vertically inside the mobile drawer menu */ .dropdown-split-layout { position: static !important; width: 100% !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; display: none !important; background: rgba(0, 55, 139, 0.01) !important; border: none !important; box-shadow: none !important; padding: 6px 0 !important; pointer-events: auto !important; transform: none !important; flex-direction: column !important; } [data-theme="dark"] .dropdown-split-layout { background: rgba(255, 255, 255, 0.01) !important; } .has-dropdown.active > .dropdown-split-layout { display: flex !important; } /* Hide decorative side-image in mobile menu */ .dropdown-image-side { display: none !important; } .dropdown-links-side { padding: 0 !important; width: 100% !important; } .dropdown-links-side li { width: 100% !important; margin-bottom: 0 !important; } .dropdown-links-side li a { font-size: var(--fs-body-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; padding: 10px 36px !important; border-radius: 0 !important; display: block !important; background: transparent !important; border: none !important; transition: all 0.3s ease !important; } [data-theme="dark"] .dropdown-links-side li a { color: #cbd5e1 !important; } .dropdown-links-side li a:hover { background: rgba(0, 55, 139, 0.04) !important; color: var(--bruntab-blue) !important; padding-inline-start: 40px !important; } [data-theme="dark"] .dropdown-links-side li a:hover { background: rgba(255, 255, 255, 0.04) !important; color: #60a5fa !important; } /* Flow for deep sub-dropdowns */ .dropdown-links-side .sub-dropdown { position: static !important; width: 100% !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; display: none !important; background: rgba(0, 55, 139, 0.02) !important; border: none !important; box-shadow: none !important; padding: 6px 12px 6px 48px !important; transform: none !important; } [data-theme="dark"] .dropdown-links-side .sub-dropdown { background: rgba(255, 255, 255, 0.02) !important; } html[dir="rtl"] .dropdown-links-side .sub-dropdown { padding: 6px 48px 6px 12px !important; } .dropdown-links-side .has-sub-dropdown.active .sub-dropdown { display: block !important; } /* Mega Menu Responsive Optimizations */ .dropdown-mega-layout { position: static !important; transform: none !important; left: auto !important; right: auto !important; min-width: 0 !important; width: 100% !important; } /* Force mega columns to single column so they fit in narrow drawer */ .dropdown-mega-columns { grid-template-columns: 1fr !important; gap: 8px !important; padding: 8px 12px !important; } /* Ensure mega column links wrap and scroll properly */ .mega-column-links li a { white-space: normal !important; padding: 8px 24px !important; } /* Platform callout card compact on mobile */ .platform-callout-card { margin: 4px 12px !important; } /* Disable hover transforms on mobile to prevent dropdowns from shifting off-screen */ .has-dropdown:hover > .dropdown-mega-layout, .has-dropdown:hover > .dropdown-split-layout, .has-dropdown:hover > .dropdown { transform: none !important; opacity: 1 !important; visibility: visible !important; position: static !important; } .nav-menu .dropdown, .nav-menu .dropdown-mega-layout, .nav-menu .dropdown-split-layout { position: static !important; transform: none !important; left: auto !important; right: auto !important; min-width: 0 !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 !important; pointer-events: auto !important; } html[dir="rtl"] .dropdown-split-layout, html[dir="ltr"] .dropdown-split-layout { flex-direction: column !important; } .dropdown-mega-columns { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } .mega-column { padding: 8px 24px 16px 24px !important; } .mega-column-title { font-size: var(--fs-caption) !important; font-weight: 700 !important; color: var(--text-secondary) !important; margin-bottom: 10px !important; padding-bottom: 4px !important; border-bottom: 1px dashed rgba(0, 55, 139, 0.08) !important; } [data-theme="dark"] .mega-column-title { color: #cbd5e1 !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } .mega-column-links { padding-inline-start: 12px !important; border-inline-start: 1.5px solid rgba(0, 55, 139, 0.08) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } [data-theme="dark"] .mega-column-links { border-inline-start-color: rgba(255, 255, 255, 0.08) !important; } .mega-column-links li a { font-size: var(--fs-body-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; padding: 8px 10px !important; border-radius: 6px !important; background: transparent !important; border: none !important; display: block !important; transition: all 0.2s ease !important; white-space: normal !important; /* Allow normal wrapping on small mobile screens */ } [data-theme="dark"] .mega-column-links li a { color: #cbd5e1 !important; } .mega-column-links li a:hover { background: rgba(0, 55, 139, 0.04) !important; color: var(--bruntab-blue) !important; padding-inline-start: 14px !important; } [data-theme="dark"] .mega-column-links li a:hover { background: rgba(255, 255, 255, 0.04) !important; color: #60a5fa !important; } .platform-callout-card { margin: 12px 24px !important; padding: 16px !important; border-radius: 12px !important; background: rgba(0, 55, 139, 0.03) !important; border: 1px solid rgba(0, 55, 139, 0.08) !important; } [data-theme="dark"] .platform-callout-card { background: rgba(255, 255, 255, 0.02) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .platform-link-btn { width: 100% !important; justify-content: center !important; } } /* 3. High-End Sweeping Shine & Smooth 3D Pulsing for Residential Hero CTA Button */ .hero-cta-pulse { animation: res-cta-glow-pulse 2.2s infinite ease-in-out !important; position: relative !important; overflow: hidden !important; } .hero-cta-pulse::after { content: '' !important; position: absolute !important; top: 0 !important; left: -150% !important; width: 60% !important; height: 100% !important; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% ) !important; transform: skewX(-25deg) !important; animation: cta-shine-sweep 4.5s infinite ease-in-out !important; z-index: 5 !important; } @keyframes cta-shine-sweep { 0% { left: -150%; } 40% { left: 150%; } 100% { left: 150%; } } @keyframes res-cta-glow-pulse { 0% { transform: scale3d(1, 1, 1); box-shadow: 0 0 0 0 rgba(242, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.15); } 50% { transform: scale3d(1.05, 1.05, 1.05); box-shadow: 0 0 0 12px rgba(242, 0, 0, 0), 0 12px 28px rgba(242, 0, 0, 0.35); background-color: var(--bruntab-red) !important; color: #ffffff !important; } 100% { transform: scale3d(1, 1, 1); box-shadow: 0 0 0 0 rgba(242, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.15); } } /* ==================================================== ADDITIONAL PREMIUM REBUILD BRAND ENHANCEMENTS ==================================================== */ /* 1. Logo Stack Label Styling */ .logo-since { font-family: var(--font-en); text-transform: uppercase; font-size: var(--fs-micro); color: #64748B; font-weight: 700; margin-top: 5px !important; /* Added 5px margin from top to balance spacing */ letter-spacing: 0.05em; display: block; } [data-theme="dark"] .logo-since { color: #94A3B8; } /* 2. Bruntab History & Dashboard Showcase Section */ .bruntab-history-section { padding: 85px 0; background: radial-gradient(circle at 10% 20%, rgba(0, 55, 139, 0.03) 0%, transparent 40%), var(--bg-primary); border-bottom: 1px solid var(--border-color); } .history-layout { display: grid; /* EN: DOM is [text, image] -> text 2/3, image 1/3 */ grid-template-columns: 2fr 1fr; gap: 60px; align-items: center; } /* FA: DOM is [image, text] -> image 1/3, text 2/3 */ html[lang="fa"] .history-layout { grid-template-columns: 1fr 2fr; } .history-content { display: flex; flex-direction: column; gap: 20px; } .history-image-wrapper { position: relative; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; display: flex !important; justify-content: center !important; align-items: center !important; perspective: 1200px; z-index: 1; } [data-theme="dark"] .history-image-wrapper { background: transparent !important; box-shadow: none !important; border: none !important; } .history-image-inner { width: 100%; max-width: 580px; transform-style: preserve-3d; animation: floatMotion 6s ease-in-out infinite; transition: var(--transition-premium); } .history-image-inner img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .history-image-inner:hover { transform: rotateY(-4deg) rotateX(2deg) scale(1.02); } @keyframes floatMotion { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(0.5deg); } 100% { transform: translateY(0px) rotate(0deg); } } .about-body-text { font-size: var(--fs-body); line-height: 1.8; color: var(--text-slate-700); text-align: justify; } .about-body-text p { text-align: justify; margin: 0 0 10px; } .about-body-text p:last-child { margin-bottom: 0; } /* About section: ONE fixed-size frame; all images fill it identically and crossfade in place. Fixed aspect ratio + object-fit:cover means the frame height never changes between slides -> no layout shift, feels like one image replacing another. */ .about-images-stack { position: relative; width: 100%; } .about-images-stack .history-image-inner { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; } /* Every slide fills the exact same rectangle (cover), stacked on top of each other; only opacity changes. Selector is more specific than the shared .history-image-inner img rule so width/height here win. */ .about-images-stack .about-img-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease-in-out; } .about-images-stack .about-img-slide.active { opacity: 1; } /* About section: optional caption badge overlaid at the bottom of a slide. Renders only when the admin fills the per-image caption field. Crossfades in sync with its slide (see .about-caption-slide.active below). */ .about-images-stack .about-caption-slide { position: absolute; bottom: 14px; /* Logical inset: start edge = right in RTL (fa), left in LTR (en). */ inset-inline-start: 14px; z-index: 2; max-width: calc(100% - 28px); padding: 7px 13px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); color: #0f172a; font-size: var(--fs-body-sm); font-weight: 600; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity 0.9s ease-in-out; } .about-images-stack .about-caption-slide.active { opacity: 1; } /* 3. Two-Row Scrolling Trusted Partners & Reversing animations */ .marquee-row-wrapper { width: 100%; position: relative; } .marquee-row-title { font-size: var(--fs-body-sm); font-weight: 800; color: var(--text-slate-500); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.05em; padding-inline-start: 12px; border-inline-start: 4px solid var(--bruntab-red); } html[lang="fa"] .marquee-row-title { font-family: var(--font-fa); font-size: var(--fs-body); } .marquee-track-reverse { animation: marquee-scroll-reverse 45s linear infinite !important; } @keyframes marquee-scroll-reverse { 0% { transform: translate3d(-50%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } /* 4. Enlarged Marquee Logos */ .marquee-logo { height: 65px !important; width: 160px !important; } .marquee-logo img { max-height: 55px !important; } @media (max-width: 992px) { /* Must match specificity of the FA desktop rule (html[lang="fa"] .history-layout) or it won't override on Persian — that was why FA stayed 2-column on mobile. */ .history-layout, html[lang="fa"] .history-layout { grid-template-columns: 1fr; gap: 45px; text-align: center; } /* Mobile: image block first (top), content below — both languages */ .about-images-stack { order: 1; } .history-content { order: 2; } .history-image-inner { margin: 0 auto; } } /* Premium Dynamic Sun & Moon Theme Toggle Refinements */ .btn-theme-toggle { background: none !important; border: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px !important; border-radius: 50% !important; color: rgba(255, 255, 255, 0.75) !important; /* Premium semi-transparent white */ background-color: rgba(255, 255, 255, 0.05) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; margin-inline-end: 15px !important; width: 36px !important; height: 36px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } .btn-theme-toggle:hover { background-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; /* Crisp white on hover */ border-color: rgba(255, 255, 255, 0.25) !important; transform: rotate(15deg) scale(1.05) !important; } [data-theme="dark"] .btn-theme-toggle { color: rgba(255, 255, 255, 0.7) !important; background-color: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .btn-theme-toggle:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: #FBBF24 !important; /* Warm gold for the sun */ border-color: rgba(251, 191, 36, 0.2) !important; } .btn-theme-toggle .theme-icon { width: 18px !important; height: 18px !important; stroke-width: 2.5px !important; stroke: currentColor !important; fill: none !important; transition: opacity 0.3s, transform 0.3s !important; } /* In Light Mode: hide the sun-icon, show the moon-icon */ .btn-theme-toggle .sun-icon { display: none !important; } .btn-theme-toggle .moon-icon { display: block !important; } /* In Dark Mode: hide the moon-icon, show the sun-icon */ [data-theme="dark"] .btn-theme-toggle .sun-icon { display: block !important; } [data-theme="dark"] .btn-theme-toggle .moon-icon { display: none !important; } /* Premium Consultation Capsule Accessibility in Dark Mode */ [data-theme="dark"] .consultation-link { background: #0b1120 !important; /* Dark background to match dark theme */ color: #ffffff !important; /* Premium crisp white text for 100% readability */ } /* Mobile Menu Dark Mode Visibility & LTR Consultant Button Wrapping Fix */ [data-theme="dark"] .mobile-menu-toggle span { background: #ffffff !important; } @media (max-width: 768px) { .consultation-link { padding: 6px 14px !important; font-size: var(--fs-caption) !important; white-space: nowrap !important; } } /* ── Utility ─────────────────────────────────────────────────────────────── */ .hidden { display: none !important; } /* ── Chat pre-chat gate ────────────────────────────────────────────────────── */ .chat-prechat-gate { padding: 1rem 1.1rem 0.75rem; } .chat-prechat-gate .prechat-intro { font-size: var(--fs-caption); color: var(--text-secondary, #555); margin-bottom: 0.7rem; text-align: right; } .chat-gate-input { width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 8px; border: 1px solid #dde1ea; border-radius: 8px; font-size: var(--fs-caption); font-family: inherit; background: #f8fafc; color: #1a1a2e; outline: none; transition: border-color 0.18s; direction: rtl; } .chat-gate-input:focus { border-color: var(--bruntab-blue, #00378b); background: #fff; } [data-theme="dark"] .chat-gate-input { background: #1e2535; color: #e8ecf4; border-color: #3a4060; } /* not-robot checkbox */ .chat-not-robot-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--text-secondary, #555); margin-bottom: 10px; cursor: pointer; direction: rtl; } .chat-not-robot-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bruntab-blue, #00378b); flex-shrink: 0; } /* start conversation button — consistent site font */ .chat-start-btn { width: 100%; padding: 10px 0; background: var(--bruntab-blue, #00378b); color: #fff; border: none; border-radius: 8px; font-size: var(--fs-body-sm); font-family: inherit; font-weight: 700; cursor: pointer; transition: background 0.18s, transform 0.1s; letter-spacing: 0; } .chat-start-btn:hover { background: #00287a; } .chat-start-btn:active { transform: scale(0.98); } .chat-start-btn:disabled { opacity: .55; cursor: not-allowed; } /* ── Live chat area + input bar ────────────────────────────────────────────── */ .chat-messages-area { display: flex; flex-direction: column; gap: 10px; max-height: 220px; overflow-y: auto; padding: 10px 8px; background: rgba(0,55,139,0.03); border-radius: 8px; border: 1px solid rgba(0,55,139,0.1); } .chat-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 85%; } .chat-msg.system { align-self: flex-start; } .chat-msg.user { align-self: flex-end; justify-content: flex-end; max-width: 80%; } .msg-avatar { width: 26px; height: 26px; background: rgba(0,55,139,0.08); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); flex-shrink: 0; } .chat-support-avatar { background: #fff; border: 1px solid rgba(0,55,139,0.12); width: 44px; height: 26px; border-radius: 6px; } .msg-bubble { padding: 9px 13px; border-radius: 14px; font-size: var(--fs-caption); line-height: 1.55; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .chat-msg.system .msg-bubble { background: #fff; color: #1a1a2e; border: 1px solid rgba(0,55,139,0.12); border-bottom-left-radius: 3px; } .chat-msg.user .msg-bubble { background: var(--bruntab-blue, #00378b); color: #fff; border-bottom-right-radius: 3px; } .chat-img-preview { max-width: 160px; max-height: 160px; border-radius: 10px; border: 1px solid rgba(0,55,139,0.15); display: block; cursor: zoom-in; object-fit: cover; } /* input wrap: text | emoji | attach | send — single line */ .chat-live-input-wrap { position: relative; border-top: 1px solid rgba(0,55,139,0.1); padding: 7px 8px; background: #f4f6fb; } .chat-live-input-form { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; } .chat-msg-input { flex: 1; min-width: 0; height: 36px; border: 1px solid rgba(0,55,139,0.18); border-radius: 18px; padding: 0 12px; font-size: var(--fs-caption); font-family: inherit; background: #fff; color: #1a1a2e; outline: none; transition: border-color 0.18s; direction: rtl; } .chat-msg-input:focus { border-color: var(--bruntab-blue, #00378b); box-shadow: 0 0 0 2px rgba(0,55,139,0.08); } .chat-tool-btn { flex-shrink: 0; width: 32px; height: 32px; background: none; border: none; cursor: pointer; font-size: var(--fs-h5); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #5a6a8a; transition: background 0.15s; padding: 0; } .chat-tool-btn:hover { background: rgba(0,55,139,0.08); } .chat-send-btn { flex-shrink: 0; width: 34px; height: 34px; background: var(--bruntab-blue, #00378b); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s; } .chat-send-btn:hover { background: #00287a; } /* emoji panel (visitor side) */ .chat-emoji-panel { position: absolute; bottom: 52px; right: 8px; background: #fff; border: 1px solid rgba(0,55,139,0.15); border-radius: 10px; padding: 8px; box-shadow: 0 4px 18px rgba(0,55,139,0.12); z-index: 200; } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-width: 240px; } .emoji-btn { background: none; border: none; cursor: pointer; font-size: var(--fs-body); padding: 4px; border-radius: 5px; line-height: 1; transition: background 0.12s; } .emoji-btn:hover { background: rgba(0,55,139,0.08); } /* dark mode adjustments */ [data-theme="dark"] .chat-messages-area { background: rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .chat-msg.system .msg-bubble { background: #1e2535; color: #e8ecf4; border-color: #3a4060; } [data-theme="dark"] .chat-msg-input { background: #1e2535; color: #e8ecf4; border-color: #3a4060; } [data-theme="dark"] .chat-live-input-wrap { background: #151d2e; border-color: #2a3555; } [data-theme="dark"] .chat-emoji-panel { background: #1e2535; border-color: #3a4060; } [data-theme="dark"] .msg-avatar { background: #2a3555; } [data-theme="dark"] .chat-support-avatar { background: #1e2f55; } [data-theme="dark"] .chat-gate-input { background: #1e2535; color: #e8ecf4; border-color: #3a4060; } [data-theme="dark"] .chat-start-btn { background: #0050cc; } [data-theme="dark"] .chat-tool-btn { color: #8899bb; } .chat-offline-notice { margin: 0.75rem 1.1rem; padding: 0.7rem 0.9rem; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; font-size: var(--fs-caption); color: #9a3412; line-height: 1.5; text-align: right; } [data-theme="dark"] .chat-offline-notice { background: #3b1c0a; border-color: #7c2d12; color: #fdba74; } /* Flash messages (public site) */ .flash-messages { margin: 8px 0; min-height: 0; } .flash-messages .alert { padding: 12px 18px; border-radius: 8px; font-size: var(--fs-body-sm); font-weight: 600; margin-bottom: 8px; line-height: 1.5; } .flash-messages .alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .flash-messages .alert-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .flash-messages .alert-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } [data-theme="dark"] .flash-messages .alert-success { background: #052e16; color: #86efac; border-color: #166534; } [data-theme="dark"] .flash-messages .alert-danger { background: #2d0a0a; color: #fca5a5; border-color: #7f1d1d; } [data-theme="dark"] .flash-messages .alert-info { background: #0c1a3a; color: #93c5fd; border-color: #1e3a6e; } /* ==================================================== BRANDED 404 — LOST ENERGY SIGNAL ==================================================== */ .not-found-page { position: relative; isolation: isolate; display: flex; min-height: clamp(620px, 75vh, 780px); overflow: hidden; background: radial-gradient(circle at 18% 15%, rgba(0, 55, 139, 0.09), transparent 34%), linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); } .not-found-glow { position: absolute; z-index: -2; width: 420px; height: 420px; border-radius: 50%; filter: blur(4px); pointer-events: none; } .not-found-glow-blue { inset-block-start: -240px; inset-inline-end: -120px; background: rgba(0, 55, 139, 0.09); } .not-found-glow-red { inset-block-end: -320px; inset-inline-start: 12%; background: rgba(242, 0, 0, 0.07); } .not-found-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.95fr); align-items: center; gap: clamp(36px, 6vw, 92px); padding-block: clamp(72px, 9vw, 120px); } .not-found-copy { position: relative; z-index: 2; } .not-found-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 7px 14px; color: var(--bruntab-blue); background: rgba(0, 55, 139, 0.07); border: 1px solid rgba(0, 55, 139, 0.12); border-radius: 999px; font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.02em; } .not-found-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bruntab-red); box-shadow: 0 0 0 5px rgba(242, 0, 0, 0.1); animation: not-found-pulse 2s ease-out infinite; } .not-found-copy h1 { max-width: 720px; margin: 0; color: var(--text-primary); font-size: clamp(2.6rem, 4.8vw, 4.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.045em; } .not-found-copy h1 span { color: var(--bruntab-blue); } html[dir="rtl"] .not-found-copy h1 { font-size: clamp(1.25rem, 3vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.22; white-space: nowrap; } .not-found-description { max-width: 620px; margin: 24px 0 32px; color: var(--text-secondary); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.9; } .not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; } .not-found-actions .btn { min-height: 52px; border-radius: 12px; } .not-found-home-btn { gap: 18px; } .not-found-arrow { display: inline-block; font-size: 1.25rem; transition: transform 0.25s ease; } html[dir="ltr"] .not-found-arrow { transform: rotate(180deg); } .not-found-home-btn:hover .not-found-arrow { transform: translateX(-4px); } html[dir="ltr"] .not-found-home-btn:hover .not-found-arrow { transform: rotate(180deg) translateX(-4px); } .not-found-contact-btn { color: var(--bruntab-blue); background: var(--card-bg); border-color: rgba(0, 55, 139, 0.18); box-shadow: var(--shadow-sm); } .not-found-contact-btn:hover { color: var(--bruntab-red); border-color: rgba(242, 0, 0, 0.28); transform: translateY(-3px); box-shadow: var(--shadow-md); } .not-found-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px; color: var(--text-secondary); font-size: var(--fs-body-sm); } .not-found-links span { opacity: 0.72; } .not-found-links a { position: relative; color: var(--text-primary); font-weight: 700; } .not-found-links a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -3px; height: 2px; background: var(--bruntab-red); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } .not-found-links a:hover::after { transform: scaleX(1); } .not-found-visual { position: relative; display: grid; place-items: center; min-height: 470px; } .not-found-orbit { position: absolute; border: 1px solid rgba(0, 55, 139, 0.14); border-radius: 50%; } .not-found-orbit-outer { width: min(460px, 100%); aspect-ratio: 1; animation: not-found-spin 24s linear infinite; } .not-found-orbit-inner { width: min(330px, 72%); aspect-ratio: 1; border-style: dashed; opacity: 0.72; animation: not-found-spin 18s linear infinite reverse; } .not-found-orbit-node { position: absolute; width: 12px; height: 12px; border: 3px solid var(--bg-primary); border-radius: 50%; box-sizing: content-box; } .not-found-orbit-node.node-blue { inset-block-start: 17%; inset-inline-end: 12%; background: var(--bruntab-blue); box-shadow: 0 0 22px rgba(0, 55, 139, 0.55); } .not-found-orbit-node.node-red { inset-block-end: 7%; inset-inline-start: 25%; background: var(--bruntab-red); box-shadow: 0 0 22px rgba(242, 0, 0, 0.5); } .not-found-code { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; color: var(--bruntab-blue); font-family: var(--font-en); font-size: clamp(6.8rem, 11vw, 10rem); font-weight: 800; line-height: 1; letter-spacing: -0.09em; text-shadow: 0 18px 45px rgba(0, 55, 139, 0.16); } .not-found-zero { display: grid; place-items: center; width: 0.68em; height: 0.86em; margin-inline: 0.04em 0.12em; border: 0.09em solid currentColor; border-radius: 50%; background: var(--card-bg); box-shadow: inset 0 0 0 0.045em rgba(0, 55, 139, 0.08), 0 16px 36px rgba(0, 55, 139, 0.12); } .not-found-zero-core { display: grid; place-items: center; width: 46%; aspect-ratio: 1; color: #fff; background: var(--bruntab-red); border-radius: 50%; box-shadow: 0 0 0 9px rgba(242, 0, 0, 0.09); } .not-found-bolt { font-size: 0.18em; filter: grayscale(1) brightness(0) invert(1); } [data-theme="dark"] .not-found-page { background: radial-gradient(circle at 18% 15%, rgba(96, 165, 250, 0.09), transparent 34%), linear-gradient(135deg, var(--bg-primary) 0%, #111c31 100%); } [data-theme="dark"] .not-found-eyebrow { color: #93c5fd; background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.14); } [data-theme="dark"] .not-found-code { color: #70a9ff; text-shadow: 0 18px 50px rgba(0, 0, 0, 0.36); } [data-theme="dark"] .not-found-copy h1 span { color: #70a9ff; } [data-theme="dark"] .not-found-orbit { border-color: rgba(112, 169, 255, 0.17); } [data-theme="dark"] .not-found-contact-btn { color: #93c5fd; border-color: rgba(147, 197, 253, 0.18); } @keyframes not-found-spin { to { transform: rotate(360deg); } } @keyframes not-found-pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 0, 0, 0.3); } 70%, 100% { box-shadow: 0 0 0 8px rgba(242, 0, 0, 0); } } @media (max-width: 992px) { .not-found-container { grid-template-columns: 1fr; gap: 12px; padding-block: 64px 80px; } .not-found-copy { text-align: center; } .not-found-eyebrow, .not-found-actions, .not-found-links { justify-content: center; } .not-found-description { margin-inline: auto; } .not-found-visual { grid-row: 1; min-height: 350px; } .not-found-orbit-outer { width: min(350px, 86vw); } } @media (max-width: 576px) { .not-found-page { min-height: auto; } .not-found-container { padding-block: 44px 64px; } .not-found-copy h1 { font-size: clamp(2.2rem, 11vw, 3rem); } .not-found-description { margin-block: 18px 26px; font-size: 0.95rem; } .not-found-actions { display: grid; grid-template-columns: 1fr; } .not-found-actions .btn { width: 100%; } .not-found-links > span { flex-basis: 100%; } .not-found-visual { min-height: 280px; } .not-found-code { font-size: clamp(6rem, 31vw, 8rem); } .not-found-orbit-outer { width: min(280px, 82vw); } .not-found-orbit-inner { width: min(210px, 62vw); } } @media (prefers-reduced-motion: reduce) { .not-found-orbit, .not-found-status-dot { animation: none; } }