/* Google Fonts Import */ /* Google Fonts Import - MOVED TO HTML /* @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Poppins:wght@400;500;600;700&display=swap"); */ /* Custom branding – Grey & Sky Blue palette */ :root { --primary-brand: #00aaff; /* Sky Blue */ --secondary-brand: #33bfff; /* Lighter Sky Blue */ --dark-grey: #343a40; --accent-grey: #f8f9fa; --text-dark: #212529; --forest-green: #228b22; /* Forest green for important CTAs */ /* Standard Color Mapping */ --primary: #0d6efd; --secondary: #6c757d; --success: #198754; --info: #0dcaf0; --warning: #ffc107; --danger: #dc3545; --dark: #212529; --light: #f8f9fa; } html, body { width: 100%; overflow-x: hidden; } body { font-family: "Lato", sans-serif; background-color: var(--accent-grey); color: var(--text-dark); line-height: 1.6; /* Optimal for body text readability */ letter-spacing: -0.01em; /* Slight tightening for modern look */ } /* =================================== OPTIMIZED TYPOGRAPHY =================================== */ /* Headings - Optimized Line Heights */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Poppins", sans-serif; } /* Headings - Optimized Line Heights */ h1, .h1 { line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1rem; font-weight: 700; } h2, .h2 { line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 0.875rem; font-weight: 700; } h3, .h3 { line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 0.75rem; font-weight: 600; } h4, .h4 { line-height: 1.5; letter-spacing: -0.005em; margin-bottom: 0.625rem; font-weight: 600; } h5, .h5 { line-height: 1.5; letter-spacing: 0; margin-bottom: 0.5rem; font-weight: 600; } h6, .h6 { line-height: 1.5; letter-spacing: 0.01em; margin-bottom: 0.5rem; font-weight: 600; text-transform: uppercase; font-size: 0.875rem; } /* Display Headings - Extra Large */ .display-1, .display-2, .display-3 { line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; } .display-4, .display-5, .display-6 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; } /* Paragraph Rhythm */ p { line-height: 1.7; margin-bottom: 1.25rem; letter-spacing: -0.005em; } p.lead { line-height: 1.65; letter-spacing: -0.01em; margin-bottom: 1.5rem; font-size: 1.125rem; } p.small, .small { line-height: 1.6; letter-spacing: 0; font-size: 0.875rem; } /* List Spacing */ ul, ol { line-height: 1.7; margin-bottom: 1.25rem; } li { margin-bottom: 0.5rem; } li:last-child { margin-bottom: 0; } /* Link Optimization */ a { letter-spacing: inherit; transition: color 0.2s ease; } /* Button Text */ .btn { letter-spacing: 0.025em; font-weight: 600; /* Increased weight */ padding: 0.8rem 1.75rem; /* Larger padding for better clickability */ font-size: 1.1rem; /* Larger text */ transition: all 0.3s ease; } .btn-sm { letter-spacing: 0.02em; padding: 0.5rem 1rem; font-size: 0.95rem; } .btn-lg { letter-spacing: 0.03em; padding: 1.15rem 2.5rem; /* Significantly larger */ font-size: 1.35rem; /* Prominent text */ } /* Card Text */ .card-title { line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 0.75rem; } .card-text { line-height: 1.6; letter-spacing: -0.005em; } /* Badge & Label Text */ .badge { letter-spacing: 0.03em; font-weight: 500; } /* Navbar Text */ .navbar-brand { letter-spacing: -0.02em; font-weight: 700; } .nav-link { letter-spacing: 0.01em; } /* Footer Text */ footer p { line-height: 1.6; margin-bottom: 0.75rem; } footer h6 { letter-spacing: 0.05em; margin-bottom: 1rem; } /* Blockquote */ blockquote { line-height: 1.8; letter-spacing: -0.005em; margin-bottom: 1.5rem; padding-left: 1.5rem; border-left: 4px solid var(--primary-brand); font-style: italic; } /* Code & Pre */ code { letter-spacing: 0; font-family: "Courier New", monospace; } pre { line-height: 1.5; letter-spacing: 0; } /* Responsive Typography */ @media (max-width: 768px) { body { line-height: 1.65; } h1, .h1 { line-height: 1.25; } h2, .h2 { line-height: 1.35; } p.lead { font-size: 1.0625rem; line-height: 1.7; } } /* Typography */ .ls-1 { letter-spacing: 1px; } .fw-semibold { font-weight: 600; } .opacity-90 { opacity: 0.9; } /* Navbar */ .navbar { transition: all 0.4s ease; padding: 0.5rem 0; /* Reduced from 1rem */ } .navbar.bg-dark { padding: 0.4rem 0; /* Reduced from 0.8rem */ /* Keep navbar dark grey/black for contrast, or use brand blue? User said Grey and Sky Blue. Dark Grey implementation */ background-color: rgba(33, 37, 41, 0.95) !important; backdrop-filter: blur(10px); } .navbar-brand { font-size: 1.25rem; /* Reduced from 1.5rem */ letter-spacing: -0.5px; } .nav-link { padding: 0.4rem 0.8rem !important; /* More compact nav links */ font-size: 0.9rem; /* Slightly smaller text */ } /* Dropdown Menu Styling */ .dropdown-menu { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); padding: 0.75rem 0; margin-top: 0.5rem; min-width: 260px; animation: dropdownFadeIn 0.3s ease; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-item { padding: 0.65rem 1.25rem; font-size: 0.9rem; transition: all 0.2s ease; border-left: 3px solid transparent; } .dropdown-item:hover { background-color: #f8f9fa; border-left-color: var(--primary-brand); color: var(--primary-brand); padding-left: 1.5rem; transform: translateX(5px); } .dropdown-item:active { background-color: var(--primary-brand); color: white; } .dropdown-divider { margin: 0.5rem 0; border-top: 1px solid #e9ecef; } /* Dropdown toggle arrow */ .dropdown-toggle::after { transition: transform 0.3s ease; } .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } /* Glowing Section Divider */ .section-divider { height: 3px; background: linear-gradient( 90deg, transparent 0%, var(--primary-brand) 20%, var(--secondary-brand) 50%, var(--primary-brand) 80%, transparent 100% ); border: none; margin: 0 auto 2rem; max-width: 200px; box-shadow: 0 0 20px rgba(0, 170, 255, 0.6), 0 0 40px rgba(0, 170, 255, 0.3); animation: glowPulse 3s ease-in-out infinite; border-radius: 2px; } @keyframes glowPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 20px rgba(0, 170, 255, 0.6), 0 0 40px rgba(0, 170, 255, 0.3); } 50% { opacity: 0.8; box-shadow: 0 0 30px rgba(0, 170, 255, 0.8), 0 0 60px rgba(0, 170, 255, 0.5); } } /* Wider variant for full-width sections */ .section-divider-wide { max-width: 400px; } /* Global Overrides for Bootstrap Success Class to map to Sky Blue Theme */ .text-success { color: var(--primary-brand) !important; } .bg-success { background-color: var(--primary-brand) !important; } .border-success { border-color: var(--primary-brand) !important; } /* Buttons */ .btn-success { background-color: var(--primary-brand) !important; border-color: var(--primary-brand) !important; color: #fff !important; transition: all 0.3s ease; } .btn-success:hover { background-color: var(--secondary-brand) !important; border-color: var(--secondary-brand) !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 170, 255, 0.4); } .btn-outline-success { color: var(--primary-brand) !important; border-color: var(--primary-brand) !important; } .btn-outline-success:hover { background-color: var(--primary-brand) !important; color: #fff !important; } .btn-outline-light:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } /* Forest Green Buttons for Important Business CTAs */ .btn-danger { background-color: var(--forest-green) !important; border-color: var(--forest-green) !important; color: #fff !important; transition: all 0.3s ease; } .btn-danger:hover { background-color: #1a6b1a !important; /* Darker forest green */ border-color: #1a6b1a !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(34, 139, 34, 0.4); } .btn-outline-danger { color: var(--forest-green) !important; border-color: var(--forest-green) !important; } .btn-outline-danger:hover { background-color: var(--forest-green) !important; color: #fff !important; } .bg-danger { background-color: var(--forest-green) !important; } .text-danger { color: var(--forest-green) !important; } /* Utilities */ .text-success-light { color: #80d4ff !important; /* Lighter sky blue */ } /* Hero Section */ header#hero { position: relative; background-attachment: fixed !important; } /* Cards */ .card { border: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); background: white; border-radius: 12px; overflow: hidden; } .hover-card:hover { transform: translateY(-8px); /* Blue shadow */ box-shadow: 0 15px 30px rgba(0, 170, 255, 0.15) !important; } .icon-box { transition: transform 0.3s ease; } .card:hover .icon-box { transform: scale(1.1); } /* Light Shadow Overrides */ .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important; /* Lighter than default 0.075 */ } .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important; /* Lighter than default 0.15 */ } .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important; /* Lighter than default 0.175 */ } /* Card shadows */ .card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; /* Very light default shadow */ } /* Dropdown shadow */ .dropdown-menu { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important; /* Lighter dropdown shadow */ } /* Navbar shadow */ .navbar.shadow { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; } /* Animations */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fadeUp 0.8s ease-out forwards; } /* Animated Hero Gradient */ .hero-animated { /* Deep Tech Palette: Dark Navy, Dark Teal, Deep Black-Blue */ background: linear-gradient(-45deg, #020617, #0f172a, #115e59, #1e1b4b); background-size: 400% 400%; animation: gradientFlow 15s ease infinite; position: relative; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Footer Links */ footer a:hover { color: var(--primary-brand) !important; text-decoration: underline !important; } /* =================================== SPACING OPTIMIZATION Reduce Bootstrap's default spacing for a more compact layout =================================== */ /* Reduce py-5 from 3rem (48px) to 2.5rem (40px) */ .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } /* Adjust py-4 from 1.5rem (24px) to 1.75rem (28px) */ .py-4 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; } /* Reduce margin utilities */ .my-5, .mt-5 { margin-top: 2.5rem !important; } .my-5, .mb-5 { margin-bottom: 2.5rem !important; } .my-4, .mt-4 { margin-top: 1.75rem !important; } .my-4, .mb-4 { margin-bottom: 1.75rem !important; } /* Reduce double-padding when container.py-5 is inside section.py-5 */ section .container.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } /* Hero sections maintain slightly more breathing room */ header.hero-animated .container.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } /* Reduce excessive bottom margins on text elements */ .mb-5.text-center h2, .mb-5.text-center h3 { margin-bottom: 2rem !important; } /* Footer Spacing Reduction */ footer { padding-top: 2rem !important; padding-bottom: 2rem !important; } footer h4, footer h5, footer h6 { margin-bottom: 0.75rem !important; } footer p { margin-bottom: 0.5rem !important; } footer ul { margin-bottom: 0 !important; } footer li { margin-bottom: 0.5rem !important; } footer .border-top { margin-top: 2rem !important; padding-top: 1.5rem !important; } footer .row { row-gap: 1.5rem !important; } /* Curved Section Dividers */ .section-curve-top, .section-curve-bottom { position: relative; } .section-curve-top::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: inherit; z-index: 1; } .section-curve-bottom::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: inherit; z-index: 1; } /* Wave Curve - Top */ .wave-top { position: absolute; top: -1px; left: 0; width: 100%; max-width: 100%; overflow: hidden; line-height: 0; } .wave-top svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; } /* Wave Curve - Bottom */ .wave-bottom { position: absolute; bottom: -1px; left: 0; width: 100%; max-width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .wave-bottom svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; } /* Wave fill colors for different backgrounds */ .wave-white { fill: #ffffff; } .wave-light { fill: #f8f9fa; } .wave-dark { fill: #212529; } .wave-success { fill: var(--primary-brand); } .wave-danger { fill: var(--forest-green); } /* =================================== CSS SHAPES & FANCY LAYOUTS =================================== */ /* Floating Decorative Shapes */ .floating-shape { position: absolute; opacity: 0.1; pointer-events: none; z-index: 0; } .shape-circle { border-radius: 50%; background: linear-gradient( 135deg, var(--primary-brand), var(--secondary-brand) ); } .shape-square { background: linear-gradient( 135deg, var(--primary-brand), var(--secondary-brand) ); transform: rotate(45deg); } .shape-triangle { width: 0; height: 0; background: transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid var(--primary-brand); opacity: 0.1; } /* Hexagon Shape */ .shape-hexagon { width: 100px; height: 57.74px; background: var(--primary-brand); position: relative; opacity: 0.1; } .shape-hexagon::before, .shape-hexagon::after { content: ""; position: absolute; width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; } .shape-hexagon::before { bottom: 100%; border-bottom: 28.87px solid var(--primary-brand); } .shape-hexagon::after { top: 100%; border-top: 28.87px solid var(--primary-brand); } /* Blob Shapes */ .blob-shape { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: linear-gradient( 135deg, var(--primary-brand), var(--secondary-brand) ); opacity: 0.08; animation: blobFloat 20s ease-in-out infinite; } @keyframes blobFloat { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: translate(0, 0) rotate(0deg); } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; transform: translate(20px, -20px) rotate(90deg); } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; transform: translate(-20px, 20px) rotate(180deg); } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; transform: translate(20px, 20px) rotate(270deg); } } /* Gradient Overlays */ .gradient-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(0, 170, 255, 0.1) 0%, rgba(51, 191, 255, 0.05) 100% ); pointer-events: none; z-index: 0; } /* Fancy Card Layouts */ .fancy-card { position: relative; overflow: hidden; } .fancy-card::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient( 45deg, var(--primary-brand), var(--secondary-brand), var(--forest-green) ); border-radius: inherit; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .fancy-card:hover::before { opacity: 1; } /* Process Arrow Methodology Layout */ .process-step { position: relative; height: 100%; transition: transform 0.3s ease; } .process-step:hover { transform: translateY(-5px); } .process-arrow-header { background: var(--primary-brand); color: white; padding: 1.5rem 1.5rem 1.5rem 2.5rem; position: relative; /* Create arrow shape pointing right */ clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%); margin-bottom: 0; border-radius: 4px 0 0 4px; /* Slight rounded on flat side */ } /* Adjust for first item having flat start */ .process-col:first-child .process-arrow-header, .process-col:nth-child(4) .process-arrow-header { clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); padding-left: 1.5rem; } .process-body { background: white; border: 1px solid rgba(0, 0, 0, 0.05); border-top: none; padding: 1.5rem; border-radius: 0 0 8px 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); height: calc(100% - 70px); /* Approximate header height */ position: relative; z-index: 0; /* below header arrow tip if needed */ } /* On mobile, stack them and maybe point down? For now, keep shape but remove margin/overlap if complex. Actually responsive clip-path is tricky. Let's simplify for mobile. */ @media (max-width: 768px) { .process-arrow-header { clip-path: none !important; border-radius: 8px 8px 0 0; padding: 1rem 1.5rem; text-align: center; } .process-body { border-radius: 0 0 8px 8px; } } .fancy-card:hover::before { opacity: 1; } /* --- New Solution Layouts --- */ /* 1. Zig-Zag / Alternating Feature Rows */ .feature-row { display: flex; align-items: center; gap: 4rem; margin-bottom: 6rem; } .feature-row:nth-child(even) { flex-direction: row-reverse; } .feature-image { flex: 1; position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .feature-image:hover { transform: scale(1.02); } .feature-image img { width: 100%; height: auto; display: block; } .feature-content { flex: 1; } @media (max-width: 991px) { .feature-row, .feature-row:nth-child(even) { flex-direction: column; gap: 2rem; margin-bottom: 4rem; text-align: center; } } /* 2. Dark Gradient Cards */ .dark-gradient-card { background: #1a1a2e; /* Deep dark blue/bg-dark equivalent */ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 2rem; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; } .dark-gradient-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.2); } .dark-gradient-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, var(--primary-brand), var(--secondary-brand) ); opacity: 0.7; } /* 3. Compact List Cards */ .compact-card { background: #fff; border: 1px solid #eee; border-left: 4px solid var(--primary-brand); border-radius: 6px; padding: 1.5rem; transition: all 0.2s ease; } .compact-card:hover { background: #f8fcfd; /* Very light tint */ border-color: var(--primary-brand); transform: translateX(5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } /* Geometric Pattern Background */ .pattern-dots { background-image: radial-gradient( circle, rgba(0, 170, 255, 0.1) 1px, transparent 1px ); background-size: 20px 20px; } /* --- Smart Art: Network Hub (Enhanced) --- */ .smart-art-network { width: 350px; height: 350px; position: relative; margin: 0 auto; /* Perspective for 3D feel */ perspective: 1000px; } /* Central Core */ .sa-center { width: 80px; height: 80px; background: radial-gradient(circle at 30% 30%, var(--primary-brand), #0056b3); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; box-shadow: 0 0 30px rgba(0, 170, 255, 0.6); display: flex; align-items: center; justify-content: center; color: white; animation: saPulse 3s infinite; } /* --- About Page Smart Art: Cycle Matrix --- */ .smart-art-cycle-matrix { position: relative; width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; } /* Central Core */ .sa-cycle-center { width: 100px; height: 100px; background: white; border-radius: 50%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; z-index: 10; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sa-center-content { display: flex; flex-direction: column; align-items: center; color: var(--primary-brand); font-weight: bold; } .sa-center-content i { font-size: 2rem; color: #6610f2; margin-bottom: 5px; } /* Cyclical Nodes */ .sa-cycle-node { position: absolute; width: 90px; height: 90px; background: white; border: 2px solid var(--success); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; color: var(--success); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); z-index: 5; transition: transform 0.3s ease; } .sa-cycle-node:hover { transform: scale(1.1); background: var(--success); color: white; border-color: var(--success); } .sa-cycle-node i { font-size: 1.5rem; margin-bottom: 2px; } /* Positioning (Radius = 140px, Node Radius = 45px) */ /* All Nodes - Dark Grey */ .sa-node-1, .sa-node-2, .sa-node-3, .sa-node-4 { border-color: #343a40; color: #343a40; } /* Top */ .sa-node-1 { top: calc(50% - 140px - 45px); left: 50%; transform: translateX(-50%); } .sa-node-1:hover { background: #343a40; color: white; border-color: #343a40; transform: translateX(-50%) scale(1.1); } /* Right */ .sa-node-2 { top: 50%; left: auto; right: calc(50% - 140px - 45px); transform: translateY(-50%); } .sa-node-2:hover { background: #343a40; color: white; border-color: #343a40; transform: translateY(-50%) scale(1.1); } /* Bottom */ .sa-node-3 { bottom: calc(50% - 140px - 45px); left: 50%; transform: translateX(-50%); } .sa-node-3:hover { background: #343a40; color: white; border-color: #343a40; transform: translateX(-50%) scale(1.1); } /* Left */ .sa-node-4 { top: 50%; left: calc(50% - 140px - 45px); transform: translateY(-50%); } .sa-node-4:hover { background: #343a40; color: white; border-color: #343a40; transform: translateY(-50%) scale(1.1); } /* SVG Ring */ .sa-cycle-ring { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; animation: saRotateRing 20s linear infinite; z-index: 1; } .sa-ring-track { stroke: rgba(0, 0, 0, 0.05); stroke-width: 4; } .sa-ring-flow { stroke-linecap: round; } @keyframes saRotateRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --- Growth Chart Graphic (CSS Implementation) --- */ .growth-chart-container { width: 100%; max-width: 300px; height: 200px; position: relative; margin: 0 auto; } .gc-axis-x { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #eee; } .gc-axis-y { position: absolute; bottom: 0; left: 0; width: 2px; height: 100%; background: #eee; } .gc-line-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; overflow: visible; } .gc-line-path { fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: gcDrawLine 2.5s ease-out forwards; filter: drop-shadow(0 4px 6px rgba(13, 202, 240, 0.3)); } .gc-dot { width: 12px; height: 12px; background: white; border: 3px solid var(--success); border-radius: 50%; position: absolute; opacity: 0; animation: gcFadeIn 0.5s ease-out forwards; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .gc-dot-1 { bottom: 20%; left: 0%; animation-delay: 0.5s; } .gc-dot-2 { bottom: 45%; left: 40%; animation-delay: 1.2s; } .gc-dot-3 { bottom: 80%; right: 0%; animation-delay: 2.2s; } .gc-area { fill: url(#gradientSuccess); opacity: 0.2; } @keyframes gcDrawLine { to { stroke-dashoffset: 0; } } /* --- About Page Smart Art: Vertical Flow Diagram --- */ .smart-art-vertical-flow { width: 100%; max-width: 350px; position: relative; display: flex; flex-direction: column; gap: 20px; padding: 20px 0; } /* Vertical Line */ .sa-flow-line { position: absolute; top: 10px; bottom: 10px; left: 24px; /* Align with center of 48px icons */ width: 2px; background: linear-gradient( to bottom, #0dcaf0 0%, #0d6efd 25%, #6610f2 50%, #198754 75%, #212529 100% ); z-index: 1; opacity: 0.3; } .sa-flow-line::after { content: ""; position: absolute; top: 0; left: -1px; width: 4px; height: 20px; background: white; filter: blur(2px); animation: saFlowPulse 3s linear infinite; } @keyframes saFlowPulse { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Items */ .sa-flow-item { position: relative; display: flex; align-items: center; gap: 20px; z-index: 2; opacity: 0; animation: saFadeInLeft 0.5s ease-out forwards; } .sa-flow-1 { animation-delay: 0.1s; } .sa-flow-2 { animation-delay: 0.3s; } .sa-flow-3 { animation-delay: 0.5s; } .sa-flow-4 { animation-delay: 0.7s; } .sa-flow-5 { animation-delay: 0.9s; } /* Icons */ .sa-flow-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; box-shadow: 0 0 0 5px white, 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .sa-flow-item:hover .sa-flow-icon { transform: scale(1.15); } /* Glass Cards */ .sa-flow-card { flex: 1; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; transform: translateX(0); } .sa-flow-item:hover .sa-flow-card { transform: translateX(10px); background: white; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } @keyframes saFadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* Geometric Pattern Background */ .pattern-dots { background-image: radial-gradient( circle, rgba(0, 170, 255, 0.1) 1px, transparent 1px ); background-size: 20px 20px; } .pattern-grid { background-image: linear-gradient( rgba(0, 170, 255, 0.05) 1px, transparent 1px ), linear-gradient(90deg, rgba(0, 170, 255, 0.05) 1px, transparent 1px); background-size: 30px 30px; } /* Diagonal Stripes */ .pattern-stripes { background-image: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(0, 170, 255, 0.03) 10px, rgba(0, 170, 255, 0.03) 20px ); } /* Glassmorphism Effect */ .glass-effect { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); } /* Neumorphism Effect */ .neuro-effect { background: #f8f9fa; box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.9); } .neuro-effect:hover { box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.9); } /* Clip Path Shapes */ .clip-diagonal { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); } .clip-arrow { clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); } .clip-notch { clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100% ); } /* Floating Animation */ .float-animation { animation: floatUpDown 6s ease-in-out infinite; } @keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* Pulse Glow Effect */ .pulse-glow { animation: pulseGlow 2s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(0, 170, 255, 0.3); } 50% { box-shadow: 0 0 40px rgba(0, 170, 255, 0.6); } } /* Skewed Section */ .skew-section { transform: skewY(-2deg); margin: 4rem 0; } .skew-section > * { transform: skewY(2deg); } /* Parallax Container */ .parallax-container { position: relative; overflow: hidden; } .parallax-bg { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-size: cover; background-position: center; transform: translateZ(-1px) scale(2); } /* =================================== CURVED CONTAINERS =================================== */ /* Organic Curved Containers */ .curved-container-1 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; overflow: hidden; } .curved-container-2 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; overflow: hidden; } .curved-container-3 { border-radius: 40% 60% 60% 40% / 60% 40% 40% 60%; overflow: hidden; } /* Asymmetric Curves */ .curved-asymmetric-1 { border-radius: 50% 20% 20% 50% / 50% 50% 20% 20%; overflow: hidden; } .curved-asymmetric-2 { border-radius: 20% 50% 50% 20% / 20% 20% 50% 50%; overflow: hidden; } /* Smooth Rounded Containers */ .curved-smooth { border-radius: 2rem; overflow: hidden; } .curved-smooth-lg { border-radius: 3rem; overflow: hidden; } .curved-smooth-xl { border-radius: 4rem; overflow: hidden; } /* Pill-Shaped Containers */ .curved-pill { border-radius: 50px; overflow: hidden; } .curved-pill-lg { border-radius: 100px; overflow: hidden; } /* Teardrop Shapes */ .curved-teardrop-left { border-radius: 100% 0% 0% 100% / 50% 0% 0% 50%; overflow: hidden; } .curved-teardrop-right { border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%; overflow: hidden; } /* Leaf Shapes */ .curved-leaf-1 { border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%; overflow: hidden; } .curved-leaf-2 { border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%; overflow: hidden; } /* Wave Edge Containers */ .curved-wave-edge-top { border-radius: 0 0 50% 50% / 0 0 20px 20px; overflow: hidden; } .curved-wave-edge-bottom { border-radius: 50% 50% 0 0 / 20px 20px 0 0; overflow: hidden; } /* Notched Corners */ .curved-notch-tl { border-radius: 0 2rem 2rem 2rem; overflow: hidden; } .curved-notch-tr { border-radius: 2rem 0 2rem 2rem; overflow: hidden; } .curved-notch-bl { border-radius: 2rem 2rem 0 2rem; overflow: hidden; } .curved-notch-br { border-radius: 2rem 2rem 2rem 0; overflow: hidden; } /* Diagonal Curves */ .curved-diagonal-1 { border-radius: 10% 90% 10% 90% / 90% 10% 90% 10%; overflow: hidden; } .curved-diagonal-2 { border-radius: 90% 10% 90% 10% / 10% 90% 10% 90%; overflow: hidden; } /* Bubble Shapes */ .curved-bubble-1 { border-radius: 50% 50% 50% 10% / 50% 50% 10% 50%; overflow: hidden; } .curved-bubble-2 { border-radius: 50% 50% 10% 50% / 50% 50% 50% 10%; overflow: hidden; } /* Morphing Container (Animated) */ .curved-morph { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; overflow: hidden; animation: morphShape 10s ease-in-out infinite; } @keyframes morphShape { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } } /* Card with Curved Top */ .card-curved-top { border-radius: 2rem 2rem 0 0; overflow: hidden; } /* Card with Curved Bottom */ .card-curved-bottom { border-radius: 0 0 2rem 2rem; overflow: hidden; } /* Card with All Curves */ .card-curved-all { border-radius: 2rem; overflow: hidden; } /* Organic Card Shapes */ .card-organic-1 { border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; overflow: hidden; } .card-organic-2 { border-radius: 60% 40% 40% 60% / 30% 70% 30% 70%; overflow: hidden; } /* Curved Container with Shadow */ .curved-shadow { border-radius: 2rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } /* Curved Container with Gradient Border */ .curved-gradient-border { border-radius: 2rem; position: relative; background: white; padding: 2px; } .curved-gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient( 135deg, var(--primary-brand), var(--secondary-brand) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* =================================== MODERN VISUAL ENHANCEMENTS =================================== */ /* Enhanced Card Styles */ .card-enhanced { border-radius: 1.5rem; border: none; background: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; position: relative; } .card-enhanced::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, var(--primary-brand), var(--secondary-brand) ); opacity: 0; transition: opacity 0.3s ease; } .card-enhanced:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0, 170, 255, 0.15); } .card-enhanced:hover::before { opacity: 1; } /* Gradient Card Overlay */ .card-gradient-overlay { position: relative; overflow: hidden; } .card-gradient-overlay::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(0, 170, 255, 0.05), rgba(51, 191, 255, 0.05) ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .card-gradient-overlay:hover::after { opacity: 1; } /* Enhanced Buttons */ .btn-enhanced { position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-enhanced::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn-enhanced:hover::before { width: 300px; height: 300px; } .btn-enhanced:active { transform: scale(0.95); } /* Smooth Section Transitions */ section { transition: background-color 0.3s ease; } /* Enhanced Hero Content */ .hero-content-enhanced { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 2rem; padding: 3rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } /* Service Card Premium */ .service-card-premium { position: relative; border-radius: 1.5rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .service-card-premium::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle, rgba(0, 170, 255, 0.1) 0%, transparent 70% ); opacity: 0; transition: opacity 0.4s ease; } .service-card-premium:hover::before { opacity: 1; } .service-card-premium:hover { transform: translateY(-12px) scale(1.02); } /* Industry Icon Enhancement */ .industry-icon-enhanced { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .industry-icon-enhanced::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 170, 255, 0.2), transparent); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .industry-icon-enhanced:hover { transform: scale(1.2) rotate(5deg); } .industry-icon-enhanced:hover::after { opacity: 1; } /* Process Step Enhancement */ .process-step-enhanced { position: relative; transition: all 0.3s ease; } .process-step-enhanced:hover { transform: scale(1.1); } .process-step-enhanced::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: linear-gradient( 135deg, var(--primary-brand), var(--secondary-brand) ); opacity: 0; z-index: -1; transition: opacity 0.3s ease; } .process-step-enhanced:hover::before { opacity: 0.2; } /* Blog Card Modern */ .blog-card-modern { border-radius: 1.5rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .blog-card-modern::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transition: left 0.5s ease; } .blog-card-modern:hover::before { left: 100%; } .blog-card-modern:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); } /* CTA Section Glow */ .cta-glow { position: relative; overflow: hidden; } .cta-glow::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle, rgba(255, 255, 255, 0.1) 0%, transparent 70% ); animation: glowMove 10s ease-in-out infinite; } @keyframes glowMove { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 20px); } } /* Smooth Scroll Behavior */ html { scroll-behavior: smooth; } /* Improved Focus States */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--primary-brand); outline-offset: 2px; border-radius: 4px; } /* Micro-interactions */ .interactive-element { transition: all 0.2s ease; } .interactive-element:active { transform: scale(0.98); } /* Gradient Text */ .gradient-text { background: linear-gradient( 135deg, var(--primary-brand), var(--secondary-brand) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Enhanced Image Containers */ .image-container-enhanced { border-radius: 1.5rem; overflow: hidden; position: relative; } .image-container-enhanced img { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .image-container-enhanced:hover img { transform: scale(1.05); } /* Accessibility: Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Mobile-First Responsive Enhancements */ @media (max-width: 768px) { .card-enhanced:hover { transform: translateY(-4px); } .service-card-premium:hover { transform: translateY(-6px) scale(1.01); } .hero-content-enhanced { padding: 2rem; } } /* Touch-friendly hover states */ @media (hover: none) { .card-enhanced:hover, .service-card-premium:hover, .blog-card-modern:hover { transform: none; } } /* --- Grid Matrix Layout (Enhanced) --- */ .grid-matrix-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 30px; position: relative; max-width: 800px; margin: 0 auto; padding: 60px; background: radial-gradient( circle at center, rgba(13, 110, 253, 0.03) 0%, transparent 70% ); border-radius: 2rem; overflow: visible !important; } /* Axis Lines */ .grid-matrix-container::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-image: linear-gradient( to right, transparent 50%, var(--secondary) 50% ); background-size: 20px 100%; opacity: 0.2; z-index: 0; pointer-events: none; } .grid-matrix-container::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background-image: linear-gradient( to bottom, transparent 50%, var(--secondary) 50% ); background-size: 100% 20px; opacity: 0.2; z-index: 0; pointer-events: none; } /* Axis Labels - Enhanced Pills */ .gm-axis-label { position: absolute; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: white !important; background: var(--dark); padding: 8px 18px; border-radius: 30px; font-weight: 700; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 100; white-space: nowrap; } .gm-label-top { top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--success); } .gm-label-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); background: var(--dark); } .gm-label-left { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); background: var(--primary); } .gm-label-right { top: 50%; right: 0; transform: translate(50%, -50%) rotate(90deg); background: var(--info); color: var(--dark); } /* Quadrants - Glassmorphism */ .gm-quadrant { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.5); text-align: center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; z-index: 1; } .gm-quadrant:hover { transform: scale(1.1); z-index: 10; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); border-color: white; } /* Specific Quadrant Borders/Accents */ .gm-q1 { border-top: 4px solid var(--success); } /* TR */ .gm-q2 { border-top: 4px solid var(--primary); } /* TL */ .gm-q3 { border-top: 4px solid var(--warning); } /* BL */ .gm-q4 { border-top: 4px solid var(--info); } /* BR */ .gm-icon { font-size: 2.5rem; margin-bottom: 15px; display: inline-block; opacity: 0.9; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); transition: transform 0.3s; } .gm-quadrant:hover .gm-icon { transform: scale(1.2); } /* Mobile Adjustment */ @media (max-width: 768px) { .grid-matrix-container { grid-template-columns: 1fr; grid-template-rows: auto; gap: 15px; padding: 20px; background: none; } .grid-matrix-container::before, .grid-matrix-container::after, .gm-axis-label { display: none; /* Hide axis on mobile stack */ } .gm-quadrant { margin-bottom: 10px; } } /* Feature Large for Enterprise Scale (Compact Version) */ .card-feature-lg { border: none; border-radius: 12px; /* Slightly tighter radius */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04); background: white; padding: 1.5rem 1rem; /* Reduced padding from 2.5rem */ text-align: center; transition: all 0.3s ease; height: 100%; position: relative; overflow: hidden; } .card-feature-lg:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .card-feature-lg .cf-icon { width: 60px; /* Reduced from 80px */ height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; /* Reduced margin */ font-size: 1.5rem; /* Reduced font size */ background: rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .card-feature-lg h3 { font-size: 1.25rem; /* Compact title */ margin-bottom: 0.75rem !important; } .card-feature-lg p { font-size: 0.9rem; /* Compact text */ margin-bottom: 1rem !important; line-height: 1.4; } .card-feature-lg:hover .cf-icon { transform: scale(1.1) rotate(5deg); } .cf-border-dark { border-top: 4px solid #212529; } .cf-border-primary { border-top: 4px solid #0d6efd; } .cf-border-success { border-top: 4px solid #198754; } .cf-border-info { border-top: 4px solid #0dcaf0; } /* Card Enhanced SM (Compact Version) */ .card-enhanced-sm { border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; background: white; height: 100%; display: flex; flex-direction: column; } .card-enhanced-sm:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06); border-color: rgba(13, 202, 240, 0.3); } .card-enhanced-sm .card-body { padding: 1rem; /* Reduced padding */ } .card-enhanced-sm h6 { font-size: 0.95rem; } .card-enhanced-sm p.small { font-size: 0.85rem; line-height: 1.3; } /* Infinite Marquee Carousel */ .marquee-container { overflow: hidden; white-space: nowrap; position: relative; padding: 2rem 0; mask-image: linear-gradient( to right, transparent, black 10%, black 90%, transparent ); -webkit-mask-image: linear-gradient( to right, transparent, black 10%, black 90%, transparent ); } .marquee-track { display: flex; gap: 2rem; width: max-content; animation: scrollMarquee 40s linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-item { flex-shrink: 0; width: 250px; background: white; border-radius: 1.5rem; padding: 2rem; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; white-space: normal; } .marquee-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border-color: var(--success); } @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Layered UI Stack for Office Automation */ .layer-stack-container { position: relative; padding: 2rem; min-height: 400px; display: flex; align-items: center; justify-content: center; } .ls-layer-back { position: absolute; width: 80%; height: 80%; background: #f8f9fa; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 1rem; transform: rotate(-6deg) translateX(-20px); z-index: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); overflow: hidden; transition: all 0.5s ease; } .ls-layer-front { position: relative; width: 90%; background: #212529; border-radius: 1rem; transform: rotate(3deg) translateX(10px); z-index: 2; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.5s ease; } .layer-stack-container:hover .ls-layer-back { transform: rotate(-8deg) translateX(-30px) scale(0.95); } .layer-stack-container:hover .ls-layer-front { transform: rotate(0deg) translateX(0) scale(1.02); } .ls-code-line { font-family: monospace; font-size: 0.9rem; margin-bottom: 0.5rem; display: block; opacity: 0; animation: typeLine 0.5s forwards; } .ls-code-line:nth-child(1) { animation-delay: 0.2s; } .ls-code-line:nth-child(2) { animation-delay: 0.4s; } .ls-code-line:nth-child(3) { animation-delay: 0.6s; } .ls-code-line:nth-child(4) { animation-delay: 0.8s; } .ls-code-line:nth-child(5) { animation-delay: 1s; } .ls-code-line:nth-child(6) { animation-delay: 1.2s; } @keyframes typeLine { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Impact Cards for Office Automation */ .card-impact { background: white; border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); padding: 2rem; transition: all 0.3s ease; height: 100%; position: relative; overflow: hidden; border-left: 5px solid transparent; } .card-impact:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .card-impact.impact-primary { border-left-color: var(--primary); } .card-impact.impact-success { border-left-color: var(--success); } .card-impact.impact-warning { border-left-color: var(--warning); } .card-impact.impact-info { border-left-color: var(--info); } .card-impact.impact-danger { border-left-color: var(--danger); } .card-impact.impact-dark { border-left-color: var(--dark); } .impact-icon-wrapper { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; background: rgba(0, 0, 0, 0.03); font-size: 1.75rem; } .impact-list-item { display: flex; align-items: flex-start; margin-bottom: 0.75rem; font-size: 0.95rem; color: #6c757d; } .impact-list-item i { margin-top: 3px; margin-right: 10px; } /* Compact Single-Color Impact Cards */ .card-impact-compact { background: white; border: 1px solid rgba(0, 0, 0, 0.05); border-left: 4px solid #a3cfbb; /* Lighter Success Green */ border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); padding: 1.25rem; height: 100%; transition: all 0.3s ease; } .card-impact-compact:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .ci-header { display: flex; align-items: center; margin-bottom: 1rem; } .ci-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(25, 135, 84, 0.1); color: #198754; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-right: 0.75rem; } .ci-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: #212529; } .ci-desc { font-size: 0.85rem; color: #6c757d; margin-bottom: 1rem; line-height: 1.4; } .ci-list { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 0.75rem; } .ci-item { display: flex; align-items: center; font-size: 0.8rem; color: #495057; margin-bottom: 0.4rem; } .ci-item i { color: #198754; margin-right: 6px; font-size: 0.9rem; } /* =================================== SMART GRAPHICS: LAYERED AUDIT SCAN =================================== */ .audit-scan-container { position: relative; height: 350px; display: flex; align-items: center; justify-content: center; perspective: 1000px; overflow: hidden; /* Keep the scan line contained */ } /* Base card style for layers */ .audit-layer { position: absolute; width: 320px; height: 200px; background: rgba(33, 37, 41, 0.85); /* Dark background */ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; backdrop-filter: blur(8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; padding: 1.5rem; } /* Bottom Layer (Database/Raw Data) */ .audit-layer-1 { transform: translateY(60px) scale(0.85) translateZ(-50px); z-index: 1; opacity: 0.5; border-color: rgba(255, 255, 255, 0.05); } /* Middle Layer (Processing) */ .audit-layer-2 { transform: translateY(30px) scale(0.92) translateZ(-25px); z-index: 2; opacity: 0.7; border-color: rgba(255, 255, 255, 0.1); } /* Top Layer (Analysis/Insights) */ .audit-layer-3 { transform: translateY(0) scale(1) translateZ(0); z-index: 3; border: 1px solid var(--primary-brand); background: rgba(33, 37, 41, 0.95); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 170, 255, 0.15); } /* Hover Effect: Expand layers */ .audit-scan-container:hover .audit-layer-1 { transform: translateY(110px) scale(0.85) translateZ(-50px); } .audit-scan-container:hover .audit-layer-2 { transform: translateY(55px) scale(0.92) translateZ(-25px); } /* Scanning Laser Line */ .scan-laser { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var( --forest-green ); /* Use forest green for audit success theme */ box-shadow: 0 0 15px var(--forest-green), 0 0 30px var(--forest-green); z-index: 10; opacity: 0; animation: scanAnimation 4s ease-in-out infinite; pointer-events: none; } /* Gradient trail behind scan line */ .scan-laser::after { content: ""; position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: linear-gradient(to bottom, transparent, rgba(34, 139, 34, 0.2)); } @keyframes scanAnimation { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 50% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Status Dots */ .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; } .dot-red { background-color: #dc3545; box-shadow: 0 0 8px rgba(220, 53, 69, 0.5); } .dot-green { background-color: var(--forest-green); box-shadow: 0 0 8px rgba(34, 139, 34, 0.5); } .dot-blue { background-color: var(--primary-brand); box-shadow: 0 0 8px rgba(0, 170, 255, 0.5); } /* =================================== MOBILE NAVBAR FIX =================================== */ @media (max-width: 991px) { /* Force solid dark background on mobile, overriding JS transparency */ .navbar { background-color: rgba(33, 37, 41, 0.98) !important; backdrop-filter: blur(15px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } /* Elegant dropdown area */ .navbar-collapse { background-color: transparent; /* Parent .navbar handles the bg */ padding-top: 1rem; padding-bottom: 1rem; } } /* =================================== MOBILE OPTIMIZATION (Responsive Overrides) Targeting small devices (< 576px) =================================== */ @media (max-width: 575.98px) { /* 1. Typography Scaling */ h1, .h1, .display-1, .display-2, .display-3 { font-size: calc(1.625rem + 1.5vw) !important; /* Cap huge title sizes */ word-wrap: break-word; } h2, .h2 { font-size: 1.75rem !important; } .lead { font-size: 1.1rem !important; } /* 2. Spacing Adjustments */ .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /* Reduce vertical spacing */ .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .p-5 { padding: 2rem !important; /* Reduce card padding */ } /* 3. Smart Art Scaling (Prevent Overflow) */ /* Network Hub */ .smart-art-network { transform: scale(0.8); transform-origin: center; margin: -20px auto; /* Compensate for scale whitespace */ max-width: 100%; } /* Cycle Matrix */ .sa-cycle-matrix, .smart-art-cycle-matrix { height: 320px !important; /* Reduce height */ transform: scale(0.85); /* Slight scale down */ } .sa-cycle-node { width: 70px; height: 70px; } .sa-node-1 { top: 0; } .sa-node-2 { right: 0; } .sa-node-3 { bottom: 0; } .sa-node-4 { left: 0; } /* Vertical Flow */ .smart-art-vertical-flow { max-width: 100%; padding: 10px; } /* 4. Utilities */ .btn-lg { width: 100%; /* Full width buttons on mobile */ margin-bottom: 0.5rem; } .d-flex.gap-3 { flex-direction: column; /* Stack buttons by default */ } /* Exception: Footer Social Icons */ footer .d-flex.gap-3 { flex-direction: row !important; justify-content: center; } /* Fix sticky navbar spacing if needed */ header { padding-top: 80px; } /* 5. Compact Mobile Footer */ footer { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; text-align: center; } footer .row { row-gap: 1.5rem !important; } footer h4, footer h6 { margin-bottom: 0.5rem !important; } footer .col-md-4, footer .col-md-2 { margin-bottom: 0.5rem; } footer .border-top { margin-top: 1.5rem !important; padding-top: 1rem !important; } } /* =================================== RESPONSIVE RECAPTCHA Scales down the Google reCAPTCHA widget on small screens to prevent horizontal overflow. =================================== */ .g-recaptcha, #leadMagnetRecaptcha { display: inline-block; max-width: 100%; } @media screen and (max-width: 380px) { .g-recaptcha, #leadMagnetRecaptcha { transform: scale(0.85); -webkit-transform: scale(0.85); transform-origin: 0 0; -webkit-transform-origin: 0 0; } } @media screen and (max-width: 320px) { .g-recaptcha, #leadMagnetRecaptcha { transform: scale(0.75); -webkit-transform: scale(0.75); transform-origin: 0 0; -webkit-transform-origin: 0 0; } } /* =================================== DATA ENGINEERING RESPONSIVE HELPERS =================================== */ @media (max-width: 768px) { .hero-animated h1.display-3 { font-size: calc(1.8rem + 3vw) !important; line-height: 1.2; } .display-6 { font-size: calc(1.5rem + 2vw) !important; } .card-enhanced, .hover-card { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important; } .x-small { font-size: 0.7rem !important; } /* Migration Lifecycle Timeline Fixes */ .timeline-steps { position: relative; } .timeline-line { left: 28px !important; /* Aligns with center of 56px icons */ top: 30px !important; } .icon-box.flex-shrink-0 { width: 56px !important; height: 56px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .icon-box.flex-shrink-0 i { font-size: 1.25rem !important; } /* List Item Fixes */ .col-lg-5 ul li span { font-size: 0.9rem; } } @media (max-width: 480px) { .hero-animated h1.display-3 { font-size: 2.2rem !important; } .display-6 { font-size: 1.6rem !important; } } /* Back to Top Button */ #backToTop { display: none; position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; border: none; outline: none; background-color: var(--primary-brand); color: white; cursor: pointer; padding: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 170, 255, 0.4); display: flex; align-items: center; justify-content: center; } #backToTop:hover { background-color: var(--secondary-brand); transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 170, 255, 0.6); } #backToTop i { color: #fff; } /* Mobile Navigation Fix */ @media (max-width: 991.98px) { #mainNav { background-color: var(--dark-grey) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; } .navbar-collapse { background-color: var(--dark-grey); padding-bottom: 1rem; } } /* Fix Hero Section Padding on Mobile to prevent Navbar overlap */ @media (max-width: 991.98px) { .hero-animated { padding-top: 8rem !important; margin-top: -1px; /* seamless overlap */ } .navbar { border-bottom: none !important; } } /* Global Header Padding Fix for Mobile */ @media (max-width: 991.98px) { header.hero, header.masthead, .hero-animated { padding-top: 8rem !important; } } /* =================================== RESPONSIVE RECAPTCHA =================================== */ @media screen and (max-width: 400px) { .g-recaptcha { transform: scale(0.85); -webkit-transform: scale(0.85); transform-origin: center; -webkit-transform-origin: center; } } @media screen and (max-width: 350px) { .g-recaptcha { transform: scale(0.75); -webkit-transform: scale(0.75); transform-origin: center; -webkit-transform-origin: center; } } /* WhatsApp Floating Button */ /* WhatsApp Floating Button */ /* WhatsApp Floating Button */ /* LinkedIn Floating Button */ .linkedin-float { position: fixed; bottom: 150px; /* Stacked above WhatsApp (90px bottom + 40px height + gap) */ right: 2rem; /* Aligned with others */ background-color: #0077b5; /* LinkedIn Blue */ color: #fff; width: 40px; height: 40px; border-radius: 50%; text-align: center; font-size: 20px; box-shadow: 2px 2px 3px #999; z-index: 1000; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; text-decoration: none; } .linkedin-float i { font-size: 20px; line-height: 1; } .linkedin-float:hover { background-color: #005582; color: #fff; transform: scale(1.1); box-shadow: 2px 2px 10px #666; } /* WhatsApp Floating Button */ .whatsapp-float { position: fixed; bottom: 90px; /* Stacked above Back to Top (2rem bottom + 40px height + gap) */ right: 2rem; /* Aligned with Back to Top */ background-color: #25d366; color: #fff; width: 40px; height: 40px; border-radius: 50%; text-align: center; font-size: 20px; box-shadow: 2px 2px 3px #999; z-index: 1000; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; text-decoration: none; } .whatsapp-float i { font-size: 20px; line-height: 1; } .whatsapp-float:hover { background-color: #128c7e; color: #fff; transform: scale(1.1); box-shadow: 2px 2px 10px #666; } /* Global reCAPTCHA Scaling */ .g-recaptcha { transform: scale(0.85); -webkit-transform: scale(0.85); transform-origin: left top; -webkit-transform-origin: left top; } /* Footer Social Icons */ .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; /* Softer square */ color: #fff !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */ text-decoration: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); } .social-icon:hover { transform: translateY(-3px) scale(1.1); filter: brightness(1.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .social-icon i { font-size: 1rem; line-height: 1; } .social-linkedin { background-color: #0077b5; } .social-facebook { background-color: #1877f2; } .social-instagram { background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); } .social-whatsapp { background-color: #25d366; } /* Responsive Social Icons */ @media (max-width: 991px) { .social-links-container { justify-content: center !important; margin-top: 1.5rem !important; } .social-icon { width: 40px; height: 40px; font-size: 1.25rem; } .social-icon i { font-size: 1.25rem; } }