/* ─── Premium Theme: Blue / Green Corporate — Light & Dark Mode ─── */ :root { /* ── Blue-Green Corporate Palette ── */ --primary-blue: #084481; --light-blue: #1A72B8; --accent-green: #2D9B4E; --cyan: #00A3D9; /* ── Dark mode surfaces (default) ── */ --black: #080D16; --dark: #0D1520; --dark2: #162133; /* ── Dark mode text ── */ --white: #EAF2FF; --off: #A8C0DC; --muted: #6B8BAD; /* ── Semantic tokens (auto-switch with theme) ── */ --bg-page: var(--black); --bg-card: var(--dark); --bg-surface: var(--dark2); --text-primary: var(--white); --text-secondary: var(--off); --text-muted: var(--muted); /* ── Gradients ── */ --gradient-brand: linear-gradient(135deg, #084481, #2D9B4E); --gradient-text: linear-gradient(135deg, #1A72B8, #2D9B4E); --gradient-hover: linear-gradient(135deg, #2D9B4E, #084481); /* ── UI Tokens ── */ --border: rgba(0, 163, 217, 0.15); --border-o: rgba(45, 155, 78, 0.28); --card-bg: rgba(13, 21, 32, 0.95); --glass: rgba(13, 21, 32, 0.88); --radius: 14px; /* ── Shadows & glows ── */ --shadow: 0 28px 70px rgba(0, 0, 0, 0.14); --shadow-soft: 0 16px 38px rgba(0, 0, 0, 0.10); --shadow-glow: 0 0 0 1px rgba(8, 68, 129, 0.20), 0 24px 60px rgba(45, 155, 78, 0.12); --section-glow: radial-gradient(ellipse at 50% 0%, rgba(8, 68, 129, 0.08), transparent 65%); /* ── Transitions ── */ --trans: 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* ── Legacy aliases (keep so old selectors still work) ── */ --navy: #EAF2FF; --navy2: #C8DEF2; --navy3: #A8C4E0; --orange: var(--primary-blue); --orange2: var(--accent-green); --orange3: var(--cyan); --blue: var(--primary-blue); --blue2: var(--light-blue); --gold: var(--accent-green); --glass-edge: rgba(8, 68, 129, 0.20); } /* ═══════════════════════════════════════════════ LIGHT THEME OVERRIDES Applied when ═══════════════════════════════════════════════ */ [data-theme="light"] { --black: #F0F6FC; --dark: #FFFFFF; --dark2: #E4EEF8; --white: #0B1F3A; --off: #1E3A5F; --muted: #3A6089; --bg-page: #F0F6FC; --bg-card: #FFFFFF; --bg-surface: #E4EEF8; --text-primary: #0B1F3A; --text-secondary: #1E3A5F; --text-muted: #3A6089; --border: rgba(8, 68, 129, 0.12); --border-o: rgba(45, 155, 78, 0.22); --card-bg: rgba(255, 255, 255, 0.98); --glass: rgba(240, 246, 252, 0.92); --shadow: 0 8px 32px rgba(8, 68, 129, 0.10); --shadow-soft: 0 4px 16px rgba(8, 68, 129, 0.07); --shadow-glow: 0 0 0 1px rgba(8, 68, 129, 0.12), 0 16px 48px rgba(45, 155, 78, 0.10); --section-glow: radial-gradient(ellipse at 50% 0%, rgba(8, 68, 129, 0.05), transparent 65%); --glass-edge: rgba(8, 68, 129, 0.14); } [data-theme="light"] body { background-color: var(--bg-page); color: var(--text-primary); } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--text-primary); } [data-theme="light"] p, [data-theme="light"] li, [data-theme="light"] span, [data-theme="light"] label { color: var(--text-secondary); } [data-theme="light"] .outcome-card, [data-theme="light"] .network-outcome-item, [data-theme="light"] .timeline-card, [data-theme="light"] .timeline-flow-card, [data-theme="light"] .india-new-stat-card, [data-theme="light"] .india-new-map-card, [data-theme="light"] .india-new-map-badge, [data-theme="light"] .india-new-city-list, [data-theme="light"] .office-card, [data-theme="light"] .tech-card, [data-theme="light"] .industry-card, [data-theme="light"] .ind-card, [data-theme="light"] .approach-card, [data-theme="light"] .pipeline-card, [data-theme="light"] .sdlc-card, [data-theme="light"] .cadv-card, [data-theme="light"] .cadv-stat-card, [data-theme="light"] .mission-card, [data-theme="light"] .about-card-main { background: #0B1F3A !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 4px 20px rgba(8, 68, 129, 0.08) !important; } /* Guarantee all textual elements inside cards are white with bulletproof specificity */ [data-theme="light"] :is(.service-card, .value-card, .why-card, .consulting-card, .adv-card, .stat-card, .cyber-service-card, .process-node-card, .outcome-card, .network-outcome-item, .timeline-card, .timeline-flow-card, .india-new-stat-card, .india-new-map-card, .india-new-map-badge, .india-new-city-list, .office-card, .tech-card, .approach-card, .pipeline-card, .sdlc-card, .industry-card, .ind-card, .cadv-card, .cadv-stat-card, .mission-card, .about-card-main) :is(h1, h2, h3, h4, h5, h6, p, blockquote, li, strong, em, span, a), [data-theme="light"] .home-page :is(.service-card, .value-card, .why-card, .consulting-card, .adv-card, .stat-card, .cyber-service-card, .process-node-card, .outcome-card, .network-outcome-item, .timeline-card, .timeline-flow-card, .india-new-stat-card, .india-new-map-card, .india-new-map-badge, .india-new-city-list, .office-card, .tech-card, .approach-card, .pipeline-card, .sdlc-card, .industry-card, .ind-card, .cadv-card, .cadv-stat-card, .mission-card, .about-card-main) :is(h1, h2, h3, h4, h5, h6, p, blockquote, li, strong, em, span, a) { color: #ffffff !important; } [data-theme="light"] .cadv-card .cadv-card-title, [data-theme="light"] .cadv-card .cadv-card-overview, [data-theme="light"] .cadv-stat-card .cadv-stat-label, [data-theme="light"] .svc-link, [data-theme="light"] .consulting-card-arrow, [data-theme="light"] .home-page .svc-link, [data-theme="light"] .home-page .consulting-card-arrow, [data-theme="light"] .consulting-card h3, [data-theme="light"] .home-page .consulting-card h3, [data-theme="light"] .home-page .consulting-card .svc-content h3, [data-theme="light"] .service-card h3, [data-theme="light"] .home-page .service-card h3, [data-theme="light"] .home-page .service-card .svc-content h3, [data-theme="light"] .why-card h3, [data-theme="light"] .home-page .why-card h3, [data-theme="light"] .home-page .why-card .why-content h3, [data-theme="light"] .industry-card h3, [data-theme="light"] .home-page .industry-card h3, [data-theme="light"] .home-page .industry-card .svc-content h3, [data-theme="light"] .cyber-industries-section h3, [data-theme="light"] .cyber-industries-section .svc-content h3, [data-theme="light"] .home-page .cyber-industries-section .svc-content h3 { color: #ffffff !important; } /* Navbar in light mode */ [data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid rgba(8, 68, 129, 0.12) !important; box-shadow: 0 4px 24px rgba(8, 68, 129, 0.08) !important; } [data-theme="light"] .navbar.scrolled { background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 8px 32px rgba(8, 68, 129, 0.12) !important; } [data-theme="light"] .nav-links>li>a, [data-theme="light"] .nav-links a { color: var(--text-primary) !important; text-shadow: none !important; } [data-theme="light"] .nav-links>li>a:hover, [data-theme="light"] .nav-links>li>a.active { color: var(--primary-blue) !important; background: rgba(8, 68, 129, 0.06) !important; } /* Mega menu dropdown in light mode */ [data-theme="light"] .mega-menu { background: rgba(255, 255, 255, 0.98) !important; border-top: 1px solid rgba(8, 68, 129, 0.10) !important; border-bottom: 1px solid rgba(8, 68, 129, 0.10) !important; box-shadow: 0 20px 45px rgba(8, 68, 129, 0.12) !important; } [data-theme="light"] .mega-info h2 { color: var(--text-primary) !important; text-shadow: none !important; } [data-theme="light"] .mega-info p { color: var(--text-secondary) !important; } [data-theme="light"] .mega-links-grid a { color: var(--text-primary) !important; } [data-theme="light"] .mega-links-grid a:hover { color: var(--primary-blue) !important; } [data-theme="light"] .mega-feature-overlay { background: linear-gradient(to top, rgba(8, 68, 129, 0.95) 0%, rgba(8, 68, 129, 0.4) 60%, transparent 100%) !important; } /* Guarantee all hero sections site-wide (homepage and all landing pages) retain premium dark blue background with bright white text in Light Mode */ [data-theme="light"] .hero, [data-theme="light"] [class*="-hero"], [data-theme="light"] .hero-section { background: #0B1F3A !important; } [data-theme="light"] .hero :is(h1, h2, h3, h4, h5, h6, p, strong, em, ol, li, .hero-badge, .hero-proof-item, .hstat-num, .hstat-label, .hero-partners-label, .hero-mini-label, .hero-panel-label, .cert-panel-title), [data-theme="light"] [class*="-hero"] :is(h1, h2, h3, h4, h5, h6, p, strong, em, ol, li, .hero-badge, .hero-proof-item, .hstat-num, .hstat-label, .hero-partners-label, .hero-mini-label, .hero-panel-label, .cert-panel-title), [data-theme="light"] .hero-section :is(h1, h2, h3, h4, h5, h6, p, strong, em, ol, li, .hero-badge, .hero-proof-item, .hstat-num, .hstat-label, .hero-partners-label, .hero-mini-label, .hero-panel-label, .cert-panel-title), [data-theme="light"] .hero span:not(.line2):not(.cert-live-dot):not(.cert-severity-dot), [data-theme="light"] [class*="-hero"] span:not(.line2):not(.cert-live-dot):not(.cert-severity-dot), [data-theme="light"] .hero-section span:not(.line2):not(.cert-live-dot):not(.cert-severity-dot), [data-theme="light"] .hero a:not(.btn), [data-theme="light"] [class*="-hero"] a:not(.btn), [data-theme="light"] .hero-section a:not(.btn) { color: #ffffff !important; } /* General Layout sections override */ [data-theme="light"] section, [data-theme="light"] .page-section, [data-theme="light"] .content-section { color: var(--text-secondary); } /* Cards in light mode */ [data-theme="light"] .value-card, [data-theme="light"] .why-card, [data-theme="light"] .faq-item, [data-theme="light"] .adv-card, [data-theme="light"] .consulting-card, [data-theme="light"] .industry-card, [data-theme="light"] .ind-card, [data-theme="light"] .ai-usp-card, [data-theme="light"] .hero-panel-card, [data-theme="light"] .service-card { background: #0B1F3A !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 4px 20px rgba(8, 68, 129, 0.07) !important; } /* Apply clean white text to industry cards and visual sections without altering icons */ [data-theme="light"] :is(.industry-card, .ind-card, .ai-usp-card, .hero-visual, .hero-panel-card, .faq-item) :is(h1, h2, h3, h4, h5, h6, p, blockquote, li, strong, em, span, a), [data-theme="light"] .home-page :is(.industry-card, .ind-card, .ai-usp-card, .hero-visual, .hero-panel-card, .faq-item) :is(h1, h2, h3, h4, h5, h6, p, blockquote, li, strong, em, span, a) { color: #ffffff !important; } /* FAQ in light mode */ [data-theme="light"] .faq-question { color: #ffffff !important; } [data-theme="light"] .faq-answer p { color: #ffffff !important; } /* Section backgrounds in light mode */ [data-theme="light"] .services-section, [data-theme="light"] .why-section, [data-theme="light"] .value-section, [data-theme="light"] .adv-section { background: #F0F6FC !important; } [data-theme="light"] .consulting-section, [data-theme="light"] .cyber-industries-section { background: #0B1F3A !important; } [data-theme="light"] .consulting-section .section-heading, [data-theme="light"] .consulting-section .section-sub, [data-theme="light"] .consulting-cta h3, [data-theme="light"] .consulting-cta p, [data-theme="light"] .cyber-industries-section .section-heading, [data-theme="light"] .cyber-industries-section .section-heading span, [data-theme="light"] .cyber-industries-section .section-sub { color: #ffffff !important; } /* Guarantee section labels on homepage light theme display a beautiful corporate green */ [data-theme="light"] .home-page .section-label, [data-theme="light"] .home-page section .section-label, [data-theme="light"] .home-page .consulting-section .section-label { color: var(--accent-green) !important; background: rgba(45, 155, 78, 0.12) !important; border: 1px solid rgba(45, 155, 78, 0.22) !important; } [data-theme="light"] .cert-panel, [data-theme="light"] .contact-premium-section, [data-theme="light"] .cta-section { background: linear-gradient(135deg, #E4EEF8, #EBF5EC) !important; } /* Form inputs in light mode */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #FFFFFF !important; color: var(--text-primary) !important; border-color: rgba(8, 68, 129, 0.18) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-muted) !important; } /* Footer in light mode */ [data-theme="light"] footer, [data-theme="light"] .footer { background: #0B1F3A !important; color: #EAF2FF !important; } [data-theme="light"] footer h3, [data-theme="light"] footer p, [data-theme="light"] footer a, [data-theme="light"] .footer h3, [data-theme="light"] .footer p, [data-theme="light"] .footer a { color: #EAF2FF !important; } html, body, .hero, [class*="-hero"], .hero-section, section { max-width: 100% !important; overflow-x: hidden !important; } html, body { position: relative; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Hide scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar { display: none; width: 0; height: 0; } body { background-color: var(--black); color: var(--white); margin: 0; padding: 0; font-family: 'Manrope', sans-serif; line-height: 1.6; } a { text-decoration: none; } section:not(.hero) { padding-top: clamp(0.4rem, 1.5vw, 0.8rem) !important; padding-bottom: clamp(0.4rem, 1.5vw, 0.8rem) !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Tighter hero spacing for subpages (except Home) */ body:not(.home-page) .hero, body:not(.home-page) [class*="-hero"] { padding-top: clamp(1.5rem, 4vw, 3.5rem) !important; padding-bottom: clamp(1rem, 3vw, 2rem) !important; min-height: auto !important; } h1, h2, h3, h4, h5, h6 { color: var(--white); } p, li, span, label { color: var(--off); } .outcome-card, .network-outcome-item, .timeline-card, .office-card, .tech-card, .industry-card, .approach-card, .pipeline-card, .sdlc-card { background: var(--dark2) !important; color: var(--white) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important; } .service-card h3, .service-card p, .value-card h3, .value-card p, .why-card h3, .why-card p, .consulting-card h3, .consulting-card p, .adv-card h3, .adv-card p, .stat-card h3, .stat-card p, .timeline-card h3, .timeline-card p { color: var(--white) !important; } .service-card .service-desc, .why-card p, .value-card p, .consulting-card p { color: var(--off) !important; } ul { list-style: none; } /* ─── Utility ────────────────────────────────────────── */ .container { width: 92%; max-width: 1200px; margin: 0 auto; } .section-label { font-size: 1.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-green) !important; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .section-heading { font-family: 'Manrope', sans-serif; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 550; line-height: 1.15; color: var(--white); } .about-page .section-heading { white-space: nowrap; } .section-sub { color: #1A72B8; max-width: 760px; margin-top: 1rem; font-size: 1.02rem; } .mega-info p, .consulting-cta-text p, .cta-section p, .cta-content p, .contact-premium-info p { color: #1A72B8; } /* ─── Vedtam brand toggle (Hindi ↔ English) ─────── */ .vt-brand { --vt-brand-width: 6.4ch; position: relative; display: inline-block; width: var(--vt-brand-width); height: 1.3em; overflow: hidden; color: inherit; font: inherit; line-height: 1; vertical-align: -0.12em; white-space: nowrap; perspective: 500px; } .vt-brand-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; width: 100%; color: inherit; font: inherit; line-height: 1; white-space: nowrap; backface-visibility: hidden; transform-origin: 50% 50%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease; } .vt-brand-face--en { opacity: 1; transform: translateY(0) rotateX(0deg); } .vt-brand-face--hi { opacity: 0; transform: translateY(100%) rotateX(-78deg); } .vt-brand.is-hindi .vt-brand-face--en { opacity: 0; transform: translateY(-100%) rotateX(78deg); } .vt-brand.is-hindi .vt-brand-face--hi { opacity: 1; transform: translateY(0) rotateX(0deg); } .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.78rem 1.7rem; border-radius: 8px; font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: var(--trans); border: none; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(135deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); color: #fffdf8; box-shadow: 0 18px 34px rgba(8, 68, 129, 0.2); } .btn-primary:hover { background: linear-gradient(135deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(8, 68, 129, 0.26); } .btn-outline { background: rgba(18, 26, 42, 0.52); color: var(--white); border: 1.5px solid rgba(109, 78, 52, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn-outline:hover { border-color: rgba(8, 68, 129, 0.28); color: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-soft); } .btn::after { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%); transform: translateX(-140%); transition: transform 0.8s ease; } .btn:hover::after { transform: translateX(140%); } /* ─── AI Quote Strip ─────────────────────────────── */ .ai-quote-strip { position: fixed; top: 72px; /* Positioned below fixed navbar */ left: 0; width: 100%; padding: 1.1rem 0; background: rgba(22, 14, 8, 0.1); /* Highly transparent */ border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; z-index: 1001; } .ai-quote-strip.scrolled { background: rgba(22, 14, 8, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(8, 68, 129, .7); } 70% { box-shadow: 0 0 0 8px rgba(8, 68, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(8, 68, 129, 0); } } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @media(max-width:768px) {} /* ─── Premium Cursor ─────────────────────────────── */ /* ─── Noise overlay ──────────────────────────────────── */ /* ─── NAVBAR ─────────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 5%; background: rgba(8, 13, 22, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(148, 163, 184, 0.12); box-shadow: 0 18px 42px rgba(2, 6, 23, 0.4); transition: var(--trans); } .navbar.scrolled { background: rgba(8, 13, 22, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; } .nav-logo { display: inline-flex; align-items: center; position: relative; width: 260px; height: 60px; } .nav-logo img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 60px; width: auto; display: block; transition: filter 0.3s ease, transform 0.3s ease; } .nav-logo .logo-en { animation: logoSwapEn 4s infinite; } .nav-logo .logo-hi { animation: logoSwapHi 4s infinite; } @keyframes logoSwapEn { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes logoSwapHi { 0%, 49.99% { opacity: 0; } 50%, 100% { opacity: 1; } } .nav-links { display: flex; align-items: center; height: 100%; gap: 0.2rem; } .nav-links>li { position: static; height: 100%; display: flex; align-items: center; } .nav-links>li>a { padding: 0.5rem 0.7rem; font-size: 0.82rem; white-space: nowrap; font-weight: 600; color: #fffdf8; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.4); border-radius: 6px; display: flex; align-items: center; gap: 0.3rem; transition: var(--trans); outline: none; text-decoration: none; } .nav-links>li>a:hover, .nav-links>li>a.active { color: #fffdf8; background: rgba(255, 255, 255, 0.12); text-decoration: none; } .nav-links>li>a:focus, .nav-links>li>a:active { color: #fffdf8; background: rgba(255, 255, 255, 0.15); outline: none; box-shadow: none; } .nav-links>li>a svg { width: 12px; height: 12px; transition: var(--trans); } .nav-links>li:hover>a svg { transform: rotate(180deg); } .mega-menu { position: absolute; top: 80px; /* Matches navbar height exactly */ left: 0; width: 100vw; background: #0d1520; /* Solid background for better contrast */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 3rem 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; transition-delay: 0.4s; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); z-index: 10000; pointer-events: none; } @media (max-width: 1024px) { .mega-menu { display: none !important; } } /* Hover Bridge: Provides a seamless connection */ .mega-menu::before { content: '\2022'; position: absolute; top: -40px; /* Bridge the gap to the trigger */ left: 0; right: 0; height: 40px; background: transparent; pointer-events: auto; } .nav-links>li:hover .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } /* Center content within full-width menu */ .mega-menu .container { max-width: 1200px; margin: 0 auto; width: 92%; display: grid; grid-template-columns: 1.2fr 1.6fr 1.2fr; gap: 4.5rem; align-items: start; } .mega-inner { display: contents; } .mega-col h3 { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.5rem; opacity: 1; } .mega-info h2 { font-size: clamp(1.6rem, 1.8vw, 2.2rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; color: #ffffff; text-shadow: 0 0 18px rgba(255, 255, 255, 0.16); white-space: nowrap; } .mega-info p { font-size: 1.05rem; color: var(--off); line-height: 1.7; margin-bottom: 2rem; text-shadow: none; } .mega-cta { font-size: 0.9rem; font-weight: 800; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.6rem; border-bottom: 2px solid transparent; transition: var(--trans); } .mega-cta:hover { border-color: var(--cyan); color: #ffffff; gap: 0.9rem; } .mega-links-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 1.2rem 3rem; } .mega-links-grid a { font-size: 1.05rem; font-weight: 600; color: #ffffff; transition: var(--trans); text-shadow: none; text-decoration: none; white-space: nowrap; } .mega-links-grid a:hover { color: var(--cyan); transform: translateX(8px); text-decoration: none; } .mega-feature-card { position: relative; border-radius: 20px; overflow: hidden; height: 280px; border: 1px solid rgba(18, 26, 42, 0.45); box-shadow: 0 20px 45px rgba(130, 92, 54, 0.15); } .mega-feature-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .mega-feature-card:hover img { transform: scale(1.1); } .mega-feature-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(36, 22, 15, 0.9) 0%, transparent 80%); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; } .mega-feature-overlay h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; } .mega-feature-overlay p { font-size: 0.78rem; opacity: 0.9; margin-bottom: 1rem; } .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.75rem; } @media (max-width: 1024px) { .mega-menu { display: none; /* Handled by mobile nav */ } } .nav-cta { display: flex; align-items: center; gap: 0.8rem; } .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.6rem; z-index: 1001; } .nav-hamburger span { display: block; width: 26px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Hamburger active state */ .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; } .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav */ .mobile-nav { display: none; position: fixed; inset: 0; top: 0; /* Cover full screen */ padding-top: 84px; /* Space for navbar */ background: rgba(8, 13, 22, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 999; padding-left: 5%; padding-right: 5%; overflow-y: auto; transform: translateY(-20px); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .mobile-nav.open { display: block; opacity: 1; visibility: visible; transform: translateY(0); } .mobile-nav a { display: block; padding: 1.2rem 0; font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; transition: color 0.3s ease; text-decoration: none; } .mobile-nav a:hover, .mobile-nav a.active { color: var(--orange); text-decoration: none; } .mobile-nav .m-section { color: var(--orange); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2rem 0 0.8rem; opacity: 0.8; } /* ─── Responsive Navbar Breakpoint ─── */ @media (max-width: 1024px) { .nav-links { display: none !important; } .nav-hamburger { display: flex !important; } .nav-cta .btn, .nav-cta .theme-toggle { display: none; } .nav-inner { height: 80px; } .nav-logo img { height: 62px; } .nav-logo { width: 220px; height: 62px; } .mobile-nav { padding-top: 72px; } } /* HERO */ .hero { position: relative; min-height: auto; display: flex; align-items: center; overflow: hidden; padding: 80px 0 40px; } .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* Home hero: remove all background FX layers completely */ .home-page .hero .hero-media, .home-page .hero .hero-bg, .home-page .hero .hero-grid, .home-page .hero .hero-glow { display: none !important; } .home-page .hero { background: #060b14 !important; } .home-page .hero::before, .home-page .hero::after { content: none !important; display: none !important; } .hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: saturate(0.95) brightness(1.04) contrast(0.94); } .hero-bg { position: absolute; inset: -144px 0 0 0; /* Strong vertical linear gradient like teamcomputers.com */ background: linear-gradient(180deg, var(--hero-gradient-top, rgba(8, 4, 1, 0.2)) 0%, rgba(0, 0, 0, 0.3) 100%); z-index: 1; pointer-events: none; } /* Page-Specific Hero Color Variations (Orange-based) */ .cyber-hero { --hero-gradient-top: rgba(40, 15, 5, 0.92); } /* Deep Red-Orange */ .network-hero { --hero-gradient-top: rgba(35, 20, 5, 0.92); } /* Amber-Orange */ .cloud-hero { --hero-gradient-top: rgba(30, 22, 8, 0.92); } /* Golden-Orange */ .devops-hero { --hero-gradient-top: rgba(45, 18, 10, 0.92); } /* Coral-Orange */ .ot-hero { --hero-gradient-top: rgba(35, 15, 10, 0.92); } /* Burnt Orange */ .it-hero { --hero-gradient-top: rgba(40, 20, 10, 0.92); } /* Tomato-Orange */ .compliance-hero { --hero-gradient-top: rgba(30, 18, 12, 0.92); } /* Bronze-Orange */ .software-hero { --hero-gradient-top: rgba(25, 25, 15, 0.92); } /* Tech-Gold */ /* Metallic-Orange */ .cert-hero { --hero-gradient-top: rgba(20, 15, 10, 0.92); min-height: 50vh; padding: 120px 0 40px; } /* Muted Orange */ .about-hero { --hero-gradient-top: rgba(25, 20, 15, 0.92); } /* Soft Grey-Orange */ .contact-hero { --hero-gradient-top: rgba(40, 25, 10, 0.92); } .hero-vid-layer { position: absolute; top: -144px; left: 0; width: 100%; height: calc(100% + 144px); object-fit: cover; /* Transition is now set inline by JS — keep this as a safe fallback only */ opacity: 1; will-change: opacity; pointer-events: none; } /* .hidden is toggled by JS in sync with opacity — removing !important so JS inline styles win during fade animations */ .hero-vid-layer.hidden { opacity: 0; pointer-events: none; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(109, 78, 52, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 78, 52, 0.05) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); z-index: 1; } .hero-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(8, 68, 129, 0.16) 0%, transparent 70%); top: 10%; right: -10%; animation: pulse-glow 6s ease-in-out infinite alternate; z-index: 1; } @keyframes pulse-glow { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.2); opacity: 1; } } .hero-content { position: relative; z-index: 2; max-width: 100%; padding: 3rem 2.5rem; border-radius: 28px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; /* Significantly reduced to prevent scrolling */ } .hero-content::before { content: '\2022'; position: absolute; inset: auto auto -10% -8%; width: 320px; height: 320px; border-radius: 50%; /* background: radial-gradient(circle, rgba(8, 68, 129, 1), transparent 0%); */ filter: blur(20px); z-index: -1; } .hero .container { position: relative; z-index: 2; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 100px; padding: 0.38rem 1rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; /* text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); */ margin-bottom: 0.85rem; animation: fadeUp 0.8s 0.1s both; } .hero-badge::before { content: '\2022'; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: blink 1.5s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .hero-title { font-family: 'Manrope', sans-serif; font-size: clamp(2.1rem, 5.5vw, 3.5rem); font-weight: 500; line-height: 1.07; letter-spacing: 0.025em; margin-bottom: 1rem; color: #ffffff; /* text-shadow: 0px 2px 14px rgba(249, 244, 244, 0.9), 3px 4px 28px rgba(248, 245, 245, 0.7); */ animation: fadeUp 0.8s 0.25s both; } .hero-title .line1 { display: block; white-space: nowrap; } .hero-title .line2 { display: block; background: linear-gradient(135deg, #00A3D9 0%, #2D9B4E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: 700; text-shadow: none !important; filter: drop-shadow(0 4px 16px rgba(8, 68, 129, 0.4)); } .hero-sub { font-size: clamp(0.9rem, 1.8vw, 1.05rem); color: rgba(18, 26, 42, 0.95); max-width: 460px; margin-bottom: 1.6rem; font-weight: 600; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.7); animation: fadeUp 0.8s 0.4s both; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp 0.8s 0.55s both; } .hero-stats { display: flex; gap: 2rem; margin-top: 1.2rem; flex-wrap: wrap; animation: fadeUp 0.8s 0.7s both; } .hstat { border-left: 2px solid rgba(18, 26, 42, 0.5); padding-left: 1rem; } .hstat-num { font-family: 'Manrope', sans-serif; font-size: 2rem; font-weight: 800; color: #ffffff; line-height: 1; /* text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); */ } .hstat-num span { color: var(--cyan); } .hstat-label { font-size: 0.8rem; color: rgba(18, 26, 42, 0.8); margin-top: 0.2rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); } /* ─── Hero Partners Strip ─── */ .hero-partners-strip { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .hero-partners-label { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255, 255, 255); margin-bottom: 1rem; } .hero-partners-marquee { overflow: hidden; position: relative; width: 100%; padding: 0; background: var(--dark); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } .hero-partners-track { display: flex; width: max-content; gap: 0.8rem; animation: hero-marquee 80s linear infinite; } .hero-partners-track:hover { animation-play-state: paused; } @keyframes hero-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .hero-partner-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 130px; padding: 0rem; transition: transform 0.3s ease; } .hero-partner-item:hover { transform: scale(1.1); } .hero-partner-item img { height: 100%; width: auto; opacity: 0.85; filter: grayscale(1); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; object-fit: contain; } .hero-partner-item:hover img { opacity: 1; filter: grayscale(0) brightness(1); } /* Marquee Mobile Overrides */ @media (max-width: 480px) { .hero-partner-item { height: 75px; padding: 0 0.2rem; } .hero-partners-track { gap: 1.8rem; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ─── STRATEGIC CONSULTING & COMPLIANCE ──────────── */ /* ─── Premium Subpage Hero Design ─── */ body:not(.home-page) .hero { background: #05080f !important; background: transparent !important; overflow: hidden !important; position: relative !important; } body:not(.home-page) .hero-media, body:not(.home-page) .hero-bg, body:not(.home-page) .hero-glow { display: block !important; } .ind-bg-bfsi { background-image: url('industry_images/industry_bfsi_bg.png') !important; } .ind-bg-health { background-image: url('industry_images/industry_healthcare_bg.png') !important; } .ind-bg-mfg { background-image: url('industry_images/industry_manufacturing_bg.png') !important; } .ind-bg-saas { background-image: url('industry_images/industry_saas_bg.png') !important; } .ind-bg-startup { background-image: url('industry_images/smb_enterprise_bg.png') !important; } .ind-bg-bfsi, .ind-bg-health, .ind-bg-mfg, .ind-bg-saas, .ind-bg-startup { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Premium Abstract Circles */ body:not(.home-page) .hero::before, body:not(.home-page) .hero::after { content: '' !important; position: absolute !important; border-radius: 50% !important; filter: blur(140px) !important; z-index: 0 !important; pointer-events: none !important; opacity: 0.4 !important; animation: floatSubpageHero 15s ease-in-out infinite alternate !important; } body:not(.home-page) .hero::before { width: 700px !important; height: 700px !important; background: radial-gradient(circle, var(--orange) 0%, transparent 75%) !important; top: -150px !important; right: -100px !important; } body:not(.home-page) .hero::after { width: 600px !important; height: 600px !important; background: radial-gradient(circle, #3b82f6 0%, transparent 75%) !important; bottom: -150px !important; left: -50px !important; animation-delay: -7s !important; } @keyframes floatSubpageHero { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.05); } 100% { transform: translate(-20px, -10px) scale(0.95); } } /* Background Texture for Premium Look */ body:not(.home-page) .hero-grid { opacity: 0.2 !important; background-size: 40px 40px !important; mask-image: radial-gradient(ellipse at center, black 20%, transparent 90%) !important; } /* Ensure content visibility */ body:not(.home-page) .hero .container { position: relative !important; z-index: 5 !important; } /* Adjust the hero content card for subpages for a sleeker look */ body:not(.home-page) .hero-content { padding: 3.5rem 3rem !important; border-radius: 30px !important; background: rgba(15, 23, 42, 0.65) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45) !important; } .consulting-section { padding: 3rem 0 2rem; position: relative; background: var(--dark) !important; } /* .consulting-section::before removed to eliminate radial-gradient */ .consulting-header { text-align: center; margin-bottom: 1.5rem; } .consulting-header .section-label { justify-content: center; display: flex; } .consulting-header .section-sub { margin: 0.9rem auto 0; text-align: center; } .consulting-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; margin-bottom: 1.5rem; } .consulting-card { position: relative; background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 0; transition: var(--trans); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; min-height: 320px; } .consulting-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 0 0 1px rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.28); } .consulting-card:hover::before { opacity: 1; } .consulting-card-icon { width: 62px; height: 62px; min-width: 62px; border-radius: 18px; background: var(--dark) !important; border: 1px solid rgba(8, 68, 129, 0.16); display: flex; align-items: center; justify-content: center; color: var(--blue); box-shadow: 0 18px 32px rgba(8, 68, 129, 0.10); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .consulting-card-icon svg { width: 26px; height: 26px; } .consulting-card:hover .consulting-card-icon { transform: scale(1.18) rotate(-6deg); animation: icon-shake 0.4s ease 0.1s both; } @keyframes icon-shake { 0%, 100% { transform: scale(1.18) rotate(-6deg); } 25% { transform: scale(1.18) rotate(4deg); } 50% { transform: scale(1.18) rotate(-4deg); } 75% { transform: scale(1.18) rotate(2deg); } } .consulting-card-body { flex: 1; position: relative; z-index: 1; color: var(--white); } .consulting-card-body h3 { font-size: 1.08rem; font-weight: 800; color: var(--white); margin-bottom: 0.55rem; line-height: 1.3; } .consulting-card-body p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; } .consulting-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .consulting-card-tags span { padding: 0.32rem 0.78rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; background: rgba(8, 68, 129, 0.1); color: var(--blue); border: 1px solid rgba(8, 68, 129, 0.16); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.45); } .consulting-card-arrow { font-size: 1.3rem; color: var(--blue); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.3s ease; align-self: center; min-width: 24px; } .consulting-card:hover .consulting-card-arrow { opacity: 1; transform: translateX(0); } /* CTA Banner */ .consulting-cta { margin-top: 2rem; margin-bottom: 2rem !important; /* Increased to prevent overlap */ } .consulting-cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; padding: 2.8rem 3rem; border-radius: 24px; background: var(--orange) !important; box-shadow: 0 28px 64px rgba(8, 68, 129, 0.28); position: relative; overflow: hidden; } .consulting-cta-inner::before { content: '\2022'; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; } .consulting-cta-inner::after { content: '\2022'; position: absolute; bottom: -80px; left: 40%; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); pointer-events: none; } .consulting-cta-text .section-label { opacity: 0.95; } .consulting-cta-text h3 { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 800; color: #fff; line-height: 1.2; margin: 0.4rem 0 0.7rem; } .consulting-cta-text h3 span { color: rgba(18, 26, 42, 0.85); font-style: italic; } .consulting-cta-text p { color: rgba(18, 26, 42, 0.82); font-size: 0.98rem; max-width: 580px; } .consulting-cta-actions { display: flex; flex-direction: column; gap: 0.85rem; min-width: 220px; position: relative; z-index: 1; } .btn-cta-hero { text-align: center; justify-content: center; gap: 0.5rem; } .consulting-cta-actions .btn-primary { background: var(--dark); color: var(--blue); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); } .consulting-cta-actions .btn-primary:hover { background: var(--dark) 9f4; } .consulting-cta-actions .btn-outline { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.35); color: #fff; backdrop-filter: none; } .consulting-cta-actions .btn-outline:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(18, 26, 42, 0.55); } @media (max-width: 900px) { .consulting-grid { grid-template-columns: 1fr; } .consulting-cta-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .consulting-cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: 0; } } /* â†ۉ†⠂¬Ã¢â€ € VEDTAM ADVANTAGE â†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†ۉ†€ */ .advantage-section { padding: 3.5rem 0; background: var(--dark) !important; position: relative; overflow: hidden; } /* .advantage-section::before removed to eliminate radial-gradient */ .advantage-section::after { content: '\2022'; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .advantage-header .section-label { justify-content: center; display: flex; } .advantage-header .section-heading { color: #fff; } .advantage-header .section-heading span { color: var(--cyan); } .advantage-header .section-sub { color: rgba(18, 26, 42, 0.65); margin: 0.9rem auto 0; text-align: center; } @media (max-width: 900px) {} @media (max-width: 540px) {} /* ─── INDUSTRIES PREMIUM ────────────────────────────── */ .industries-premium-section { padding: 3.5rem 0; position: relative; background: var(--dark) !important; } /* .industries-premium-section::before removed to eliminate radial-gradient */ .industries-premium-header { text-align: center; margin-bottom: 1.5rem; } .industries-premium-header .section-label, .industries-premium-header .section-sub { display: flex; justify-content: center; } .industries-premium-header .section-sub { margin: 0.9rem auto 0; text-align: center; } .industries-premium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; justify-content: center; } .ind-card { position: relative; border-radius: 22px; overflow: hidden; min-height: 360px; cursor: pointer; background: var(--dark); border: 1px solid rgba(36, 22, 15, 0.08); transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.42s ease; box-shadow: 0 12px 36px rgba(130, 92, 54, 0.12); } .ind-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 -10px 28px rgba(8, 68, 129, 0.24); border-color: rgba(8, 68, 129, 0.28); } /* .ind-card::before removed to eliminate radial-gradient */ .ind-card:hover::before { opacity: 1; } .ind-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: transform 0.6s ease; } .ind-card:hover .ind-card-bg { transform: scale(1.08); } /* Industry SVG gradient bgs */ .ind-bg-bfsi, .ind-bg-health, .ind-bg-mfg, .ind-bg-saas, .ind-bg-startup { background: var(--dark) !important; } .ind-card-overlay { position: absolute; inset: 0; background: transparent; } .ind-card:hover .ind-card-overlay { background: transparent; } .ind-card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem 1.3rem; } .ind-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(8, 68, 129, 0.18); border: 1px solid rgba(8, 68, 129, 0.25); display: flex; align-items: center; justify-content: center; color: #1A72B8; margin-bottom: 1.1rem; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease; } .ind-icon svg { width: 26px; height: 26px; } .ind-card:hover .ind-icon { transform: scale(1.22) rotate(-8deg); animation: icon-shake 0.45s ease 0.05s both; background: rgba(8, 68, 129, 0.28); } .ind-card h3 { font-size: 1.20rem; font-weight: 800; color: var(--white); margin-bottom: 0.65rem; line-height: 1.2; } .ind-card p { font-size: 0.86rem; color: var(--off); line-height: 1.6; margin-bottom: 1.25rem; min-height: 4.2rem; } .ind-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; transform: translateY(10px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } .ind-card:hover .ind-tags { transform: translateY(0); opacity: 1; } .ind-tags span { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: rgba(8, 68, 129, 0.14); border: 1px solid rgba(8, 68, 129, 0.28); color: var(--white); letter-spacing: 0.03em; } @media (max-width: 1100px) { .industries-premium-grid { grid-template-columns: repeat(3, 1fr); } .ind-card { min-height: 300px; } } @media (max-width: 700px) { .industries-premium-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .industries-premium-grid { grid-template-columns: 1fr; } .ind-card { min-height: 240px; } } /* Section glow pseudo-elements removed to eliminate gradients */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: rgba(109, 78, 52, 0.06); border: 1px solid rgba(109, 78, 52, 0.1); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-glow); } .stat-card { background: var(--dark) !important; padding: 3rem 2rem; text-align: center; transition: var(--trans); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(0, 0, 0, 0.08) !important; } .stat-card:hover { background: rgba(255, 250, 244, 0.98); } .stat-num { font-family: 'Manrope', sans-serif; font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 800; color: var(--white); line-height: 1; } .stat-num .accent { color: var(--cyan); } .stat-label { font-size: 0.9rem; color: var(--muted); margin-top: 0.6rem; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .about-visual { position: relative; } .about-card-main { background: var(--dark) !important; border: 1px solid rgba(109, 78, 52, 0.1); border-radius: var(--radius); padding: 2.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-glow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .about-card-main::before { content: '\2022'; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(8, 68, 129, 0.14) 0%, transparent 70%); } .about-text .section-sub { max-width: 100%; } .about-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; } .about-feature-box { padding: 1.35rem 1.25rem; border-radius: 22px; background: var(--dark) !important; border: 1px solid rgba(109, 78, 52, 0.08); box-shadow: 0 18px 36px rgba(130, 92, 54, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .about-feature-box h3 { font-size: 1.02rem; font-weight: 800; color: var(--white); margin-bottom: 0.9rem; } .about-feature-list { display: grid; gap: 0.7rem; } .about-feature-list li { position: relative; padding-left: 1.35rem; color: var(--off); font-size: 0.94rem; line-height: 1.55; } .about-feature-list li::before { content: '\2022'; position: absolute; top: 0.45rem; left: 0; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 0 0 4px rgba(8, 68, 129, 0.08); } .process-section { padding: 4rem 0; background: var(--dark) !important; } .process-intro .section-sub { margin: 0.8rem auto 0; } .process-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; } .process-steps::before { content: '\2022'; position: absolute; top: 28px; left: 11%; right: 11%; height: 2px; background: linear-gradient(90deg, rgba(207, 109, 49, 0.34), rgba(137, 212, 200, 0.4)); z-index: 0; } .process-step { position: relative; z-index: 1; min-height: 100%; padding: 1.8rem 1.4rem 1.5rem; border-radius: 24px; background: var(--dark) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; transition: var(--trans); } /* .process-step::before removed to eliminate gradient */ .process-step::after { content: '\2022'; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, rgba(8, 68, 129, 1), #e4a45f, #89d4c8); transform: scaleX(0); transform-origin: left; transition: var(--trans); } .process-step:hover { transform: translateY(-8px); border-color: rgba(8, 68, 129, 0.22); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.82), 0 26px 56px rgba(130, 92, 54, 0.14); } .process-step:hover::after { transform: scaleX(1); } .process-step h3 { font-size: 1.16rem; font-weight: 800; color: #2c1d14; margin-bottom: 0.65rem; } .process-step>p { font-size: 0.92rem; line-height: 1.7; color: #655549; margin-bottom: 1rem; } .mission-section+.why-section { background: var(--dark) !important; border-top: 1px solid rgba(148, 163, 184, 0.12); } .mission-section+.why-section .section-label { opacity: 0.9; } .mission-section+.why-section .section-heading, .mission-section+.why-section .section-sub, .mission-section+.why-section .why-card h3, .mission-section+.why-section .why-card p, .mission-section+.why-section .why-impact { color: #f8fbff; } .mission-section+.why-section .section-sub { max-width: 720px; } .mission-section+.why-section .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .mission-section+.why-section .why-card { padding: 2rem 1.6rem; background: var(--dark) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mission-section+.why-section .why-card:hover { border-color: rgba(96, 165, 250, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(96, 165, 250, 0.16), 0 28px 60px rgba(2, 8, 23, 0.44); } .mission-section+.why-section .why-icon { width: 62px; height: 62px; margin-bottom: 1.15rem; border-radius: 20px; color: #7dd3fc; background: linear-gradient(180deg, rgba(59, 130, 246, 0.2), rgba(14, 165, 233, 0.08)); border: 1px solid rgba(125, 211, 252, 0.22); box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.08), 0 0 26px rgba(59, 130, 246, 0.18); } .mission-section+.why-section .why-icon svg { width: 30px; height: 30px; } .mission-section+.why-section .why-card h3 { font-size: clamp(0.75rem, 1.1vw, 1.05rem); font-weight: 800; margin-bottom: 0.55rem; white-space: nowrap; letter-spacing: -0.01em; } .mission-section+.why-section .why-card p { color: rgba(236, 245, 255, 0.82); font-size: 0.9rem; line-height: 1.7; } .about-text .section-sub { max-width: 100%; } .apoint { display: flex; gap: 0.9rem; align-items: flex-start; } .apoint-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: rgba(8, 68, 129, 0.10); display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-top: 0.1rem; } .apoint-icon svg { width: 18px; height: 18px; display: block; } .apoint-body h4 { font-size: 0.95rem; font-weight: 600; } .apoint-body p { font-size: 0.85rem; color: var(--muted); } /* ─── VALUES ─────────────────────────────────────────── */ .values-section { padding: 3.5rem 0; position: relative; } .values-intro { text-align: center; max-width: 620px; margin: 0 auto 3.5rem; } .values-intro .section-sub { margin: 0.8rem auto 0; } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .value-card { background: var(--dark) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: var(--radius); padding: 2rem 1.6rem; transition: var(--trans); position: relative; overflow: hidden; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .value-card::after { content: '\2022'; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: var(--trans); } .value-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 0 0 1px rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.28); background: rgba(18, 26, 42, 0.92); } /* .value-card::before removed to eliminate gradients */ .value-card:hover::before { opacity: 1; } .value-card:hover .value-icon { transform: scale(1.18) rotate(-6deg); animation: icon-shake 0.4s ease 0.1s both; } .value-card:hover::after { transform: scaleX(1); } .value-icon { font-size: 2rem; margin-bottom: 1rem; } .value-card h3 { font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; } .value-card p { font-size: 0.85rem; color: var(--muted); } /* ─── SERVICES ───────────────────────────────────────── */ .services-section { padding: 3.5rem 0; position: relative; background: #080d16; } .services-header { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 3.5rem; gap: 1.2rem; } .services-title-group { display: flex; align-items: baseline; gap: 1.8rem; flex-wrap: wrap; } .services-header .section-label { margin-bottom: 0; white-space: nowrap; } .services-header .section-heading { margin: 0; } .services-header .section-sub { max-width: 800px; margin: 0; line-height: 1.6; } @media (max-width: 768px) { .services-header { gap: 0.8rem; margin-bottom: 2.5rem; } .services-title-group { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .services-header .section-sub { max-width: 100%; } } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; gap: 1.6rem; } .service-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 2.5rem; transition: var(--trans); position: relative; overflow: hidden; cursor: pointer !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); grid-column: span 1 !important; display: flex; flex-direction: column; } /* .service-card::before removed to eliminate linear-gradient */ .service-card::after { content: '\2022'; position: absolute; inset: 1px; border-radius: calc(var(--radius) - 1px); border: 1px solid rgba(255, 255, 255, 0.35); pointer-events: none; } .service-card:hover { box-shadow: 0 24px 54px rgba(130, 92, 54, 0.12), 0 0 0 1px rgba(8, 68, 129, 0.1); border-color: rgba(8, 68, 129, 0.3); z-index: 10; } .service-card:hover::before { opacity: 1; } .service-card:hover .svc-icon { transform: scale(1.18) rotate(-6deg); animation: icon-shake 0.4s ease 0.1s both; background: rgba(8, 68, 129, 0.18); } .service-card h3 { font-family: 'Manrope', sans-serif; font-size: 1.12rem; font-weight: 700; margin-bottom: 0.7rem; } .service-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.25rem; } .svc-link { font-size: 0.85rem; font-weight: 700; color: var(--cyan); display: flex; align-items: center; gap: 0.4rem; transition: var(--trans); margin-top: auto; padding-top: 1rem; } .service-card:hover .svc-link { gap: 0.6rem; } /* ─── INDUSTRIES ─────────────────────────────────────── */ .industries-section { padding: 3.5rem 0; background: rgba(255, 255, 255, 0.26); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; } .industries-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 3rem; } .industry-card { position: relative; background: var(--dark); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 0; transition: var(--trans); overflow: hidden; display: flex; flex-direction: column; min-height: 240px; } .industry-card:hover { border-color: var(--orange); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(8, 68, 129, 0.1); z-index: 10; } .industry-icon { font-size: 2rem; margin-bottom: 0.8rem; } .industry-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; } .industry-card p { font-size: 0.75rem; color: var(--muted); } .roadmap-intro .section-sub { margin: 0.8rem auto 0; } /* ─── APPROACH ───────────────────────────────────────── */ .approach-section { padding: 5rem 0; position: relative; background: url('services_images/cybersecurity_overview_hero.png') no-repeat center center/cover !important; overflow: hidden; } .approach-section::before { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 13, 26, 0.95) 0%, rgba(7, 13, 26, 0.85) 50%, rgba(7, 13, 26, 0.95) 100%); z-index: 1; } .approach-section .container { position: relative; z-index: 2; } /* .approach-section::after removed to eliminate radial-gradient */ .approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .approach-points { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .approach-text { position: relative; padding: 2.4rem; border-radius: 30px; background: var(--dark) !important; border: 1px solid rgba(18, 26, 42, 0.72); box-shadow: 0 30px 70px rgba(130, 92, 54, 0.12), inset 0 1px 0 rgba(18, 26, 42, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; } /* .approach-text::before removed to eliminate gradients */ .approach-text>* { position: relative; z-index: 1; } .approach-point { display: flex; gap: 1.2rem; padding: 1.5rem; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 22px; background: var(--dark) !important; transition: var(--trans); box-shadow: 0 18px 42px rgba(130, 92, 54, 0.08), inset 0 1px 0 rgba(18, 26, 42, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .approach-point:hover { border-color: rgba(8, 68, 129, 0.24); background: rgba(18, 26, 42, 0.94); transform: translateX(10px); box-shadow: 0 24px 52px rgba(130, 92, 54, 0.12), 0 0 0 1px rgba(8, 68, 129, 0.08); } .ap-icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-blue), var(--accent-green)) !important; border: 1px solid rgba(8, 68, 129, 0.14); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; color: #ffffff !important; box-shadow: 0 14px 28px rgba(8, 68, 129, 0.10); } .ap-body h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; } .ap-body p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; } .approach-visual { background: var(--dark) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 30px; padding: 3rem; position: relative; overflow: hidden; box-shadow: 0 30px 72px rgba(130, 92, 54, 0.13), inset 0 1px 0 rgba(18, 26, 42, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .approach-visual::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(8, 68, 129, 0.1) 0%, transparent 70%); } .approach-visual::after { content: '\2022'; position: absolute; inset: auto -60px -80px auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(8, 68, 129, 0.10), transparent 70%); pointer-events: none; } .av-heading { font-family: 'Manrope', sans-serif; font-size: 1.42rem; font-weight: 800; margin-bottom: 1.7rem; position: relative; line-height: 1.2; } .av-list { display: flex; flex-direction: column; gap: 0.9rem; position: relative; z-index: 1; } .av-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1.05rem; border-radius: 16px; background: rgba(18, 26, 42, 0.66); border: 1px solid rgba(18, 26, 42, 0.58); font-size: 0.92rem; font-weight: 600; box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.44), 0 12px 28px rgba(130, 92, 54, 0.06); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .av-item:hover { transform: translateX(8px); border-color: rgba(8, 68, 129, 0.18); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.44), 0 18px 32px rgba(130, 92, 54, 0.1); } .av-check { color: var(--cyan); font-size: 1rem; width: 24px; height: 24px; min-width: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(8, 68, 129, 0.10); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.45); } /* ─── WHY VEDTAM ─────────────────────────────────────── */ .why-section { padding: 3.5rem 0; background: var(--dark) !important; border-top: 1px solid var(--border); position: relative; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 1.5rem; } .why-card { border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: var(--radius); padding: 1.6rem 0.8rem; background: var(--dark) !important; transition: var(--trans); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; overflow: hidden; } .why-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 0 0 1px rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.28); } /* .why-card::before removed to eliminate gradients */ .why-card:hover::before { opacity: 1; } .why-card:hover .why-icon { transform: scale(1.18) rotate(-6deg); animation: icon-shake 0.4s ease 0.1s both; } .why-icon { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; border-radius: 18px; color: var(--blue); background: var(--dark) !important; border: 1px solid rgba(8, 68, 129, 0.16); box-shadow: 0 14px 28px rgba(8, 68, 129, 0.10); } .why-icon svg { width: 28px; height: 28px; } .why-card h3 { font-size: clamp(0.6rem, 0.78vw, 0.85rem); font-weight: 700; margin-bottom: 0.5rem; white-space: nowrap; letter-spacing: -0.02em; max-width: 100%; } .why-card p { font-size: 0.86rem; color: var(--muted); } @keyframes map-pulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } @media (max-width: 992px) {} @media (max-width: 600px) {} /* ─── FAQ ────────────────────────────────────────────── */ .faq-section { padding: 3.5rem 0; position: relative; background: var(--dark) !important; } .faq-intro { text-align: center; max-width: 580px; margin: 0 auto 3.5rem; } .faq-intro .section-sub { margin: 0.8rem auto 0; } .faq-list { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.2rem; } .faq-item { border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: var(--radius); overflow: hidden; background: var(--dark2) !important; box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.8rem; font-weight: 600; font-size: 0.97rem; cursor: pointer; user-select: none; transition: var(--trans); color: var(--white); } .faq-question:hover { color: var(--cyan); } .faq-toggle { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; transition: var(--trans); color: var(--muted); } .faq-item.open .faq-toggle { background: var(--blue); border-color: var(--blue); color: white; transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .faq-answer-inner { padding: 0 1.8rem 1.4rem; font-size: 0.9rem; color: var(--off); line-height: 1.75; } .faq-item.open .faq-answer { max-height: 300px; } .partners-label { text-align: center; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 2rem; } /* ─── CTA SECTION ────────────────────────────────────── */ .cta-section { padding: 3.5rem 0; background: var(--dark) !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: '\2022'; position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(8, 68, 129, 0.10) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); } .cta-content { position: relative; z-index: 1; } .cta-content::before { content: '\2022'; position: absolute; inset: -18px; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 28px; background: var(--dark) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; z-index: -1; } .cta-section h2 { font-family: 'Manrope', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 1rem; } .cta-section p { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; } .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-gold { background: linear-gradient(135deg, #d97a36, #eba357); color: #fffdf9; box-shadow: 0 18px 34px rgba(8, 68, 129, 0.18); } .btn-gold:hover { background: linear-gradient(135deg, #cb6b28, #df9447); transform: translateY(-3px); } .footer { background: var(--dark) !important; border-top: 1px solid var(--border); padding: 5rem 0 2rem; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; } .footer-brand .nav-logo { font-size: 2rem; margin-bottom: 1rem; } .footer-brand p { font-size: 0.88rem; color: var(--muted); max-width: 300px; line-height: 1.7; } .footer-contact { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; } .footer-contact a { font-size: 0.83rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; transition: var(--trans); } .footer-contact a:hover { color: var(--cyan); } .footer-col h4 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(34, 22, 15, 0.5); margin-bottom: 1.2rem; } .footer-col ul li { margin-bottom: 0.55rem; } .footer-col ul li a { font-size: 0.87rem; color: var(--muted); transition: var(--trans); display: flex; align-items: center; gap: 0.4rem; } .footer-col ul li a:hover { color: var(--white); padding-left: 0.3rem; } .footer-bottom { border-top: 1px solid var(--border); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { font-size: 0.82rem; color: var(--muted); } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-size: 0.82rem; color: var(--muted); transition: var(--trans); } .footer-links a:hover { color: var(--white); } /* ─── SCROLL TOP ─────────────────────────────────────── */ .floating-actions { position: fixed; right: 1rem; bottom: 1rem; z-index: 700; display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; } .whatsapp-float, .scroll-top { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.8rem 1rem; border-radius: 999px; text-decoration: none; cursor: pointer; border: none; color: #ffffff; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } /* Guarantee floating WhatsApp button renders as a perfect premium circle site-wide */ .whatsapp-float { width: 56px !important; height: 56px !important; min-height: auto !important; min-width: auto !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient(135deg, #25d366, #17b857) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35) !important; } .whatsapp-float svg { width: 28px !important; height: 28px !important; margin: 0 !important; flex: 0 0 auto; } .whatsapp-float span { display: none !important; } .scroll-top:hover svg { transform: translateY(-2px); } @media (max-width: 767px) { .whatsapp-float { width: 50px !important; height: 50px !important; } .whatsapp-float svg { width: 24px !important; height: 24px !important; } } .scroll-top { background: linear-gradient(135deg, rgba(8, 68, 129, 1), rgba(224, 122, 43, 1)); min-width: 52px; padding-inline: 0; font-size: 1rem; font-weight: 800; line-height: 1; color: #ffffff; text-shadow: 0 0 10px rgba(18, 26, 42, 1), 0 0 22px rgba(18, 26, 42, 0.72); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important; opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top svg { width: 20px; height: 20px; display: block; transition: transform 0.25s ease; } .scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .whatsapp-float:hover, .scroll-top:hover { transform: translateY(-3px); } .whatsapp-float:hover { box-shadow: 0 22px 40px rgba(37, 211, 102, 0.28); } .scroll-top:hover { background: linear-gradient(135deg, #c9692b, #de9646); box-shadow: 0 0 0 1px rgba(255, 204, 163, 0.28), 0 0 30px rgba(8, 68, 129, 0.52), 0 22px 40px rgba(8, 68, 129, 0.34); } .scroll-top:hover svg { transform: translateY(-2px); } @media (max-width: 767px) { .floating-actions { right: 0.75rem; bottom: 0.75rem; gap: 0.55rem; } .whatsapp-float, .scroll-top { min-height: 48px; padding: 0.72rem 0.92rem; font-size: 0.88rem; } .whatsapp-float span { display: none; } .whatsapp-float, .scroll-top { min-width: 48px; } } @media (max-width: 480px) { .floating-actions { right: 0.65rem; bottom: 0.65rem; } .whatsapp-float, .scroll-top { min-height: 46px; padding: 0.68rem 0.8rem; border-radius: 16px; } } .text-center { text-align: center; } /* ─── ANIMATIONS ─────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visible { opacity: 1; transform: translateY(0) scale(1); } .reveal-left { opacity: 0; transform: translateX(-34px) scale(0.985); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal-left.visible { opacity: 1; transform: translateX(0) scale(1); } .reveal-right { opacity: 0; transform: translateX(34px) scale(0.985); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal-right.visible { opacity: 1; transform: translateX(0) scale(1); } @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes office-pulse { 0% { transform: scale(0.55); opacity: 0.9; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } .about-card-main, .approach-visual, .cta-content::before { animation: float-soft 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Homepage Refresh: appinventiv-inspired enterprise styling for index.html */ .home-page { background: var(--dark); color: var(--white); } .home-page .consulting-section, .home-page .advantage-section, .home-page .industries-premium-section, .home-page .services-section, .home-page .approach-section, .home-page .why-section, .home-page .contact-premium-section, .home-page .faq-section, .home-page .footer { background: var(--dark) !important; color: var(--white); } .home-page .section-heading, .home-page .consulting-card-body h3, .home-page .ap-body h4, .home-page .why-card h3, .home-page .contact-premium-info h2, .home-page .footer-col h4, .home-page .footer-brand p, .home-page .footer-bottom p, .home-page .footer-links a, .home-page .footer-contact a, .home-page .footer-col ul li a { color: var(--white); } .home-page .section-sub, .home-page .consulting-card-tags span, .home-page .consulting-card-arrow, .home-page .adv-label, .home-page .adv-desc, .home-page .ind-card p, .home-page .ind-tags span, .home-page .svc-content p, .home-page .svc-link, .home-page .ap-body p, .home-page .av-item, .home-page .contact-method-item span, .home-page .response-badge, .home-page .whatsapp-btn-large, .home-page .consulting-card-body p, .home-page .consulting-cta-text p, .home-page .why-card p, .home-page .faq-answer-inner, .home-page .footer-brand p, .home-page .footer-bottom p, .home-page .footer-links a, .home-page .footer-contact a, .home-page .footer-col ul li a { color: var(--off); } .home-page .consulting-card, .home-page .adv-counter, .home-page .ind-card, .home-page .services-header-card, .home-page .approach-visual, .home-page .why-card, .home-page .contact-premium-grid, .home-page .faq-item, .home-page .footer { background: var(--dark); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .home-page .services-header-card, .home-page .why-card, .home-page .faq-item, .home-page .approach-visual { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .home-page .hero-content { background: linear-gradient(180deg, rgba(8, 18, 34, 0.92), rgba(8, 16, 32, 0.82)); border-color: rgba(8, 68, 129, 0.12); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42); } .home-page .hero-proof-item, .home-page .hstat, .home-page .hero-badge { background: rgba(8, 18, 34, 0.72); border-color: rgba(8, 68, 129, 0.12); } .home-page .hero-sub, .home-page .hstat-label, .home-page .services-header-card p { color: rgba(226, 232, 240, 0.82); } .home-page .ai-hero-panel { background: linear-gradient(180deg, rgba(10, 22, 42, 0.92), rgba(6, 14, 28, 0.88)); border-color: rgba(8, 68, 129, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); } .home-page .ai-hero-top { background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(8, 68, 129, 0.10); } .home-page .ai-hero-body, .home-page .ai-score-card, .home-page .ai-signal-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(8, 68, 129, 0.10); color: #f8fbff; } .home-page .ai-score-copy strong, .home-page .ai-score-ring em, .home-page .ai-signal-card strong, .home-page .ai-hero-label { color: #f8fbff; } .home-page .ai-score-copy small, .home-page .ai-signal-card small { color: rgba(226, 232, 240, 0.72); } /* .home-page .contact-premium-info, .home-page .contact-glass-card { background: linear-gradient(180deg, rgba(10, 18, 30, 0.86), rgba(7, 13, 24, 0.82)); border: 1px solid rgba(148, 163, 184, 0.12); } */ .home-page .contact-glass-card .contact-form-group label, .home-page .faq-toggle { color: #f8fbff !important; } .home-page .contact-input, .home-page .contact-select, .home-page .contact-textarea { background: rgba(255, 255, 255, 0.06); border-color: rgba(148, 163, 184, 0.14); color: #f8fbff; } .home-page .contact-input::placeholder, .home-page .contact-textarea::placeholder { color: rgba(226, 232, 240, 0.5); } .home-page .footer { border-top: 1px solid rgba(148, 163, 184, 0.12); } .home-page .hero { min-height: calc(100svh - 24px); min-height: calc(100vh - 24px); height: auto; max-height: none; padding-top: 72px; padding-bottom: 2rem; display: flex; align-items: start; /* Allow the cert panel to expand without clipping */ overflow: visible; } .hero .container { max-width: 1600px; width: 96%; height: 100%; display: flex; align-items: center; } .hero-shell { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: flex-start; width: 100%; } .hero-content { max-width: 100%; width: 100%; padding: 3.5rem 3rem; border-radius: 28px; background: linear-gradient(180deg, rgba(8, 18, 34, 0.92), rgba(8, 16, 32, 0.82)); border: 1px solid rgba(8, 68, 129, 0.12); box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45); } .hero-title { font-size: clamp(1.8rem, 3.5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 100%; margin-bottom: 0.75rem; white-space: normal; } .hero-sub { max-width: 100%; width: 100%; font-size: clamp(0.9rem, 1.4vw, 1.05rem); line-height: 1.7; margin-bottom: 1.2rem; color: #ffffff !important; } .hero-proof-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 1rem; } .hero-proof-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid rgba(109, 78, 52, 0.08); background: rgba(18, 26, 42, 0.72); box-shadow: 0 10px 24px rgba(130, 92, 54, 0.08); color: #5f4b3d; font-size: 0.78rem; font-weight: 700; } .hero-visual { position: relative; align-self: stretch; width: 100%; /* No max-height clip — let the panel breathe on large screens */ overflow: visible; display: flex; flex-direction: column; } /* Stats and indicators visibility */ body:not(.home-page) .hstat { border-left-color: rgba(0, 0, 0, 0.15) !important; } body:not(.home-page) .hstat-num { color: var(--white) !important; text-shadow: none !important; } body:not(.home-page) .hstat-label { color: var(--muted) !important; text-shadow: none !important; } /* Proof strip styling for light background */ body:not(.home-page) .hero-proof-item { background: rgba(0, 0, 0, 0.04) !important; color: var(--muted) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Ensure the right-side visual panel is visible and properly themed for light mode */ body:not(.home-page) .hero-visual { display: flex !important; } body:not(.home-page) .hero-panel-card { background: rgba(18, 26, 42, 0.8) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06) !important; } body:not(.home-page) .hero-panel-card h3, body:not(.home-page) .hero-panel-card strong { color: var(--white) !important; } body:not(.home-page) .hero-panel-card p, body:not(.home-page) .hero-panel-card .hero-panel-label, body:not(.home-page) .hero-panel-link { color: var(--muted) !important; } body:not(.home-page) .hero-panel-link { text-decoration: none; cursor: pointer; display: inline-block; transition: var(--trans); } body:not(.home-page) .hero-panel-link:hover { text-decoration: underline; color: var(--orange) !important; } /* Ensure subpage headers keep the standardized 2-column layout on desktop viewports */ @media (min-width: 993px) { body:not(.home-page) .hero-shell { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4rem !important; max-width: 1060px !important; margin: 0 auto !important; } } .home-page .ai-hero-panel { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 24px; padding: 0.85rem; background: linear-gradient(180deg, rgba(18, 26, 42, 0.88), rgba(255, 247, 236, 0.72)), radial-gradient(circle at top right, rgba(8, 68, 129, 0.18), transparent 42%); border: 1px solid rgba(109, 78, 52, 0.08); box-shadow: 0 24px 54px rgba(130, 92, 54, 0.14); overflow: hidden; } .home-page .ai-hero-panel::before { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8, 68, 129, 0.1), transparent 58%), linear-gradient(180deg, rgba(18, 26, 42, 0.45), transparent 36%); pointer-events: none; } .home-page .ai-hero-top, .home-page .ai-hero-body, .home-page .ai-score-card, .home-page .ai-signal-grid { position: relative; z-index: 1; } .home-page .ai-hero-top { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.55rem 1rem; } .home-page .ai-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(18, 26, 42, 0.42); } .home-page .ai-dot.red { background: #ef6b5f; } .home-page .ai-dot.amber { background: #f2b84b; } .home-page .ai-dot.green { background: #4fc27e; } .home-page .ai-hero-label { margin-left: auto; padding: 0.48rem 0.88rem; border-radius: 999px; background: rgba(18, 26, 42, 0.7); border: 1px solid rgba(109, 78, 52, 0.08); color: #6c5748; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .home-page .ai-hero-body { font-family: 'Manrope', sans-serif; background: radial-gradient(circle at top left, rgba(8, 68, 129, 0.10), transparent 22%), radial-gradient(circle at top right, rgba(8, 68, 129, 0.1), transparent 20%), linear-gradient(180deg, #080D16 0%, #121A2A 50%, #080D16 100%); color: var(--white); overflow-x: hidden; line-height: 1.7; } .home-page .ai-score-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.9rem; border-radius: 18px; background: rgba(18, 26, 42, 0.72); border: 1px solid rgba(109, 78, 52, 0.08); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.55); } .home-page .ai-score-copy span, .home-page .ai-signal-card span { display: inline-flex; margin-bottom: 0.45rem; color: var(--blue); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .home-page .ai-score-copy strong { display: block; color: #24160f; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; margin-bottom: 0.45rem; } .home-page .ai-score-copy small, .home-page .ai-signal-card small { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } .home-page .ai-score-ring { position: relative; width: 90px; height: 90px; display: grid; place-items: center; } .home-page .ai-score-ring svg { width: 90px; height: 90px; transform: rotate(-90deg); } .home-page .ai-score-ring circle { fill: none; stroke: rgba(8, 68, 129, 0.10); stroke-width: 10; } .home-page .ai-score-ring circle.active { stroke: url(#aiScoreGradient); stroke: rgba(8, 68, 129, 1); stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 34; } .home-page .ai-score-ring::after { content: '\2022'; position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(18, 26, 42, 0.92), rgba(255, 248, 239, 0.72)); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.7); } .home-page .ai-score-ring em { position: relative; z-index: 1; color: #24160f; font-size: 0.96rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .home-page .ai-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.75rem; padding: 0.35rem; } .home-page .ai-signal-card { padding: 1.25rem; border-radius: 22px; background: rgba(18, 26, 42, 0.66); border: 1px solid rgba(109, 78, 52, 0.08); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.55); } .home-page .ai-signal-card strong { display: block; color: #24160f; font-size: 1.15rem; line-height: 1.15; margin-bottom: 0.35rem; } .home-page .ai-signal-card.wide { grid-column: span 2; } .home-page .signal-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 0.45rem; margin: 0.8rem 0 0.7rem; min-height: 68px; } .home-page .signal-bars i { display: block; border-radius: 999px; background: linear-gradient(180deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); box-shadow: 0 10px 18px rgba(8, 68, 129, 0.16); animation: signal-wave 1.9s ease-in-out infinite; } .home-page .signal-bars i:nth-child(1) { height: 28px; animation-delay: 0s; } .home-page .signal-bars i:nth-child(2) { height: 52px; animation-delay: 0.15s; } .home-page .signal-bars i:nth-child(3) { height: 38px; animation-delay: 0.3s; } .home-page .signal-bars i:nth-child(4) { height: 60px; animation-delay: 0.45s; } .home-page .signal-bars i:nth-child(5) { height: 44px; animation-delay: 0.6s; } .home-page .signal-bars i:nth-child(6) { height: 32px; animation-delay: 0.75s; } @keyframes signal-wave { 0%, 100% { transform: scaleY(0.82); opacity: 0.8; } 50% { transform: scaleY(1.08); opacity: 1; } } .hero-panel { display: flex; flex-direction: column; gap: 1rem; height: 100%; width: 100%; } .hero-panel-card { position: relative; padding: 2rem 2.2rem; border-radius: 26px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; overflow: hidden; } .hero-panel-card::before { content: '\2022'; position: absolute; inset: 0; background: none; pointer-events: none; } .hero-panel-main { padding: 1.6rem 1.6rem 1.8rem; } .hero-panel-label, .services-header-label, .hero-mini-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); font-weight: 800; } .hero-panel-main h3 { font-family: 'Manrope', sans-serif; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.08; margin: 0.9rem 0 0.9rem; color: #ffffff; } .hero-panel-main p, .hero-panel-card span, .hero-panel-quote p, .services-header-card p { color: rgba(18, 26, 42, 0.82); font-size: 0.93rem; line-height: 1.75; } .hero-panel-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--blue); font-weight: 700; font-size: 0.92rem; } .hero-panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .hero-panel-card strong { display: block; margin-top: 0.65rem; margin-bottom: 0.3rem; font-size: 1.02rem; color: #ffffff; } .home-page .cert-hero-panel { /* This container holds the 3 CERT-In cards. Set to transparent to show hero video. */ background: transparent !important; gap: 1rem; height: auto; width: 100%; } .home-page .cert-chart-card, .home-page .cert-insight-card { background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } /* Allow chart hover segments to expand without clipping */ .home-page .cert-chart-card { overflow: visible; } .home-page .cert-chart-card::before, .home-page .cert-insight-card::before { background: radial-gradient(circle at top right, rgba(8, 68, 129, 0.16), transparent 42%), linear-gradient(135deg, rgba(143, 223, 255, 0.08), transparent 60%); } .home-page .cert-chart-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 210px); grid-template-areas: "copy chart"; gap: 1.25rem; align-items: center; margin-top: 0.95rem; } .home-page .cert-chart-copy { grid-area: copy; } .home-page .cert-chart-wrap { grid-area: chart; } .home-page .cert-chart-kicker { display: inline-flex; margin-bottom: 0.7rem; padding: 0.38rem 0.72rem; border-radius: 999px; background: rgba(143, 223, 255, 0.12); border: 1px solid rgba(143, 223, 255, 0.16); color: #8fdfff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .home-page .cert-chart-copy h3 { color: #ffffff; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.12; margin-bottom: 0.7rem; } .home-page .cert-chart-copy p { color: rgba(226, 232, 240, 0.8); font-size: 0.96rem; line-height: 1.7; } .home-page .cert-chart-wrap { position: relative; width: 210px; min-width: 210px; /* Prevent cutting */ aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; padding: 12px; overflow: visible; } .home-page .cert-chart-wrap canvas { width: 100% !important; height: 100% !important; } .home-page .chart-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; pointer-events: none; } .home-page .chart-center strong { color: #ffffff; font-size: clamp(1.2rem, 2.5vw, 1.6rem); line-height: 1; } .home-page .chart-center span { color: rgba(226, 232, 240, 0.72); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .home-page .cert-legend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.2rem; } .home-page .cert-legend-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(148, 163, 184, 0.14); } .home-page .cert-legend-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; } .home-page .cert-legend-card.critical .cert-legend-dot { background: #ff3b30; box-shadow: 0 0 18px rgba(255, 59, 48, 0.5); } .home-page .cert-legend-card.high .cert-legend-dot { background: #ff5f56; box-shadow: 0 0 16px rgba(8, 68, 129, 0.45); } .home-page .cert-legend-card.medium .cert-legend-dot { background: #ffb347; box-shadow: 0 0 16px rgba(45, 155, 78, 0.30); } .home-page .cert-legend-card.low .cert-legend-dot { background: #2dd4bf; box-shadow: 0 0 16px rgba(45, 212, 191, 0.35); } .home-page .cert-legend-card strong, .home-page .cert-insight-card strong { color: #ffffff; font-size: 1.05rem; } .home-page .cert-legend-card small { display: block; color: rgba(226, 232, 240, 0.72); font-size: 0.8rem; line-height: 1.45; } .home-page .cert-insight-grid { grid-template-columns: 1fr; gap: 0.85rem; } .home-page .cert-insight-card { width: 100%; box-sizing: border-box; } .home-page .cert-insight-card:last-child { flex: 1; } .home-page .cert-insight-card p { color: rgba(226, 232, 240, 0.76); } .home-page .cert-update-list { margin: 0.9rem 0 0; padding: 0; color: rgba(226, 232, 240, 0.88); max-height: 230px; overflow-y: auto; list-style: none; counter-reset: cert-counter; } .home-page .cert-update-list li { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); line-height: 1.5; font-size: 0.84rem; counter-increment: cert-counter; } .home-page .cert-update-list li:last-child { border-bottom: none; } .home-page .cert-update-list li::before { content: counter(cert-counter) "."; font-size: 0.78rem; font-weight: 800; color: var(--orange); min-width: 18px; flex-shrink: 0; padding-top: 0.05rem; line-height: 1.5; } .home-page .cert-update-list a { color: rgba(226, 232, 240, 0.9); text-decoration: none; transition: color 0.2s; word-break: break-word; } .home-page .cert-update-list a:hover { color: var(--orange); text-decoration: underline; } .home-page .cert-update-list span { display: inline-flex; align-items: center; margin-left: 0.35rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; background: rgba(8, 68, 129, 0.15); color: var(--orange); white-space: nowrap; flex-shrink: 0; } /* ─── CERT-In Panel Header & New UI ─── */ .home-page .cert-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 0.5rem; } .home-page .cert-panel-title { display: flex; align-items: center; gap: 0.6rem; } .home-page .cert-live-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem; border-radius: 999px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.28); color: #22c55e; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .home-page .cert-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); } 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1); } } .home-page .cert-view-all-link { font-size: 0.76rem; font-weight: 700; color: var(--orange); text-decoration: none; white-space: nowrap; transition: opacity 0.2s; } .home-page .cert-view-all-link:hover { opacity: 0.7; } .home-page .cert-subscribe-btn { margin-top: 1rem; font-size: 0.8rem; padding: 0.5rem 1rem; border-radius: 10px; display: inline-block; } .home-page .cert-more-link { display: block; margin-top: 0.7rem; font-size: 0.78rem; font-weight: 600; color: var(--orange); text-decoration: none; transition: opacity 0.2s; letter-spacing: 0.01em; } .home-page .cert-more-link:hover { opacity: 0.72; text-decoration: underline; } /* Removed duplicate modal styles */ .cert-modal-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(8, 68, 129, 0.08); border: 1px solid rgba(8, 68, 129, 0.15); color: var(--orange); margin: 0 auto 1.2rem; } .cert-subscribe-form .cert-form-group { margin-bottom: 1rem; } .cert-subscribe-form label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--white) 114; margin-bottom: 0.35rem; } .cert-subscribe-form input { width: 100%; padding: 0.65rem 0.9rem; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.14); background: var(--dark); color: var(--white) 114; font-size: 0.92rem; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .cert-subscribe-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(8, 68, 129, 0.12); } .cert-modal-note { text-align: center; font-size: 0.76rem; color: #888895; margin-top: 0.9rem; line-height: 1.5; } /* ─── Large screen (1400px+): tighten chart column so panel never clips ─── */ @media (min-width: 1400px) { .hero-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 4rem; align-items: start; } .hero .container { align-items: start; padding-bottom: 2rem; } .home-page .cert-chart-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); grid-template-areas: "copy chart"; } .home-page .cert-chart-wrap { width: min(100%, 210px); } } /* ─── Extra large (1800px+): hero stays two-col, panel compact ─── */ @media (min-width: 1800px) { .hero-shell { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } .home-page .cert-chart-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); grid-template-areas: "copy chart"; } .home-page .cert-chart-wrap { width: min(100%, 210px); margin-inline: 0; } } @media (max-width: 1024px) { .home-page .cert-chart-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 140px); grid-template-areas: "copy chart"; } .home-page .cert-chart-copy, .home-page .cert-chart-card .hero-panel-label { text-align: center; } .home-page .cert-chart-kicker { margin-inline: auto; } .home-page .cert-insight-grid { grid-template-columns: 1fr; gap: 0.75rem; } } @media (max-width: 640px) { .home-page .cert-legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .cert-chart-card, .home-page .cert-insight-card { padding: 1.15rem; } } .hero-stats { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(109, 78, 52, 0.08); } .home-page .services-section { padding-top: 4rem; } .home-page .services-header { align-items: flex-start; } .home-page .services-header .services-title-group { max-width: 100%; } .home-page .services-header-card { min-width: 320px; max-width: 360px; margin-left: auto; padding: 1.2rem 1.3rem; border-radius: 22px; background: linear-gradient(180deg, rgba(18, 26, 42, 0.82), rgba(255, 248, 239, 0.68)); border: 1px solid rgba(109, 78, 52, 0.08); box-shadow: var(--shadow-soft); } .home-page .services-grid { gap: 1.55rem; grid-template-columns: repeat(3, 1fr) !important; } .home-page .service-card { border-radius: 24px; padding: 0; grid-column: span 1 !important; min-height: 320px; justify-content: flex-end; background: #140d08; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 22px 54px rgba(130, 92, 54, 0.16); overflow: hidden; } .home-page .svc-bg { position: absolute; inset: 0; transform: scale(1.02); transition: transform 0.7s ease; overflow: hidden; } .home-page .svc-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* .home-page .svc-bg::after removed to ensure full image vibrancy */ .home-page .svc-overlay { position: absolute; inset: auto 0 0 0; height: 100%; background: linear-gradient(180deg, rgba(10, 8, 10, 0.02) 0%, rgba(8, 10, 18, 0.56) 34%, rgba(5, 8, 16, 0.96) 100%); clip-path: inset(calc(100% - 112px) 0 0 0); transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.55s ease; z-index: 1; } .home-page .svc-content { position: relative; z-index: 2; padding: 1.4rem 1.35rem 1.45rem; margin-top: auto; display: flex; flex-direction: column; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Force white text on all service cards — overrides any other color rules */ .home-page .services-section .service-card h3, .home-page .services-section .service-card p, .home-page .services-section .service-card .svc-link, .home-page .services-section .svc-content h3, .home-page .services-section .svc-content p, .home-page .services-section .svc-link { color: #ffffff !important; } .home-page .service-card h3 { font-size: 1.18rem; line-height: 1.25; max-width: 22ch; color: #ffffff; margin-bottom: 0; transform: translateY(0); transition: margin-bottom 0.45s ease; } .home-page .service-card p { font-size: 0.9rem; color: #ffffff !important; opacity: 0; transform: translateY(18px); max-height: 0; overflow: hidden; margin-bottom: 0; transition: opacity 0.38s ease 0.06s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.06s, max-height 0.45s ease, margin-bottom 0.45s ease; } .home-page .service-card .svc-link { color: #ffffff; opacity: 0; transform: translateY(18px); transition: opacity 0.35s ease 0.12s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, gap 0.3s ease; font-weight: 700; } .home-page .service-card:hover .svc-bg { transform: none; } .home-page .service-card:hover .svc-overlay { clip-path: inset(0 0 0 0); background: linear-gradient(180deg, rgba(7, 13, 26, 0.1) 0%, rgba(7, 13, 26, 0.35) 45%, rgba(7, 13, 26, 0.95) 100%); } .home-page .service-card:hover .svc-content { transform: none; } .home-page .service-card:hover h3 { margin-bottom: 0.85rem; color: #ffffff; } .home-page .service-card:hover p { opacity: 1; transform: translateY(0); max-height: 200px; margin-bottom: 1rem; } .home-page .service-card:hover .svc-link { opacity: 1; transform: translateY(0); } @media (hover: none) { .home-page .svc-overlay { clip-path: inset(0 0 0 0); } .home-page .service-card p, .home-page .service-card .svc-link { opacity: 1; transform: translateY(0); max-height: 180px; } .home-page .service-card h3 { margin-bottom: 0.8rem; } } .home-page .service-card:nth-child(1), .home-page .service-card:nth-child(2), .home-page .service-card:nth-child(3) { min-height: 290px; } .home-page .service-card:nth-child(4), .home-page .service-card:nth-child(5), .home-page .service-card:nth-child(6) { min-height: 250px; } .home-page .why-section { background: radial-gradient(circle at top, rgba(8, 68, 129, 0.08), transparent 34%), rgba(255, 255, 255, 0.26); } .home-page .why-grid { gap: 1.55rem; } .home-page .why-card { border-radius: 24px; padding: 1.6rem 0.8rem; } .home-page .why-num { font-size: 3rem; } .home-page .cta-content { max-width: 920px; margin: 0 auto; padding: 1.4rem 1.2rem; } @media (max-width: 1024px) { .hero-shell { grid-template-columns: 1fr; } .hero-visual { min-height: auto; } .hero-panel { max-width: 760px; } .home-page .services-header-card { min-width: 0; max-width: none; width: 100%; margin-left: 0; } } @media (max-width: 640px) { .hero { padding-bottom: 4rem; } .hero-title { max-width: 100%; font-size: clamp(2.1rem, 9vw, 3.2rem); /* Scaled down for mobile viewport fit */ } .hero-title .line1 { white-space: normal; } .hero-panel-grid { grid-template-columns: 1fr; gap: 1.2rem; } .home-page .ai-hero-label { margin-left: 0; } .home-page .ai-score-card, .home-page .ai-signal-grid { grid-template-columns: 1fr; } .home-page .ai-signal-card.wide { grid-column: auto; } .hero-proof-strip { gap: 0.65rem; } } /* Homepage polish: stronger hierarchy, spacing, and section positioning */ .home-page .section-heading { color: var(--white); } .home-page .section-sub, .home-page .services-header-card p, .home-page .consulting-card-body p, .home-page .consulting-cta-text p, .home-page .ap-body p, .home-page .why-card p, .home-page .contact-premium-info p, .home-page .faq-answer-inner { color: var(--off); } .home-page .consulting-card-body h3, .home-page .ap-body h4, .home-page .why-card h3, .home-page .faq-question { color: var(--white) !important; } .home-page .contact-premium-info h2, .home-page .contact-form-group label, .home-page .industries-premium-header .section-heading, .home-page .services-header .section-heading, .home-page .consulting-header .section-heading, .home-page .faq-intro .section-heading { color: #ffffff !important; } .home-page .consulting-card-tags span, .home-page .contact-method-item span { color: #ffffff !important; } .home-page .industries-premium-header .section-sub, .home-page .services-header .section-sub, .home-page .consulting-header .section-sub, .home-page .faq-intro .section-sub { color: #ffffff; } .home-page .ind-card-content h3, .home-page .ind-card-content p, .home-page .ind-tags span { position: relative; z-index: 2; } .home-page .ind-card-content h3 { color: #fffaf3; text-shadow: 0 8px 24px rgba(0, 0, 0, 0.42); } .home-page .ind-card-content p { color: #ffffff; text-shadow: 0 6px 18px rgba(0, 0, 0, 0.38); } .home-page .ind-tags span { color: #fffaf3; background: rgba(10, 12, 18, 0.34); border-color: rgba(255, 255, 255, 0.16); } .home-page .advantage-header .section-heading, .home-page .adv-num, .home-page .adv-label, .home-page .adv-feature { color: #fef7f0; } .home-page .advantage-section { background: radial-gradient(circle at top, rgba(53, 182, 255, 0.12), transparent 32%), linear-gradient(180deg, #07111f 0%, #0b1728 52%, #07111f 100%) !important; } .home-page .advantage-section::before { background: radial-gradient(circle, rgba(53, 182, 255, 0.16), transparent 65%) !important; } .home-page .advantage-section::after { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important; } .home-page .advantage-header .section-label { text-shadow: 0 8px 24px rgba(8, 68, 129, 0.18); } .home-page .advantage-header .section-heading { color: #ffffff !important; } .home-page .advantage-header .section-heading span { color: var(--blue) !important; } .home-page .advantage-header .section-sub { color: #eef7ff !important; } .home-page .adv-desc { color: #f4f8fc !important; } .home-page .adv-box-num { color: rgba(255, 255, 255, 0.28); } .home-page .adv-counter { background: linear-gradient(180deg, rgba(16, 28, 48, 0.94), rgba(11, 20, 36, 0.96)) !important; border-color: rgba(143, 223, 255, 0.18) !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28); } .home-page .adv-counter:hover { background: linear-gradient(180deg, rgba(21, 39, 68, 0.98), rgba(12, 24, 42, 0.98)) !important; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.34); } .home-page .adv-num { color: #ffffff !important; } .home-page .adv-plus { color: #8fdfff !important; } .home-page .adv-label { color: #ffffff !important; } .home-page .adv-feature { color: #eef7ff !important; } .home-page .advantage-features { border-top-color: rgba(255, 255, 255, 0.14); } .home-page .adv-feat-icon { background: linear-gradient(135deg, #ff9033, #1A72B8) !important; color: #ffffff !important; box-shadow: 0 10px 24px rgba(53, 182, 255, 0.22); } .home-page .adv-icon { background: linear-gradient(135deg, rgba(143, 223, 255, 0.2), rgba(83, 194, 255, 0.1)) !important; border-color: rgba(143, 223, 255, 0.2) !important; color: #8fdfff !important; } .home-page .adv-icon svg, .home-page .adv-feat-icon svg { filter: drop-shadow(0 0 6px rgba(53, 182, 255, 0.2)); } .home-page .adv-num, .home-page .adv-plus, .home-page .adv-label, .home-page .adv-desc, .home-page .adv-feature span { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); } .home-page .contact-method-item { color: #3f3026; } .home-page .contact-input, .home-page .contact-select, .home-page .contact-textarea { background: rgba(18, 26, 42, 0.9); border-color: rgba(109, 78, 52, 0.18); color: #ffffff !important; } .home-page .contact-input::placeholder, .home-page .contact-textarea::placeholder { color: #866f5f; } .home-page .contact-select option { background-color: #0c1524 !important; color: #ffffff !important; } .hero-content { position: relative; padding: clamp(1.15rem, 1.8vw, 1.65rem); transform: translateY(-26px); border-radius: 28px; background: linear-gradient(180deg, rgba(8, 18, 34, 0.78), rgba(8, 16, 32, 0.68)); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 28px 72px rgba(2, 6, 23, 0.3); } .hero-content::after { content: '\2022'; position: absolute; inset: auto auto -72px -36px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(42, 196, 255, 0.18), transparent 68%); filter: blur(12px); pointer-events: none; } .hero-badge { background: rgba(8, 20, 42, 0.52); color: #f3fbff; border: 1px solid rgba(130, 220, 255, 0.22); box-shadow: 0 16px 36px rgba(9, 17, 34, 0.22); } .hero-title, .hero-sub, .home-page .hstat-label, .home-page .hstat-num { position: relative; z-index: 1; } .hero-title { text-shadow: 0 12px 40px rgba(4, 8, 18, 0.35); } .hero-actions { gap: 0.9rem; margin-top: 1rem; } .hero-actions .btn { min-height: 25px; } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; } .home-page .hstat { padding: 0.25rem 1.05rem; border-radius: 20px; background: rgba(18, 26, 42, 0.76); border: 1px solid rgba(109, 78, 52, 0.08); /* box-shadow: 0 18px 34px rgba(130, 92, 54, 0.08); */ } .home-page .consulting-section, .home-page .advantage-section, .home-page .industries-premium-section, .home-page .services-section, .home-page .approach-section, .home-page .why-section, .home-page .contact-premium-section, .home-page .faq-section { padding-top: clamp(3.5rem, 6vw, 4.5rem); padding-bottom: clamp(3.5rem, 6vw, 4.5rem); } .home-page .consulting-section, .home-page .services-section, .home-page .contact-premium-section { position: relative; } .home-page .consulting-section::after, .home-page .services-section::after, .home-page .contact-premium-section::after { content: '\2022'; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(109, 78, 52, 0.12), transparent); } .home-page .consulting-header, .home-page .advantage-header, .home-page .industries-premium-header, .home-page .faq-intro { max-width: 760px; margin-inline: auto; text-align: center; } .home-page .consulting-header .section-sub, .home-page .advantage-header .section-sub, .home-page .industries-premium-header .section-sub, .home-page .faq-intro .section-sub { margin-inline: auto; } .home-page .services-header { margin-bottom: 3.4rem; } .home-page .services-header-card { position: relative; overflow: hidden; } .home-page .services-header-card::before { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(42, 196, 255, 0.1), transparent 58%); pointer-events: none; } .home-page .service-card { min-height: 360px; } .home-page .service-card:nth-child(4), .home-page .service-card:nth-child(5), .home-page .service-card:nth-child(6) { min-height: 290px; } .home-page .consulting-grid, .home-page .industries-premium-grid { margin-top: 2.7rem; } .home-page .advantage-section { background: radial-gradient(circle at top, rgba(26, 117, 255, 0.08), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(247, 241, 232, 0.45)); } .home-page .advantage-counters { margin-top: 2.5rem; } .home-page .industries-premium-section { background: var(--dark); } .home-page .ind-card { min-height: 340px; background: var(--dark); border-color: rgba(36, 22, 15, 0.08); } .home-page .approach-grid { gap: clamp(2rem, 4vw, 4.5rem); } .home-page .why-section { padding-top: clamp(4.8rem, 8vw, 6rem); } .home-page .why-grid { margin-top: 2.5rem; } .home-page .contact-premium-grid { gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; } .home-page .contact-premium-info, .home-page .contact-glass-card { height: 100%; } .home-page .contact-glass-card { background: var(--dark); box-shadow: 0 28px 64px rgba(130, 92, 54, 0.14); } .home-page .contact-glass-card .contact-form-group label { color: #ffffff !important; font-weight: 700; } @media (max-width: 1100px) { .home-page .services-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 1024px) { .hero-stats { grid-template-columns: 1fr; } } .scroll-top:hover svg { transform: translateY(-2px); } @media (max-width: 767px) { .home-page .services-grid { grid-template-columns: 1fr !important; } .hero-content { padding: 1.15rem; border-radius: 22px; } .home-page .service-card, .home-page .service-card:nth-child(4), .home-page .service-card:nth-child(5), .home-page .service-card:nth-child(6) { min-height: 300px; } } /* Network Security Landing Page: network-security-solutions.html */ .networksecurity-page .hero-title { color: #fffdf8 !important; /* Ensure visibility over 100% video */ text-shadow: 0 0 20px rgba(8, 68, 129, 0.3), 0 4px 18px rgba(0, 0, 0, 0.5); } .networksecurity-page .section-heading, .networksecurity-page .faq-question, .networksecurity-page .network-service-card h3, .networksecurity-page .network-focus-card h3 { color: var(--white); } .network-hero .hero-content { max-width: 100%; } .network-hero-grid, .network-overview-grid, .network-tech-grid, .network-why-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2rem; align-items: center; } .network-overview-section, .network-focus-section, .network-services-section, .network-gallery-section, .network-tech-section, .network-why-section { padding: 3.5rem 0; position: relative; } .network-hero-photo, .network-overview-photo-card, .network-tech-card, .network-why-list { background: linear-gradient(180deg, rgba(18, 26, 42, 0.84), rgba(255, 248, 239, 0.7)); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-soft); } .network-hero-photo img, .network-overview-photo-card img, .network-gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .network-overview-photo-card { position: relative; } .network-photo-caption { padding: 1.2rem 1.3rem 1.4rem; } .network-photo-caption strong { display: block; color: #24160f; margin-bottom: 0.35rem; } .network-photo-caption span { color: #FFFFFF; font-size: 0.9rem; } .network-highlight-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; } .network-highlight-pill { display: inline-flex; align-items: center; padding: 0.72rem 1rem; border-radius: 999px; background: rgba(18, 26, 42, 0.74); border: 1px solid rgba(109, 78, 52, 0.08); color: #ffffff; font-size: 0.84rem; font-weight: 700; } .network-focus-grid, .network-services-grid, .network-gallery-grid { display: grid; gap: 1.2rem; margin-top: 3rem; } .network-focus-grid { grid-template-columns: repeat(4, 1fr); } .network-services-grid { grid-template-columns: repeat(4, 1fr); } .network-gallery-grid { grid-template-columns: repeat(3, 1fr); } .network-focus-card, .network-gallery-card { background: linear-gradient(180deg, rgba(18, 26, 42, 0.84), rgba(52, 49, 46, 0.7)); border: 1px solid rgba(109, 78, 52, 0.08); border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; transition: var(--trans); } .network-focus-card, .network-service-card { padding: 1.6rem; } .network-focus-card:hover, .network-service-card:hover, .network-gallery-card:hover { transform: translateY(-6px); border-color: rgba(8, 68, 129, 0.18); } .network-focus-icon, .network-service-num { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); color: #fffaf5; font-family: 'Manrope', sans-serif; font-size: 0.98rem; font-weight: 800; margin-bottom: 1rem; box-shadow: 0 12px 24px rgba(8, 68, 129, 0.18); } .network-focus-card p, .network-service-card p, .network-gallery-body { font-family: 'Manrope', sans-serif; color: var(--white); overflow-x: hidden; line-height: 1.7; } .network-gallery-card { min-height: 360px; display: flex; flex-direction: column; } .network-gallery-card img { height: 280px; } .network-gallery-body { font-family: 'Manrope', sans-serif; background: radial-gradient(circle at top left, rgba(8, 68, 129, 0.10), transparent 22%), radial-gradient(circle at top right, rgba(8, 68, 129, 0.1), transparent 20%), linear-gradient(180deg, #080D16 0%, #121A2A 50%, #080D16 100%); color: var(--white); overflow-x: hidden; line-height: 1.7; } .network-gallery-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); font-weight: 800; margin-bottom: 0.35rem; } .network-gallery-body h3 { color: #24160f; font-size: 1.05rem; line-height: 1.2; } .network-tech-tags { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; } .network-tech-tags span { display: inline-flex; align-items: center; padding: 0.72rem 0.95rem; background: rgba(18, 26, 42, 0.74); border: 1px solid rgba(109, 78, 52, 0.08); border-radius: 999px; color: #644d3f; font-size: 0.84rem; font-weight: 600; } .network-tech-card, .network-why-list { padding: 2rem; } .network-outcome { margin-bottom: 1.2rem; } .network-outcome:last-child { margin-bottom: 0; } .network-outcome-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.55rem; color: #ffffff; font-size: 0.92rem; } .network-outcome-head strong { color: var(--blue); } .network-outcome-bar { width: 100%; height: 12px; background: rgb(237 123 31 / 75%); border-radius: 999px; overflow: hidden; } .network-outcome-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); transition: width 1s ease; } .network-why-list { display: flex; flex-direction: column; gap: 1rem; } .network-why-item { position: relative; padding: 1rem 1rem 1rem 3rem; border-radius: 18px; background: rgba(18, 26, 42, 0.72); border: 1px solid rgba(109, 78, 52, 0.08); color: #ffffff; font-weight: 700; } .network-why-item::before { content: '\2022'; position: absolute; top: 50%; left: 1.1rem; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); background: linear-gradient(135deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); box-shadow: 0 0 0 6px rgba(8, 68, 129, 0.09); } .network-why-creative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .why-creative-card { background: linear-gradient(160deg, rgba(11, 22, 38, 0.92), rgba(7, 14, 25, 0.95)); border: 1px solid rgba(0, 163, 217, 0.28); border-radius: 18px; padding: 1.2rem; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); position: relative; overflow: hidden; } .why-creative-card::after { content: ""; position: absolute; inset: auto -20% -45% auto; width: 180px; height: 180px; background: radial-gradient(circle, rgba(0, 163, 217, 0.22), transparent 70%); pointer-events: none; } .why-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.7rem; } .why-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #d9f3ff; background: rgba(0, 163, 217, 0.16); border: 1px solid rgba(0, 163, 217, 0.35); padding: 0.32rem 0.6rem; border-radius: 999px; } .why-card-head strong { color: #ffffff; font-size: 0.9rem; } .why-creative-card p { margin: 0; color: rgba(230, 243, 255, 0.86); line-height: 1.65; font-size: 0.92rem; } .why-creative-card.why-green { border-color: rgba(45, 155, 78, 0.32); } .why-creative-card.why-green .why-chip { background: rgba(45, 155, 78, 0.16); border-color: rgba(45, 155, 78, 0.35); color: #dcffe8; } .why-creative-card.why-wide { grid-column: 1 / -1; } /* Cybersecurity: Why Choose Vedtam refresh */ .why-trust-matrix { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .why-feature-card, .why-pillar-card { background: linear-gradient(160deg, rgba(11, 22, 38, 0.92), rgba(7, 14, 25, 0.96)); border: 1px solid rgba(0, 163, 217, 0.24); border-radius: 18px; padding: 1.25rem; } .why-feature-card { grid-column: 1 / -1; } .why-kicker { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #d6f3ff; background: rgba(0, 163, 217, 0.16); border: 1px solid rgba(0, 163, 217, 0.35); border-radius: 999px; padding: 0.28rem 0.58rem; margin-bottom: 0.7rem; } .why-feature-card h3, .why-pillar-card h4 { color: #fff; margin: 0 0 0.5rem; } .why-feature-card p, .why-pillar-card p { color: rgba(229, 243, 255, 0.84); margin: 0; } .why-proof-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; } .why-proof-row span { font-size: 0.76rem; font-weight: 700; color: #dcffe8; border: 1px solid rgba(45, 155, 78, 0.35); background: rgba(45, 155, 78, 0.14); border-radius: 999px; padding: 0.28rem 0.55rem; } @media (max-width: 1100px) { .network-focus-grid, .network-services-grid { grid-template-columns: repeat(2, 1fr); } .network-gallery-grid { grid-template-columns: 1fr; } .network-why-creative-grid { grid-template-columns: 1fr; } .why-trust-matrix { grid-template-columns: 1fr; } } @media (max-width: 900px) { .network-hero-grid, .network-overview-grid, .network-tech-grid, .network-why-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .network-focus-grid, .network-services-grid { grid-template-columns: 1fr; } .network-overview-section, .network-focus-section, .network-services-section, .network-gallery-section, .network-tech-section, .network-why-section { padding: 3.5rem 0; } .network-tech-card, .network-why-list { padding: 1.5rem; } } /* Scroll safety for card-heavy sections on touch devices */ @media (max-width: 1024px) { .network-focus-grid, .network-services-grid, .cyber-focus-grid { overflow: visible !important; } .cyber-focus-card, .network-focus-card, .industry-card { touch-action: pan-y; -webkit-user-select: none; user-select: none; } .cyber-focus-card:hover, .network-focus-card:hover, .industry-card:hover { transform: none; } } /* Cybersecurity Landing Page: cyber-security-services.html */ .cybersecurity-page .hero-title { color: #fffdf8 !important; /* Ensure visibility over 100% video */ text-shadow: 0 0 20px rgba(0, 255, 255, 0.25), 0 4px 18px rgba(0, 0, 0, 0.5); } .cybersecurity-page .section-heading, .cybersecurity-page .faq-question, .cybersecurity-page .cyber-service-card h3, .cybersecurity-page .cyber-process-card h3 { color: var(--white); } .cyber-hero .hero-content { max-width: 780px; } .cyber-hero .hero-sub { max-width: 640px; } /* Strong dark overlay so fully-opaque hero images don't obscure text */ .cyber-hero .hero-bg { background: linear-gradient(135deg, rgba(10, 5, 2, 0.72) 0%, rgba(20, 10, 4, 0.58) 50%, rgba(10, 5, 2, 0.48) 100%) !important; } /* Ensure all text is pure white with heavy shadow on cyber hero pages */ .cyber-hero .hero-title, .cyber-hero .hero-badge, .cyber-hero .hero-sub { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 4px 28px rgba(0, 0, 0, 0.6) !important; } .cyber-overview-section, .cyber-trust-section, .cyber-scope-section, .cyber-services-section, .cyber-ai-section, .cyber-tools-section, .cyber-process-section, .cyber-why-section, .cyber-industries-section { padding: 3.5rem 0; position: relative; } .cyber-overview-grid, .cyber-ai-grid, .cyber-tools-grid, .cyber-why-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; } .cyber-overview-card, .cyber-scope-shell, .cyber-ai-stack, .cyber-metrics-card, .cyber-why-list { background: linear-gradient(180deg, rgba(18, 26, 42, 0.82), rgba(255, 247, 237, 0.68)); border: 1px solid rgba(109, 78, 52, 0.08); border-radius: 24px; padding: 2rem; box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cyber-scope-shell { margin-top: 3rem; display: grid; grid-template-columns: 280px 1fr; gap: 1.2rem; align-items: start; } .cyber-scope-tabs { display: grid; gap: 0.75rem; } .cyber-scope-tab { appearance: none; border: 1px solid rgba(109, 78, 52, 0.08); background: rgba(18, 26, 42, 0.72); color: #5b473a; border-radius: 16px; padding: 0.95rem 1rem; text-align: left; font: inherit; font-weight: 700; cursor: pointer; transition: var(--trans); } .cyber-scope-tab:hover, .cyber-scope-tab.active { background: linear-gradient(135deg, rgba(8, 68, 129, 0.10), rgba(233, 169, 91, 0.12)); border-color: rgba(8, 68, 129, 0.18); color: #24160f; transform: translateX(4px); } .cyber-scope-panels { position: relative; } .cyber-scope-panel { display: none; min-height: 100%; } .cyber-scope-panel.active { display: block; animation: fadeUp 0.45s ease; } .cyber-scope-panel h3 { font-family: 'Manrope', sans-serif; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.08; color: #24160f; margin-bottom: 1.25rem; } .cyber-scope-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .cyber-scope-item { padding: 1.1rem; border-radius: 18px; background: rgba(18, 26, 42, 0.7); border: 1px solid rgba(109, 78, 52, 0.08); } .cyber-scope-item strong { display: block; color: #2a1b10; margin-bottom: 0.45rem; } .cyber-scope-item span { color: var(--muted); font-size: 0.9rem; line-height: 1.7; } /* Consolidated AI Section Styles */ .cyber-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .cyber-ai-stack { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem 1.5rem; width: 100%; } .cyber-ai-card { width: 100%; padding: 1.75rem; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 0.75rem; position: relative; overflow: hidden; word-break: normal; overflow-wrap: break-word; } .cyber-ai-card:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--cyber-accent); transform: translateX(10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .cyber-ai-card strong { color: var(--white); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; } .cyber-ai-card span { color: rgba(255, 255, 255, 0.65); font-size: 0.94rem; line-height: 1.6; } @media (max-width: 1024px) { .cyber-ai-grid { grid-template-columns: 1fr; gap: 2rem; } } .cyber-ai-card span { color: var(--muted); font-size: 0.9rem; line-height: 1.7; } .cyber-ai-orbit { position: absolute; top: -20px; right: -20px; width: 90px; height: 90px; border-radius: 50%; border: 1px solid rgba(8, 68, 129, 0.18); box-shadow: 0 0 0 12px rgba(8, 68, 129, 0.06), 0 0 0 24px rgba(8, 68, 129, 0.03); animation: cyber-orbit-pulse 4.5s ease-in-out infinite; } @keyframes cyber-orbit-pulse { 0%, 100% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } } .cyber-card-top { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(8, 68, 129, 0.1); color: var(--blue); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.2rem; } .cyber-stack-list, .cyber-why-list { display: flex; flex-direction: column; gap: 1rem; } .cyber-stack-item, .cyber-why-item { padding: 1rem 1rem 1rem 1.1rem; border-radius: 18px; background: rgba(18, 26, 42, 0.72); border: 1px solid rgba(109, 78, 52, 0.08); box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.5); } .cyber-stack-item strong, .cyber-why-item { display: block; color: #084481; font-weight: 700; } .cyber-stack-item span { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 0.35rem; } .cyber-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; } .cyber-service-card, .cyber-process-card { background: linear-gradient(180deg, rgba(18, 26, 42, 0.84), rgba(255, 248, 239, 0.68)); border: 1px solid rgba(109, 78, 52, 0.08); border-radius: 22px; padding: 1.8rem; box-shadow: var(--shadow-soft); transition: var(--trans); position: relative; overflow: hidden; } .cyber-service-card::before, .cyber-process-card::before { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8, 68, 129, 0.10), transparent 60%); opacity: 0; transition: var(--trans); } .cyber-service-card:hover, .cyber-process-card:hover { transform: translateY(-6px); border-color: rgba(8, 68, 129, 0.18); box-shadow: 0 24px 54px rgba(130, 92, 54, 0.14); } .cyber-service-card:hover::before, .cyber-process-card:hover::before { opacity: 1; } .cyber-service-icon, .cyber-process-num { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); color: #fffaf5; font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 800; margin-bottom: 1.1rem; box-shadow: 0 12px 24px rgba(8, 68, 129, 0.18); } .cyber-service-card p, .cyber-process-card p { color: var(--muted); font-size: 0.9rem; } .cyber-tools-tags { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; } .cyber-tools-tags span { display: inline-flex; align-items: center; padding: 0.72rem 0.95rem; background: rgba(18, 26, 42, 0.74); border: 1px solid rgba(109, 78, 52, 0.08); border-radius: 999px; color: #644d3f; font-size: 0.84rem; font-weight: 600; } .cyber-metric { margin-bottom: 1.2rem; } .cyber-metric:last-child { margin-bottom: 0; } .cyber-metric-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; color: #4a382d; margin-bottom: 0.55rem; } .cyber-metric-head strong { color: var(--blue); } .cyber-metric-bar { width: 100%; height: 12px; background: rgba(8, 68, 129, 0.1); border-radius: 999px; overflow: hidden; } .cyber-metric-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); transition: width 1s ease; } .cyber-process-grid, .cyber-industries-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 3rem; } .cyber-industries-section .industry-card { padding-top: 2rem; } .cyber-why-item { position: relative; padding-left: 3rem; } .cyber-why-item::before { content: '\2022'; position: absolute; top: 50%; left: 1.1rem; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); background: linear-gradient(135deg, rgba(8, 68, 129, 1), rgba(8, 68, 129, 1)); box-shadow: 0 0 0 6px rgba(8, 68, 129, 0.09); } @media (max-width: 1100px) { .cyber-trust-grid, .cyber-services-grid, .cyber-process-grid, .cyber-industries-grid, .home-page .cyber-industries-grid { grid-template-columns: repeat(2, 1fr); } .cyber-scope-shell { grid-template-columns: 1fr; } .cyber-scope-tabs { grid-template-columns: repeat(2, 1fr); } .cyber-scope-items { grid-template-columns: 1fr; } } @media (max-width: 900px) { .cyber-overview-grid, .cyber-ai-grid, .cyber-tools-grid, .cyber-why-grid { grid-template-columns: 1fr; } .cyber-ai-stack { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cyber-trust-grid, .cyber-services-grid, .cyber-process-grid, .cyber-industries-grid { grid-template-columns: 1fr; } .cyber-overview-section, .cyber-trust-section, .cyber-scope-section, .cyber-services-section, .cyber-ai-section, .cyber-tools-section, .cyber-process-section, .cyber-why-section, .cyber-industries-section { padding: 3.5rem 0; } .cyber-overview-card, .cyber-scope-shell, .cyber-ai-stack, .cyber-metrics-card, .cyber-why-list, .cyber-service-card, .cyber-process-card { padding: 1.5rem; } .cyber-scope-tabs { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .nav-links, .nav-cta .btn-primary { display: none; } .nav-hamburger { display: flex; } .values-grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: repeat(3, 1fr); } .industries-grid { grid-template-columns: repeat(3, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } .why-grid { grid-template-columns: repeat(2, 1fr); } .approach-grid { grid-template-columns: 1fr; } .approach-visual { order: -1; } } @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } .about-feature-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .process-steps::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(207, 109, 49, 0.34), rgba(137, 212, 200, 0.4)); } .mission-section+.why-section .why-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .industries-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .hero-stats { gap: 1.5rem; } .why-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: repeat(3, 1fr); } .approach-grid { gap: 2.5rem; } } @media (max-width: 480px) { .values-grid { grid-template-columns: 1fr; } .industries-grid { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; justify-content: center; } } .about-page-intro { padding: 3.5rem 0; background: var(--dark); margin-top: 5rem !important; } .about-hero { background: radial-gradient(circle at 18% 22%, rgba(136, 218, 204, 0.15), transparent 35%), radial-gradient(circle at 82% 18%, rgba(0, 163, 217, 0.12), transparent 35%), var(--dark); } .about-hero .hero-bg { background: transparent !important; } .about-hero .hero-grid { background-image: linear-gradient(rgba(114, 188, 176, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 188, 176, 0.05) 1px, transparent 1px); } .about-hero .hero-glow { background: radial-gradient(circle, rgba(136, 218, 204, 0.2) 0%, rgba(255, 205, 145, 0.1) 34%, transparent 70%); } .about-hero .hero-content { max-width: 860px; } .about-photo { width: 100%; height: 200px; /* Reduced for 100vh fit */ object-fit: cover; border-radius: 12px; margin-bottom: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.08); } .about-values-grid .value-icon { font-family: 'Manrope', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--cyan); } .mission-section { padding: 6rem 0; background: var(--black); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; } .mission-section::before { content: '\2022'; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: radial-gradient(circle at 70% 30%, rgba(26, 114, 184, 0.04), transparent 40%), radial-gradient(circle at 30% 70%, rgba(0, 242, 255, 0.03), transparent 40%); pointer-events: none; } .mission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; max-width: 1200px; margin-left: auto; margin-right: auto; } .mission-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px; padding: 3rem 2.2rem; background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(7, 13, 26, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 32px; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; z-index: 1; } .mission-card:hover { border-color: var(--orange); transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 20px rgba(26, 114, 184, 0.15); } .mission-card::before { content: '\2022'; position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; transition: transform 0.8s ease; } .mission-card:nth-child(1)::before { background-image: url('services_images/purpose_mission_bg.png'); } .mission-card:nth-child(2)::before { background-image: url('services_images/purpose_vision_bg.png'); } .mission-card:nth-child(3)::before { background-image: url('services_images/purpose_values_bg.png'); } .mission-card::after { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 13, 26, 0.2) 0%, rgba(7, 13, 26, 0.8) 60%, #070d1a 100%); z-index: -1; transition: opacity 0.5s ease; } .mission-card:hover::after { opacity: 0.85; } .mission-card:hover { border-color: rgba(8, 68, 129, 0.45); transform: translateY(-6px); } .mission-card:hover::before { transform: scale(1.08); } .mission-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; border-radius: 16px; color: #ffffff !important; background: linear-gradient(135deg, var(--cyan), #005577) !important; border: none; box-shadow: 0 10px 25px rgba(0, 163, 217, 0.4); transition: transform 0.4s ease; } .mission-card:hover .mission-icon { transform: rotate(10deg) scale(1.1); } .mission-icon svg { width: 30px; height: 30px; } .mission-card h3 { font-family: 'Manrope', sans-serif; font-size: 1.6rem; font-weight: 700; color: #ffffff; margin-bottom: 0.8rem; letter-spacing: -0.02em; } .mission-card p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.6; margin: 0; } .mission-section .section-heading { white-space: nowrap !important; } .mission-impact { max-width: 860px; margin: 4rem auto 0; text-align: center; font-size: 1.1rem; font-weight: 600; line-height: 1.7; color: #ffffff; padding: 2rem; border-radius: 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); } @media (max-width: 1024px) { .mission-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .mission-grid { grid-template-columns: 1fr; } } /* --- PREMIUM CONTACT SECTION (REDESIGNED) --- */ .contact-premium-section { padding: clamp(6rem, 10vw, 9rem) 0; position: relative; overflow: hidden; background: #080e18; z-index: 1; } /* Background Decorative Elements */ .cyber-problem-section { padding: 8rem 0 5rem 0; background: #0a0a0b; position: relative; overflow: hidden; } .contact-glow-1, .contact-glow-2 { position: absolute; width: clamp(300px, 40vw, 600px); height: clamp(300px, 40vw, 600px); border-radius: 50%; filter: blur(120px); z-index: -1; pointer-events: none; opacity: 0.15; } .contact-glow-1 { top: -10%; right: -5%; background: radial-gradient(circle, var(--orange), transparent 70%); } .contact-glow-2 { bottom: -10%; left: -5%; background: radial-gradient(circle, #2ac4ff, transparent 70%); } .contact-premium-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 5vw, 6rem); align-items: center; } /* Info Column Styling */ .response-badge-premium { display: inline-flex; align-items: center; gap: 0.8rem; background: rgba(42, 196, 255, 0.08); border: 1px solid rgba(42, 196, 255, 0.2); padding: 0.6rem 1.2rem; border-radius: 100px; margin-bottom: 2rem; color: #2ac4ff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; } .pulse-icon { width: 8px; height: 8px; background: #2ac4ff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(42, 196, 255, 0.4); animation: pulse-badge 2s infinite; } @keyframes pulse-badge { 0% { box-shadow: 0 0 0 0 rgba(42, 196, 255, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(42, 196, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(42, 196, 255, 0); } } .premium-heading { font-size: clamp(2.5rem, 5vw, 3.8rem); line-height: 1.1; font-weight: 800; color: #ffffff; margin-bottom: 1.5rem; } .premium-heading span { background: linear-gradient(135deg, var(--orange), #ffb88c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .premium-sub { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); line-height: 1.7; margin-bottom: 2.5rem; max-width: 580px; } .consultation-features { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; } .feature-tag { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.5rem 1rem; border-radius: 12px; color: #ffffff; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.6rem; transition: 0.3s; } .feature-tag i { color: var(--orange); } .feature-tag:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } /* --- MODERN CONTACT PREMIUM SECTION (2026 UPDATE) --- */ .contact-premium-section { position: relative; padding: clamp(5rem, 10vw, 8rem) 0; background: #06090f !important; overflow: hidden; } /* Mesh Gradients (Atmospheric) */ .mesh-gradient-1, .mesh-gradient-2, .mesh-gradient-3 { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 1; opacity: 0.4; pointer-events: none; } .mesh-gradient-1 { width: 500px; height: 500px; background: radial-gradient(circle, #084481, transparent 70%); top: -10%; right: -10%; animation: mesh-float 15s ease-in-out infinite alternate; } .mesh-gradient-2 { width: 400px; height: 400px; background: radial-gradient(circle, #0ea5e9, transparent 70%); bottom: -5%; left: -5%; animation: mesh-float 12s ease-in-out infinite alternate-reverse; } .mesh-gradient-3 { width: 300px; height: 300px; background: radial-gradient(circle, #8b5cf6, transparent 70%); top: 40%; left: 30%; animation: mesh-float 20s ease-in-out infinite; } @keyframes mesh-float { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(50px, 30px) rotate(10deg); } } .contact-premium-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 5rem); position: relative; z-index: 2; align-items: center; } .contact-premium-info { position: relative; } .response-badge-premium { display: inline-flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.6rem 1.2rem; border-radius: 999px; margin-bottom: 2rem; } .pulse-icon { width: 10px; height: 10px; background: #22c55e; border-radius: 50%; position: relative; } .pulse-icon::after { content: '\2022'; position: absolute; inset: -4px; border: 2px solid #22c55e; border-radius: 50%; animation: pulse-ring 2s infinite; } .premium-heading { font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.1; color: #ffffff !important; margin-bottom: 1.5rem; } .premium-heading span { background: linear-gradient(135deg, #00A3D9, #2D9B4E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .premium-sub { font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75) !important; max-width: 580px; margin-bottom: 3rem; } .consultation-features { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3.5rem; } .feature-tag { display: flex; align-items: center; gap: 1.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 1.2rem 1.6rem; border-radius: 20px; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .feature-tag:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(0, 163, 217, 0.3); transform: translateX(10px); } .feature-tag i { font-size: 1.6rem; color: #00A3D9; flex-shrink: 0; } .feature-tag svg { width: 18px; height: 18px; color: #00A3D9; flex-shrink: 0; padding: 0.55rem; box-sizing: content-box; border-radius: 10px; background: rgba(0, 163, 217, 0.12); border: 1px solid rgba(0, 163, 217, 0.3); } .feature-tag svg path, .feature-tag svg circle, .feature-tag svg rect, .feature-tag svg line, .feature-tag svg polyline { stroke: currentColor !important; stroke-width: 2.2 !important; stroke-linecap: round; stroke-linejoin: round; } .feature-text { display: flex; flex-direction: column; } .feature-text strong { font-size: 1.05rem; color: #ffffff; margin-bottom: 0.2rem; } .feature-text span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.5); } /* Client Trust Widget */ .client-trust-widget { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; padding: 1rem 0; } .trust-avatars { display: flex; align-items: center; } .trust-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #06090f; background: linear-gradient(135deg, #334155, #1e293b); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #ffffff; margin-left: -12px; } .trust-avatar:first-child { margin-left: 0; } .trust-text { font-size: 0.95rem; color: rgba(255, 255, 255, 0.6); } .trust-text strong { color: #ffffff; font-weight: 700; } .contact-methods-premium { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 2rem; } .premium-method-card { display: flex; align-items: center; gap: 1.2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 1.2rem; border-radius: 20px; text-decoration: none; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .method-icon { width: 48px; height: 48px; background: rgba(0, 163, 217, 0.1); border-radius: 14px; display: grid; place-items: center; color: #00A3D9; font-size: 1.2rem; transition: 0.3s; } .method-details label { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } .method-details span { display: block; font-size: 1rem; color: #ffffff; font-weight: 600; } .premium-method-card:hover { background: rgba(0, 163, 217, 0.06); border-color: rgba(0, 163, 217, 0.3); transform: translateY(-5px); } .premium-whatsapp-cta { display: inline-flex; align-items: center; gap: 1rem; background: #25d366; color: #ffffff; padding: 1.1rem 2rem; border-radius: 18px; text-decoration: none; font-weight: 700; font-size: 1.1rem; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.25); transition: 0.4s; } /* Glass Card Premium Styling */ .contact-glass-card-premium { background: rgba(16, 24, 36, 0.4); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.12); padding: clamp(2rem, 5vw, 3.5rem); border-radius: 40px; position: relative; overflow: visible; /* Prevent cutting inner elements */ box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); width: 100%; max-width: 600px; box-sizing: border-box; margin: 0 auto; } .card-glass-glow { position: absolute; top: -100px; right: -100px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(8, 68, 129, 0.15), transparent 70%); z-index: 0; } .premium-form { position: relative; z-index: 1; width: 100%; box-sizing: border-box; } .form-header { margin-bottom: 2.5rem; } .form-header h3 { font-size: 1.8rem; color: #ffffff; margin-bottom: 0.5rem; } .form-header p { color: rgba(255, 255, 255, 0.5); font-size: 0.95rem; } .premium-form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; width: 100%; } .premium-input-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; position: relative; } .premium-input-group label { display: block; width: 100%; font-size: 0.85rem; font-weight: 700; color: #ffffff; margin-bottom: 0; padding-left: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; position: relative; z-index: 5; } .input-wrapper { position: relative; width: 100%; border-radius: 14px; overflow: hidden; } .input-wrapper i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); font-size: 1.1rem; pointer-events: none; transition: 0.3s; z-index: 10; } .premium-input-group.full-width i { top: 1.6rem; transform: none; } .premium-input-group input, .premium-input-group select, .premium-input-group textarea { width: 100%; box-sizing: border-box; /* Prevents padding from adding to width */ background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 1.1rem 1.2rem 1.1rem 3.4rem; color: #ffffff; font-size: 1rem; font-family: inherit; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; position: relative; z-index: 1; } .premium-input-group textarea { padding-top: 1.2rem; min-height: 120px; resize: vertical; } .premium-input-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 1.2rem; } /* Fix dropdown text visibility by forcing high contrast white text over a tailored dark background for all option lists */ .premium-input-group select option, select option { background-color: #0c1524 !important; color: #ffffff !important; font-weight: 500; } .premium-input-group input:focus, .premium-input-group select:focus, .premium-input-group textarea:focus { background: rgba(255, 255, 255, 0.08); border-color: rgba(0, 163, 217, 0.6); outline: none; box-shadow: 0 0 0 4px rgba(0, 163, 217, 0.1); } .input-focus-border { position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: #00A3D9; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%); } .premium-input-group input:focus~.input-focus-border, .premium-input-group select:focus~.input-focus-border, .premium-input-group textarea:focus~.input-focus-border { width: calc(100% - 2px); } .premium-submit-btn { width: 100%; background: linear-gradient(135deg, #00A3D9, #2D9B4E); color: #ffffff; border: none; padding: 1.2rem; border-radius: 18px; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; cursor: pointer; transition: 0.4s; box-shadow: 0 15px 35px rgba(0, 163, 217, 0.3); margin-top: 1.5rem; } .premium-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 45px rgba(45, 155, 78, 0.45); } @media (max-width: 1200px) { .contact-premium-grid { grid-template-columns: 1fr; gap: 4rem; } .contact-premium-info { text-align: center; display: flex; flex-direction: column; align-items: center; } .premium-sub { margin-inline: auto; } .consultation-features { align-items: stretch; max-width: 600px; width: 100%; } .client-trust-widget { justify-content: center; } } @media (max-width: 768px) { .premium-form-row { grid-template-columns: 1fr; } .contact-methods-premium { grid-template-columns: 1fr; } .premium-heading { font-size: 2.2rem; } .contact-premium-section { padding: 5rem 0; } } /* --- CYBERSECURITY LANDING PAGE --- */ /* Hero Split Layout */ .hero-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: flex-start; position: relative; z-index: 2; padding: 2rem 0; } .hero-shell .hero-content { max-width: 100%; padding: 0; } .hero-visual { position: relative; z-index: 2; animation: fadeUp 0.9s 0.4s both; } /* Hero Proof Strip */ .hero-proof-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; } .hero-proof-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.85rem; border-radius: 999px; background: #312117; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(18, 26, 42, 0.92); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .hero-proof-item::before { content: '\2022'; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: blink 2s infinite; flex-shrink: 0; } .ai-dot.red { background: #ff5f56; } .ai-dot.amber { background: #ffbd2e; } .ai-dot.green { background: #27c93f; box-shadow: 0 0 6px rgba(39, 201, 63, 0.6); } .ai-signal-card.wide { grid-column: 1 / -1; } /* Reveal Animations */ .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); } .reveal-right.visible { opacity: 1; transform: translateX(0); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); } .reveal-left.visible { opacity: 1; transform: translateX(0); } /* Problem Section (Risk Hook) */ .cyber-problem-section { padding: 5rem 0; background: #0a0a0b; position: relative; overflow: hidden; } .cyber-problem-section::before { content: '\2022'; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(8, 68, 129, 0.3), transparent); } .cyber-problem-header { text-align: center; max-width: 800px; margin: 0 auto 4rem; } .cyber-problem-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(8, 68, 129, 0.1); color: #ff5f56; padding: 6px 14px; border-radius: 100px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; border: 1px solid rgba(8, 68, 129, 0.2); } .problem-pulse { width: 8px; height: 8px; background: #ff5f56; border-radius: 50%; position: relative; } .problem-pulse::after { content: '\2022'; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ff5f56; animation: pulse-ring 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } .cyber-problem-heading { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 1.5rem; } .cyber-problem-heading span { background: linear-gradient(135deg, #ff5f56, #ffbd2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cyber-problem-sub { font-size: 1.1rem; color: #94a3b8; line-height: 1.6; } .cyber-problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 4rem; } .cyber-problem-card { background: rgba(15, 15, 17, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 2.5rem; transition: all 0.4s ease; position: relative; overflow: hidden; } .cyber-problem-card:hover { border-color: rgba(8, 68, 129, 0.3); background: rgba(20, 20, 23, 0.8); transform: translateY(-8px); box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5); } .cyber-problem-icon { width: 54px; height: 54px; color: #ff5f56; margin-bottom: 1.5rem; } .cyber-problem-stat { font-size: 0.8rem; font-weight: 800; color: #ff5f56; background: rgba(8, 68, 129, 0.1); padding: 4px 10px; border-radius: 6px; width: fit-content; margin-bottom: 1rem; } .cyber-problem-card h3 { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 1rem; } .cyber-problem-card p { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; } .cyber-problem-cta { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; } .cyber-problem-warning { display: inline-flex; align-items: center; gap: 12px; background: rgba(26, 114, 184, 0.08); padding: 1.1rem 2.4rem; border-radius: 100px; border: 1px solid rgba(26, 114, 184, 0.2); color: #ffffff; font-size: 1.05rem; max-width: 1200px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cyber-problem-warning strong { color: #1A72B8; } @media (max-width: 1024px) { .hero-shell { grid-template-columns: 1fr; gap: 4rem; text-align: center; } .hero-shell .hero-content { max-width: 700px; margin: 0 auto; } .hero-proof-strip, .hero-actions, .hero-stats { justify-content: center; } } @media (max-width: 768px) { .cyber-problem-section { padding: 5rem 0 3.5rem 0; } .cyber-problem-warning { border-radius: 20px; padding: 1.2rem; flex-direction: column; } } @media (max-width: 640px) { .ai-signal-card.wide { grid-column: 1; } } .cyber-solution-copy .section-heading span { color: var(--blue); } @media (max-width: 1024px) {} /* Services Breakdown Grid */ .cyber-services-section { padding: 5rem 0; background: #fdfdfd; } .cyber-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 4rem; } .cyber-service-card { background: var(--dark); border-radius: 12px; padding: 35px 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.03); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; gap: 1.5rem; height: 75%; } .cyber-service-card:hover { transform: translateY(-12px); box-shadow: 0 22px 50px rgba(8, 68, 129, 0.10); border-color: rgba(8, 68, 129, 0.15); } @media (max-width: 1024px) { .cyber-services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cyber-services-grid { grid-template-columns: 1fr; gap: 20px; } .cyber-service-card { padding: 30px 25px; } } /* AI Advantage Section (USP) */ .cyber-ai-advantage-section { padding: 3rem 0; background: radial-gradient(circle at center, #0a0a0b 0%, #050505 100%); position: relative; overflow: hidden; color: #ffffff; } .cyber-ai-advantage-section::before { content: '\2022'; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 40px 40px; z-index: 1; } .cyber-ai-shell { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 6rem; align-items: center; position: relative; z-index: 2; } /* AI Core Visual */ .ai-core-container { position: relative; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .ai-core-glow { position: absolute; width: 140px; height: 140px; background: var(--blue); filter: blur(80px); opacity: 0.3; animation: core-pulse 4s ease-in-out infinite alternate; } @keyframes core-pulse { from { opacity: 0.2; transform: scale(1); } to { opacity: 0.4; transform: scale(1.3); } } .ai-orbit { position: absolute; border: 1px solid rgba(8, 68, 129, 0.2); border-radius: 50%; } .orbit-1 { width: 320px; height: 160px; transform: rotateX(60deg) rotateY(10deg); animation: orbit-rot 6s linear infinite; } .orbit-2 { width: 260px; height: 260px; transform: rotateX(-45deg) rotateY(20deg); animation: orbit-rot 8s linear infinite reverse; } .orbit-3 { width: 300px; height: 200px; transform: rotateX(30deg) rotateY(-30deg); animation: orbit-rot 10s linear infinite; } @keyframes orbit-rot { from { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(0deg); } to { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(360deg); } } .orbit-1 { --rx: 60deg; --ry: 10deg; } .orbit-2 { --rx: -45deg; --ry: 20deg; } .orbit-3 { --rx: 30deg; --ry: -30deg; } .ai-core-brain { position: relative; z-index: 5; animation: brain-bounce 3s ease-in-out infinite alternate; } @keyframes brain-bounce { from { transform: translateY(-5px); } to { transform: translateY(5px); } } /* Content Styling */ .section-heading.inverse { color: #ffffff; } .section-sub.inverse { color: rgba(18, 26, 42, 0.7); } .ai-usp-grid { display: flex; flex-direction: column; gap: 1.2rem; margin: 3rem 0; } .ai-usp-card { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .ai-usp-card:hover { background: rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.3); transform: translateX(10px); } .usp-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: dot-pulse 2s infinite; } @keyframes dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } .usp-text h3 { font-size: 1.15rem; font-weight: 700; color: #ffffff; margin-bottom: 0.4rem; } .usp-text p { font-size: 0.95rem; color: rgba(18, 26, 42, 0.55); line-height: 1.5; } @media (max-width: 1024px) { .cyber-ai-shell { grid-template-columns: 1fr; gap: 4rem; text-align: center; } .ai-usp-card { text-align: left; } .ai-core-container { width: 260px; height: 260px; } .orbit-1 { width: 260px; height: 130px; } .orbit-2 { width: 210px; height: 210px; } .orbit-3 { width: 240px; height: 160px; } } /* Trust & Authority Section */ .cyber-trust-authority-section { padding: 5rem 0; position: relative; background-size: cover; background-position: center; background-attachment: fixed; } .cyber-trust-authority-section::before { content: '\2022'; position: absolute; inset: 0; background: rgba(18, 26, 42, 0.94); z-index: 1; } .cyber-trust-authority-section .container { position: relative; z-index: 2; } .cyber-authority-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 4rem 0; } .authority-card { display: flex; align-items: center; gap: 1.2rem; padding: 2rem; background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.02); transition: transform 0.3s ease, box-shadow 0.3s ease; } .authority-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(8, 68, 129, 0.1); } .authority-icon { width: 54px; height: 54px; background: rgba(8, 68, 129, 0.08); color: var(--blue); border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; } .authority-body strong { display: block; font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 800; color: #1a202c; line-height: 1; margin-bottom: 0.2rem; } .authority-body span { font-size: 0.85rem; font-weight: 600; color: #718096; text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 1024px) { .cyber-authority-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cyber-authority-grid { grid-template-columns: 1fr; } } /* Methodology Process Section */ .cyber-process-section { padding: 5rem 0; background: #fdfdfd; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .cyber-process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; margin-top: 4rem; position: relative; } .process-step-item { position: relative; text-align: center; } .step-num-circle { width: 50px; height: 50px; background: white; border: 2px solid var(--blue); color: var(--blue); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; margin: 0 auto 1.5rem; position: relative; z-index: 2; box-shadow: 0 5px 15px rgba(8, 68, 129, 0.1); } .process-step-item:not(:last-child)::after { content: '\2022'; position: absolute; top: 25px; left: calc(50% + 25px); width: calc(100% - 50px); height: 2px; background: repeating-linear-gradient(to right, var(--blue) 0, var(--blue) 5px, transparent 5px, transparent 10px); opacity: 0.2; } .step-content h3 { font-size: 1rem; font-weight: 700; color: #1a202c; margin-bottom: 0.8rem; } .step-content p { font-size: 0.95rem; color: #718096; line-height: 1.6; } /* CTA Conversion Block Enhancements */ .cta-section { padding: 5rem 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white; text-align: center; } .cta-content { max-width: 800px; margin: 0 auto; } .cta-urgency-badge { display: inline-block; padding: 0.5rem 1.2rem; background: rgba(8, 68, 129, 0.15); color: var(--blue); border: 1px solid rgba(8, 68, 129, 0.3); border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2rem; } .cta-content h2 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; } .cta-content p { font-size: 1.2rem; color: rgba(18, 26, 42, 0.7); margin-bottom: 3rem; } @media (max-width: 1024px) { .cyber-process-steps { grid-template-columns: repeat(2, 1fr); gap: 4rem 2rem; } .process-step-item:not(:last-child)::after { display: none; } } @media (max-width: 640px) { .cyber-process-steps { grid-template-columns: 1fr; } .cta-content h2 { font-size: 2rem; } } /* Cybersecurity landing page refinements */ .cybersecurity-page { background: var(--dark); } .cybersecurity-page .cyber-solution-section, .cybersecurity-page .cyber-services-section, .cybersecurity-page .cyber-scope-section, .cybersecurity-page .cyber-ai-section, .cybersecurity-page .cyber-tools-section, .cybersecurity-page .cyber-why-section, .cybersecurity-page .cyber-industries-section, .home-page .cyber-industries-section, .sw-page .cyber-industries-section, .cybersecurity-page .cyber-faq-section { position: relative; overflow: hidden; } .cybersecurity-page .cyber-solution-section::before, .cybersecurity-page .cyber-services-section::before, .cybersecurity-page .cyber-scope-section::before, .cybersecurity-page .cyber-ai-section::before, .cybersecurity-page .cyber-tools-section::before, .cybersecurity-page .cyber-why-section::before, .cybersecurity-page .cyber-industries-section::before, .home-page .cyber-industries-section::before, .sw-page .cyber-industries-section::before, .cybersecurity-page .cyber-faq-section::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(18, 26, 42, 0.55), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0)); pointer-events: none; } .cybersecurity-page .cyber-solution-section, .cybersecurity-page .cyber-services-section, .cybersecurity-page .cyber-ai-section, .cybersecurity-page .cyber-why-section, .cybersecurity-page .cyber-faq-section { background: var(--dark) !important; } .cybersecurity-page .cyber-scope-section, .cybersecurity-page .cyber-tools-section, .cybersecurity-page .cyber-industries-section, .home-page .cyber-industries-section, .sw-page .cyber-industries-section { background: var(--black) !important; padding: 6rem 0 !important; margin-top: 3rem !important; position: relative; z-index: 10; clear: both; } .cybersecurity-page .cyber-problem-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.35rem; } .cybersecurity-page .cyber-problem-card { position: relative; overflow: hidden; min-height: 100%; padding: 2rem 1.4rem; border-radius: 26px; background: linear-gradient(180deg, rgba(22, 22, 26, 0.85), rgba(10, 10, 12, 0.92)), linear-gradient(135deg, rgba(8, 68, 129, 0.08), transparent 55%); border: 1px solid rgba(8, 68, 129, 0.15); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease; z-index: 1; } .cybersecurity-page .cyber-problem-card .svc-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; } .cybersecurity-page .cyber-problem-card .svc-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px) brightness(0.35); transform: scale(1.15); transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .cybersecurity-page .cyber-problem-card .cyber-problem-icon, .cybersecurity-page .cyber-problem-card .cyber-problem-body { position: relative; z-index: 2; } .cybersecurity-page .cyber-problem-card:hover { transform: translateY(-8px); border-color: rgba(0, 163, 217, 0.45); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 163, 217, 0.12); } .cybersecurity-page .cyber-problem-card:hover .svc-bg img { filter: blur(0px) brightness(0.45); transform: scale(1); } .cybersecurity-page .cyber-problem-card .svc-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 17, 31, 0.45) 0%, rgba(7, 17, 31, 0.9) 100%); z-index: 1; pointer-events: none; } .cybersecurity-page .cyber-problem-card h3 { font-size: 1.08rem; white-space: nowrap; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); } .cybersecurity-page .cyber-problem-card p { font-size: 0.9rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); } .cybersecurity-page .cyber-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.35rem; } .cybersecurity-page .cyber-service-card { border-radius: 24px; padding: 1.7rem; background: linear-gradient(180deg, rgba(18, 26, 42, 0.92), rgba(255, 246, 236, 0.8)); border: 1px solid rgba(8, 68, 129, 0.09); box-shadow: 0 18px 40px rgba(99, 66, 36, 0.12); } .cybersecurity-page .cyber-scope-shell, .cybersecurity-page .cyber-ai-section { padding: 6rem 0; overflow: visible; } .cybersecurity-page .cyber-ai-stack { /* Using the consolidated styles above */ } .cybersecurity-page .cyber-why-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; padding: 1.1rem; } .cybersecurity-page .cyber-why-item { min-height: 180px; display: flex; align-items: flex-start; justify-content: flex-start; padding: 1.4rem 1.15rem 1.2rem 3rem; border-radius: 22px; background: linear-gradient(180deg, rgba(18, 26, 42, 0.92), rgba(253, 244, 234, 0.86)); line-height: 1.65; box-shadow: inset 0 1px 0 rgba(18, 26, 42, 0.7); } .cybersecurity-page .cyber-why-item::before { top: 1.55rem; transform: none; } .cybersecurity-page .cyber-tools-tags { gap: 0.9rem; } .cybersecurity-page .cyber-tools-tags span { padding: 0.82rem 1rem; border-radius: 16px; background: #ffffff; box-shadow: 0 10px 24px rgba(130, 92, 54, 0.08); } .cybersecurity-page .cyber-industries-grid, .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .cybersecurity-page .cyber-industries-section .industry-card, .home-page .cyber-industries-section .industry-card, .sw-page .cyber-industries-section .industry-card { min-height: 100%; border-radius: 24px; padding: 2.2rem 1.8rem; background: linear-gradient(180deg, rgba(18, 26, 42, 0.92), rgba(252, 244, 234, 0.84)); border: 1px solid rgba(8, 68, 129, 0.1); box-shadow: 0 16px 36px rgba(130, 92, 54, 0.12); display: flex; flex-direction: column; align-items: flex-start; } .cybersecurity-page .cyber-faq-section .faq-list { max-width: 860px; margin: 0 auto; } .cybersecurity-page .cyber-faq-section .faq-item { border-radius: 22px; overflow: hidden; box-shadow: 0 14px 34px rgba(130, 92, 54, 0.08); } @media (max-width: 1280px) { .cybersecurity-page .cyber-problem-grid, .cybersecurity-page .cyber-why-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1100px) { .cybersecurity-page .cyber-services-grid, .cybersecurity-page .cyber-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cybersecurity-page .cyber-industries-section .section-heading, .home-page .cyber-industries-section .section-heading, .cybersecurity-page .cyber-faq-section .section-heading, .cybersecurity-page .cyber-contact-section .section-heading, .cybersecurity-page .cyber-service-card h3, .cybersecurity-page .industry-card h3, .cybersecurity-page .faq-question, .cybersecurity-page .step-content h3 { color: var(--white) !important; } } @media (max-width: 900px) { .cybersecurity-page .cyber-problem-grid, .cybersecurity-page .cyber-why-list, .cybersecurity-page .cyber-ai-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cybersecurity-page .cyber-problem-grid, .cybersecurity-page .cyber-services-grid, .cybersecurity-page .cyber-why-list, .cybersecurity-page .cyber-industries-grid, .cybersecurity-page .cyber-ai-stack { grid-template-columns: 1fr; } .cybersecurity-page .cyber-why-item { min-height: auto; } } /* Cybersecurity premium dark-theme override */ .cybersecurity-page { --cyber-bg: #07111f; --cyber-bg-soft: #0d1b31; --cyber-panel: rgba(10, 24, 44, 0.78); --cyber-panel-strong: rgba(8, 18, 34, 0.9); --cyber-border: rgba(8, 68, 129, 0.12); --cyber-text: #111114; --cyber-muted: #444450; --cyber-accent: #084481; --cyber-accent-2: #1A72B8; --cyber-accent-soft: rgba(8, 68, 129, 0.16); background: var(--dark); color: var(--white); } .cybersecurity-page .section-heading span, .cybersecurity-page .cta-content h2 span, .cybersecurity-page .cta-urgency-badge, .cybersecurity-page .authority-body strong, .cybersecurity-page .cyber-card-top, .cybersecurity-page .cyber-problem-stat, .cybersecurity-page .hero-badge { color: var(--cyber-accent); } .cybersecurity-page .section-sub, .cybersecurity-page .cyber-service-card p, .cybersecurity-page .cyber-why-item, .cybersecurity-page .industry-card p, .cybersecurity-page .faq-answer-inner, .cybersecurity-page .step-content p, .cybersecurity-page .cyber-contact-point, .cybersecurity-page .cyber-contact-form label { color: var(--cyber-muted); } .cybersecurity-page .cyber-industries-section .section-sub, .home-page .cyber-industries-section .section-sub, .cybersecurity-page .cyber-faq-section .section-sub, .cybersecurity-page .cyber-contact-section .section-sub, .cybersecurity-page .cyber-service-card p, .cybersecurity-page .faq-answer-inner, .cybersecurity-page .step-content p, .cybersecurity-page .cyber-contact-point, .cybersecurity-page .cyber-contact-form label { color: var(--off) !important; } .cybersecurity-page .hero { min-height: 100vh; background: radial-gradient(circle at 76% 24%, rgba(8, 68, 129, 0.24), transparent 20%), linear-gradient(135deg, rgba(3, 8, 18, 0.94) 0%, rgba(9, 18, 36, 0.84) 52%, rgba(22, 18, 58, 0.78) 100%); } .cybersecurity-page .hero-media { background: linear-gradient(90deg, rgba(4, 10, 20, 0.18) 0%, rgba(4, 10, 20, 0.08) 100%), url('services_images/service_cyber_security_1774586735180.png') center/cover no-repeat; } .cybersecurity-page .hero-video { opacity: 0.44; filter: saturate(0.9) brightness(0.82) contrast(1.04); } .cybersecurity-page .hero-bg { background: radial-gradient(circle at 18% 28%, rgba(8, 68, 129, 0.16), transparent 28%), linear-gradient(90deg, rgba(2, 7, 16, 0.82) 0%, rgba(5, 12, 24, 0.68) 42%, rgba(12, 18, 34, 0.42) 72%, rgba(20, 18, 46, 0.48) 100%) !important; } .cybersecurity-page .hero-grid { background-image: linear-gradient(rgba(8, 68, 129, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 68, 129, 0.08) 1px, transparent 1px); } .cybersecurity-page .hero-glow { background: radial-gradient(circle, rgba(8, 68, 129, 0.24) 0%, transparent 68%); } .cybersecurity-page .hero-copy-card { max-width: 680px; padding: 1.35rem 1.45rem; border-radius: 28px; background: linear-gradient(180deg, rgba(8, 18, 34, 0.82), rgba(8, 16, 32, 0.58)); border: 1px solid rgba(8, 68, 129, 0.14); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cybersecurity-page .hero-badge { margin-bottom: 0.6rem; padding: 0.34rem 0.9rem; } .cybersecurity-page .hero-title { font-size: clamp(2.5rem, 5.6vw, 2.4rem); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 0.75rem; } .cybersecurity-page .hero-sub { max-width: 560px; font-size: 0.98rem; color: rgba(255, 244, 232, 0.96) !important; margin-bottom: 1rem; } .cybersecurity-page .hero-proof-item, .cybersecurity-page .hstat { background: rgba(8, 18, 34, 0.7); border: 1px solid rgba(8, 68, 129, 0.12); } .cybersecurity-page .hero-proof-strip { gap: 0.55rem; margin-bottom: 1rem !important; } .cybersecurity-page .hero-proof-item { padding: 0.45rem 0.7rem; font-size: 0.74rem; } .cybersecurity-page .hero-actions { gap: 0.7rem; } .cybersecurity-page .hero-actions .btn { padding: 0.78rem 1.1rem; } .cybersecurity-page .hero-stats { gap: 0.85rem; margin-top: 0.9rem; } .cybersecurity-page .hstat { padding: 0.7rem 0.85rem; } .cybersecurity-page .hstat-num { font-size: 1.55rem; } .cybersecurity-page .hstat-label { font-size: 0.72rem; } .cybersecurity-page .btn-primary { background: linear-gradient(135deg, #1A72B8, #ffb347); box-shadow: 0 0 0 1px rgba(8, 68, 129, 0.24), 0 18px 34px rgba(8, 68, 129, 0.26); } .cybersecurity-page .btn-primary:hover { box-shadow: 0 0 24px rgba(8, 68, 129, 0.34), 0 20px 40px rgba(8, 68, 129, 0.32); transform: translateY(-3px) scale(1.02); } .cybersecurity-page .industry-card::before, .home-page .industry-card::before, .sw-page .industry-card::before, .ot-page .industry-card::before, .devops-page .industry-card::before, .networksecurity-page .industry-card::before, .cloud-page .industry-card::before, .it-page .industry-card::before { content: '\2022'; position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; opacity: 0.15; z-index: 0; } .ot-page .industry-card::before, .devops-page .industry-card::before, .networksecurity-page .industry-card::before, .cloud-page .industry-card::before, .it-page .industry-card::before { opacity: 0.25; filter: saturate(0.8) brightness(0.8); } .ot-page .industry-card:hover::before, .devops-page .industry-card:hover::before, .networksecurity-page .industry-card:hover::before, .cloud-page .industry-card:hover::before, .it-page .industry-card:hover::before { opacity: 0.45; transform: scale(1.1); } .industry-card { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease; } .industry-card:hover { transform: translateY(-10px); border-color: rgba(26, 114, 184, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(26, 114, 184, 0.1); } .ot-page .industry-card h3, .ot-page .industry-card p, .ot-page .industry-card .industry-icon, .devops-page .industry-card h3, .devops-page .industry-card p, .devops-page .industry-card .industry-icon, .networksecurity-page .industry-card h3, .networksecurity-page .industry-card p, .networksecurity-page .industry-card .industry-icon, .cloud-page .industry-card h3, .cloud-page .industry-card p, .cloud-page .industry-card .industry-icon, .it-page .industry-card h3, .it-page .industry-card p, .it-page .industry-card .industry-icon { position: relative; z-index: 1; } .cybersecurity-page .btn-outline { background: rgba(255, 255, 255, 0.05); color: var(--cyber-text); border: 1px solid rgba(8, 68, 129, 0.26); } .cybersecurity-page .btn-outline:hover { box-shadow: 0 0 22px rgba(8, 68, 129, 0.2); transform: translateY(-3px) scale(1.02); } .cybersecurity-page .ai-hero-panel { background: linear-gradient(180deg, rgba(10, 22, 42, 0.92), rgba(6, 14, 28, 0.88)); border: 1px solid rgba(8, 68, 129, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); } .cybersecurity-page .ai-hero-top { background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(8, 68, 129, 0.10); } .cybersecurity-page .ai-hero-body { background: radial-gradient(circle at top left, rgba(8, 68, 129, 0.14), transparent 26%), radial-gradient(circle at top right, rgba(8, 68, 129, 0.1), transparent 22%), linear-gradient(180deg, rgba(8, 18, 34, 0.98) 0%, rgba(10, 21, 39, 0.96) 52%, rgba(8, 16, 30, 0.98) 100%); color: #fff3e6; } .cybersecurity-page .ai-score-card, .cybersecurity-page .ai-signal-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(8, 68, 129, 0.10); } .cybersecurity-page .ai-signal-card:hover { background: rgba(8, 68, 129, 0.1); border-color: rgba(8, 68, 129, 0.24); } .cybersecurity-page .ai-score-copy small, .cybersecurity-page .ai-signal-card small { color: rgba(255, 243, 230, 0.78) !important; } .cybersecurity-page .ai-score-ring svg circle.active { stroke: var(--cyber-accent); filter: drop-shadow(0 0 10px rgba(8, 68, 129, 0.65)); } .cybersecurity-page .signal-bars i { background: linear-gradient(to top, #1A72B8, #ffcf7d); } .cybersecurity-page .cyber-problem-section { background: var(--dark); } .cybersecurity-page .cyber-problem-heading, .cybersecurity-page .cyber-problem-card h3, .cybersecurity-page .cyber-solution-section .section-heading, .cybersecurity-page .cyber-services-section .section-heading, .cybersecurity-page .cyber-why-section .section-heading, .cybersecurity-page .cyber-industries-section .section-heading, .cybersecurity-page .cyber-faq-section .section-heading, .cybersecurity-page .cyber-contact-section .section-heading, .cybersecurity-page .cyber-service-card h3, .cybersecurity-page .industry-card h3, .cybersecurity-page .faq-question, .cybersecurity-page .step-content h3 { color: var(--white) !important; } .cybersecurity-page .cyber-problem-sub { color: #52657d; max-width: 760px; margin: 0 auto; } .cybersecurity-page .cyber-problem-bullets { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.35rem; } .cybersecurity-page .cyber-problem-bullet { padding: 0.8rem 1rem 0.8rem 2.5rem; border-radius: 999px; background: var(--dark); color: #32465d; position: relative; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } .cybersecurity-page .cyber-problem-bullet::before { content: '\2022'; position: absolute; top: 50%; left: 1rem; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #ff6b3d, #ff9f43); box-shadow: 0 0 0 6px rgba(8, 68, 129, 0.15); } .cybersecurity-page .cyber-problem-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cybersecurity-page .cyber-industries-section, .home-page .cyber-industries-section, .cybersecurity-page .cyber-contact-section, .cybersecurity-page .cyber-faq-section { background: var(--dark); } .cybersecurity-page .cyber-tools-section { background: var(--dark); } .cybersecurity-page .cyber-solution-shell { grid-template-columns: 1fr; gap: 2rem; max-width: 920px; margin: 0 auto; text-align: center; } .cybersecurity-page .cyber-solution-copy .section-sub { max-width: 760px; margin: 1rem auto 0; color: #6a5242; } .cybersecurity-page .cyber-solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .cybersecurity-page .cyber-sol-pillar { flex-direction: column; align-items: flex-start; text-align: left; min-height: 100%; background: var(--dark); border: 1px solid rgba(8, 68, 129, 0.16); box-shadow: 0 18px 42px rgba(22, 42, 66, 0.08); } .cybersecurity-page .sol-pillar-icon { background: rgba(8, 68, 129, 0.10); color: var(--cyber-accent-2); } .cybersecurity-page .cyber-service-card { background: var(--dark); border-color: rgba(8, 68, 129, 0.16); box-shadow: 0 16px 36px rgba(22, 42, 66, 0.08); } .cybersecurity-page .cyber-service-card:hover, .cybersecurity-page .industry-card:hover, .cybersecurity-page .authority-card:hover { transform: translateY(-10px); } .cybersecurity-page .cyber-service-icon { background: linear-gradient(135deg, #1a1108, #1A72B8); color: #fff4e8; } .cybersecurity-page .cyber-ai-advantage-section { background: radial-gradient(circle at 50% 20%, rgba(8, 68, 129, 0.18), transparent 18%), linear-gradient(180deg, #020814 0%, #07111f 100%); } .cybersecurity-page .ai-usp-card, .cybersecurity-page .ai-usp-footer { border-color: rgba(8, 68, 129, 0.18); } .cybersecurity-page .usp-dot { background: var(--cyber-accent); box-shadow: 0 0 16px rgba(8, 68, 129, 0.7); } .cybersecurity-page .cyber-trust-authority-section::before { background: linear-gradient(180deg, rgba(4, 10, 22, 0.9), rgba(5, 12, 24, 0.88)); } .cybersecurity-page .cyber-trust-authority-section .section-heading, .cybersecurity-page .cyber-trust-authority-section .section-sub, .cybersecurity-page .authority-body span, .cybersecurity-page .authority-card { color: #ffe9d0; } .cybersecurity-page .authority-card { background: rgba(8, 18, 34, 0.72); border: 1px solid rgba(8, 68, 129, 0.14); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); } .cybersecurity-page .authority-icon { background: rgba(8, 68, 129, 0.14); color: var(--cyber-accent); } .cybersecurity-page .cyber-process-section { background: var(--dark); } .cybersecurity-page .step-num-circle { border-color: var(--cyber-accent-2); color: var(--cyber-accent-2); box-shadow: 0 10px 22px rgba(8, 68, 129, 0.16); } .cybersecurity-page .process-step-item:not(:last-child)::after { background: linear-gradient(90deg, rgba(8, 68, 129, 0.38), rgba(8, 68, 129, 0.1)); height: 1px; } .cybersecurity-page .cyber-tools-tags span { background: var(--dark); color: #ffffff; border-color: rgba(8, 68, 129, 0.2); } .cybersecurity-page .cyber-why-list { background: transparent; border: 0; box-shadow: none; padding: 0; } .cybersecurity-page .cyber-why-item { background: var(--dark); color: #ffffff; border: 1px solid rgba(8, 68, 129, 0.18); box-shadow: 0 16px 36px rgba(22, 42, 66, 0.08); } .cybersecurity-page .cyber-why-item::before { background: linear-gradient(135deg, #1A72B8, #ffcf7d); box-shadow: 0 0 0 6px rgba(8, 68, 129, 0.14); } .cybersecurity-page .industry-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; overflow: hidden; color: #fff; border: 0; } .cybersecurity-page .industry-card::before { content: '\2022'; position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); transition: transform 0.6s ease; } .cybersecurity-page .industry-card::after { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 9, 18, 0.2) 0%, rgba(3, 10, 20, 0.9) 100%); } .cybersecurity-page .cyber-industries-section .section-heading, .home-page .cyber-industries-section .section-heading, .cybersecurity-page .cyber-faq-section .section-heading { color: var(--white) !important; } .cybersecurity-page .industry-card:hover::before, .home-page .industry-card:hover::before { transform: scale(1.08); } .cybersecurity-page .industry-card>* { position: relative; z-index: 1; } .cybersecurity-page .industry-card h3, .cybersecurity-page .industry-card p { color: #fff; } .cybersecurity-page .industry-icon, .home-page .industry-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(8, 68, 129, 0.26); border: 1px solid rgba(45, 155, 78, 0.34); color: #fff; margin-bottom: 1.2rem; } .cybersecurity-page .industry-bfsi::before, .home-page .industry-bfsi::before, .sw-page .industry-bfsi::before { background-image: url('industry_images/industry_bfsi_bg.png'); } .cybersecurity-page .industry-healthcare::before, .home-page .industry-healthcare::before, .sw-page .industry-healthcare::before { background-image: url('industry_images/industry_healthcare_bg.png'); } .cybersecurity-page .industry-manufacturing::before, .home-page .industry-manufacturing::before, .sw-page .industry-manufacturing::before { background-image: url('industry_images/industry_manufacturing_bg.png'); } .cybersecurity-page .industry-saas::before, .home-page .industry-saas::before, .sw-page .industry-saas::before { background-image: url('industry_images/industry_saas_bg.png'); } .cybersecurity-page .industry-education::before, .home-page .industry-education::before, .sw-page .industry-education::before { background-image: url('industry_images/industry_education_bg.png'); } .cybersecurity-page .industry-enterprise::before, .home-page .industry-enterprise::before, .sw-page .industry-enterprise::before { background-image: url('industry_images/smb_enterprise_bg.png'); } /* OT Page Industries */ .industry-ot-manufacturing::before { background-image: url('ot_manufacturing_bg.png'); } .industry-ot-energy::before { background-image: url('ot_energy_bg.png'); } .industry-ot-transportation::before { background-image: url('ot_transportation_bg.png'); } .industry-ot-oil::before { background-image: url('ot_oil_gas_bg.png'); } .industry-ot-pharma::before { background-image: url('ot_pharma_bg.png'); } .industry-ot-infrastructure::before { background-image: url('ot_infrastructure_bg.png'); } /* DevOps Page Industries */ .industry-devops-fintech::before { background-image: url('devops_fintech_bg.png'); } .industry-devops-healthcare::before { background-image: url('devops_healthcare_bg.png'); } .industry-devops-manufacturing::before { background-image: url('devops_manufacturing_bg.png'); } .industry-devops-saas::before { background-image: url('devops_saas_bg.png'); } .industry-devops-gov-edu::before { background-image: url('devops_gov_edu_bg.png'); } .industry-devops-digital-biz::before { background-image: url('devops_digital_biz_bg.png'); } /* Network Page Industries/Services */ .industry-net-firewall::before { background-image: url('net_firewall_bg.png'); } .industry-net-vpn::before { background-image: url('net_vpn_bg.png'); } .industry-net-nac::before { background-image: url('net_nac_bg.png'); } .industry-net-threat::before { background-image: url('net_threat_bg.png'); } .industry-net-zerotrust::before { background-image: url('net_zerotrust_bg.png'); } .industry-net-sdwan::before { background-image: url('industry_images/devops_gov_edu_bg.png'); } .industry-net-email::before { background-image: url('services_images/service_network_security_1774586750963.png'); } .industry-net-hardening::before { background-image: url('services_images/service_cyber_security_1774586735180.png'); } /* Cloud Page Industries */ .industry-cloud-banking::before { background-image: url('industry_images/industry_bfsi_bg.png'); } .industry-cloud-healthcare::before { background-image: url('industry_images/industry_healthcare_bg.png'); } .industry-cloud-manufacturing::before { background-image: url('industry_images/industry_manufacturing_bg.png'); } .industry-cloud-saas::before { background-image: url('industry_images/industry_saas_bg.png'); } .industry-cloud-gov::before { background-image: url('industry_images/devops_gov_edu_bg.png'); } .industry-cloud-retail::before { background-image: url('industry_images/industry_saas_bg.png'); } /* IT Page Industries */ .industry-it-finance::before { background-image: url('industry_images/devops_fintech_bg.png'); } .industry-it-healthcare::before { background-image: url('industry_images/industry_healthcare_bg.png'); } .industry-it-manufacturing::before { background-image: url('industry_images/industry_manufacturing_bg.png'); } .industry-it-legal::before { background-image: url('industry_images/industry_bfsi_bg.png'); } .industry-it-edu::before { background-image: url('industry_images/devops_gov_edu_bg.png'); } .industry-it-smb::before { background-image: url('industry_images/smb_enterprise_bg.png'); } .cybersecurity-page .cyber-contact-section { padding: 3.5rem 0; } .cybersecurity-page .cyber-contact-shell { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 1.5rem; align-items: start; } .cybersecurity-page .cyber-contact-copy, .cybersecurity-page .cyber-contact-form { padding: 2rem; border-radius: 28px; background: linear-gradient(180deg, #ffffff, #fff4e9); border: 1px solid rgba(8, 68, 129, 0.18); box-shadow: 0 20px 44px rgba(22, 42, 66, 0.08); } .cybersecurity-page .cyber-contact-points { display: grid; gap: 0.9rem; margin-top: 1.4rem; } .cybersecurity-page .cyber-contact-point { padding: 0.95rem 1rem 0.95rem 2.8rem; background: rgba(8, 68, 129, 0.08); border-radius: 18px; position: relative; } .cybersecurity-page .cyber-contact-point::before { content: '\2022'; position: absolute; top: 50%; left: 1rem; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #1A72B8, #ffcf7d); } .cybersecurity-page .cyber-contact-form { display: grid; gap: 1rem; } .cybersecurity-page .cyber-contact-form label { display: grid; gap: 0.55rem; font-size: 0.92rem; font-weight: 700; } .cybersecurity-page .cyber-contact-form input, .cybersecurity-page .cyber-contact-form textarea { width: 100%; border: 1px solid rgba(8, 68, 129, 0.2); border-radius: 18px; padding: 0.95rem 1rem; background: var(--dark); color: var(--white); font: inherit; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .cybersecurity-page .cyber-contact-form input:focus, .cybersecurity-page .cyber-contact-form textarea:focus { border-color: rgba(8, 68, 129, 0.5); box-shadow: 0 0 0 4px rgba(8, 68, 129, 0.16), 0 10px 24px rgba(8, 68, 129, 0.10); transform: translateY(-1px); } .cybersecurity-page .cyber-contact-copy .section-sub, .cybersecurity-page .cyber-contact-form label { color: #5b4332; } .cybersecurity-page .cyber-faq-section .faq-item { background: var(--dark); } .cybersecurity-page .cta-section { background: radial-gradient(circle at 20% 20%, rgba(8, 68, 129, 0.2), transparent 24%), linear-gradient(135deg, #1a0f08 0%, #2a160c 55%, #3a1e11 100%); } .cybersecurity-page .cta-content p { color: rgba(255, 236, 214, 0.82); } .cybersecurity-page .cyber-problem-card p, .cybersecurity-page .cyber-service-card p, .cybersecurity-page .faq-answer-inner, .cybersecurity-page .step-content p { color: #5f4a3b; } .cybersecurity-page .cyber-problem-warning { background: rgba(26, 114, 184, 0.08); border-color: rgba(8, 68, 129, 0.22); color: #ffffff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); max-width: 1200px; } .cybersecurity-page .cyber-problem-warning svg { color: #1A72B8; flex-shrink: 0; } .cybersecurity-page .cyber-problem-warning strong { color: #1A72B8; text-shadow: 0 0 15px rgba(26, 114, 184, 0.3); } .cybersecurity-page .cyber-problem-card h3, .cybersecurity-page .cyber-service-card h3, .cybersecurity-page .faq-question, .cybersecurity-page .step-content h3, .cybersecurity-page .cyber-contact-form label { color: var(--white); } /* Cybersecurity text visibility fixes */ .cybersecurity-page .hero-badge, .cybersecurity-page .hero-title, .cybersecurity-page .hero-sub, .cybersecurity-page .hero-proof-item, .cybersecurity-page .hstat-num, .cybersecurity-page .hstat-label, .cybersecurity-page .ai-hero-label, .cybersecurity-page .ai-score-copy span, .cybersecurity-page .ai-score-copy strong, .cybersecurity-page .ai-score-copy small, .cybersecurity-page .ai-signal-card span, .cybersecurity-page .ai-signal-card strong, .cybersecurity-page .ai-signal-card small { color: #fff3e6 !important; } .cybersecurity-page .cyber-problem-card h3 { color: var(--white) !important; } .cybersecurity-page .cyber-problem-card p { color: #ffffff !important; opacity: 0.92; line-height: 1.6; } .cybersecurity-page .cyber-problem-stat { color: var(--cyan) !important; background: rgba(0, 163, 217, 0.12) !important; border: 1px solid rgba(0, 163, 217, 0.28); box-shadow: 0 0 12px rgba(0, 163, 217, 0.15); } .cybersecurity-page .cyber-solution-section .section-sub, .cybersecurity-page .cyber-services-section .section-sub, .cybersecurity-page .cyber-tools-section .section-sub, .cybersecurity-page .cyber-process-section .section-sub, .cybersecurity-page .cyber-why-section .section-sub, .cybersecurity-page .cyber-industries-section .section-sub, .cybersecurity-page .cyber-faq-section .section-sub, .cybersecurity-page .cyber-contact-section .section-sub, .cybersecurity-page .cyber-service-card p, .cybersecurity-page .faq-answer-inner, .cybersecurity-page .step-content p, .cybersecurity-page .cyber-contact-point, .cybersecurity-page .cyber-contact-form label { color: var(--off) !important; } .cybersecurity-page .cyber-service-card h3, .cybersecurity-page .cyber-sol-pillar h3, .cybersecurity-page .faq-question, .cybersecurity-page .step-content h3, .cybersecurity-page .cyber-contact-section .section-heading, .cybersecurity-page .cyber-services-section .section-heading, .cybersecurity-page .cyber-tools-section .section-heading, .cybersecurity-page .cyber-process-section .section-heading, .cybersecurity-page .cyber-why-section .section-heading, .cybersecurity-page .cyber-industries-section .section-heading, .cybersecurity-page .cyber-faq-section .section-heading { color: var(--white) !important; } .cybersecurity-page .cyber-ai-advantage-section .section-heading.inverse, .cybersecurity-page .cyber-ai-advantage-section .section-sub.inverse, .cybersecurity-page .cyber-ai-advantage-section .usp-text h3, .cybersecurity-page .cyber-ai-advantage-section .usp-text p, .cybersecurity-page .cyber-ai-advantage-section .ai-usp-footer p { color: var(--white) !important; } .cybersecurity-page .cyber-trust-authority-section .section-heading, .cybersecurity-page .cyber-trust-authority-section .section-sub, .cybersecurity-page .cyber-trust-authority-section .authority-body strong, .cybersecurity-page .cyber-trust-authority-section .authority-body span { color: var(--white) !important; } @media (max-width: 1100px) { .cybersecurity-page .cyber-solution-grid, .cybersecurity-page .cyber-contact-shell { grid-template-columns: 1fr; } } @media (max-width: 900px) { .cybersecurity-page .cyber-problem-grid, .cybersecurity-page .cyber-why-list, .cybersecurity-page .cyber-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cybersecurity-page .hero-copy-card { padding: 1.35rem; } .cybersecurity-page .cyber-problem-bullets, .cybersecurity-page .cyber-problem-grid, .cybersecurity-page .cyber-why-list, .cybersecurity-page .cyber-industries-grid { grid-template-columns: 1fr; } .cybersecurity-page .cyber-contact-copy, .cybersecurity-page .cyber-contact-form { padding: 1.35rem; } } /* Final home-page dark theme overrides */ /* Global dark theme */ /* Final responsive pass */ @media (max-width: 1024px) { .container, .home-page .hero .container { width: min(94%, 1200px); } .nav-links, .nav-cta .btn-primary { display: none; } .nav-hamburger { display: inline-flex; } .nav-inner { height: 88px; } .nav-logo img { height: 90px; } .home-page .hero { min-height: auto; padding-top: 108px; padding-bottom: 3rem; } .hero-shell, .home-page .contact-premium-grid, .contact-premium-grid, .footer-top, .mega-inner, .roadmap-steps, .process-grid, .about-grid, .about-stats, .values-grid, .services-grid, .industries-grid, .faq-grid { grid-template-columns: 1fr !important; } .hero-content, .hero-visual, .contact-premium-info, .contact-glass-card { max-width: 100%; min-width: 0; } .hero-visual { margin-top: 1rem; max-height: none; } .hero-panel, .ai-hero-panel { max-width: 100%; min-width: 0; } .home-page .services-grid, .industries-premium-grid, .consulting-grid, .why-grid, .approach-grid, .values-grid, .testimonials-grid, .contact-methods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .footer-top { gap: 2rem; } .footer-brand p { max-width: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .hero-content { text-align: center; margin-inline: auto; } .hero-badge, .hero-sub { margin-inline: auto; } .hero-title { max-width: 30ch; margin-inline: auto; } .hero-proof-strip, .hero-actions { justify-content: center; } .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.75rem; align-items: stretch; } .home-page .hstat { min-width: 0; padding: 0.85rem 0.65rem; } .home-page .hstat-num, .home-page .hstat-label { text-align: center; } } .scroll-top:hover svg { transform: translateY(-2px); } @media (max-width: 767px) { .container, .hero .container { width: 92%; } .navbar, .navbar.scrolled { padding-inline: 0; } .nav-inner { height: 78px; } .nav-logo img { height: 72px; } .mobile-nav { top: 68px; padding: 1.25rem 6%; } .hero { padding-top: 96px; padding-bottom: 2.5rem; } .hero-title, .section-heading { max-width: 100%; line-height: 1.08; } .hero-sub, .section-sub, .cta-section p, .cta-content p { max-width: 100%; } .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn, .cta-actions .btn, .btn-contact-submit { width: 100%; justify-content: center; } .hero-stats, .home-page .hero-panel-grid, .home-page .services-grid, .consulting-grid, .industries-premium-grid, .industries-grid, .roadmap-steps, .process-grid, .values-grid, .why-grid, .approach-grid, .contact-methods, .footer-top { grid-template-columns: 1fr !important; } .hero-stats { display: grid; gap: 0.85rem; } .hstat, .consulting-card, .service-card, .ind-card, .why-card, .faq-item, .contact-premium-info, .contact-glass-card { border-radius: 18px; } .footer { padding: 3.5rem 0 1.5rem; } .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-links { flex-wrap: wrap; gap: 0.85rem 1rem; } } @media (max-width: 480px) { .nav-logo img { height: 58px; } .hero { padding-top: 90px; } .hero-title { font-size: clamp(1.9rem, 9vw, 2.45rem); } .hero-sub, .section-sub { font-size: 0.95rem; line-height: 1.65; } .hero-proof-strip { gap: 0.45rem; } .hero-proof-item, .hero-proof-item { width: 100%; justify-content: center; text-align: center; } } .home-page .ai-score-card { grid-template-columns: minmax(0, 1fr); gap: 0.65rem; } .home-page .ai-score-copy { display: flex; flex-direction: column; align-items: flex-start; } .home-page .ai-score-copy span, .home-page .ai-score-copy strong, .home-page .ai-score-copy small { /* white-space: nowrap; - Removed to prevent layout fluctuations */ } .consulting-card, .service-card, .ind-card, .why-card, .faq-item, .contact-premium-info, .contact-glass-card, .home-page .ai-hero-panel { padding: 1rem; } /* Final homepage industries text override */ .home-page .industries-premium-section { background: var(--dark) !important; } .home-page .industries-premium-header .section-heading, .home-page .industries-premium-header .section-sub, .home-page .industries-premium-grid .ind-card-content h3, .home-page .industries-premium-grid .ind-card-content p, .home-page .industries-premium-grid .ind-tags span { color: var(--white) !important; text-shadow: none !important; } .home-page .industries-premium-grid .ind-card { background: var(--dark) !important; } .home-page .industries-premium-grid .ind-tags span { background: rgba(8, 68, 129, 0.14) !important; border-color: rgba(8, 68, 129, 0.28) !important; } /* Final light-theme hero visibility pass */ /* Global zoom resilience pass */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-width: 320px; overflow-x: clip; } img, video, iframe, canvas, svg, table { max-width: 100%; height: auto; } :where(.container, .hero-shell, .hero-content, .hero-visual, .hero-panel, .ai-hero-panel, .contact-premium-grid, .contact-premium-info, .contact-glass-card, .footer-top, .mega-menu .container, .services-grid, .industries-premium-grid, .consulting-grid, .why-grid, .approach-grid, .values-grid, .testimonials-grid, .process-grid, .roadmap-steps, .faq-grid, .faq-list, .about-grid, .about-stats, .mega-links-grid, .hero-stats, .hero-proof-strip, .hero-actions, .services-header, .industries-premium-header) { min-width: 0; } :where(h1, h2, h3, h4, h5, h6, p, a, span, li, button, label, strong, small) { overflow-wrap: anywhere; } @media (max-width: 1280px) { .mega-menu .container, .services-header, .contact-premium-grid, .footer-top, .about-grid, .process-grid { grid-template-columns: 1fr !important; } .services-grid, .industries-premium-grid, .consulting-grid, .why-grid, .approach-grid, .values-grid, .testimonials-grid, .contact-methods, .roadmap-steps, .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .hero-shell { gap: 4rem; } .hero-content, .hero-visual, .hero-panel, .home-page .ai-hero-panel { max-width: 100%; min-width: 0; } } /* ========================================= */ /* --- PER-PAGE INLINE CSS CONSOLIDATION --- */ /* ========================================= */ /* --- virtual-ciso-services.html --- */ .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* --- software-solutions.html --- */ /* ── Software Solutions page overrides ── */ .sw-page .hero-sub, .sw-page .section-sub { max-width: 720px; } .sw-hero .hero-bg { background: linear-gradient(120deg, rgba(22, 16, 10, .84), rgba(22, 16, 10, .52), transparent 90%), radial-gradient(circle at 78% 22%, rgba(99, 102, 241, .26), transparent 30%), radial-gradient(circle at 10% 75%, rgba(6, 182, 212, .2), transparent 26%); } .sw-page { position: relative; isolation: isolate; } .sw-page::before { content: '\2022'; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-position: center; background-size: cover; background-repeat: no-repeat; transition: opacity .35s ease, filter .35s ease, background .35s ease; } .sw-pattern-section { padding: 3.5rem 0; background: transparent; } .sw-pattern-section--bottom { background: transparent; } /* Chip row */ .sw-chip-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; } .sw-chip { padding: .5rem .95rem; border-radius: 999px; background: rgba(255, 251, 244, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff7ed; font-size: .83rem; backdrop-filter: blur(8px); } .sw-icon-label { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; min-width: 2.3rem; padding: 0; border-radius: 999px; line-height: 1; background: rgba(209, 106, 44, .12); border: 1px solid rgba(209, 106, 44, .18); color: var(--blue); } .sw-icon-label svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Services grid */ .sw-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .sw-service-card { position: relative; border-radius: 22px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-soft); transition: var(--trans); min-height: 380px; display: flex; flex-direction: column; justify-content: center; padding: 2.2rem; z-index: 1; } .sw-service-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 0 0 1px rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.28); } .sw-service-card::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(8, 68, 129, 0.18), transparent 34%), linear-gradient(135deg, rgba(8, 68, 129, 0.08), transparent 62%); opacity: 0; transition: opacity 0.35s ease; z-index: 1; pointer-events: none; } .sw-service-card:hover::before { opacity: 1; } .sw-service-curtain { position: absolute; inset: 0; z-index: 2; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s; transform-origin: top; background: #0d0f12; } .sw-service-curtain img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .sw-curtain-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem 1.8rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent); color: white; font-weight: 700; font-size: 1.15rem; z-index: 3; } .sw-service-card:hover .sw-service-curtain { transform: translateY(-101%); opacity: 0; } .sw-service-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.9rem; color: var(--cyan); position: relative; z-index: 1; } .sw-service-card p { font-size: 0.94rem; color: inherit; line-height: 1.7; position: relative; z-index: 1; } .ot-pill { background: rgba(0, 163, 217, 0.1) !important; border: 1px solid rgba(0, 163, 217, 0.25) !important; color: var(--ot-cyan) !important; padding: 5px 14px; border-radius: 100px; font-size: .78rem; font-weight: 600; } /* Services Grid */ .ot-services { padding: 3.5rem 0; position: relative; } .ot-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 3rem; } .ot-svc-card { border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--radius); padding: 2rem; transition: var(--trans); position: relative; overflow: hidden; box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.02) !important; } .ot-svc-card::before { content: '\2022'; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transform: scaleX(0); transform-origin: left; transition: var(--trans); } .ot-threat { background: rgba(10, 15, 30, 0.4) !important; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 3.5rem 0; } .ot-threat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; } .ot-threat-card { text-align: center; padding: 2rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 16px; transition: var(--trans); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.02) !important; } .ot-threat-card:hover { transform: translateY(-4px); border-color: rgba(239, 68, 68, 0.25) !important; box-shadow: 0 10px 30px rgba(239, 68, 68, 0.08); } .ot-svc-card:hover::before { transform: scaleX(1); } .ot-svc-card:hover { transform: translateY(-6px); border-color: rgba(45, 155, 78, 0.25) !important; box-shadow: 0 15px 40px rgba(45, 155, 78, 0.08); } .ot-svc-num { font-size: 2rem; font-weight: 800; color: var(--ot-cyan) !important; line-height: 1; margin-bottom: .8rem; } .ot-svc-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: .6rem; } .ot-svc-card p { color: var(--muted); font-size: .88rem; line-height: 1.6; } /* Three pillars */ .ot-pillars { padding: 3.5rem 0; background: rgba(10, 15, 30, 0.3) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; position: relative; } .ot-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .ot-pillar { border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 20px; padding: 2.5rem; transition: var(--trans); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.01) !important; } .ot-pillar:hover { transform: translateY(-5px); border-color: rgba(0, 163, 217, 0.25) !important; box-shadow: 0 15px 40px rgba(0, 163, 217, 0.08); } .ot-pillar-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(45, 155, 78, 0.08) !important; border: 1px solid rgba(45, 155, 78, 0.25) !important; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; } /* Tech section */ .sw-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .sw-tech-card { border-radius: 18px; padding: 1.5rem; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-soft); transition: var(--trans); } .sw-tech-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 0 0 1px rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.28); } .sw-tech-card::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(8, 68, 129, 0.18), transparent 34%), linear-gradient(135deg, rgba(8, 68, 129, 0.08), transparent 62%); opacity: 0; transition: opacity 0.35s ease; z-index: 1; pointer-events: none; } .sw-tech-card:hover::before { opacity: 1; } .sw-tech-card:hover .sw-tech-icon { transform: scale(1.18) rotate(-6deg); animation: icon-shake 0.4s ease 0.1s both; } .sw-tech-card h4 { font-size: .88rem; font-weight: 700; color: var(--blue); margin-bottom: .6rem; text-transform: uppercase; letter-spacing: .06em; } .sw-tech-card p { font-size: .88rem; color: inherit; line-height: 1.6; } .sw-stack-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; } .sw-stack-tag { padding: .28rem .72rem; border-radius: 99px; font-size: .76rem; font-weight: 600; background: rgba(var(--blue-rgb, 209, 106, 44), .08); border: 1px solid rgba(209, 106, 44, .2); color: var(--blue); } /* Why-choose grid */ .sw-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .sw-why-card { border-radius: 20px; padding: 1.6rem; display: flex; gap: 1rem; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-soft); transition: var(--trans); } .sw-why-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 0 0 1px rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.28); } .sw-why-card::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(8, 68, 129, 0.18), transparent 34%), linear-gradient(135deg, rgba(8, 68, 129, 0.08), transparent 62%); opacity: 0; transition: opacity 0.35s ease; z-index: 1; pointer-events: none; } .sw-why-card:hover::before { opacity: 1; } .sw-why-card:hover .sw-why-icon { transform: scale(1.18) rotate(-6deg); animation: icon-shake 0.4s ease 0.1s both; } .sw-why-icon { font-size: 1rem; flex-shrink: 0; } .sw-why-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; } .sw-why-card p { font-size: .88rem; color: inherit; line-height: 1.6; } /* Industries */ .sw-industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .sw-industry-card { border-radius: 18px; padding: 1.4rem; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-soft); transition: var(--trans); text-align: center; } .sw-industry-card:hover { transform: translateY(-10px); box-shadow: 0 34px 74px rgba(130, 92, 54, 0.18), 0 0 0 1px rgba(8, 68, 129, 0.08); border-color: rgba(8, 68, 129, 0.28); } .sw-industry-card::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(8, 68, 129, 0.18), transparent 34%), linear-gradient(135deg, rgba(8, 68, 129, 0.08), transparent 62%); opacity: 0; transition: opacity 0.35s ease; z-index: 1; pointer-events: none; } .sw-industry-card:hover::before { opacity: 1; } .sw-industry-card:hover .sw-industry-icon { transform: scale(1.18) rotate(-6deg); animation: icon-shake 0.4s ease 0.1s both; } .sw-industry-icon { font-size: .95rem; margin-bottom: .65rem; display: inline-flex; align-items: center; justify-content: center; } .sw-industry-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; } .sw-industry-card p { font-size: .84rem; color: inherit; line-height: 1.55; } /* CTA section */ .sw-cta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: center; } .sw-cta-card { border-radius: 26px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: linear-gradient(135deg, rgba(209, 106, 44, .08), rgba(6, 182, 212, .06)); padding: 2.8rem; } /* FAQ */ .sw-faq-list { display: flex; flex-direction: column; gap: 1rem; } .sw-faq-item { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12) !important; background: var(--card-bg); overflow: hidden; } .sw-faq-q { width: 100%; text-align: left; padding: 1.2rem 1.4rem; font-weight: 700; font-size: .97rem; cursor: pointer; background: none; border: none; display: flex; justify-content: space-between; align-items: center; color: var(--white); } .sw-faq-toggle { color: var(--blue); font-size: 1.4rem; font-weight: 300; transition: transform .3s; } .sw-faq-item.open .sw-faq-toggle { transform: rotate(45deg); } .sw-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .sw-faq-item.open .sw-faq-answer { max-height: 200px; } .sw-faq-answer-inner { padding: 0 1.4rem 1.2rem; color: var(--off); font-size: .92rem; line-height: 1.7; } /* Stats Section Overrides */ .sw-page .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(209, 106, 44, 0.05); /* Soft highlight */ border: 1px solid var(--border); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-soft); gap: 1.5px; /* Subtle separation */ } .sw-page .stat-card { background: var(--dark); padding: 3rem 1.6rem; text-align: center; transition: var(--trans); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .sw-page .stat-card:hover { background: rgba(255, 252, 247, 0.98); transform: translateY(-5px); z-index: 2; box-shadow: 0 15px 40px rgba(130, 92, 54, 0.08); } .sw-page .stat-num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: var(--blue); line-height: 1; margin-bottom: 0.6rem; } .sw-page .stat-title { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 0.6rem; line-height: 1.3; } .sw-page .stat-desc { font-size: 0.88rem; color: inherit; line-height: 1.55; max-width: 220px; } .sw-page .section-heading, .sw-page .sw-service-card h3, .sw-page .sw-tech-card h4, .sw-page .sw-why-card h3, .sw-page .sw-industry-card h3, .sw-page .sw-faq-q, .sw-page .stat-title, .sw-page .contact-card h3 { color: #24160f; } .sw-page .hero-sub, .sw-page .section-sub, .sw-page .sw-service-card p, .sw-page .sw-tech-card p, .sw-page .sw-why-card p, .sw-page .sw-industry-card p, .sw-page .sw-faq-answer-inner, .sw-page .stat-desc, .sw-page .sw-cta-card p, .sw-page .sw-cta-card li { color: var(--white) 000; } .sw-page .sw-service-card, .sw-page .sw-tech-card, .sw-page .sw-why-card, .sw-page .sw-industry-card, .sw-page .sw-faq-item, .sw-page .sw-cta-card, .sw-page .contact-card, .sw-page .stat-card { color: #24160f; } .sw-page .contact-card { background: linear-gradient(180deg, rgba(18, 26, 42, 0.96), rgba(255, 249, 242, 0.92)); border: 1px solid rgba(109, 78, 52, 0.12); box-shadow: var(--shadow-soft); } .sw-page .input-field, .sw-page .textarea-field { width: 100%; background: rgba(18, 26, 42, 0.92); border: 1px solid rgba(109, 78, 52, 0.16); color: #24160f; } .sw-page .input-field::placeholder, .sw-page .textarea-field::placeholder { color: #866f5f; } /* Responsive Stats */ @media(max-width:1100px) { .sw-page .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width:640px) { .sw-page .stats-grid { grid-template-columns: 1fr; } } /* Responsive Hooks */ @media(max-width:900px) { .sw-hero-layout, .sw-services-grid, .sw-tech-grid, .sw-industry-grid, .sw-cta-grid { grid-template-columns: 1fr; } .sw-why-grid { grid-template-columns: 1fr; } } @media(max-width:640px) {} /* --- qms-consulting-services.html --- */ .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* --- pci-dss-consulting-services.html --- */ .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* --- ot-security-services.html --- */ /* ── OT Security page – matches site warm-beige/glassmorphism theme ── */ /* Hero */ .ot-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 144px; /* Space for Navbar + AI Strip */ background: linear-gradient(135deg, #080c18 0%, #111827 50%, #080c18 100%) !important; } .ot-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; } .ot-hero .container { position: relative; z-index: 2; } /* Hero badge */ .ot-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(18, 26, 42, 0.58); border: 1px solid rgba(109, 78, 52, 0.12); color: var(--cyan); padding: 6px 16px; border-radius: 100px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.5rem; } .ot-badge::before { content: '\2022'; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: blink 1.5s infinite; } /* Hero title / sub */ .ot-title { font-size: clamp(2rem, 5vw, 3.2rem); /* Scaled down for viewport fit */ font-weight: 800; line-height: 1.12; color: var(--white); text-shadow: 0 0 20px rgba(0, 0, 0, 0.4), 0 4px 18px rgba(0, 0, 0, 0.6); margin-bottom: 1rem; } .ot-title span { color: var(--cyan); } .ot-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 580px; margin-bottom: 2rem; } .ot-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; } /* Buttons – reuse site palette */ .btn-ot { display: inline-flex; align-items: center; gap: .45rem; background: linear-gradient(135deg, #d97734, #e5a354); color: #fffdf8; padding: 12px 28px; border-radius: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: var(--trans); box-shadow: 0 18px 34px rgba(209, 106, 44, 0.2); } .btn-ot:hover { background: linear-gradient(135deg, #ca6725, #dd9a46); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(209, 106, 44, 0.26); } .btn-ot-outline { display: inline-flex; align-items: center; border: 1.5px solid rgba(109, 78, 52, 0.18); color: var(--white); background: rgba(18, 26, 42, 0.52); backdrop-filter: blur(8px); padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: var(--trans); } .btn-ot-outline:hover { border-color: rgba(209, 106, 44, 0.3); transform: translateY(-3px); } /* Hero stats */ .ot-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 520px; } .ot-stat { background: rgba(18, 26, 42, 0.62); border: 1px solid rgba(109, 78, 52, 0.1); border-radius: 12px; padding: 16px; text-align: center; backdrop-filter: blur(8px); box-shadow: var(--shadow-soft); } .ot-stat-num { font-size: 1.7rem; font-weight: 800; color: var(--blue); line-height: 1; } .ot-stat-num span { font-size: 1rem; color: var(--cyan); } .ot-stat-label { font-size: .72rem; color: var(--muted); margin-top: 4px; line-height: 1.4; } /* Threat Banner */ .ot-threat { background: linear-gradient(180deg, rgba(18, 26, 42, 0.44), rgba(255, 250, 243, 0.86)), radial-gradient(circle at center, rgba(209, 106, 44, 0.08), transparent 60%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3.5rem 0; } .ot-threat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; } .ot-threat-card { text-align: center; padding: 2rem 1.5rem; border: 1px solid rgba(109, 78, 52, 0.08); border-radius: 16px; transition: var(--trans); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); } .ot-threat-card:hover { transform: translateY(-4px); border-color: rgba(209, 106, 44, 0.24); box-shadow: var(--shadow); } .ot-threat-num { font-size: 2.8rem; font-weight: 800; color: var(--blue); line-height: 1; } .ot-threat-desc { color: var(--muted); font-size: .88rem; margin-top: .5rem; line-height: 1.5; } /* Overview */ .ot-overview { padding: 3.5rem 0; position: relative; } .ot-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .ot-overview-img { border-radius: 20px; overflow: hidden; position: relative; box-shadow: var(--shadow); } .ot-overview-img img { width: 100%; height: 380px; object-fit: cover; } .ot-overview-img::after { content: '\2022'; position: absolute; inset: 0; border: 2px solid rgba(209, 106, 44, 0.18); border-radius: 20px; pointer-events: none; } .ot-pill-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .ot-pill { background: rgba(209, 106, 44, 0.1); border: 1px solid rgba(209, 106, 44, 0.2); color: var(--blue); padding: 5px 14px; border-radius: 100px; font-size: .78rem; font-weight: 600; } /* Services Grid */ .ot-services { padding: 3.5rem 0; position: relative; } .ot-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 3rem; } .ot-svc-card { border: 1px solid rgba(109, 78, 52, 0.08); border-radius: var(--radius); padding: 2rem; transition: var(--trans); position: relative; overflow: hidden; box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); } .ot-svc-card::before { content: '\2022'; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: var(--trans); } .ot-svc-card:hover::before { transform: scaleX(1); } .ot-svc-card:hover { transform: translateY(-6px); border-color: rgba(209, 106, 44, 0.24); box-shadow: var(--shadow); } .ot-svc-num { font-size: 2rem; font-weight: 800; color: rgb(255 130 55); line-height: 1; margin-bottom: .8rem; } .ot-svc-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: .6rem; } .ot-svc-card p { color: var(--muted); font-size: .88rem; line-height: 1.6; } /* Three pillars */ .ot-pillars { padding: 3.5rem 0; background: rgba(255, 255, 255, 0.3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; } .ot-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .ot-pillar { border: 1px solid rgba(109, 78, 52, 0.08); border-radius: 20px; padding: 2.5rem; transition: var(--trans); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); } .ot-pillar:hover { transform: translateY(-5px); border-color: rgba(209, 106, 44, 0.22); box-shadow: var(--shadow); } .ot-pillar-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(209, 106, 44, 0.12); border: 1px solid rgba(209, 106, 44, 0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; } .ot-pillar-icon svg { width: 24px; height: 24px; stroke: var(--cyan); fill: none; stroke-width: 2; } .ot-pillar h3 { color: var(--white); font-size: 1.1rem; font-weight: 700; margin-bottom: .6rem; } .ot-pillar p { color: var(--muted); font-size: .88rem; line-height: 1.6; margin-bottom: 1rem; } .ot-pillar ul { list-style: none; padding: 0; } .ot-pillar ul li { color: var(--muted); font-size: .85rem; padding: .3rem 0 .3rem 1.2rem; position: relative; border-bottom: 1px solid var(--border); } .ot-pillar ul li:last-child { border-bottom: none; } .ot-pillar ul li::before { content: '\2192'; position: absolute; left: 0; color: var(--cyan); } /* Technologies */ .ot-tech { padding: 3.5rem 0; position: relative; } .ot-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .ot-tech-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .ot-tech-tags span { background: rgba(18, 26, 42, 0.72); border: 1px solid rgba(109, 78, 52, 0.1); color: var(--white); padding: 6px 14px; border-radius: 8px; font-size: .82rem; font-weight: 600; transition: var(--trans); box-shadow: var(--shadow-soft); } .ot-tech-tags span:hover { border-color: var(--ot-cyan) !important; color: var(--cyan); background: rgba(18, 26, 42, 0.92); } /* Process steps */ .ot-process-steps { display: flex; flex-direction: column; gap: 1rem; } .ot-process-step { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; border: 1px solid rgba(255, 255, 255, 0.06) !important; background: rgba(255, 255, 255, 0.01) !important; border-radius: 12px; transition: var(--trans); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); } .ot-process-step:hover { border-color: rgba(0, 163, 217, 0.25) !important; transform: translateX(4px); } .ot-step-num { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fffdf8; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; } .ot-step-text strong { color: var(--white); font-size: .95rem; display: block; margin-bottom: .2rem; } .ot-step-text span { color: var(--muted); font-size: .83rem; } /* Why Choose */ .ot-why { padding: 3.5rem 0; background: rgba(10, 15, 30, 0.4) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; position: relative; } .ot-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .ot-why-list { display: flex; flex-direction: column; gap: .75rem; } .ot-why-item { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.2rem; border: 1px solid rgba(255, 255, 255, 0.06) !important; background: rgba(255, 255, 255, 0.01) !important; border-radius: 12px; transition: var(--trans); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); } .ot-why-item:hover { border-color: rgba(45, 155, 78, 0.25) !important; transform: translateX(4px); } .ot-check { width: 24px; height: 24px; border-radius: 6px; background: rgba(45, 155, 78, 0.08) !important; border: 1px solid rgba(45, 155, 78, 0.25) !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .ot-check::before { content: '\2713'; color: var(--cyan); font-size: .85rem; font-weight: 700; } .ot-why-item span { color: var(--muted); font-size: .9rem; line-height: 1.5; } /* Industries */ .ot-industries { padding: 3.5rem 0; position: relative; } .ot-ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem; } @media (max-width: 991px) { .ot-ind-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ot-ind-grid { grid-template-columns: 1fr; } } /* FAQ */ .ot-faq { padding: 3.5rem 0; position: relative; } /* CTA */ .ot-cta { padding: 3.5rem 0; position: relative; background: linear-gradient(135deg, #080c18 0%, #111827 50%, #080c18 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } .ot-cta-inner { text-align: center; max-width: 640px; margin: 0 auto; } .ot-cta-inner h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--white); margin-bottom: 1rem; } .ot-cta-inner h2 span { color: var(--cyan); } .ot-cta-inner p { color: var(--muted); margin-bottom: 2rem; } .ot-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Section label variant */ .section-label-ot { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-size: 1.5rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1rem; } .section-label-ot::before { content: '\2022'; width: 24px; height: 2px; background: var(--cyan); } /* Section heading variant */ .section-heading-ot { font-family: 'Manrope', sans-serif; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 550; color: var(--white); line-height: 1.2; margin-bottom: 1rem; } .section-heading-ot span { color: var(--cyan); } .section-sub-ot { color: var(--muted); font-size: .95rem; line-height: 1.7; max-width: 580px; } /* Text center helper */ .text-center { text-align: center; } .text-center .section-sub-ot { margin: .8rem auto 0; } @media(max-width:900px) { .ot-overview-grid, .ot-tech-grid, .ot-why-grid { grid-template-columns: 1fr; } .ot-pillars-grid { grid-template-columns: 1fr 1fr; } .ot-stats { grid-template-columns: repeat(3, 1fr); } } @media(max-width:600px) { .ot-pillars-grid, .ot-stats { grid-template-columns: 1fr; } .ot-threat-grid { grid-template-columns: 1fr; } } /* --- network-security-audit-services.html --- */ .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* --- it-managed-services.html --- */ .it-page .hero-sub, .it-page .section-sub { max-width: 720px; } .it-hero .hero-bg { background: linear-gradient(120deg, rgba(8, 28, 50, 0.90), rgba(8, 28, 50, 0.55), transparent 90%), radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.24), transparent 30%), radial-gradient(circle at 10% 75%, rgba(16, 185, 129, 0.20), transparent 26%); } .it-hero-layout, .it-overview-grid, .it-tech-grid, .it-why-grid, .it-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: center; } .it-chip-row, .it-stack-tags, .it-logo-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; } .it-chip { padding: 0.58rem 0.95rem; border-radius: 999px; background: rgba(52, 211, 153, 0.14); border: 1px solid rgba(52, 211, 153, 0.28); color: #d1fae5; font-size: 0.85rem; backdrop-filter: blur(8px); } .it-hero-card, .it-overview-card, .it-tech-card, .it-why-card, .it-cta-card { position: relative; border-radius: 26px; border: 1px solid rgba(52, 130, 100, 0.15); box-shadow: var(--shadow); overflow: hidden; } .it-hero-card { background: linear-gradient(180deg, rgba(5, 30, 20, 0.88), rgba(8, 45, 30, 0.82)); padding: 1.2rem; } .it-hero-card img { width: 100%; min-height: 320px; /* Reduced to fit in viewport */ object-fit: cover; border-radius: 18px; } .it-card-overlay { position: absolute; inset: auto 1.8rem 1.8rem 1.8rem; background: rgba(5, 28, 20, 0.82); color: #d1fae5; border: 1px solid rgba(52, 211, 153, 0.22); border-radius: 18px; padding: 1rem 1.1rem; backdrop-filter: blur(8px); } .it-card-overlay strong, .it-overview-item strong, .it-service-card h3, .it-capability-card h3, .it-page .industry-card h3, .it-faq-card h3 { display: block; margin-bottom: 0.4rem; color: var(--orange); } .it-overview-section, .it-services-section, .it-capabilities-section, .it-tech-section, .it-why-section, .it-industries-section, .it-faq-section, .it-cta-section { padding: 5.5rem 0; position: relative; } .it-overview-section::before, .it-capabilities-section::before, .it-why-section::before, .it-faq-section::before { content: ""; position: absolute; inset: 0; background: var(--section-glow); pointer-events: none; } .it-overview-card, .it-tech-card, .it-why-card, .it-cta-card, .it-faq-card, .it-service-card, .it-capability-card, .it-industry-card { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .it-overview-card { padding: 2rem; } .it-overview-list { display: grid; gap: 1rem; } .it-overview-item { padding: 1rem 1.1rem; border-radius: 18px; background: rgba(18, 26, 42, 0.56); border: 1px solid rgba(52, 130, 100, 0.12); } .it-services-grid, .it-capability-grid, .it-industries-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; } .it-service-card, .it-capability-card, .it-industry-card, .it-faq-card { padding: 1.5rem; border-radius: 22px; border: 1px solid rgba(52, 130, 100, 0.14); box-shadow: var(--shadow-soft); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); } .it-service-card:hover, .it-capability-card:hover, .it-industry-card:hover, .it-faq-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(52, 211, 153, 0.32); } .it-service-num, .it-capability-num, .it-industry-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(16, 185, 129, 0.28)); color: var(--blue2); font-weight: 800; } .it-capability-num svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .it-stack-tags span, .it-tech-pill, .it-why-list li { padding: 0.72rem 0.95rem; border-radius: 14px; background: rgba(18, 26, 42, 0.58); border: 1px solid rgba(52, 130, 100, 0.14); } .it-stack-tags { margin-top: 1.6rem; } .it-tech-card { padding: 2rem; } .it-tech-group { display: grid; gap: 1rem; } .it-tech-pill { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); } .it-tech-pill strong { color: var(--white); } .it-logo-strip { margin-top: 1.6rem; } .it-logo-item { width: 108px; height: 68px; border-radius: 18px; background: rgba(18, 26, 42, 0.7); border: 1px solid rgba(52, 130, 100, 0.12); display: flex; align-items: center; justify-content: center; padding: 0.8rem; } .it-logo-item img { max-width: 100%; max-height: 42px; object-fit: contain; } .it-why-card { padding: 2rem; } .it-why-list { display: grid; gap: 0.9rem; margin-top: 1.5rem; } .it-why-list li, .it-cta-card li { list-style: none; } .it-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 2.4rem 0 2.2rem; } .it-cta-section { padding-top: 0; } .it-cta-card { padding: 2rem; } .it-cta-card ul { display: grid; gap: 0.9rem; color: var(--muted); } @media (max-width: 1100px) { .it-services-grid, .it-capability-grid, .it-industries-grid, .it-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .it-hero-layout, .it-overview-grid, .it-tech-grid, .it-why-grid, .it-cta-grid { grid-template-columns: 1fr; } .it-hero-card { order: -1; } } @media (max-width: 640px) { .it-services-grid, .it-capability-grid, .it-industries-grid, .it-faq-grid { grid-template-columns: 1fr; } .it-overview-card, .it-tech-card, .it-why-card, .it-cta-card, .it-service-card, .it-capability-card, .it-industry-card, .it-faq-card { padding: 1.3rem; } .it-hero-card img { min-height: 260px; } .it-logo-item { width: calc(50% - 0.4rem); } } /* --- iso-consulting-services.html --- */ .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* --- hipaa-consulting-services.html --- */ .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* --- Hardware.html --- */ .hw-page .hero-sub, .hw-page .section-sub { max-width: 720px; } .hw-hero .hero-bg { background: linear-gradient(120deg, rgba(28, 16, 5, 0.92), rgba(28, 16, 5, 0.58), transparent 90%), radial-gradient(circle at 80% 20%, rgba(234, 179, 8, 0.26), transparent 30%), radial-gradient(circle at 10% 75%, rgba(202, 138, 4, 0.20), transparent 26%); } .hw-hero-layout, .hw-overview-grid, .hw-tech-grid, .hw-why-grid, .hw-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: center; } .hw-chip-row, .hw-stack-tags, .hw-logo-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; } .hw-chip { padding: 0.58rem 0.95rem; border-radius: 999px; background: rgba(234, 179, 8, 0.14); border: 1px solid rgba(234, 179, 8, 0.28); color: #fef9c3; font-size: 0.85rem; backdrop-filter: blur(8px); } .hw-hero-card, .hw-overview-card, .hw-tech-card, .hw-why-card, .hw-cta-card { position: relative; border-radius: 26px; border: 1px solid rgba(160, 110, 30, 0.18); box-shadow: var(--shadow); overflow: hidden; } .hw-card-overlay { position: absolute; inset: auto 1.8rem 1.8rem 1.8rem; background: rgba(22, 12, 2, 0.82); color: #fef9c3; border: 1px solid rgba(234, 179, 8, 0.22); border-radius: 18px; padding: 1rem 1.1rem; backdrop-filter: blur(8px); } .hw-card-overlay strong, .hw-overview-item strong, .hw-service-card h3, .hw-capability-card h3, .hw-industry-card h3, .hw-faq-card h3 { display: block; margin-bottom: 0.4rem; } .hw-overview-section, .hw-services-section, .hw-capabilities-section, .hw-tech-section, .hw-why-section, .hw-industries-section, .hw-faq-section, .hw-cta-section { padding: 5.5rem 0; position: relative; } .hw-overview-section::before, .hw-capabilities-section::before, .hw-why-section::before, .hw-faq-section::before { content: ""; position: absolute; inset: 0; background: var(--section-glow); pointer-events: none; } .hw-overview-card, .hw-tech-card, .hw-why-card, .hw-cta-card, .hw-faq-card, .hw-service-card, .hw-capability-card, .hw-industry-card { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hw-overview-card { padding: 2rem; } .hw-overview-list { display: grid; gap: 1rem; } .hw-overview-item { padding: 1rem 1.1rem; border-radius: 18px; background: rgba(18, 26, 42, 0.56); border: 1px solid rgba(160, 110, 30, 0.12); } .hw-services-grid, .hw-capability-grid, .hw-industries-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; } .hw-service-card, .hw-capability-card, .hw-industry-card, .hw-faq-card { padding: 1.5rem; border-radius: 22px; border: 1px solid rgba(160, 110, 30, 0.14); box-shadow: var(--shadow-soft); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); } .hw-service-card:hover, .hw-capability-card:hover, .hw-industry-card:hover, .hw-faq-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(234, 179, 8, 0.34); } .hw-service-num, .hw-capability-num, .hw-industry-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), rgba(202, 138, 4, 0.28)); color: var(--blue2); font-weight: 800; } .hw-capability-num svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hw-stack-tags span, .hw-tech-pill, .hw-why-list li { padding: 0.72rem 0.95rem; border-radius: 14px; background: rgba(18, 26, 42, 0.58); border: 1px solid rgba(160, 110, 30, 0.14); } .hw-stack-tags { margin-top: 1.6rem; } .hw-tech-card { padding: 2rem; } .hw-tech-group { display: grid; gap: 1rem; } .hw-tech-pill { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); } .hw-tech-pill strong { color: var(--white); } .hw-logo-strip { margin-top: 1.6rem; } .hw-logo-item { width: 108px; height: 68px; border-radius: 18px; background: rgba(18, 26, 42, 0.7); border: 1px solid rgba(160, 110, 30, 0.12); display: flex; align-items: center; justify-content: center; padding: 0.8rem; } .hw-logo-item img { max-width: 100%; max-height: 42px; object-fit: contain; } .hw-why-card { padding: 2rem; } .hw-why-list { display: grid; gap: 0.9rem; margin-top: 1.5rem; } .hw-why-list li, .hw-cta-card li { list-style: none; } .hw-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 2.4rem 0 2.2rem; } .hw-cta-section { padding-top: 0; } .hw-cta-card { padding: 2rem; } .hw-cta-card ul { display: grid; gap: 0.9rem; color: var(--muted); } /* Background video hero for hardware */ .hw-hero .hero-video { object-fit: cover; width: 100%; height: 100%; } @media (max-width: 1100px) { .hw-services-grid, .hw-capability-grid, .hw-industries-grid, .hw-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .hw-hero-layout, .hw-overview-grid, .hw-tech-grid, .hw-why-grid, .hw-cta-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hw-services-grid, .hw-capability-grid, .hw-industries-grid, .hw-faq-grid { grid-template-columns: 1fr; } .hw-overview-card, .hw-tech-card, .hw-why-card, .hw-cta-card, .hw-service-card, .hw-capability-card, .hw-industry-card, .hw-faq-card { padding: 1.3rem; } .hw-logo-item { width: calc(50% - 0.4rem); } } /* --- gdpr-consulting-services.html --- */ .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* --- devops-solutions.html --- */ .devops-page .hero-sub, .devops-page .section-sub { max-width: 720px; } .devops-hero .hero-bg { background: radial-gradient(circle at 80% 20%, rgba(225, 138, 70, 0.28), transparent 28%), radial-gradient(circle at 10% 75%, rgba(209, 106, 44, 0.22), transparent 24%); } .devops-hero-layout, .devops-overview-grid, .devops-tech-grid, .devops-why-grid, .devops-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: center; } .devops-hero .hero-title, .devops-hero .hero-sub { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .devops-chip-row, .devops-stack-tags, .devops-logo-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; } .devops-chip { padding: 0.58rem 0.95rem; border-radius: 999px; background: rgba(255, 251, 244, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff7ed; font-size: 0.85rem; backdrop-filter: blur(8px); } .devops-hero-card, .devops-overview-card, .devops-tech-card, .devops-why-card, .devops-cta-card { position: relative; border-radius: 26px; border: 1px solid rgba(109, 78, 52, 0.12); box-shadow: var(--shadow); overflow: hidden; } .devops-card-overlay strong, .devops-overview-item strong, .devops-service-card h3, .devops-capability-card h3, .devops-industry-card h3, .devops-faq-card h3 { display: block; margin-bottom: 0.4rem; } .devops-overview-section, .devops-services-section, .devops-capabilities-section, .devops-tech-section, .devops-why-section, .devops-industries-section, .devops-faq-section, .devops-cta-section { padding: 5.5rem 0; position: relative; } .devops-overview-section::before, .devops-capabilities-section::before, .devops-why-section::before, .devops-faq-section::before { content: ""; position: absolute; inset: 0; background: var(--section-glow); pointer-events: none; } .devops-overview-card, .devops-tech-card, .devops-why-card, .devops-cta-card, .devops-faq-card, .devops-service-card, .devops-capability-card { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .devops-overview-card { padding: 2rem; } .devops-overview-list { display: grid; gap: 1rem; } .devops-overview-item { padding: 1rem 1.1rem; border-radius: 18px; background: rgba(18, 26, 42, 0.56); border: 1px solid rgba(109, 78, 52, 0.1); } .devops-services-grid, .devops-capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; } .devops-industries-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; } @media (max-width: 991px) { .devops-industries-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .devops-industries-grid { grid-template-columns: 1fr; } } .devops-service-card, .devops-capability-card, .devops-faq-card { padding: 1.5rem; border-radius: 22px; border: 1px solid rgba(109, 78, 52, 0.12); box-shadow: var(--shadow-soft); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); } /* ========================================================================== FINAL OVERRIDES FOR CERT-IN ADVISORY PAGE (Standardized Hero) ========================================================================== */ .cert-hero { /* Premium Light Gradient similar to high-end consulting sites */ background: linear-gradient(135deg, #080c18 0%, #111827 50%, #080c18 100%) !important; } /* Ensure the standardized hero components are transparent on this page */ .cert-hero .hero-content, .cert-hero .hero-shell, .cert-hero .hero-visual, .cert-hero .hero-panel, .cert-hero .hero-panel-card { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Dark text override removed */ /* Specific improvements for the meta pills */ .cert-hero .cadv-hero-meta { margin-top: 0.75rem; display: flex; align-items: center; gap: 1.2rem; height: auto; } .cert-hero .cadv-meta-pill { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 100px; padding: 6px 16px !important; height: auto !important; font-weight: 600 !important; } .cert-hero .hero-title span { color: var(--orange) !important; } /* Improve badge for light theme */ .cert-hero .hero-badge { background: rgba(8, 68, 129, 0.08) !important; border: 1px solid rgba(8, 68, 129, 0.2) !important; color: var(--orange) !important; } /* Subdued background grid */ .cert-hero .hero-grid { opacity: 0.12 !important; } .devops-service-card:hover, .devops-capability-card:hover, .devops-faq-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(209, 106, 44, 0.24); } .devops-service-num, .devops-capability-num, .devops-industry-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(209, 106, 44, 0.14), rgba(225, 138, 70, 0.24)); color: var(--blue2); font-weight: 800; } .devops-stack-tags span, .devops-tech-pill, .devops-why-list li { padding: 0.72rem 0.95rem; border-radius: 14px; background: rgba(18, 26, 42, 0.58); border: 1px solid rgba(109, 78, 52, 0.12); } .devops-stack-tags { margin-top: 1.6rem; } .devops-tech-card { padding: 2rem; } .devops-tech-group { display: grid; gap: 1rem; } .devops-tech-pill { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); } .devops-tech-pill strong { color: var(--white); } .devops-logo-strip { margin-top: 1.6rem; } .devops-logo-item { width: 108px; height: 68px; border-radius: 18px; background: rgba(18, 26, 42, 0.7); border: 1px solid rgba(109, 78, 52, 0.1); display: flex; align-items: center; justify-content: center; padding: 0.8rem; } .devops-logo-item img { max-width: 100%; max-height: 42px; object-fit: contain; } .devops-why-card { padding: 2rem; } .devops-why-list { display: grid; gap: 0.9rem; margin-top: 1.5rem; } .devops-why-list li, .devops-cta-card li { list-style: none; } .devops-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 2.4rem 0 2.2rem; } .devops-cta-section { padding-top: 0; } .devops-cta-card { padding: 2rem; } .devops-cta-card ul { display: grid; gap: 0.9rem; color: var(--muted); } @media (max-width: 1100px) { .devops-services-grid, .devops-capability-grid, .devops-industries-grid, .devops-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .devops-hero-layout, .devops-overview-grid, .devops-tech-grid, .devops-why-grid, .devops-cta-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .devops-services-grid, .devops-capability-grid, .devops-industries-grid, .devops-faq-grid { grid-template-columns: 1fr; } .devops-overview-card, .devops-tech-card, .devops-why-card, .devops-cta-card, .devops-service-card, .devops-capability-card, .devops-industry-card, .devops-faq-card { padding: 1.3rem; } .devops-logo-item { width: calc(50% - 0.4rem); } } /* --- cloud-services.html --- */ .cloud-page { font-family: 'Manrope', sans-serif !important; } .cloud-page .hero-sub, .cloud-page .section-sub { max-width: 720px; } .cloud-hero .hero-bg { background: linear-gradient(120deg, rgba(10, 20, 40, 0.88), rgba(10, 20, 40, 0.55), transparent 90%), radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.28), transparent 30%), radial-gradient(circle at 10% 75%, rgba(14, 165, 233, 0.22), transparent 26%); } .cloud-hero-layout, .cloud-overview-grid, .cloud-tech-grid, .cloud-why-grid, .cloud-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: center; } /* Enhance visibility for text inside the Cloud hero section */ .cloud-hero .hero-title, .cloud-hero .hero-sub, .cloud-hero .hstat-num, .cloud-hero .hstat-label { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); } .cloud-hero .hero-badge { color: #ffffff !important; background: rgba(0, 0, 0, 0.3) !important; border-color: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(8px); } .cloud-chip-row, .cloud-stack-tags, .cloud-logo-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; } .cloud-hero-card, .cloud-overview-card, .cloud-tech-card, .cloud-why-card, .cloud-cta-card { position: relative; border-radius: 26px; border: 1px solid rgba(56, 130, 180, 0.15); box-shadow: var(--shadow); overflow: hidden; } .cloud-card-overlay strong, .cloud-overview-item strong, .cloud-service-card h3, .cloud-capability-card h3, .cloud-page .industry-card h3, .cloud-faq-card h3 { display: block; margin-bottom: 0.4rem; color: var(--orange); } .cloud-overview-section, .cloud-services-section, .cloud-capabilities-section, .cloud-tech-section, .cloud-why-section, .cloud-industries-section, .cloud-faq-section, .cloud-cta-section { padding: 5.5rem 0; position: relative; } .cloud-overview-section::before, .cloud-capabilities-section::before, .cloud-why-section::before, .cloud-faq-section::before { content: ""; position: absolute; inset: 0; background: var(--section-glow); pointer-events: none; } .cloud-overview-card, .cloud-tech-card, .cloud-why-card, .cloud-cta-card, .cloud-faq-card, .cloud-service-card, .cloud-capability-card, .cloud-industry-card { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #ffffff; margin-bottom: 8px; } .cloud-overview-card, .cloud-tech-card, .cloud-why-card, .cloud-cta-card, .cloud-faq-card, .cloud-service-card, .cloud-capability-card, .cloud-industry-card { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cloud-overview-card { padding: 2rem; } .cloud-overview-list { display: grid; gap: 1rem; } .cloud-overview-item { padding: 1rem 1.1rem; border-radius: 18px; background: rgba(18, 26, 42, 0.56); border: 1px solid rgba(56, 130, 200, 0.12); } .cloud-services-grid, .cloud-capability-grid, .cloud-industries-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; } .cloud-service-card, .cloud-capability-card, .cloud-faq-card { padding: 1.5rem; border-radius: 22px; border: 1px solid rgba(56, 130, 200, 0.14); box-shadow: var(--shadow-soft); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); } .cloud-service-card:hover, .cloud-capability-card:hover, .cloud-industry-card:hover, .cloud-faq-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(56, 189, 248, 0.32); } .cloud-service-num, .cloud-capability-num, .cloud-industry-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(14, 165, 233, 0.28)); color: var(--blue2); font-weight: 800; } .cloud-capability-num svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cloud-stack-tags span, .cloud-tech-pill, .cloud-why-list li { padding: 0.72rem 0.95rem; border-radius: 14px; background: rgba(18, 26, 42, 0.58); border: 1px solid rgba(56, 130, 200, 0.14); } .cloud-stack-tags { margin-top: 1.6rem; } .cloud-tech-card { padding: 2rem; } .cloud-tech-group { display: grid; gap: 1rem; } .cloud-tech-pill { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); } .cloud-tech-pill strong { color: var(--white); } .cloud-logo-strip { margin-top: 1.6rem; } .cloud-logo-item { width: 108px; height: 68px; border-radius: 18px; background: rgba(18, 26, 42, 0.7); border: 1px solid rgba(56, 130, 200, 0.12); display: flex; align-items: center; justify-content: center; padding: 0.8rem; } .cloud-logo-item img { max-width: 100%; max-height: 42px; object-fit: contain; } .cloud-why-card { padding: 2rem; } .cloud-why-list { display: grid; gap: 0.9rem; margin-top: 1.5rem; } .cloud-why-list li, .cloud-cta-card li { list-style: none; } .cloud-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 2.4rem 0 2.2rem; } .cloud-cta-section { padding-top: 0; } .cloud-cta-card { padding: 2rem; } .cloud-cta-card ul { display: grid; gap: 0.9rem; color: var(--muted); } /* Hero video background */ .cloud-hero .hero-media video { object-fit: cover; } @media (max-width: 1100px) { .cloud-services-grid, .cloud-capability-grid, .cloud-industries-grid, .cloud-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .cloud-hero-layout, .cloud-overview-grid, .cloud-tech-grid, .cloud-why-grid, .cloud-cta-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cloud-services-grid, .cloud-capability-grid, .cloud-industries-grid, .cloud-faq-grid { grid-template-columns: 1fr; } .cloud-overview-card, .cloud-tech-card, .cloud-why-card, .cloud-cta-card, .cloud-service-card, .cloud-capability-card, .cloud-industry-card, .cloud-faq-card { padding: 1.3rem; } .cloud-logo-item { width: calc(50% - 0.4rem); } } /* --- cert-advisory.html --- */ /* ── Page-specific overrides ── */ .cadv-hero { background: linear-gradient(135deg, #0a0f1e 0%, #0d1b2a 50%, #0c1120 100%); padding: 140px 0 80px; position: relative; overflow: hidden; } .cadv-hero .hero-content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .cadv-hero .hero-panel-card { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; backdrop-filter: none !important; } .cadv-hero .hero-panel-card h3, .cadv-hero .hero-panel-card p, .cadv-hero .hero-panel-card strong { color: #ffffff !important; } .cadv-hero::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(209, 106, 44, 0.12) 0%, transparent 70%); pointer-events: none; } @keyframes cadv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } .cadv-hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; } .cadv-meta-pill { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: #ffffff; font-weight: 500; } .cadv-meta-pill svg { opacity: 0.6; } /* ── Filters ── */ .cadv-filters-bar { background: rgba(12, 18, 35, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: sticky; top: 70px; z-index: 40; padding: 14px 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cadv-filters-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cadv-filter-label { font-size: 0.8rem; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.07em; margin-right: 4px; } .cadv-filter-btn { padding: 6px 16px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgba(180, 200, 230, 0.7); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .cadv-filter-btn:hover, .cadv-filter-btn.active { background: rgba(209, 106, 44, 0.15); border-color: rgba(209, 106, 44, 0.4); color: #d16a2c; } .cadv-search-wrap { margin-left: auto; position: relative; } .cadv-search { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 7px 14px 7px 36px; color: #ffffff; font-size: 0.85rem; width: 220px; outline: none; font-family: inherit; } .cadv-search:focus { border-color: rgba(209, 106, 44, 0.4); } .cadv-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: 0.4; } /* ── Content area ── */ .cadv-content { padding: 60px 0 100px; } .cadv-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; } .cadv-stat-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 20px 24px; text-align: center; } .cadv-stat-num { font-size: 2.2rem; font-weight: 800; color: #d16a2c; line-height: 1; margin-bottom: 6px; } .cadv-stat-label { font-size: 0.8rem; color: #cbd5e1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* ── Section heading ── */ .cadv-section-head { margin-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cadv-section-head h2 { font-size: 1.3rem; font-weight: 700; color: var(--white) 000; } .cadv-count-badge { font-size: 0.78rem; font-weight: 700; background: rgba(209, 106, 44, 0.12); color: #d16a2c; border: 1px solid rgba(209, 106, 44, 0.25); padding: 4px 12px; border-radius: 100px; } /* ── Advisory accordion cards ── */ .cadv-list { display: flex; flex-direction: column; gap: 14px; } .cadv-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; } .cadv-card:hover { border-color: rgba(209, 106, 44, 0.25); } .cadv-card.open { border-color: rgba(209, 106, 44, 0.35); box-shadow: 0 4px 32px rgba(209, 106, 44, 0.08); } .cadv-card-header { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; cursor: pointer; user-select: none; } .cadv-sev-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .cadv-sev-dot.critical { background: #ff3b30; box-shadow: 0 0 8px rgba(255, 59, 48, 0.5); } .cadv-sev-dot.high { background: #ff6b35; box-shadow: 0 0 8px rgba(8, 68, 129, 0.5); } .cadv-sev-dot.medium { background: #ffb347; box-shadow: 0 0 8px rgba(45, 155, 78, 0.5); } .cadv-sev-dot.low { background: #2dd4bf; box-shadow: 0 0 8px rgba(45, 212, 191, 0.5); } .cadv-header-body { flex: 1; min-width: 0; } .cadv-header-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .cadv-code { font-size: 0.74rem; font-weight: 700; font-family: 'Courier New', monospace; color: var(--white) !important; background: rgba(0, 0, 0, 0.06) !important; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.04em; } .cadv-sev-badge { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 9px; border-radius: 4px; } .cadv-sev-badge.critical { background: rgba(255, 59, 48, 0.15); color: var(--white) !important; font-weight: 800; border: 1px solid rgba(255, 59, 48, 0.25); } .cadv-sev-badge.high { background: rgba(8, 68, 129, 0.18); color: var(--white) !important; font-weight: 800; border: 1px solid rgba(8, 68, 129, 0.3); } .cadv-sev-badge.medium { background: rgba(45, 155, 78, 0.15); color: var(--white) !important; font-weight: 800; border: 1px solid rgba(45, 155, 78, 0.25); } .cadv-sev-badge.low { background: rgba(45, 212, 191, 0.12); color: var(--white) !important; font-weight: 800; border: 1px solid rgba(45, 212, 191, 0.25); } .cadv-date-chip { font-size: 0.75rem; color: var(--white) 555 !important; font-weight: 600; } .cadv-card-title { font-size: 1.02rem; font-weight: 700; color: var(--white) 114; line-height: 1.35; margin-bottom: 4px; } .cadv-card-overview { font-size: 0.86rem; color: #f1f5f9; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cadv-toggle-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(209, 106, 44, 0.1); border: 1px solid rgba(209, 106, 44, 0.2); display: flex; align-items: center; justify-content: center; color: #d16a2c; font-size: 1.1rem; font-weight: 300; transition: transform 0.3s, background 0.2s; margin-top: 2px; } .cadv-card.open .cadv-toggle-icon { transform: rotate(45deg); background: rgba(209, 106, 44, 0.2); } /* ── Accordion body ── */ .cadv-card-body { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .cadv-card.open .cadv-card-body { max-height: 2000px; } .cadv-card-body-inner { padding: 0 24px 28px 58px; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 24px; } .cadv-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-bottom: 24px; } .cadv-detail-block h4 { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(209, 106, 44, 0.8); margin-bottom: 8px; } .cadv-detail-block p, .cadv-detail-block ul { font-size: 0.88rem; color: #f1f5f9; line-height: 1.65; } .cadv-detail-block ul { padding-left: 1.2em; list-style: none; } .cadv-detail-block ul li { position: relative; padding-left: 14px; margin-bottom: 4px; } .cadv-detail-block ul li::before { content: '\2022'; position: absolute; left: 0; color: #d16a2c; font-weight: 700; } .cadv-detail-full { margin-bottom: 20px; } .cadv-detail-full h4 { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(209, 106, 44, 0.8); margin-bottom: 8px; } .cadv-detail-full p { font-size: 0.88rem; color: #f1f5f9; line-height: 1.65; } .cadv-cve-tag { font-size: 0.74rem; font-weight: 700; font-family: 'Courier New', monospace; background: rgba(0, 120, 255, 0.08); border: 1px solid rgba(0, 120, 255, 0.18); color: #7aadff; padding: 4px 10px; border-radius: 6px; text-decoration: none; } .cadv-cve-tag:hover { background: rgba(0, 120, 255, 0.18); color: #aecfff; } /* Solution links */ .cadv-solution-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .timeline-new { position: relative; display: flex; justify-content: flex-start; align-items: center; padding: 6rem 4rem; /* More compact vertical space */ overflow-x: auto; gap: 3rem; scrollbar-width: none; } .timeline-new::before { content: '\2022'; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--orange); opacity: 0.3; transform: translateY(-50%); z-index: 0; } .timeline-item { position: relative; flex: 0 0 240px; /* Spaced for perfect content width */ height: 380px; /* Reduced height to remove empty space */ display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Perfect Fit Premium Pill */ .timeline-item::before { display: block; content: '\2022'; position: absolute; width: 170px; /* Balanced width for description text */ height: 100%; background: #0d1421; border: 1.5px solid rgba(8, 68, 129, 0.2); border-radius: 85px; z-index: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* Alternate Up and Down - Vedtam Theme */ .timeline-item:nth-child(odd)::before { bottom: 50%; transform: translateY(20px); background: linear-gradient(180deg, var(--orange) 0%, #b34e00 100%); } .timeline-item:nth-child(even)::before { top: 50%; transform: translateY(-20px); background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); border: 1px solid rgba(8, 68, 129, 0.3); } /* Unify all to Vedtam Orange */ .timeline-item:nth-child(n)::before { /* Reset previous multicolor gradients */ } .timeline-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65px; /* Shrunk to avoid overlap */ height: 65px; background: #0d1421; border-radius: 50%; display: grid; place-items: center; z-index: 10; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); font-weight: 800; font-size: 1.6rem; color: var(--orange); border: 3px solid var(--orange); } .timeline-dot::before { content: '\2022'; position: absolute; inset: -12px; border-radius: 50%; border: 4px solid #fff; opacity: 0.3; } .cadv-solution-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: #d16a2c; text-decoration: none; padding: 6px 14px; border: 1px solid rgba(209, 106, 44, 0.3); border-radius: 8px; background: rgba(209, 106, 44, 0.06); word-break: break-all; } .cadv-solution-link:hover { background: rgba(209, 106, 44, 0.14); border-color: rgba(209, 106, 44, 0.5); } .cadv-solution-link svg { flex-shrink: 0; } /* Actions footer */ .cadv-card-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; } .cadv-cert-source { font-size: 0.78rem; color: #cbd5e1; margin-left: auto; } /* No results */ .cadv-no-results { text-align: center; padding: 60px 20px; color: #cbd5e1; display: none; } .cadv-no-results svg { opacity: 0.3; margin-bottom: 16px; } /* Responsive */ @media (max-width: 768px) { .cadv-stats-row { grid-template-columns: 1fr 1fr; } .cadv-detail-grid { grid-template-columns: 1fr; gap: 16px; } .cadv-card-body-inner { padding-left: 18px; } .cadv-search-wrap { margin-left: 0; width: 100%; } .cadv-search { width: 100%; } .cadv-filters-inner { gap: 8px; } } @media (max-width: 480px) { .cadv-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; } .cadv-stat-num { font-size: 1.8rem; } .cadv-card-header { padding: 16px; } } /* TLP banner */ .cadv-tlp-banner { background: rgba(26, 114, 184, 0.05); border: 1px solid rgba(26, 114, 184, 0.15); border-radius: 10px; padding: 14px 20px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 32px; font-size: 0.85rem; color: #f1f5f9; line-height: 1.55; } .cadv-tlp-banner strong { color: #ffa040; } .cadv-tlp-banner svg { flex-shrink: 0; margin-top: 1px; color: #ffa040; } /* ========================================================================== ABOUT US ENHANCEMENTS: INDIA PRESENCE, LEADERSHIP, TIMELINE ========================================================================== */ .india-new-section { padding: 6rem 0; background: radial-gradient(circle at 10% 15%, rgba(0, 163, 217, 0.12), transparent 40%), radial-gradient(circle at 90% 85%, rgba(45, 155, 78, 0.12), transparent 40%), var(--dark); overflow: hidden; position: relative; } .india-new-intro { max-width: 860px; margin: 0 auto 4rem; text-align: center; } .india-new-board { display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; grid-template-areas: "top-left map top-right" "mid-left map mid-right" "bottom-left map bottom-right"; gap: 1.25rem 1.4rem; align-items: stretch; } .india-new-map-stage { grid-area: map; display: flex; flex-direction: column; gap: 1.5rem; } .india-new-stat-card-top-left { grid-area: top-left; } .india-new-stat-card-top-right { grid-area: top-right; } .india-new-stat-card-mid-left { grid-area: mid-left; } .india-new-stat-card-mid-right { grid-area: mid-right; } .india-new-stat-card-bottom-left { grid-area: bottom-left; } .india-new-stat-card-bottom-right { grid-area: bottom-right; } .india-new-stat-card { padding: 1.5rem 1.2rem; min-height: 160px; background: rgba(12, 21, 36, 0.85) !important; border: 1px solid rgba(0, 163, 217, 0.25); border-radius: 24px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; justify-content: center; text-align: center; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(8px); } .india-new-stat-card:hover { transform: translateY(-8px); border-color: rgba(0, 163, 217, 0.8); box-shadow: 0 20px 40px rgba(0, 163, 217, 0.2); } .india-new-stat-card:nth-child(even) { border-color: rgba(45, 155, 78, 0.25); } .india-new-stat-card:nth-child(even):hover { border-color: rgba(45, 155, 78, 0.8); box-shadow: 0 20px 40px rgba(45, 155, 78, 0.2); } .india-new-stat-card strong { display: block; font-family: 'Manrope', sans-serif; font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, #00A3D9 0%, #2D9B4E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.5rem; } .india-new-stat-card span { font-size: 0.95rem; font-weight: 700; color: #ffffff !important; } .india-new-map-card { position: relative; padding: 2.5rem 2rem; border-radius: 28px; background: rgba(6, 12, 22, 0.95); border: 1px solid rgba(0, 163, 217, 0.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-grow: 1; } .india-new-map-figure { position: relative; width: min(100%, 540px); display: block; } .india-map-base { width: 100%; height: auto; display: block; object-fit: contain; border-radius: 16px; /* Apply a single, beautiful unified corporate Electric Cyan/Teal color filter */ filter: sepia(1) hue-rotate(175deg) saturate(5) brightness(1.1) drop-shadow(0 0 25px rgba(0, 163, 217, 0.45)); opacity: 0.95; } .india-map-gradient-layer { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 163, 217, 0.25) 0%, rgba(45, 155, 78, 0.25) 100%); mix-blend-mode: color; pointer-events: none; border-radius: 16px; } .india-new-map-pins { position: absolute; inset: 0; pointer-events: none; transform: translate(3.8%, -0.4%); } .india-new-pin { --pin-size: 14px; position: absolute; width: var(--pin-size); height: var(--pin-size); margin-left: calc(var(--pin-size) * -0.5); margin-top: calc(var(--pin-size) * -0.5); border-radius: 50%; background: #2D9B4E; border: 2px solid #ffffff; box-shadow: 0 0 0 6px rgba(45, 155, 78, 0.25), 0 0 20px rgba(45, 155, 78, 0.6); animation: indiaPinBlinkGreen 2s ease-in-out infinite; } .india-new-pin:nth-child(even) { background: #2D9B4E; box-shadow: 0 0 0 6px rgba(45, 155, 78, 0.25), 0 0 20px rgba(45, 155, 78, 0.6); animation: indiaPinBlinkGreen 2s ease-in-out infinite; } @keyframes indiaPinBlinkCyan { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 163, 217, 0.25), 0 0 20px rgba(0, 163, 217, 0.6); } 50% { transform: scale(0.85); box-shadow: 0 0 0 2px rgba(0, 163, 217, 0.1), 0 0 10px rgba(0, 163, 217, 0.3); } } @keyframes indiaPinBlinkGreen { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(45, 155, 78, 0.25), 0 0 20px rgba(45, 155, 78, 0.6); } 50% { transform: scale(0.85); box-shadow: 0 0 0 2px rgba(45, 155, 78, 0.1), 0 0 10px rgba(45, 155, 78, 0.3); } } .india-new-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 2px; transform: translate(8px, -50%); border-radius: 2px; background: linear-gradient(90deg, rgba(45, 155, 78, 0.8), transparent); } .india-new-pin:nth-child(even)::after { background: linear-gradient(90deg, rgba(45, 155, 78, 0.8), transparent); } .india-new-pin::before { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 800; line-height: 1; color: #ffffff !important; background: rgba(6, 12, 22, 0.95); border: 1px solid rgba(45, 155, 78, 0.4); border-radius: 50px; padding: 0.35rem 0.65rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .india-new-pin:nth-child(even)::before { border-color: rgba(45, 155, 78, 0.4); } .pin-noida::before { content: "Delhi NCR"; } .pin-mumbai::before { content: "Mumbai"; } .pin-pune::before { content: "Pune"; } .pin-hyderabad::before { content: "Hyderabad"; right: auto; left: calc(100% + 10px); } .pin-bengaluru::before { content: "Bengaluru"; } .pin-chennai::before { content: "Chennai"; right: auto; left: calc(100% + 10px); } .pin-kolkata::before { content: "Kolkata"; } .pin-noida { left: 35.6%; top: 34.3%; } .pin-mumbai { left: 20.8%; top: 60.4%; } .pin-pune { left: 23.8%; top: 62.4%; } .pin-hyderabad { left: 34.1%; top: 66.2%; } .pin-bengaluru { left: 32.8%; top: 77.3%; } .pin-chennai { left: 39.7%; top: 77.5%; } .pin-kolkata { left: 60.6%; top: 51.5%; } .india-new-map-badge { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; padding: 1.2rem 1.4rem; border-radius: 20px; background: linear-gradient(135deg, rgba(12, 21, 36, 0.95) 0%, rgba(6, 12, 22, 0.98) 100%); border: 1px solid rgba(0, 163, 217, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); z-index: 5; backdrop-filter: blur(8px); } .india-new-map-badge strong { display: block; font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 800; margin-bottom: 0.3rem; color: var(--cyan); } .india-new-map-badge span { display: block; font-size: 0.88rem; line-height: 1.6; color: #ffffff !important; } .india-unified-city { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 700; color: #ffffff !important; white-space: nowrap; padding: 0.3rem 0.6rem; background: rgba(6, 12, 22, 0.5); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); } .india-unified-city .dot-cyan { width: 8px; height: 8px; border-radius: 50%; background: #2D9B4E; box-shadow: 0 0 10px #2D9B4E; } .india-unified-city .dot-green { width: 8px; height: 8px; border-radius: 50%; background: #2D9B4E; box-shadow: 0 0 10px #2D9B4E; } /* Leadership Section */ .leadership-section { padding: 3.5rem 0; background: var(--dark); margin-top: 5rem !important; } .leader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; margin-top: 4rem; } .leader-card { background: var(--dark); border-radius: 24px; padding: 2rem; text-align: center; transition: var(--trans); border: 1px solid rgba(0, 0, 0, 0.05); } .leader-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); } .leader-photo { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 1.5rem; object-fit: cover; border: 4px solid var(--dark2); } .leader-card h3 { font-size: 1.3rem; margin-bottom: 0.3rem; } .leader-card .role { color: var(--orange); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; display: block; } .leader-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; } /* ========================================================================== STRATEGIC HORIZONTAL ROADMAP - PRECISION REBUILD ========================================================================== */ .timeline-section { padding: 8rem 0; background: #050a12; overflow: hidden; } .timeline-new { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; padding: 6rem 1rem; gap: 1.5rem; overflow: hidden; /* Zero Scrollbar */ } .timeline-new::before { content: '\2022'; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--orange); opacity: 0.25; transform: translateY(-50%); z-index: 0; } .timeline-item { position: relative; flex: 1; max-width: 220px; height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* The Infographic Pill Shape */ .timeline-item::before { content: '\2022'; position: absolute; top: 0; bottom: 0; width: 100%; background: #0d1421; border: 1px solid rgba(8, 68, 129, 0.3); border-radius: 110px; z-index: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease; } .timeline-item:hover::before { border-color: var(--orange); transform: scale(1.02); } /* Milestone Number - Locked in the Dead Zone */ .timeline-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65px; height: 65px; background: #fff; border: 5px solid var(--orange); border-radius: 50%; display: grid; place-items: center; z-index: 10; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); font-weight: 800; font-size: 1.5rem; color: #0d1421; } /* Pillar Colors from the Image */ .timeline-item:nth-child(odd)::before { background: linear-gradient(180deg, var(--orange) 0%, #b34e00 100%); } .timeline-item:nth-child(even)::before { background: #0d1421; border: 1px solid rgba(8, 68, 129, 0.4); } .timeline-item:nth-child(1) .timeline-dot::after { content: '1'; } .timeline-item:nth-child(2) .timeline-dot::after { content: '2'; } .timeline-item:nth-child(3) .timeline-dot::after { content: '3'; } .timeline-item:nth-child(4) .timeline-dot::after { content: '4'; } .timeline-item:nth-child(5) .timeline-dot::after { content: '5'; } /* Text Fixed INSIDE the Pill - Zero Overlap Rebuild */ .timeline-content { position: relative; width: 100%; height: 100%; padding: 25px 15px; /* Balanced padding */ z-index: 5; display: flex; flex-direction: column; text-align: center; pointer-events: none; } /* Create a 100px Dead Zone in the middle for the circle */ .timeline-content::after { content: '\2022'; display: block; height: 100px; order: 2; /* Forces it to sit between top and bottom items */ } /* Alternating text position relative to circle */ .timeline-item:nth-child(odd) .timeline-content .timeline-year { order: 1; } .timeline-item:nth-child(odd) .timeline-content h4 { order: 3; } .timeline-item:nth-child(odd) .timeline-content p { order: 4; } .timeline-item:nth-child(even) .timeline-content .timeline-year { order: 4; } .timeline-item:nth-child(even) .timeline-content h4 { order: 1; } .timeline-item:nth-child(even) .timeline-content p { order: 3; } .timeline-year { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; /* White year for better contrast on orange/black */ margin: 0 0 5px 0; height: 40px; display: flex; align-items: center; justify-content: center; } .timeline-content h4 { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 0.2rem; line-height: 1.2; } .timeline-content p { font-size: 0.75rem; color: rgba(255, 255, 255, 0.85); line-height: 1.4; margin: 0 auto; max-width: 150px; } /* Vertical Fallback for Mobile */ @media (max-width: 991px) { .timeline-new { grid-template-columns: 1fr; padding-left: 80px; } .timeline-new::before { left: 40px; width: 2px; height: 100%; transform: none; } .timeline-item { height: auto; margin-bottom: 2rem; align-items: flex-start; } .timeline-dot { position: absolute; left: -40px; transform: translate(-50%, -50%); } .timeline-content { position: static; width: 100%; margin: 0 !important; text-align: left; } } .timeline-dot { height: 70px; background: #fff; border-radius: 50%; display: grid; place-items: center; z-index: 10; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); font-weight: 800; font-size: 1.6rem; color: #0d1421; border: 5px solid var(--orange); } .timeline-dot::before { content: '\2022'; position: absolute; inset: -10px; border: 1px solid rgba(8, 68, 129, 0.2); border-radius: 50%; animation: vt-dot-pulse 3s infinite; } @keyframes vt-dot-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } .timeline-item:nth-child(1) .timeline-dot::after { content: '1'; } .timeline-item:nth-child(2) .timeline-dot::after { content: '2'; } .timeline-item:nth-child(3) .timeline-dot::after { content: '3'; } .timeline-item:nth-child(4) .timeline-dot::after { content: '4'; } .timeline-item:nth-child(5) .timeline-dot::after { content: '5'; } @media (max-width: 900px) { .timeline-new { flex-direction: column; padding: 2rem 0; overflow-x: visible; } .timeline-new::before { left: 20px; width: 2px; top: 0; bottom: 0; transform: none; } .timeline-item { min-width: 100%; height: auto; flex-direction: row; justify-content: flex-start; padding-left: 60px; margin-bottom: 2rem; } .timeline-item::before { display: none; } .timeline-dot { position: static; transform: none; width: 50px; height: 50px; font-size: 1.2rem; margin-right: 1.5rem; flex-shrink: 0; } .timeline-content { position: static; width: auto; text-align: left; } .timeline-content p { display: block; } } /* Entrance Animations */ .timeline-item.reveal-perspective { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); filter: none; } .timeline-item.reveal-perspective.visible { opacity: 1; transform: translateY(0); } .timeline-content { position: relative; z-index: 1; } .timeline-content h4 { font-size: 1.5rem; font-weight: 800; color: #ffffff; margin-bottom: 1rem; margin-top: 1.5rem; } .timeline-content p { color: rgba(255, 255, 255, 0.75); line-height: 1.7; font-size: 1rem; } /* Perspective Zoom Reveal Animation */ .timeline-item.reveal-perspective { opacity: 0; transform: perspective(1000px) rotateX(15deg) translateY(30px) scale(0.92); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); filter: blur(10px); } .timeline-item.reveal-perspective.visible { opacity: 1 !important; transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1) !important; filter: blur(0) !important; } /* Floating Glow Halo behind cards */ .timeline-item::before { content: '\2022'; position: absolute; inset: -20px; background: radial-gradient(circle at 50% 50%, rgba(8, 68, 129, 0.08), transparent 70%); z-index: -1; opacity: 0; transition: opacity 1s ease; } .timeline-item.visible::before { opacity: 1; } @media (max-width: 900px) { .india-new-intro { margin-bottom: 2.5rem; } .india-new-board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "top-left top-right" "map map" "mid-left mid-right" "bottom-left bottom-right"; } .india-new-city-list { justify-content: center; } /* Show a straight vertical line on mobile left side */ .timeline-new::before { display: block !important; left: 20px !important; width: 2px !important; transform: none !important; background: rgba(8, 68, 129, 0.2) !important; content: '' !important; position: absolute !important; top: 0 !important; bottom: 0 !important; } /* Disable curved twists on mobile */ .timeline-item::after, .timeline-item::before { display: none !important; } .timeline-item { width: 100% !important; margin-top: 0 !important; margin-bottom: 3rem !important; padding: 2rem !important; padding-left: 4.5rem !important; background: rgba(18, 26, 42, 0.9) !important; } .timeline-dot { left: 0 !important; top: 1.5rem !important; width: 40px !important; height: 40px !important; right: auto !important; } .timeline-year { font-size: 2.2rem; left: 4.5rem; } } @media (max-width: 640px) { .india-new-section { padding: 3.5rem 0; } .india-new-board { grid-template-columns: 1fr; grid-template-areas: "top-left" "top-right" "map" "mid-left" "mid-right" "bottom-left" "bottom-right"; } .india-new-map-card, .india-new-copy-card { padding: 1.4rem; border-radius: 22px; } .india-new-map-badge { position: static; margin-top: 1rem; } .india-new-city-list { gap: 0.6rem; } .india-new-city-pill { width: 100%; } .india-new-stat-card { min-height: 120px; } } /* ========================================================================== HERO SECTION STANDARDIZATION (Same as Home Page) ========================================================================== */ /* 1. Make all hero backgrounds transparent to show underlying video/images */ .hero, [class*="-hero"] { background: transparent !important; background-image: none !important; color: #ffffff !important; position: relative; z-index: 1; } /* 2. Ensure hero overlays are dark and consistent */ .hero-overlay, .hero::before, [class*="-hero"]::before { content: '\2022'; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 13, 22, 0.7) 0%, rgba(8, 13, 22, 0.4) 100%) !important; z-index: -1; } /* 3. Force white text color for all hero elements */ .hero h1, .hero h2, .hero h3, .hero p, .hero span:not(.hero-badge), [class*="-hero"] h1, [class*="-hero"] h2, [class*="-hero"] h3, [class*="-hero"] p, [class*="-hero"] span:not(.hero-badge), .hero-title, .hero-sub, .hero-proof-item { color: #ffffff !important; } /* 4. Hero Badge consistency */ .hero-badge { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* ========================================================================== GLOBAL WHITE BACKGROUND THEME (Applying to all landing pages) ========================================================================== */ /* 1. Reset all sections to white (EXCEPT heroes) */ section:not([class*="hero"]):not([class*="hero-visual"]):not(.services-section), .cadv-content, .partners-section, .cta-section, .footer, main section:not(.services-section) { background: var(--dark) !important; background-image: none !important; color: var(--white) !important; } /* Remove decorative background pseudo-elements */ section:not([class*="hero"]):not([class*="hero-visual"])::before, section:not([class*="hero"]):not([class*="hero-visual"])::after, .cadv-content::before, .cta-section::before, .cta-section::after, .sw-pattern-section::before, .sw-pattern-section::after { display: none !important; } /* 2. Standardize all Card-like components to white */ .cyber-problem-card, .cyber-service-card, .cyber-ai-card, .authority-card, .process-step-item, .cadv-card, .cadv-stat-card, .cloud-service-card, .devops-card, .iso-card, .qms-card, .gdpr-card, .it-card, .hw-card, .service-details-card, .feature-card, .stat-card, .value-card, .testi-card, .faq-item, .process-step, .ind-card, .mini-card, .apoint, .apoint-icon, .approach-point, .approach-text, .approach-visual, .av-item, .partner-pill, .about-card-main, .about-feature-box, .sw-service-card, .sw-tech-card, .sw-industry-card, .sw-faq-item, .sw-cta-card, .contact-card, .it-managed-card, .hw-sol-card, .ot-security-card, .network-audit-card, .pci-dss-card, .hipaa-card { background: var(--dark) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important; color: var(--white) !important; } .why-card, .cyber-problem-card, .it-service-card { position: relative !important; background: transparent !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 20px !important; } .why-card .why-content, .cyber-problem-card .cyber-problem-icon, .cyber-problem-card .cyber-problem-body, .it-service-card .it-service-num, .it-service-card h3, .it-service-card p { position: relative !important; z-index: 3 !important; } /* Remove gradient pseudo-elements from cards */ .cyber-problem-card::before, .cyber-service-card::before, .cadv-card::before, .consulting-card::before, .why-card::before, .value-card::before, .ind-card::before, .sw-service-curtain::after { display: none !important; } /* 3. Global Text Color Overrides for Readability on White */ section:not([class*="hero"]):not([class*="hero-visual"]):not(.services-section) h1, section:not([class*="hero"]):not([class*="hero-visual"]):not(.services-section) h2, section:not([class*="hero"]):not([class*="hero-visual"]):not(.services-section) h3, section:not([class*="hero"]):not([class*="hero-visual"]):not(.services-section) h4, section:not([class*="hero"]):not([class*="hero-visual"]):not(.services-section) h5, section:not([class*="hero"]):not([class*="hero-visual"]):not(.services-section) h6, .section-heading, .cyber-problem-heading, .cadv-card-title, .testi-meta h4, .faq-question, .footer h4, .ap-body h4, .sw-service-card h3, .sw-tech-card h4, .sw-why-card h3, .sw-industry-card h3, .sw-faq-q { color: var(--white) !important; } .section-heading { /* white-space: nowrap; - Removed to allow headings to wrap and prevent layout breaks */ } /* Fix specific badges and accents that might be white */ .section-label, .cyber-problem-eyebrow, .cadv-badge, .hero-badge { background: rgba(8, 68, 129, 0.10) !important; color: var(--orange) !important; display: inline-block !important; padding: 0.4rem 1.2rem !important; border-radius: 100px !important; margin-bottom: 0.8rem !important; } /* Ensure footer links and icons are visible */ .footer-contact a, .footer-col ul li a { color: var(--white) 555 !important; } .footer-contact a:hover, .footer-col ul li a:hover { color: var(--orange) !important; } /* Special Case: Industry/Tech sections with background-images (remove them) */ .cyber-trust-authority-section, .industries-premium-section, .advantage-section, .industries-section, .sw-pattern-section { background-image: none !important; background-color: var(--dark) !important; } /* Ensure icons are visible */ .cyber-service-icon, .cyber-problem-icon, .sol-pillar-icon, .step-num-circle, .authority-icon, .svc-icon, .why-icon, .apoint-icon, .mini-card-icon, .sw-icon-label, .sw-why-icon, .sw-industry-icon { background: rgba(8, 68, 129, 0.10) !important; color: var(--blue) !important; } /* ========================================================================== FINAL IMPROVEMENTS FOR CERT-IN ADVISORY PAGE ========================================================================== */ .cert-hero { /* Premium Light Gradient similar to high-end consulting sites */ background: linear-gradient(135deg, #080c18 0%, #111827 50%, #080c18 100%) !important; } /* Ensure COMPLETE transparency for both left and right content blocks */ .cert-hero .hero-content, .cert-hero .hero-shell, .cert-hero .hero-visual, .cert-hero .hero-panel, .cert-hero .hero-panel-card { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Force dark text for readability on the light theme */ .cert-hero .hero-title, .cert-hero .hero-sub, .cert-hero .cadv-meta-pill, .cert-hero .hero-panel-card h3, .cert-hero .hero-panel-card p, .cert-hero .hero-panel-card strong, .cert-hero .hero-panel-label { color: var(--white) !important; text-shadow: none !important; } .cert-hero .hero-title span { background: var(--gradient-text) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* Improve badge for light theme */ .cert-hero .hero-badge { background: rgba(8, 68, 129, 0.08) !important; border: 1px solid rgba(8, 68, 129, 0.2) !important; color: var(--accent-green) !important; } /* Subdued background grid and glow */ .cert-hero .hero-grid { opacity: 0.12 !important; } .cert-hero .hero-glow { opacity: 0.15 !important; } /* ========================================================================== HERO SYSTEM V2 Distinct page-by-page gradients, stronger contrast, transparent copy area ========================================================================== */ .hero, [class*="-hero"] { --hero-veil-left: rgba(10, 19, 36, 0.2); --hero-veil-mid: rgba(11, 22, 42, 0.2); --hero-veil-right: rgba(8, 16, 30, 0.2); --hero-wash-1: rgba(99, 102, 241, 0.22); --hero-wash-2: rgba(45, 212, 191, 0.18); --hero-wash-3: rgba(251, 191, 36, 0.12); --hero-grid-line: rgba(255, 255, 255, 0.08); --hero-glow-main: rgba(96, 165, 250, 0.22); --hero-glow-soft: rgba(45, 212, 191, 0.12); isolation: isolate; } .home-page .hero { --hero-veil-left: rgba(9, 25, 48, 0.2); --hero-veil-mid: rgba(13, 37, 67, 0.2); --hero-veil-right: rgba(9, 19, 34, 0.2); --hero-wash-1: rgba(125, 211, 252, 0.28); --hero-wash-2: rgba(167, 243, 208, 0.2); --hero-wash-3: rgba(244, 114, 182, 0.16); --hero-grid-line: rgba(191, 219, 254, 0.1); --hero-glow-main: rgba(125, 211, 252, 0.26); --hero-glow-soft: rgba(244, 114, 182, 0.14); } .about-hero { --hero-veil-left: rgba(22, 25, 52, 0.2); --hero-veil-mid: rgba(34, 37, 74, 0.2); --hero-veil-right: rgba(16, 19, 38, 0.2); --hero-wash-1: rgba(196, 181, 253, 0.24); --hero-wash-2: rgba(103, 232, 249, 0.18); --hero-wash-3: rgba(251, 191, 114, 0.12); --hero-grid-line: rgba(226, 232, 240, 0.09); --hero-glow-main: rgba(196, 181, 253, 0.24); --hero-glow-soft: rgba(103, 232, 249, 0.12); } .contact-hero { --hero-veil-left: rgba(28, 28, 52, 0.2); --hero-veil-mid: rgba(44, 36, 78, 0.2); --hero-veil-right: rgba(19, 18, 38, 0.2); --hero-wash-1: rgba(253, 186, 116, 0.2); --hero-wash-2: rgba(125, 211, 252, 0.2); --hero-wash-3: rgba(244, 114, 182, 0.14); --hero-grid-line: rgba(255, 255, 255, 0.08); --hero-glow-main: rgba(253, 186, 116, 0.22); --hero-glow-soft: rgba(125, 211, 252, 0.12); } .cyber-hero { --hero-veil-left: rgba(12, 31, 44, 0.2); --hero-veil-mid: rgba(13, 45, 57, 0.2); --hero-veil-right: rgba(11, 26, 38, 0.2); --hero-wash-1: rgba(34, 211, 238, 0.24); --hero-wash-2: rgba(110, 231, 183, 0.16); --hero-wash-3: rgba(129, 140, 248, 0.14); --hero-grid-line: rgba(186, 230, 253, 0.09); --hero-glow-main: rgba(34, 211, 238, 0.24); --hero-glow-soft: rgba(110, 231, 183, 0.12); } .network-hero { --hero-veil-left: rgba(16, 31, 50, 0.2); --hero-veil-mid: rgba(16, 51, 64, 0.2); --hero-veil-right: rgba(11, 25, 36, 0.2); --hero-wash-1: rgba(56, 189, 248, 0.24); --hero-wash-2: rgba(45, 212, 191, 0.18); --hero-wash-3: rgba(168, 85, 247, 0.12); --hero-grid-line: rgba(186, 230, 253, 0.08); --hero-glow-main: rgba(56, 189, 248, 0.24); --hero-glow-soft: rgba(45, 212, 191, 0.12); } .cloud-hero { --hero-veil-left: rgba(15, 32, 58, 0.2); --hero-veil-mid: rgba(18, 48, 80, 0.2); --hero-veil-right: rgba(10, 25, 46, 0.2); --hero-wash-1: rgba(147, 197, 253, 0.24); --hero-wash-2: rgba(103, 232, 249, 0.18); --hero-wash-3: rgba(167, 243, 208, 0.12); --hero-grid-line: rgba(219, 234, 254, 0.08); --hero-glow-main: rgba(125, 211, 252, 0.22); --hero-glow-soft: rgba(103, 232, 249, 0.12); } .devops-hero { --hero-veil-left: rgba(20, 32, 44, 0.2); --hero-veil-mid: rgba(26, 61, 74, 0.2); --hero-veil-right: rgba(13, 28, 37, 0.2); --hero-wash-1: rgba(110, 231, 183, 0.22); --hero-wash-2: rgba(56, 189, 248, 0.18); --hero-wash-3: rgba(250, 204, 21, 0.12); --hero-grid-line: rgba(209, 250, 229, 0.08); --hero-glow-main: rgba(110, 231, 183, 0.22); --hero-glow-soft: rgba(56, 189, 248, 0.12); } .it-hero { --hero-veil-left: rgba(16, 30, 46, 0.2); --hero-veil-mid: rgba(24, 50, 66, 0.2); --hero-veil-right: rgba(12, 24, 35, 0.2); --hero-wash-1: rgba(96, 165, 250, 0.22); --hero-wash-2: rgba(74, 222, 128, 0.16); --hero-wash-3: rgba(250, 204, 21, 0.12); --hero-grid-line: rgba(219, 234, 254, 0.08); --hero-glow-main: rgba(96, 165, 250, 0.22); --hero-glow-soft: rgba(74, 222, 128, 0.12); } .software-hero { --hero-veil-left: rgba(24, 24, 54, 0.2); --hero-veil-mid: rgba(39, 36, 83, 0.2); --hero-veil-right: rgba(18, 18, 45, 0.2); --hero-wash-1: rgba(165, 180, 252, 0.24); --hero-wash-2: rgba(103, 232, 249, 0.18); --hero-wash-3: rgba(216, 180, 254, 0.12); --hero-grid-line: rgba(224, 231, 255, 0.08); --hero-glow-main: rgba(165, 180, 252, 0.24); --hero-glow-soft: rgba(103, 232, 249, 0.12); } .cert-hero { --hero-veil-left: rgba(17, 31, 48, 0.2); --hero-veil-mid: rgba(23, 44, 60, 0.2); --hero-veil-right: rgba(13, 22, 38, 0.2); --hero-wash-1: rgba(103, 232, 249, 0.2); --hero-wash-2: rgba(165, 243, 252, 0.14); --hero-wash-3: rgba(167, 243, 208, 0.12); --hero-grid-line: rgba(224, 242, 254, 0.08); --hero-glow-main: rgba(103, 232, 249, 0.2); --hero-glow-soft: rgba(167, 243, 208, 0.12); } .gdpr-hero { --hero-veil-left: rgba(22, 35, 50, 0.2); --hero-veil-mid: rgba(35, 60, 74, 0.2); --hero-veil-right: rgba(18, 28, 36, 0.2); --hero-wash-1: rgba(134, 239, 172, 0.18); --hero-wash-2: rgba(125, 211, 252, 0.16); --hero-wash-3: rgba(244, 114, 182, 0.1); --hero-grid-line: rgba(220, 252, 231, 0.08); --hero-glow-main: rgba(134, 239, 172, 0.18); --hero-glow-soft: rgba(125, 211, 252, 0.12); } .hipaa-hero { --hero-veil-left: rgba(22, 34, 55, 0.2); --hero-veil-mid: rgba(32, 55, 78, 0.2); --hero-veil-right: rgba(17, 25, 40, 0.2); --hero-wash-1: rgba(125, 211, 252, 0.22); --hero-wash-2: rgba(196, 181, 253, 0.16); --hero-wash-3: rgba(167, 243, 208, 0.1); --hero-grid-line: rgba(224, 242, 254, 0.08); --hero-glow-main: rgba(125, 211, 252, 0.2); --hero-glow-soft: rgba(196, 181, 253, 0.12); } .iso-hero { --hero-veil-left: rgba(18, 30, 50, 0.2); --hero-veil-mid: rgba(25, 45, 74, 0.2); --hero-veil-right: rgba(15, 22, 38, 0.2); --hero-wash-1: rgba(147, 197, 253, 0.2); --hero-wash-2: rgba(103, 232, 249, 0.16); --hero-wash-3: rgba(165, 180, 252, 0.1); --hero-grid-line: rgba(219, 234, 254, 0.08); --hero-glow-main: rgba(147, 197, 253, 0.2); --hero-glow-soft: rgba(103, 232, 249, 0.12); } .pci-hero { --hero-veil-left: rgba(35, 28, 52, 0.2); --hero-veil-mid: rgba(54, 40, 74, 0.2); --hero-veil-right: rgba(22, 18, 34, 0.2); --hero-wash-1: rgba(244, 114, 182, 0.18); --hero-wash-2: rgba(192, 132, 252, 0.14); --hero-wash-3: rgba(125, 211, 252, 0.1); --hero-grid-line: rgba(250, 232, 255, 0.08); --hero-glow-main: rgba(244, 114, 182, 0.18); --hero-glow-soft: rgba(192, 132, 252, 0.12); } .qms-hero { --hero-veil-left: rgba(24, 35, 44, 0.2); --hero-veil-mid: rgba(36, 58, 62, 0.2); --hero-veil-right: rgba(17, 24, 29, 0.2); --hero-wash-1: rgba(110, 231, 183, 0.18); --hero-wash-2: rgba(125, 211, 252, 0.14); --hero-wash-3: rgba(196, 181, 253, 0.1); --hero-grid-line: rgba(220, 252, 231, 0.08); --hero-glow-main: rgba(110, 231, 183, 0.18); --hero-glow-soft: rgba(125, 211, 252, 0.1); } .vciso-hero { --hero-veil-left: rgba(18, 28, 47, 0.2); --hero-veil-mid: rgba(22, 44, 69, 0.2); --hero-veil-right: rgba(13, 20, 36, 0.2); --hero-wash-1: rgba(56, 189, 248, 0.22); --hero-wash-2: rgba(74, 222, 128, 0.14); --hero-wash-3: rgba(253, 186, 116, 0.1); --hero-grid-line: rgba(224, 242, 254, 0.08); --hero-glow-main: rgba(56, 189, 248, 0.22); --hero-glow-soft: rgba(74, 222, 128, 0.1); } .dpdp-hero { --hero-veil-left: rgba(22, 29, 54, 0.2); --hero-veil-mid: rgba(22, 48, 70, 0.2); --hero-veil-right: rgba(13, 20, 34, 0.2); --hero-wash-1: rgba(165, 180, 252, 0.22); --hero-wash-2: rgba(45, 212, 191, 0.16); --hero-wash-3: rgba(125, 211, 252, 0.1); --hero-grid-line: rgba(224, 231, 255, 0.08); --hero-glow-main: rgba(165, 180, 252, 0.2); --hero-glow-soft: rgba(45, 212, 191, 0.1); } .audit-hero { --hero-veil-left: rgba(20, 31, 48, 0.2); --hero-veil-mid: rgba(24, 47, 64, 0.2); --hero-veil-right: rgba(13, 20, 32, 0.2); --hero-wash-1: rgba(125, 211, 252, 0.22); --hero-wash-2: rgba(94, 234, 212, 0.16); --hero-wash-3: rgba(165, 180, 252, 0.1); --hero-grid-line: rgba(224, 242, 254, 0.08); --hero-glow-main: rgba(125, 211, 252, 0.2); --hero-glow-soft: rgba(94, 234, 212, 0.1); } .ot-hero { --hero-veil-left: rgba(13, 28, 43, 0.2); --hero-veil-mid: rgba(15, 50, 64, 0.2); --hero-veil-right: rgba(10, 24, 34, 0.2); --hero-wash-1: rgba(34, 211, 238, 0.24); --hero-wash-2: rgba(56, 189, 248, 0.18); --hero-wash-3: rgba(74, 222, 128, 0.12); --hero-grid-line: rgba(186, 230, 253, 0.08); --hero-glow-main: rgba(34, 211, 238, 0.24); --hero-glow-soft: rgba(74, 222, 128, 0.12); } .hero-video, .hero-image, .ot-hero-img { filter: saturate(1.02) brightness(0.66) contrast(1.05) !important; } .hero-bg, .hero-grid, .hero-glow, body:not(.home-page) .hero .hero-bg, body:not(.home-page) .hero .hero-grid, body:not(.home-page) .hero .hero-glow { display: block !important; } .hero-bg { inset: 0 !important; opacity: 1 !important; z-index: 2 !important; background: linear-gradient(118deg, var(--hero-veil-left) 0%, var(--hero-veil-mid) 42%, var(--hero-veil-right) 74%, rgba(8, 14, 24, 0.2) 100%) !important, radial-gradient(circle at 14% 18%, var(--hero-wash-1) 0%, transparent 28%) !important, radial-gradient(circle at 86% 16%, var(--hero-wash-2) 0%, transparent 22%) !important, radial-gradient(circle at 74% 78%, var(--hero-wash-3) 0%, transparent 26%) !important; } .hero-grid { z-index: 2 !important; background-image: linear-gradient(var(--hero-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px) !important; background-size: 54px 54px !important; opacity: 0.5 !important; mask-image: radial-gradient(ellipse 88% 76% at 52% 46%, black 35%, transparent 100%) !important; } .hero-glow { width: 640px !important; height: 640px !important; top: -8% !important; right: -8% !important; opacity: 0.92 !important; z-index: 2 !important; background: radial-gradient(circle, var(--hero-glow-main) 0%, var(--hero-glow-soft) 40%, transparent 72%) !important; } .hero .container, .hero-shell, .hero-content, .hero-visual { position: relative; z-index: 3; } .hero-shell { align-items: flex-start !important; gap: clamp(1.8rem, 4vw, 3.5rem) !important; } .hero-content, body:not(.home-page) .hero-content, .home-page .hero-content, .cert-hero .hero-content, .cadv-hero .hero-content { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: clamp(0.6rem, 1vw, 1rem) 0 !important; } .hero-media::after, [class*="-hero"] .hero-media::after { content: '\2022'; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-veil-left) 0%, var(--hero-veil-mid) 42%, rgba(8, 14, 24, 0.12) 74%, rgba(8, 14, 24, 0.34) 100%), radial-gradient(circle at 18% 22%, var(--hero-wash-1) 0%, transparent 24%), radial-gradient(circle at 82% 18%, var(--hero-wash-2) 0%, transparent 18%) !important; } .hero-content::before, .hero-content::after { content: '\2022'; position: absolute; pointer-events: none; z-index: -1; } .hero-title, .hero-sub, .hero-panel-card h3, .hero-panel-card p, .hero-panel-label, .hero-panel-link, .hero-badge, .hero-proof-item, .hstat-label, .hstat-num, .ot-title, .ot-sub, .ot-badge, .ot-stat-num, .ot-stat-label, .cadv-meta-pill, .cert-hero .hero-title, .cert-hero .hero-sub, .cert-hero .hero-panel-card h3, .cert-hero .hero-panel-card p, .cert-hero .hero-panel-label { text-shadow: 0 8px 28px rgba(4, 8, 18, 0.5), 0 2px 8px rgba(4, 8, 18, 0.55) !important; } .hero-sub, .ot-sub, .cert-hero .hero-sub { color: rgba(245, 247, 250, 0.96) !important; } .hero-title, .hero-title .line1, .hero-title .line2, .ot-title, .ot-title span { position: relative; z-index: 1; } .hero-title, .ot-title { color: #ffffff !important; } .hero-title .line2, .hero-title span, .ot-title span, .cert-hero .hero-title span, .cadv-hero .hero-title span { background: linear-gradient(135deg, #ffd29f 0%, #ff8f3a 42%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; } .hero-content::before { inset: -7% -6% -10% -3%; border-radius: 36px; background: radial-gradient(circle at 18% 32%, rgba(26, 114, 184, 0.18), transparent 26%), linear-gradient(135deg, rgba(6, 12, 24, 0.2), rgba(6, 12, 24, 0.04)) !important; filter: blur(8px); opacity: 0.98; } .hero-content::after { left: -3%; bottom: -10%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(8, 68, 129, 0.18) 0%, transparent 72%); filter: blur(22px); } .hero-panel-card, .ot-stat, .hstat, .hero-proof-item, .cadv-meta-pill { backdrop-filter: blur(12px) saturate(1.08) !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; } .home-page .hero { background: radial-gradient(circle at 16% 18%, rgba(125, 211, 252, 0.22) 0%, transparent 22%), radial-gradient(circle at 82% 20%, rgba(167, 243, 208, 0.18) 0%, transparent 18%), radial-gradient(circle at 76% 80%, rgba(244, 114, 182, 0.14) 0%, transparent 22%), linear-gradient(135deg, #132640 0%, #23486b 34%, #5f86a3 68%, #102035 100%) !important; } .home-page .hero::before, .home-page .hero::after { content: '\2022'; position: absolute; border-radius: 50%; filter: blur(20px); pointer-events: none; z-index: 1; } .home-page .hero::before { width: 420px; height: 420px; top: 10%; left: -4%; background: radial-gradient(circle, rgba(125, 211, 252, 0.24) 0%, transparent 68%); } .home-page .hero::after { width: 360px; height: 360px; right: 4%; bottom: 6%; background: radial-gradient(circle, rgba(167, 243, 208, 0.18) 0%, transparent 70%); } .contact-hero { background: radial-gradient(circle at 15% 20%, rgba(253, 186, 116, 0.2) 0%, transparent 20%), radial-gradient(circle at 84% 16%, rgba(125, 211, 252, 0.18) 0%, transparent 18%), radial-gradient(circle at 70% 78%, rgba(244, 114, 182, 0.14) 0%, transparent 22%), linear-gradient(135deg, #293554 0%, #44507c 38%, #6c779d 68%, #242d49 100%) !important; } .ot-hero { background: radial-gradient(circle at 14% 18%, rgba(34, 211, 238, 0.18) 0%, transparent 22%), radial-gradient(circle at 82% 16%, rgba(56, 189, 248, 0.16) 0%, transparent 18%), radial-gradient(circle at 74% 82%, rgba(74, 222, 128, 0.12) 0%, transparent 24%), linear-gradient(135deg, #13283a 0%, #1d485a 36%, #2b6678 66%, #0f1f2c 100%) !important; } .home-page .hero-content::before { background: radial-gradient(circle at 18% 30%, rgba(125, 211, 252, 0.16), transparent 28%), radial-gradient(circle at 80% 72%, rgba(167, 243, 208, 0.12), transparent 22%), linear-gradient(135deg, rgba(5, 12, 24, 0.18), rgba(5, 12, 24, 0.03)) !important; } .home-page .hero-partners-marquee { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 18px 40px rgba(5, 12, 24, 0.22) !important; } @media (max-width: 900px) { .hero-media::after, [class*="-hero"] .hero-media::after { background: linear-gradient(180deg, var(--hero-veil-left) 0%, var(--hero-veil-mid) 58%, rgba(8, 14, 24, 0.82) 100%), radial-gradient(circle at 50% 16%, var(--hero-wash-1) 0%, transparent 24%) !important; } .hero-content::before { inset: -6% -4% -7% -4%; } .hero-glow { right: -22% !important; width: 520px !important; height: 520px !important; } } @media (max-width: 640px) { .hero-grid { background-size: 34px 34px !important; opacity: 0.38 !important; } .hero-content::before { inset: -4% -3% -5% -2%; border-radius: 24px; } .hero-content::after { width: 220px; height: 220px; } .hero-shell { gap: 4rem !important; } } /* ========================================================================== HERO VISIBILITY FIXES Final readability and alignment layer for all landing pages ========================================================================== */ .hero, [class*="-hero"] { min-height: max(720px, 86vh) !important; padding-bottom: 0rem !important; } .home-page .hero, .home-page [class*="-hero"] { padding-top: 0px !important; } body:not(.home-page) .hero, body:not(.home-page) [class*="-hero"] { padding-top: 100px !important; } .hero .container, [class*="-hero"] .container { min-height: 100%; } .hero-shell, [class*="-hero"] .hero-shell { grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr) !important; align-items: flex-start !important; } .hero-content, [class*="-hero"] .hero-content { max-width: 720px !important; margin-right: auto !important; } .hero-visual, [class*="-hero"] .hero-visual { width: 100% !important; justify-content: center !important; } .hero-panel, [class*="-hero"] .hero-panel { width: 100% !important; max-width: 430px !important; margin-left: auto !important; } .hero .hero-content::before, [class*="-hero"] .hero-content::before { inset: -8% -6% -10% -3% !important; border-radius: 38px !important; background: linear-gradient(135deg, rgba(7, 13, 26, 0.6), rgba(7, 13, 26, 0.22)) !important, radial-gradient(circle at 16% 28%, rgba(8, 68, 129, 0.18), transparent 26%) !important; filter: blur(10px) !important; } .hero .hero-title, .hero .hero-sub, .hero .hero-badge, .hero .hero-panel-card h3, .hero .hero-panel-card p, .hero .hero-panel-label, .hero .hero-panel-link, .hero .hero-proof-item, .hero .hstat-num, .hero .hstat-label, .ot-hero .ot-title, .ot-hero .ot-sub, .ot-hero .ot-badge, .ot-hero .ot-stat-num, .ot-hero .ot-stat-label { position: relative; z-index: 2; } .hero .hero-title, .hero .hero-badge, .hero .hero-panel-card h3, .hero .hero-panel-label, .hero .hstat-num, .ot-hero .ot-title, .ot-hero .ot-badge, .ot-hero .ot-stat-num { color: #ffffff !important; } .hero .hero-sub, .hero .hero-panel-card p, .hero .hero-panel-link, .hero .hstat-label, .hero .hero-proof-item, .ot-hero .ot-sub, .ot-hero .ot-stat-label { color: rgba(246, 248, 252, 0.96) !important; } .hero .hero-title, .hero .hero-sub, .hero .hero-badge, .hero .hero-panel-card h3, .hero .hero-panel-card p, .hero .hero-panel-label, .hero .hero-panel-link, .hero .hero-proof-item, .hero .hstat-num, .hero .hstat-label, .ot-hero .ot-title, .ot-hero .ot-sub, .ot-hero .ot-badge, .ot-hero .ot-stat-num, .ot-hero .ot-stat-label { text-shadow: 0 10px 32px rgba(3, 7, 18, 0.72), 0 2px 8px rgba(3, 7, 18, 0.8) !important; } .hero .hero-badge, .ot-hero .ot-badge { background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 12px 28px rgba(6, 12, 24, 0.16) !important; } .hero .hero-proof-item, .hero .hstat, .hero .hero-panel-card, .hero .cadv-meta-pill, .ot-hero .ot-stat, .ot-hero .hero-panel-card { background: linear-gradient(180deg, rgba(7, 13, 26, 0.48), rgba(18, 34, 58, 0.2)) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 22px 44px rgba(3, 7, 18, 0.26) !important; } .cyber-hero .hero-media::after, .network-hero .hero-media::after, .cloud-hero .hero-media::after, .devops-hero .hero-media::after, .it-hero .hero-media::after .hero-media::after, .software-hero .hero-media::after, .cert-hero .hero-media::after, .compliance-hero .hero-media::after { background: linear-gradient(90deg, rgba(7, 13, 26, 0.92) 0%, rgba(12, 23, 42, 0.8) 42%, rgba(14, 27, 48, 0.46) 72%, rgba(10, 18, 34, 0.28) 100%), radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.08) 0%, transparent 18%), radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.06) 0%, transparent 16%) !important; } .software-hero .hero-bg .hero-bg, .cloud-hero .hero-bg, .devops-hero .hero-bg, .it-hero .hero-bg, .network-hero .hero-bg, .cyber-hero .hero-bg, .cert-hero .hero-bg, .compliance-hero .hero-bg { opacity: 1 !important; } .software-hero .hero-badge, .software-hero .hero-title, .software-hero .hero-sub, .software-hero .hero-panel-card h3, .software-hero .hero-panel-card p, .software-hero .hero-panel-label, .software-hero .hero-panel-link, .software-hero .sw-chip { color: #ffffff !important; } .software-hero .sw-chip { background: rgba(7, 13, 26, 0.48) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 12px 28px rgba(3, 7, 18, 0.18) !important; } .software-hero .sw-icon-label { background: rgba(8, 68, 129, 0.10) !important; border-color: rgba(45, 155, 78, 0.20) !important; } .cybersecurity-page.compliance-page .hero, .cybersecurity-page.compliance-page .compliance-hero { min-height: max(720px, 86vh) !important; } .ot-hero { min-height: auto !important; height: auto !important; display: block !important; padding-top: clamp(140px, 10vw, 170px) !important; padding-bottom: clamp(50px, 6vw, 80px) !important; } .ot-hero .hero-shell { grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr) !important; align-items: flex-start !important; gap: clamp(2rem, 4vw, 4rem) !important; } .ot-hero .hero-content { max-width: 700px !important; padding-right: 1rem !important; } .ot-hero .hero-visual { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; } .ot-hero .hero-panel { max-width: 420px !important; margin-left: auto !important; } .ot-hero .ot-stats { max-width: 620px !important; } .ot-hero .ot-sub { max-width: 640px !important; } .ot-hero .hero-panel-card h3, .ot-hero .hero-panel-card p, .ot-hero .hero-panel-link, .ot-hero .hero-panel-label { color: #ffffff !important; } @media (max-width: 1100px) { .hero-shell, [class*="-hero"] .hero-shell, .ot-hero .hero-shell { grid-template-columns: 1fr !important; } .hero-panel, [class*="-hero"] .hero-panel, .ot-hero .hero-panel { max-width: 100% !important; margin-left: 0 !important; } .hero-content, [class*="-hero"] .hero-content, .ot-hero .hero-content { max-width: 100% !important; padding-right: 0 !important; } } @media (max-width: 700px) { .hero, [class*="-hero"] { min-height: auto !important; padding-top: 90px !important; padding-bottom: 4rem !important; } .hero .hero-content::before, [class*="-hero"] .hero-content::before { inset: -5% -3% -6% -2% !important; border-radius: 26px !important; } } /* ========================================================================== HERO PANEL TEXT FIXES Strong final override for service, consulting, software, and CERT heroes ========================================================================== */ body:not(.home-page) .hero .hero-title, body:not(.home-page) .hero .hero-badge, body:not(.home-page) .hero .hero-panel-card h3, body:not(.home-page) .hero .hero-panel-card strong, body:not(.home-page) .hero .hero-panel-label, body:not(.home-page) .hero .hstat-num { color: #ffffff !important; text-shadow: 0 10px 30px rgba(3, 7, 18, 0.72), 0 2px 8px rgba(3, 7, 18, 0.78) !important; } body:not(.home-page) .hero .hero-sub, body:not(.home-page) .hero .hero-panel-card p, body:not(.home-page) .hero .hero-panel-link, body:not(.home-page) .hero .hero-proof-item, body:not(.home-page) .hero .hstat-label { color: rgba(245, 247, 252, 0.96) !important; text-shadow: 0 8px 26px rgba(3, 7, 18, 0.66), 0 2px 8px rgba(3, 7, 18, 0.72) !important; } body:not(.home-page) .hero .hero-panel-card, body:not(.home-page) .hero .hstat, body:not(.home-page) .hero .hero-proof-item, body:not(.home-page) .hero .cadv-meta-pill { background: linear-gradient(180deg, rgba(7, 13, 26, 0.5), rgba(17, 32, 54, 0.24)) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 22px 44px rgba(3, 7, 18, 0.26) !important; } body:not(.home-page) .hero .hero-title span, body:not(.home-page) .hero .hero-title .line2 { background: var(--gradient-text) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; text-shadow: none !important; } .about-hero .hero-media::after, .contact-hero .hero-media::after, .cert-hero .hero-media::after, .software-hero .hero-media::after .hero-media::after, .cloud-hero .hero-media::after, .it-hero .hero-media::after, .network-hero .hero-media::after, .cyber-hero .hero-media::after, .devops-hero .hero-media::after, .compliance-hero .hero-media::after { background: linear-gradient(90deg, rgba(6, 12, 24, 0.94) 0%, rgba(10, 20, 38, 0.8) 44%, rgba(11, 23, 42, 0.5) 74%, rgba(8, 16, 32, 0.28) 100%), radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08) 0%, transparent 20%), radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.06) 0%, transparent 18%) !important; } .about-hero .hero-bg, .contact-hero .hero-bg, .cert-hero .hero-bg, .software-hero .hero-bg .hero-bg, .cloud-hero .hero-bg, .it-hero .hero-bg, .network-hero .hero-bg, .cyber-hero .hero-bg, .devops-hero .hero-bg, .compliance-hero .hero-bg { opacity: 1 !important; } .cert-hero { background: radial-gradient(circle at 14% 18%, rgba(125, 211, 252, 0.2) 0%, transparent 20%), radial-gradient(circle at 84% 16%, rgba(167, 243, 208, 0.14) 0%, transparent 18%), radial-gradient(circle at 74% 80%, rgba(253, 186, 116, 0.14) 0%, transparent 22%), linear-gradient(135deg, #15243b 0%, #243f5e 38%, #486a87 68%, #112033 100%) !important; } .cert-hero .hero-shell { grid-template-columns: 1fr 1fr !important; gap: 5rem !important; align-items: flex-start !important; } .cert-hero .hero-content { max-width: 490px !important; } .cert-hero .cadv-hero-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.9rem !important; margin-top: 0.8rem !important; align-items: center !important; height: max-content } .cert-hero .cadv-meta-pill { color: #f7f9fc !important; border-radius: 999px !important; padding: 0.45rem 1.1rem !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; gap: 0.6rem !important; } .cert-hero .hero-panel { max-width: 430px !important; } .cert-hero .hero-panel-card { background: linear-gradient(180deg, rgba(7, 13, 26, 0.58), rgba(17, 32, 54, 0.28)) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 24px 48px rgba(3, 7, 18, 0.28) !important; padding: 1.25rem 1.2rem !important; border-radius: 22px !important; } .cert-hero .hero-panel-card h3, .cert-hero .hero-panel-card p, .cert-hero .hero-panel-card strong, .cert-hero .hero-panel-label, .cert-hero .hero-panel-link, .cert-hero .hero-title, .cert-hero .hero-sub, .cert-hero .hero-badge { color: #ffffff !important; } .cert-hero .hero-title span { background: var(--gradient-text) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .cert-hero .hero-badge { background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } @media (max-width: 1100px) { .cert-hero .hero-shell { grid-template-columns: 1fr !important; } .cert-hero .hero-panel { max-width: 100% !important; } } /* ========================================================================== HERO BUTTON TEXT FIXES ========================================================================== */ .hero .hero-actions .btn, body:not(.home-page) .hero .hero-actions .btn, .cert-hero .hero-actions .btn, .software-hero .hero-actions .btn, .compliance-hero .hero-actions .btn { position: relative !important; z-index: 2 !important; font-weight: 700 !important; text-shadow: none !important; } .hero .hero-actions .btn.btn-primary, body:not(.home-page) .hero .hero-actions .btn.btn-primary, .cert-hero .hero-actions .btn.btn-primary, .software-hero .hero-actions .btn.btn-primary, .compliance-hero .hero-actions .btn.btn-primary { color: #ffffff !important; background: linear-gradient(135deg, #084481 0%, #1A72B8 50%, #2D9B4E 100%) !important; border: 1px solid rgba(45, 155, 78, 0.22) !important; box-shadow: 0 18px 34px rgba(8, 68, 129, 0.28) !important; } .hero .hero-actions .btn.btn-primary:hover, body:not(.home-page) .hero .hero-actions .btn.btn-primary:hover, .cert-hero .hero-actions .btn.btn-primary:hover, .software-hero .hero-actions .btn.btn-primary:hover, .compliance-hero .hero-actions .btn.btn-primary:hover { color: #ffffff !important; background: linear-gradient(135deg, #2D9B4E 0%, #1A72B8 50%, #084481 100%) !important; } .hero .hero-actions .btn.btn-outline, body:not(.home-page) .hero .hero-actions .btn.btn-outline, .cert-hero .hero-actions .btn.btn-outline, .software-hero .hero-actions .btn.btn-outline, .compliance-hero .hero-actions .btn.btn-outline { color: #ffffff !important; background: rgba(7, 13, 26, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.26) !important; box-shadow: 0 16px 30px rgba(3, 7, 18, 0.18) !important; } .hero .hero-actions .btn.btn-outline:hover, body:not(.home-page) .hero .hero-actions .btn.btn-outline:hover, .cert-hero .hero-actions .btn.btn-outline:hover, .software-hero .hero-actions .btn.btn-outline:hover, .compliance-hero .hero-actions .btn.btn-outline:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.38) !important; } .ot-hero .ot-actions .btn-ot, .ot-hero .ot-actions .btn-ot-outline { position: relative !important; z-index: 2 !important; font-weight: 700 !important; text-shadow: none !important; } .ot-hero .ot-actions .btn-ot { color: #ffffff !important; background: linear-gradient(135deg, #084481 0%, #1A72B8 50%, #2D9B4E 100%) !important; border: 1px solid rgba(45, 155, 78, 0.22) !important; } .ot-hero .ot-actions .btn-ot-outline { color: #ffffff !important; background: rgba(7, 13, 26, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.26) !important; } .ot-hero .ot-actions .btn-ot:hover, .ot-hero .ot-actions .btn-ot-outline:hover { color: #ffffff !important; } /* ========================================================================== HOME HERO RESTORE Bring back the homepage video and original CERT panel feel ========================================================================== */ .home-page .hero .hero-video { opacity: 1 !important; filter: saturate(1.15) brightness(0.65) contrast(1.1) !important; } .home-page .hero .hero-bg { background: linear-gradient(112deg, rgba(6, 14, 28, 0.2) 0%, rgba(10, 23, 42, 0.15) 42%, rgba(11, 25, 45, 0.38) 76%, rgba(7, 15, 28, 0.2) 100%) !important, radial-gradient(circle at 18% 20%, rgba(125, 211, 252, 0.16), transparent 24%) !important, radial-gradient(circle at 82% 18%, rgba(167, 243, 208, 0.12), transparent 18%) !important; } .home-page .hero::before, .home-page .hero::after { opacity: 0.8; } .home-page .cert-hero-panel { position: relative; z-index: 3; } .home-page .cert-chart-card, .home-page .cert-insight-card { background: transparent !important; border: none !important; box-shadow: none !important; } .home-page .cert-chart-card h3, .home-page .cert-chart-card p, .home-page .cert-insight-card strong, .home-page .cert-insight-card p, .home-page .cert-update-list, .home-page .hero-panel-label, .home-page .cert-view-all-link, .home-page .cert-more-link { color: #f8fbff !important; } .home-page .cert-view-all-link:hover, .home-page .cert-more-link:hover { color: var(--accent-green) !important; } /* ========================================================================== HOME HERO ALIGNMENT RESTORE Restore the original homepage layout balance ========================================================================== */ .home-page .hero { min-height: calc(100svh - 24px) !important; min-height: calc(100vh - 24px) !important; height: auto !important; max-height: none !important; padding-top: 72px !important; padding-bottom: 2rem !important; display: flex !important; align-items: flex-start !important; overflow: visible !important; } .home-page .hero .container { max-width: 1400px !important; width: 92% !important; margin: 0 auto !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2.5rem !important; box-sizing: border-box !important; } .home-page .hero-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 3.5rem !important; align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; } .home-page .hero-content { max-width: 100% !important; width: 100% !important; margin-right: 0 !important; padding: 3rem 2.5rem !important; border-radius: 24px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .home-page .hero-visual { position: relative !important; align-self: flex-start !important; width: 100% !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding-top: 0 !important; } .home-page .hero-panel.cert-hero-panel { width: 100% !important; max-width: none !important; margin-left: 0 !important; } @media (max-width: 1024px) { .home-page .hero { min-height: auto !important; padding: 110px 0 60px !important; } .home-page .hero-shell { grid-template-columns: 1fr !important; align-items: flex-start !important; } .home-page .hero-visual { margin-top: 1rem !important; } } /* Restore original home CTA button height */ .home-page .consulting-cta-actions .btn, .home-page .consulting-cta-actions .btn-cta-hero { padding: 12px 24px !important; min-height: auto !important; line-height: 1.2 !important; } /* Fix Cert-In button height issue */ .cert-hero .cadv-meta-pill { padding: 6px 14px !important; font-size: 0.82rem !important; line-height: 1.2 !important; height: auto !important; } .cadv-filter-btn { height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-sizing: border-box !important; } .cadv-search { height: 38px !important; box-sizing: border-box !important; } .cadv-card-actions .btn-sm { padding: 8px 16px !important; line-height: 1.2 !important; height: auto !important; } .cert-advisory-cta .btn, .cert-hero .btn { min-height: auto !important; line-height: 1.2 !important; } /* Consolidated compact styles for Cert-In hero meta */ .cert-hero .cadv-hero-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.8rem !important; margin-top: 0.4rem !important; margin-bottom: 0 !important; align-items: center !important; height: auto !important; width: fit-content !important; } .cert-hero .cadv-meta-pill { color: #f7f9fc !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 999px !important; padding: 4px 14px !important; line-height: 1 !important; height: auto !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; font-size: 0.85rem !important; } /* CERT-In Subscribe Modal */ .cert-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .cert-modal-content { background: var(--dark2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 2.5rem; width: 100%; max-width: 480px; position: relative; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); text-align: center; } .cert-modal-close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; color: var(--white); font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; } .cert-modal-close:hover { opacity: 1; } .cert-modal-icon { color: var(--accent-green); margin-bottom: 1rem; display: flex; justify-content: center; } .cert-modal-content h3 { font-size: 1.5rem; color: var(--white); margin-bottom: 0.5rem; } .cert-modal-content p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.5; } .cert-subscribe-form { text-align: left; } .cert-form-group { margin-bottom: 1.2rem; } .cert-form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5rem; } .cert-form-group input { width: 100%; padding: 0.8rem 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: var(--white); font-family: inherit; font-size: 1rem; transition: border-color 0.3s, background 0.3s; } .cert-form-group input:focus { outline: none; border-color: var(--accent-green); background: rgba(255, 255, 255, 0.1); } .cert-modal-note { margin-top: 1.5rem !important; margin-bottom: 0 !important; font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.5) !important; text-align: center; } /* ========================================================================== HOMEPAGE HERO TRANSPARENCY FIX Resolve all conflicting !important backgrounds and borders ========================================================================== */ /* Keep hero shells structure clean while enabling stunning customized cards on the right side */ .home-page .hero-content, .home-page .hero-visual, .home-page .hero-panel { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Remove glow/shadow pseudo-elements around the root panels */ .home-page .hero-content::before, .home-page .hero-content::after { display: none !important; } /* Premium Glassmorphic Theme Restoration for Right-Side Dashboard Cards */ .home-page .cert-chart-card, .home-page .cert-insight-card { background: linear-gradient(135deg, rgba(8, 14, 26, 0.82), rgba(13, 22, 38, 0.72)) !important; border: 1px solid rgba(0, 163, 217, 0.25) !important; border-radius: 20px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; padding: 1.1rem 1.4rem !important; box-sizing: border-box !important; overflow: hidden !important; } .home-page .cert-insight-card { border-left: 3px solid var(--accent-green) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } /* Ensure text remains highly visible on video */ .home-page .hero-content *, .home-page .hero-visual * { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important; } /* Masterfully Optimize Chart Size and Spacing for Total Viewport Immersion */ .home-page .cert-chart-shell { background: transparent !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1.2rem !important; margin-top: 0.4rem !important; } .home-page .cert-chart-copy { flex: 1 1 auto !important; } .home-page .cert-chart-wrap { width: 135px !important; min-width: 135px !important; height: 135px !important; padding: 4px !important; margin: 0 !important; aspect-ratio: 1 !important; display: grid !important; place-items: center !important; } .home-page .cert-chart-wrap canvas { max-width: 125px !important; max-height: 125px !important; } /* Typography Hierarchy Adjustments for Compactness */ .home-page .cert-chart-copy h3 { font-size: 1.1rem !important; line-height: 1.3 !important; margin-bottom: 0.4rem !important; font-weight: 800 !important; color: #ffffff !important; } .home-page .cert-chart-copy p { font-size: 0.85rem !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.72) !important; margin-bottom: 0 !important; } .home-page .cert-insight-card strong { font-size: 1rem !important; color: #ffffff !important; margin: 0.2rem 0 !important; } .home-page .cert-insight-card p, .home-page .cert-update-list li { font-size: 0.8rem !important; line-height: 1.35 !important; color: rgba(255, 255, 255, 0.65) !important; margin-bottom: 0.2rem !important; } /* Arrange Insight Cards Side-by-Side Horizontally to Fit Entire Block in Desktop Viewport */ .home-page .cert-insight-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.8rem !important; width: 100% !important; box-sizing: border-box !important; margin-top: 0 !important; } .home-page .hero-badge { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Subscribe Button matching the panel section width */ .cert-subscribe-btn { width: 100% !important; max-width: none !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 0.6rem !important; font-size: 1.1rem !important; padding: 0.9rem !important; margin-bottom: 0 !important; box-shadow: 0 12px 30px rgba(8, 68, 129, 0.35) !important; border-radius: 16px !important; font-weight: 700 !important; box-sizing: border-box !important; text-transform: none !important; } .home-page .cert-hero-panel { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: none !important; gap: 0.8rem !important; /* Reduced from 1.5rem to pull the entire module cleanly into immediate desktop view */ } /* Homepage, Software Solutions & Cybersecurity Sector Expertise Card Refinements */ .cybersecurity-page .cyber-industries-section .industry-card { position: relative !important; min-height: 240px !important; height: auto !important; padding: 3rem 2.5rem !important; margin-bottom: 20px !important; overflow: hidden !important; background: #05080f !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important; z-index: 1 !important; } .cybersecurity-page .industry-card:hover { transform: translateY(-10px) !important; border-color: var(--cyan) !important; box-shadow: 0 25px 60px rgba(0, 163, 255, 0.25) !important; } .cybersecurity-page .industry-card .svc-bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; opacity: 0.4 !important; /* Increased presence by default */ transition: opacity 0.5s ease !important; } .cybersecurity-page .industry-card:hover .svc-bg { opacity: 0.9 !important; /* Full reveal */ } .cybersecurity-page .industry-card .svc-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: grayscale(100%) brightness(0.7) !important; transform: scale(1.05) !important; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important; } .cybersecurity-page .industry-card:hover .svc-bg img, .cybersecurity-page .industry-card:hover .sw-bg-animate { filter: blur(0) grayscale(0%) brightness(0.9) !important; transform: scale(1.02) !important; } .cybersecurity-page .industry-card .svc-overlay { position: absolute !important; inset: 0 !important; z-index: 2 !important; background: linear-gradient(to top, rgba(5, 8, 15, 0.95) 0%, rgba(5, 8, 15, 0.4) 60%, transparent 100%) !important; opacity: 0.6 !important; /* Higher default contrast */ transition: opacity 0.4s ease !important; } .cybersecurity-page .industry-card:hover .svc-overlay { opacity: 1 !important; } /* Icons and Badges */ .cybersecurity-page .industry-card .industry-icon { font-size: 2.8rem !important; color: var(--cyan) !important; margin-bottom: 2.5rem !important; position: relative !important; z-index: 10 !important; transition: all 0.4s ease !important; text-shadow: 0 0 20px rgba(0, 163, 255, 0.3) !important; } .cybersecurity-page .industry-card:hover .industry-icon { transform: scale(1.1) rotate(-5deg) !important; text-shadow: 0 0 30px var(--cyan) !important; } .cybersecurity-page .industry-card .industry-badge { position: absolute !important; top: 1.5rem !important; right: 1.5rem !important; font-family: 'Syne', sans-serif !important; font-size: 0.8rem !important; font-weight: 800 !important; color: #fff !important; background: rgba(0, 163, 255, 0.2) !important; padding: 0.4rem 0.8rem !important; border-radius: 6px !important; border: 1px solid rgba(0, 163, 255, 0.3) !important; z-index: 10 !important; letter-spacing: 1px !important; } /* Content */ .cybersecurity-page .industry-card .industry-info { position: relative !important; z-index: 10 !important; } .cybersecurity-page .industry-card h3 { font-size: 1.6rem !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 1rem !important; letter-spacing: -0.5px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important; } .cybersecurity-page .industry-card p { font-size: 0.95rem !important; color: rgba(255, 255, 255, 0.8) !important; line-height: 1.6 !important; margin: 0 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9) !important; } /* Scanning Line */ .cybersecurity-page .industry-card .card-scanning-bar { position: absolute !important; top: -100% !important; left: 0 !important; width: 100% !important; height: 100px !important; background: linear-gradient(180deg, transparent, rgba(0, 163, 255, 0.15), transparent) !important; border-bottom: 2px solid var(--cyan) !important; z-index: 5 !important; pointer-events: none !important; } .industry-card:hover .card-scanning-bar, .cyber-service-card:hover .card-scanning-bar, .bento-card:hover .card-scanning-bar { animation: industryScan 2.5s ease-in-out infinite !important; } @media (max-width: 768px) { .cyber-industries-grid, .cyber-services-grid, .cyber-bento-grid { grid-template-columns: 1fr !important; gap: 30px !important; } } .home-page .service-card:hover .svc-content, .why-card:hover .why-content, .cyber-problem-card:hover .svc-content, .it-service-card:hover .svc-content { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 12px rgba(0, 0, 0, 0.8) !important; } /* Also apply to consulting cards for consistency */ .home-page .consulting-card .svc-bg { z-index: 1 !important; } .home-page .consulting-card .svc-overlay { z-index: 2 !important; } .home-page .consulting-card .svc-content { z-index: 3 !important; } /* Universal White Text Override for all Card Typography */ [class*="industry-card"] h3, [class*="industry-card"] p, [class*="industry-card"] a, [class*="industry-card"] .svc-link, [class*="consulting-card"] h3, [class*="consulting-card"] p, [class*="consulting-card"] a, [class*="consulting-card"] .svc-link, [class*="service-card"] h3, [class*="service-card"] p, [class*="service-card"] a, [class*="service-card"] .svc-link, .why-card h3, .why-card p, .why-card a, .cyber-problem-card h3, .cyber-problem-card p, .it-service-card h3, .it-service-card p { color: #ffffff !important; } /* Enforce pristine high-visibility white color on all card icons site-wide */ [class*="industry-card"] [class*="icon"], [class*="consulting-card"] [class*="icon"], [class*="service-card"] [class*="icon"], .why-card [class*="icon"], .cyber-problem-card [class*="icon"], .it-service-card [class*="icon"] { color: #ffffff !important; } .home-page .consulting-card:hover .svc-bg, .home-page .industry-card:hover .svc-bg, .home-page .industry-card:hover { transform: none !important; } .home-page .consulting-card:hover .svc-overlay { clip-path: inset(0 0 0 0); } .home-page .industry-card .svc-overlay { clip-path: inset(calc(100% - 105px) 0 0 0) !important; transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important; background: linear-gradient(180deg, rgba(7, 13, 26, 0.4) 0%, rgba(7, 13, 26, 0.95) 100%) !important; } .home-page .industry-card:hover .svc-overlay { clip-path: inset(0 0 0 0) !important; } .home-page .consulting-card .consulting-card-icon { margin-bottom: 1rem; } .home-page .consulting-card h3 { margin-bottom: 0.5rem; transition: none; } .home-page .consulting-card .svc-bg img { width: 115% !important; height: 115% !important; object-fit: cover !important; max-width: none !important; left: -7.5% !important; top: -7.5% !important; opacity: 0.35 !important; filter: grayscale(20%) brightness(0.65) !important; transform: scale(1.08) !important; transition: all 0.7s ease !important; } /* Unified in preceding hover block */ .home-page .consulting-card p { opacity: 1; transform: none; max-height: none; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.8); } .home-page .consulting-card .svc-link { opacity: 1; transform: none; margin-top: auto; } .home-page .industry-card .svc-content { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .home-page .industry-card:hover .svc-content { transform: none; } .home-page .industry-card .industry-icon { font-size: 1.5rem; font-weight: 800; color: var(--accent-green); margin-bottom: 0.5rem; } .home-page .industry-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; } .home-page .industry-card p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); opacity: 0; transform: translateY(10px); margin-bottom: 0.8rem; line-height: 1.5; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .home-page .industry-card:hover p { opacity: 1; transform: translateY(0); } .home-page .industry-card .svc-link { font-size: 0.75rem; margin-top: 1rem; opacity: 0; transform: translateY(18px); transition: opacity 0.35s ease 0.12s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s; } .home-page .industry-card:hover .svc-link { opacity: 1; transform: translateY(0); } /* Restoring Section Layout Fixes */ .home-page .cyber-industries-section, .sw-page .cyber-industries-section, .cybersecurity-page .cyber-industries-section { padding: clamp(5rem, 10vw, 7.5rem) 0 !important; margin: 40px 0 !important; clear: both !important; position: relative !important; z-index: 5 !important; background: #070d1a !important; } .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid, .cybersecurity-page .cyber-industries-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; max-width: 1200px !important; margin: 5rem auto 0 !important; } @media (max-width: 1024px) { .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid, .cybersecurity-page .cyber-industries-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid, .cybersecurity-page .cyber-industries-grid { grid-template-columns: 1fr !important; } .home-page .industry-card { height: 255px !important; padding: 1.5rem !important; border-radius: 24px !important; } } .home-page .cyber-industries-section .section-label, .sw-page .cyber-industries-section .section-label { display: inline-flex !important; padding: 8px 24px !important; background: rgba(8, 68, 129, 0.10) !important; color: var(--accent-green) !important; border-radius: 50px !important; margin-bottom: 20px !important; font-size: 1.6rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* Optimizing for 5+ Cards */ .home-page .cyber-industries-section, .sw-page .cyber-industries-section { padding: clamp(5rem, 10vw, 7.5rem) clamp(1rem, 4vw, 2.5rem) !important; margin: 0 !important; } .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid, .cybersecurity-page .cyber-industries-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 72px 40px !important; /* Large vertical gap, standard horizontal gap */ max-width: 1400px !important; margin: 0 auto !important; } @media (max-width: 1200px) { .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid, .cybersecurity-page .cyber-industries-grid { grid-template-columns: repeat(3, 1fr) !important; justify-content: center !important; } } @media (max-width: 900px) { .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid, .cybersecurity-page .cyber-industries-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .home-page .cyber-industries-grid, .sw-page .cyber-industries-grid, .cybersecurity-page .cyber-industries-grid { grid-template-columns: 1fr !important; } } /* Making Background Images Clearer */ .home-page .cyber-industries-section .ind-card-bg, .sw-page .cyber-industries-section .ind-card-bg { opacity: 0.85 !important; filter: brightness(0.9) contrast(1.1) !important; } .home-page .cyber-industries-section .ind-card-overlay, .sw-page .cyber-industries-section .ind-card-overlay { background: linear-gradient(to top, rgba(7, 13, 26, 0.85) 0%, rgba(7, 13, 26, 0.2) 60%, rgba(7, 13, 26, 0.05) 100%) !important; } .home-page .cyber-industries-section .industry-card:hover .ind-card-bg, .sw-page .cyber-industries-section .industry-card:hover .ind-card-bg { opacity: 1 !important; filter: blur(8px) brightness(0.8) !important; transform: none !important; } /* Static Background and Full Visibility */ .home-page .cyber-industries-section .ind-card-bg, .sw-page .cyber-industries-section .ind-card-bg { transform: none !important; transition: filter 0.6s ease, opacity 0.6s ease !important; } .home-page .cyber-industries-section .industry-card:hover .ind-card-overlay, .sw-page .cyber-industries-section .industry-card:hover .ind-card-overlay { opacity: 0.3 !important; /* Make overlay almost vanish on hover */ background: linear-gradient(to top, rgba(7, 13, 26, 0.6) 0%, transparent 100%) !important; } /* Adding Contextual Background to Industries Section */ .home-page .cyber-industries-section, .sw-page .cyber-industries-section, .cybersecurity-page .cyber-industries-section { background-image: linear-gradient(rgba(7, 13, 26, 0.92), rgba(7, 13, 26, 0.92)), url('net_sdwan_infographic.png') !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; position: relative !important; } .home-page .cyber-industries-section::before, .sw-page .cyber-industries-section::before, .cybersecurity-page .cyber-industries-section::before { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(8, 68, 129, 0.06), transparent 70%); pointer-events: none; z-index: 1; } /* Global Contact Section Visibility Fixes - Consolidated with main styles above */ /* About page: journey flow (image-matched structure) */ .about-page .timeline-section { background-image: linear-gradient(to bottom, rgba(7, 13, 26, 0.94), rgba(7, 13, 26, 0.88)), url('services_images/journey_flow_bg.png') !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; position: relative; } .about-page .timeline-flow { margin-top: 3rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .about-page .timeline-flow-card { position: relative; border-radius: 24px; padding: 2.2rem 1.2rem 1.6rem; min-height: 310px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); overflow: hidden; background: rgba(12, 21, 36, 0.85) !important; border: 1px solid rgba(0, 163, 217, 0.25); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .about-page .timeline-flow-card:hover { transform: translateY(-10px); border-color: rgba(0, 163, 217, 0.8); box-shadow: 0 20px 40px rgba(0, 163, 217, 0.2); } .about-page .timeline-flow-card:nth-child(even) { border-color: rgba(45, 155, 78, 0.25); } .about-page .timeline-flow-card:nth-child(even):hover { border-color: rgba(45, 155, 78, 0.8); box-shadow: 0 20px 40px rgba(45, 155, 78, 0.2); } .about-page .timeline-flow-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; } .about-page .timeline-flow-bubble { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(0, 163, 217, 0.5); background: linear-gradient(135deg, rgba(0, 163, 217, 0.2), rgba(0, 163, 217, 0.05)); color: #ffffff !important; font-family: 'Manrope', sans-serif; font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 163, 217, 0.3); transition: all 0.5s ease; z-index: 2; backdrop-filter: blur(4px); } .about-page .timeline-flow-card:hover .timeline-flow-bubble { transform: translate(-50%, -50%) scale(1.1); border-color: #00A3D9; background: linear-gradient(135deg, #00A3D9, #005577); box-shadow: 0 0 30px rgba(0, 163, 217, 0.6); } .about-page .timeline-flow-card:nth-child(even) .timeline-flow-bubble { border-color: rgba(45, 155, 78, 0.5); background: linear-gradient(135deg, rgba(45, 155, 78, 0.2), rgba(45, 155, 78, 0.05)); box-shadow: 0 0 20px rgba(45, 155, 78, 0.3); } .about-page .timeline-flow-card:nth-child(even):hover .timeline-flow-bubble { border-color: #2D9B4E; background: linear-gradient(135deg, #2D9B4E, #005522); box-shadow: 0 0 30px rgba(45, 155, 78, 0.6); } .about-page .timeline-flow-body { position: relative; z-index: 1; text-align: center; color: #ffffff !important; } .about-page .timeline-flow-body h4 { margin: 0 0 0.6rem; font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 800; line-height: 1.3; color: #ffffff !important; } .about-page .timeline-flow-body p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: #ffffff !important; } @media (max-width: 1100px) { .about-page .timeline-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .about-page .timeline-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-page .timeline-flow-card { min-height: 240px; } .about-page .timeline-flow-bubble { width: 84px; height: 84px; font-size: 1.8rem; } } @media (max-width: 560px) { .about-page .timeline-flow { grid-template-columns: 1fr; } } /* ========================================================================== AI SOFTWARE SOLUTIONS HERO BACKGROUND ANIMATION ========================================================================== */ .sw-bg-animate { animation: swKenBurns 25s ease-in-out infinite alternate; width: 110% !important; /* Extra width for panning */ height: 110% !important; left: -5% !important; top: -5% !important; object-fit: cover; position: absolute; filter: saturate(1.2) brightness(0.7) contrast(1.1) !important; } @keyframes swKenBurns { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.08) translate(-2%, -2%); } 100% { transform: scale(1.04) translate(2%, 1%); } } /* Ensure software hero layout is balanced */ .software-hero .hero-visual { max-width: 580px; margin-left: auto; } @media (max-width: 991px) { .software-hero .hero-visual { margin: 2rem auto 0; max-width: 100%; } } /* ========================================================================== UNIFIED INDUSTRY SECTION SYNC (Across All Landing Pages) Ensures perfect parity in size, shape, and premium hover effects ========================================================================== */ /* 1. Master Card Structure & Sizing */ [class*="industry-card"], .industry-card { position: relative !important; height: 200px !important; padding: 1.75rem !important; border-radius: 24px !important; overflow: hidden !important; background: #0a0f1d !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; transform: none !important; transition: border-color 0.4s ease, box-shadow 0.4s ease !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important; margin-bottom: 0 !important; } /* 2. Unified Grid Gaps */ .cyber-industries-grid, .sw-services-grid, .it-industries-grid, .ot-ind-grid, .devops-industries-grid, .network-services-grid, .cloud-industries-grid, .industries-grid { display: grid !important; row-gap: 72px !important; column-gap: 40px !important; } /* 3. Unified Background Images (ind-card-bg, svc-bg, sw-bg-animate) */ [class*="industry-card"] .svc-bg, [class*="industry-card"] .ind-card-bg, [class*="industry-card"] .sw-bg-animate, [class*="industry-card"]>img:first-child { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 1 !important; filter: brightness(0.9) contrast(1.1) !important; transition: filter 0.6s ease, opacity 0.6s ease !important; transform: none !important; z-index: 0 !important; } /* 4. Unified Overlays */ [class*="industry-card"] .svc-overlay, [class*="industry-card"] .ind-card-overlay, [class*="industry-card"]::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(7, 13, 26, 0.95) 0%, rgba(7, 13, 26, 0.2) 60%) !important; transition: opacity 0.5s ease !important; z-index: 1 !important; } /* 5. Master Hover Logic (Stationary Blur & Reveal) */ [class*="industry-card"]:hover, .industry-card:hover { transform: none !important; border-color: var(--accent-green) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important; } [class*="industry-card"]:hover .svc-bg, [class*="industry-card"]:hover .ind-card-bg, [class*="industry-card"]:hover .sw-bg-animate, [class*="industry-card"]:hover>img:first-child { opacity: 1 !important; filter: blur(8px) brightness(0.7) !important; transform: none !important; } [class*="industry-card"]:hover .svc-overlay, [class*="industry-card"]:hover .ind-card-overlay { opacity: 0.3 !important; } /* 6. Content Alignment & Text Reveals */ [class*="industry-card"] .svc-content, [class*="industry-card"] h3, .industry-card h3 { position: relative !important; z-index: 5 !important; color: #fff !important; margin: 0 !important; font-size: 1.4rem !important; font-weight: 700 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important; } /* --- Responsive Section Spacing --- */ .cyber-section-polish { margin-top: 10rem !important; } @media (max-width: 991px) { .cyber-section-polish { margin-top: 7rem !important; } } @media (max-width: 768px) { .cyber-section-polish { margin-top: 5rem !important; } } @media (max-width: 480px) { .hero-title .line1, .hero-title .line2 { font-size: 2.8rem !important; line-height: 1.1 !important; } } [class*="industry-card"] .step-content, [class*="industry-card"] .it-service-content { position: relative !important; z-index: 5 !important; width: 100% !important; } [class*="industry-card"] p { font-size: 0.82rem !important; color: rgba(255, 255, 255, 0.9) !important; opacity: 0 !important; transform: translateY(10px) !important; margin-top: 0.5rem !important; line-height: 1.5 !important; transition: opacity 0.4s ease, transform 0.4s ease !important; } [class*="industry-card"]:hover p { opacity: 1 !important; transform: translateY(0) !important; } /* 7. Mobile Overrides */ @media (max-width: 600px) { [class*="industry-card"], .industry-card { height: 200px !important; padding: 1.5rem !important; } } /* ========================================================================== PREMIUM AI ADVANTAGE SECTION REDESIGN ========================================================================== */ .cyber-ai-advantage-section { position: relative; overflow: hidden; background: #070d1a !important; padding: 8rem 0 !important; } .ai-usp-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; margin: 0 !important; flex-direction: unset !important; } .ai-usp-card { position: relative !important; overflow: hidden !important; display: flex !important; align-items: flex-start !important; gap: 1.5rem !important; padding: 2.2rem !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; z-index: 1 !important; } .ai-usp-card .svc-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -2 !important; opacity: 0.6 !important; /* Visible but subtle by default */ transition: all 0.5s ease !important; filter: blur(10px) !important; /* Blurred by default */ } .ai-usp-card .svc-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(135deg, rgba(7, 13, 26, 0.95), rgba(7, 13, 26, 0.8)) !important; z-index: -1 !important; transition: all 0.5s ease !important; } .ai-usp-card:hover .svc-bg { opacity: 1 !important; filter: blur(0px) !important; /* Reveal on hover */ transform: scale(1.05) !important; } .ai-usp-card:hover .svc-overlay { background: linear-gradient(135deg, rgba(7, 13, 26, 0.8), rgba(7, 13, 26, 0.6)) !important; } .premium-glass { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; border-radius: 20px !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; } .ai-usp-card:hover { transform: translateY(-8px) scale(1.02) !important; background: rgba(255, 255, 255, 0.08) !important; border-color: var(--cyan) !important; box-shadow: 0 15px 45px rgba(0, 163, 255, 0.2) !important; } .usp-icon-box { flex-shrink: 0; width: 56px; height: 56px; background: linear-gradient(135deg, var(--blue), var(--cyan)); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(0, 163, 255, 0.3); } .ai-core-visual-wrapper { position: relative; display: flex; justify-content: center; align-items: center; padding: 2rem; } .ai-core-img { width: 100%; max-width: 500px; z-index: 2; filter: drop-shadow(0 0 50px rgba(0, 163, 255, 0.4)); } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-25px); } 100% { transform: translateY(0px); } } .floating-anim { animation: floating 5s ease-in-out infinite; } .ai-core-glow-pulsar { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, var(--blue) 0%, transparent 70%); opacity: 0.3; filter: blur(80px); animation: pulsar 4s ease-in-out infinite; z-index: 1; } @keyframes pulsar { 0% { transform: scale(0.85); opacity: 0.2; } 50% { transform: scale(1.3); opacity: 0.5; } 100% { transform: scale(0.85); opacity: 0.2; } } @media (max-width: 1200px) { .ai-usp-grid { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { .cyber-ai-advantage-section { padding: 5rem 0 !important; } .ai-core-img { max-width: 320px; } .ai-usp-card { padding: 1.5rem !important; } } /* ========================================================================== CREATIVE PROCESS SECTION (NEURAL ROADMAP) ========================================================================== */ .cyber-process-section { padding: 10rem 0 !important; background: #05080f !important; position: relative; overflow: hidden; } .cyber-process-steps-wrapper { position: relative; margin-top: 5rem; } .process-connecting-line { position: absolute; top: 30px; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 50%, var(--blue) 100%); opacity: 0.2; z-index: 1; } .cyber-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; z-index: 2; } .process-node-card { position: relative; text-align: center; height: 100%; } .step-badge { width: 60px; height: 60px; background: #0a101f; border: 2px solid var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 3rem; font-weight: 800; font-size: 1.2rem; color: var(--cyan); box-shadow: 0 0 20px rgba(0, 163, 255, 0.4); position: relative; z-index: 3; transition: all 0.4s ease; } .process-node-card:hover .step-badge { transform: scale(1.15); background: var(--blue); color: white; box-shadow: 0 0 30px var(--blue); } .process-card-inner.premium-glass { background: transparent !important; /* Allow svc-bg to show through */ border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; } .process-card-inner { position: relative !important; overflow: hidden !important; padding: 2.5rem 1.8rem; border-radius: 24px !important; text-align: left; height: auto; min-height: 280px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; z-index: 1 !important; } .process-icon-box { width: 54px; height: 54px; background: rgba(255, 255, 255, 0.05); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; color: var(--cyan); font-size: 1.4rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; position: relative; z-index: 2; } .process-text { position: relative; z-index: 2; } .process-node-card:hover .process-icon-box { background: var(--blue); color: white; transform: rotate(10deg); } .process-node-card:hover .process-card-inner { transform: translateY(-12px); } .process-card-inner .svc-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -2 !important; opacity: 0.5 !important; /* Visible but subtle by default */ transition: all 0.6s ease !important; filter: blur(8px) brightness(0.4); } .process-node-card:hover .svc-bg { opacity: 1 !important; filter: blur(0px) brightness(0.6); transform: scale(1.1); } .process-card-inner .svc-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(135deg, rgba(7, 13, 26, 0.9), rgba(7, 13, 26, 0.75)) !important; z-index: -1 !important; transition: all 0.5s ease !important; } .process-node-card:hover .svc-overlay { background: linear-gradient(135deg, rgba(7, 13, 26, 0.75), rgba(7, 13, 26, 0.5)) !important; } .process-text h3 { font-size: 1.5rem; margin-bottom: 1rem; color: white; } .process-text p { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0; } @media (max-width: 1100px) { .cyber-process-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } .process-connecting-line { display: none; } } @media (max-width: 600px) { .cyber-process-grid { grid-template-columns: 1fr; } .process-card-inner { min-height: auto; } } /* ========================================================================== CYBER SERVICE CARDS ENHANCEMENT ========================================================================== */ .cyber-services-section { padding: 10rem 0 !important; /* Significant vertical spacing */ background: #0a101f !important; position: relative; } .cybersecurity-page .cyber-services-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2.5rem !important; row-gap: 4rem !important; /* Explicit vertical space between rows */ margin-top: 5rem !important; } .cyber-service-card { position: relative !important; overflow: hidden !important; background: rgba(10, 15, 29, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 28px !important; padding: 2.5rem 2rem !important; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important; z-index: 1 !important; height: 420px !important; /* Increased height for better proportions */ display: flex !important; flex-direction: column !important; justify-content: flex-start !important; /* Top-down flow for perfect alignment */ text-align: left !important; backdrop-filter: blur(10px) !important; } .cyber-service-card .svc-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: -2 !important; opacity: 1 !important; object-fit: cover !important; filter: brightness(0.85) contrast(1.1) !important; transition: all 0.6s ease !important; } .cyber-service-card:hover .svc-bg { filter: blur(8px) brightness(0.6) !important; /* Stationary blur reveal like industry cards */ transform: scale(1.05) !important; } .cyber-service-card .svc-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(7, 13, 26, 0.4) 0%, rgba(7, 13, 26, 0.9) 100%) !important; z-index: -1 !important; transition: all 0.5s ease !important; } .cyber-service-card:hover .svc-overlay { background: linear-gradient(180deg, rgba(7, 13, 26, 0.2) 0%, rgba(7, 13, 26, 0.7) 100%) !important; } .cyber-service-card:hover { border-color: var(--blue) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; } .cyber-service-card h3 { position: relative !important; z-index: 5 !important; color: white !important; margin-bottom: 1.2rem !important; font-size: 1.4rem !important; font-weight: 700 !important; line-height: 1.3 !important; min-height: 3.6rem !important; /* Ensures titles align perfectly across all cards */ display: flex !important; align-items: center !important; transition: all 0.4s ease !important; } .cyber-service-card:hover h3 { color: var(--cyan) !important; transform: translateY(-2px) !important; } .cyber-service-card p { position: relative !important; z-index: 5 !important; color: rgba(255, 255, 255, 0.7) !important; font-size: 0.9rem !important; line-height: 1.6 !important; margin: 0 !important; /* Text reveal logic: more subtle by default, fully clear on hover */ opacity: 0.8 !important; transform: translateY(0) !important; transition: all 0.4s ease !important; } .cyber-service-card:hover p { opacity: 1 !important; color: rgba(255, 255, 255, 1) !important; } .cyber-service-icon { position: relative !important; z-index: 5 !important; width: 56px !important; height: 56px !important; background: rgba(0, 163, 255, 0.1) !important; border: 1px solid rgba(0, 163, 255, 0.2) !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 2rem !important; /* Fixed spacing for perfect alignment */ color: var(--cyan) !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; } .cyber-service-card:hover .cyber-service-icon { background: var(--blue) !important; border-color: var(--cyan) !important; color: white !important; transform: scale(1.1) rotate(5deg) !important; box-shadow: 0 0 20px rgba(0, 163, 255, 0.4) !important; } @media (max-width: 1200px) { .cybersecurity-page .cyber-services-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .cybersecurity-page .cyber-services-grid { grid-template-columns: 1fr !important; } .cyber-service-card { height: 350px !important; } } /* ========================================================================== CYBER HERO PANEL CARD ENHANCEMENT ========================================================================== */ .cyber-hero .hero-panel-card { position: relative !important; overflow: hidden !important; background: rgba(7, 13, 26, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; z-index: 1 !important; transition: all 0.4s ease !important; } .cyber-hero .hero-panel-card .svc-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -2 !important; opacity: 0.5 !important; filter: blur(8px) !important; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .cyber-hero .hero-panel-card:hover .svc-bg { opacity: 0.9 !important; filter: blur(0px) !important; transform: scale(1.1) !important; } .cyber-hero .hero-panel-card .svc-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(180deg, rgba(7, 13, 26, 0.85), rgba(7, 13, 26, 0.65)) !important; z-index: -1 !important; } .cyber-hero .hero-panel-card:hover { border-color: var(--cyan) !important; box-shadow: 0 0 30px rgba(0, 163, 255, 0.2) !important; } /* ========================================================================== AI INTELLIGENCE MATRIX REDESIGN ========================================================================== */ .cyber-ai-section { padding: 10rem 0 !important; background: #05080f !important; position: relative; overflow: hidden; } .ai-intelligence-stack { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; } .ai-intel-card { background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--blue); padding: 1.5rem; border-radius: 0 16px 16px 0; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .ai-intel-card:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(10px); } .ai-intel-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; color: var(--cyan); font-weight: 700; font-size: 1.1rem; } .ai-intel-card p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.5; margin: 0; } .cyber-ai-matrix-wrapper { position: relative; display: flex; align-items: center; justify-content: center; } .ai-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; width: 100%; position: relative; z-index: 5; } .ai-matrix-card { position: relative; padding: 2.2rem 1.8rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .ai-matrix-card:hover { transform: translateY(-8px); border-color: var(--cyan) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 15px 40px rgba(0, 163, 255, 0.2) !important; } .matrix-status { position: absolute; top: 1rem; right: 1.2rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--cyan); display: flex; align-items: center; gap: 0.5rem; opacity: 0.8; } .pulse-dot { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); animation: miniPulse 2s infinite; } @keyframes miniPulse { 0% { transform: scale(0.9); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.6; } } .matrix-icon { font-size: 2.2rem; color: var(--blue); margin-bottom: 1.5rem; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .ai-matrix-card:hover .matrix-icon { color: var(--cyan); transform: scale(1.1); } .matrix-info strong { display: block; color: white; font-size: 1rem; margin-bottom: 0.5rem; } .matrix-info p { color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; line-height: 1.5; margin: 0; } .matrix-scanner { position: absolute; top: -100%; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, transparent, rgba(0, 163, 255, 0.08), transparent); animation: scanLine 4s linear infinite; pointer-events: none; } @keyframes scanLine { 0% { top: -100%; } 100% { top: 200%; } } .ai-matrix-glow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0, 163, 255, 0.15) 0%, transparent 70%); filter: blur(50px); z-index: 0; } @media (max-width: 1100px) { .cyber-ai-grid { grid-template-columns: 1fr !important; gap: 4rem; } } @media (max-width: 650px) { .ai-matrix-grid { grid-template-columns: 1fr; } } /* ========================================================================== MAGNETIC TECH CLOUD REDESIGN ========================================================================== */ .cyber-tools-section { padding: 10rem 0 !important; background: #05080f !important; position: relative; } .tech-cloud-wrapper { max-width: 1200px; margin: 0 auto; } .tech-cloud-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 5rem; max-width: 1200px; margin-left: auto; margin-right: auto; perspective: 1200px; position: relative; /* Spotlight effect variables */ --mouse-x: 50%; --mouse-y: 50%; } .tech-cloud-grid::before { content: '\2022'; position: absolute; inset: -100px; background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(0, 163, 255, 0.12) 0%, transparent 50%); pointer-events: none; z-index: 0; transition: opacity 0.3s ease; opacity: 0; } .tech-cloud-grid:hover::before { opacity: 1; } .tech-pill { padding: 1rem 1.8rem; display: flex; align-items: center; gap: 1rem; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08) !important; transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; cursor: pointer; position: relative; z-index: 1; transform-style: preserve-3d; will-change: transform; } .tech-pill i { color: var(--cyan); font-size: 1.2rem; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .tech-pill span { color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 1.05rem; } /* Magnetic Interaction */ .tech-pill:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: var(--cyan) !important; z-index: 10; box-shadow: 0 15px 35px rgba(0, 163, 255, 0.3) !important; } .tech-pill:hover i { transform: scale(1.2); color: white; } .tech-pill:hover span { color: white; } /* Add a subtle glow behind each pill on hover */ .tech-pill::after { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 163, 255, 0.2), transparent 70%); opacity: 0; transition: opacity 0.4s ease; z-index: -1; border-radius: inherit; } .tech-pill:hover::after { opacity: 1; } @media (max-width: 768px) { .tech-cloud-grid { gap: 1rem; } .tech-pill { padding: 0.8rem 1.2rem; font-size: 0.9rem; } } /* ========================================================================== WHY CHOOSE VEDTAM GRID REDESIGN ========================================================================== */ .cyber-why-section { padding: 10rem 0 !important; background: #05080f !important; position: relative; overflow: hidden; } /* ========================================================================== CYBER-FRAME BENTO GRID REDESIGN ========================================================================== */ .cyber-why-section { padding: 10rem 0 !important; background: #05080f !important; position: relative; overflow: hidden; } /* Background Matrix Decorative */ .cyber-why-section::after { content: '\2022'; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(0, 163, 255, 0.05) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(45, 155, 78, 0.05) 0%, transparent 40%); pointer-events: none; z-index: 1; } .cyber-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); gap: 1.5rem; margin-top: 5rem; position: relative; z-index: 2; } .bento-card { position: relative; background: rgba(10, 15, 29, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 2.2rem; overflow: hidden; display: flex; flex-direction: column; justify-content: center; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Cyber Clipping */ clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); } .bento-card.card-large { grid-row: span 2; grid-column: span 1; background: linear-gradient(135deg, rgba(8, 68, 129, 0.1), rgba(10, 15, 29, 0.6)) !important; } .bento-card.card-medium-h { grid-column: span 2; } .bento-card:hover { transform: translateY(-5px) scale(1.01); background: rgba(255, 255, 255, 0.08) !important; border-color: var(--cyan) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .bento-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; } .card-medium-h .bento-inner { flex-direction: row; align-items: center; gap: 2rem; } .bento-icon { font-size: 2.2rem; color: var(--cyan); margin-bottom: 0.5rem; transition: transform 0.4s ease; } .bento-card:hover .bento-icon { transform: scale(1.1) rotate(-5deg); text-shadow: 0 0 15px var(--cyan); } .bento-card h3 { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: 0.5px; } .bento-card p { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); margin: 0; } /* Neon Trace Animation */ .bento-trace { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .bento-trace::before { content: '\2022'; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .bento-card:hover .bento-trace::before { transform: translateX(100%); } @media (max-width: 1024px) { .cyber-bento-grid { grid-template-columns: repeat(2, 1fr); } .bento-card.card-large { grid-row: span 1; } .bento-card.card-medium-h { grid-column: span 2; } } @media (max-width: 768px) { .cyber-bento-grid { grid-template-columns: 1fr; } .bento-card.card-medium-h { grid-column: span 1; } .card-medium-h .bento-inner { flex-direction: column; align-items: flex-start; } } /* ═══════════════════════════════════════════════ GRADIENT TEXT — Blue-Green Brand Accent ═══════════════════════════════════════════════ */ .section-label { color: var(--accent-green) !important; } h1 span, h2 span, h3 span, .section-heading span, .premium-heading span, .hero-title span, .av-heading span, .highlight-text, .gradient-text { background: var(--gradient-text) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .section-heading { color: var(--text-primary); } .section-sub { color: var(--text-secondary); } /* DevOps hero readability: avoid gradient-mixed heading span on video */ .devops-hero .hero-title .line2, .devops-hero .hero-title span { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #7dd3fc !important; } .mega-info p, .consulting-cta-text p, .cta-section p, .cta-content p, .contact-premium-info p { color: var(--off); } /* ── Theme Toggle Button ── */ .theme-toggle-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-o); background: transparent; color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--trans); padding: 0; flex-shrink: 0; } .theme-toggle-btn:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; transform: scale(1.1); } .theme-toggle-btn svg { width: 18px; height: 18px; transition: transform 0.4s ease; } .theme-toggle-btn:hover svg { transform: rotate(20deg); } /* Removed from all landing pages per request */ .theme-toggle-btn { display: none !important; } [data-theme="light"] .theme-icon-moon { display: none; } [data-theme="light"] .theme-icon-sun { display: block; } .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } /* ==================================================== GLOBAL BUTTON GRADIENT — Blue-Green (all instances) ==================================================== */ .btn, .btn-primary, .btn-ot, .btn-cta, .cta-btn, .hero-cta a, .hero-cta button, button[type="submit"], input[type="submit"], .contact-premium-btn, .consulting-btn, .whatsapp-lead-btn { background: linear-gradient(135deg, #084481, #2D9B4E) !important; border-color: transparent !important; color: #FFFFFF !important; box-shadow: 0 8px 24px rgba(8, 68, 129, 0.28) !important; transition: background 0.32s ease, transform 0.22s ease, box-shadow 0.28s ease !important; } .btn:hover, .btn-primary:hover, .btn-ot:hover, .btn-cta:hover, .cta-btn:hover, .hero-cta a:hover, .hero-cta button:hover, button[type="submit"]:hover, input[type="submit"]:hover, .contact-premium-btn:hover, .consulting-btn:hover { background: linear-gradient(135deg, #2D9B4E, #084481) !important; transform: translateY(-3px) !important; box-shadow: 0 14px 36px rgba(45, 155, 78, 0.32) !important; color: #FFFFFF !important; } /* ==================================================== PREMIUM CREATIVE FOOTER ARCHITECTURE ==================================================== */ .footer { background: radial-gradient(ellipse at top center, rgba(8, 68, 129, 0.12), var(--black) 70%) !important; border-top: 1px solid rgba(0, 163, 217, 0.18) !important; padding: 6rem 0 3rem !important; position: relative; overflow: hidden; } .footer::before { content: '\2022'; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--accent-green), transparent); box-shadow: 0 0 20px var(--cyan), 0 0 40px var(--accent-green); } /* Pre-Footer CTA Card */ .footer-cta-box { background: linear-gradient(135deg, rgba(8, 13, 22, 0.95), rgba(13, 21, 32, 0.98)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 3rem 4rem; margin-bottom: 5rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12); position: relative; } .footer-cta-box::before { content: '\2022'; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--cyan), transparent 60%, var(--accent-green)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .footer-cta-content h3 { font-size: 1.85rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; line-height: 1.3; } .footer-cta-content p { font-size: 0.98rem; color: rgba(255, 255, 255, 0.75); max-width: 650px; margin-bottom: 0; line-height: 1.6; } .footer-cta-btn { padding: 1rem 2rem !important; font-size: 1.05rem !important; font-weight: 700 !important; border-radius: 14px !important; white-space: nowrap; } /* Footer Grid Optimization */ .footer-top { display: grid !important; grid-template-columns: 2.2fr 1.1fr 1.1fr 1.1fr !important; gap: 3.5rem !important; margin-bottom: 4rem !important; } .footer-logo img { max-height: 130px; filter: drop-shadow(0 4px 12px rgba(8, 68, 129, 0.4)); } .footer-about-text { font-size: 0.9rem !important; color: rgba(255, 255, 255, 0.72) !important; line-height: 1.8 !important; max-width: 400px !important; margin: 1.2rem 0 1.6rem !important; text-align: justify; } .footer-contact { gap: 0.8rem !important; } .footer-contact a { font-size: 0.9rem !important; color: rgba(255, 255, 255, 0.82) !important; display: flex !important; align-items: center !important; gap: 0.6rem !important; text-decoration: none !important; } .footer-contact a:hover { color: var(--accent-green) !important; transform: translateX(3px); } .fc-icon { color: var(--cyan); font-size: 1.05rem; font-weight: 800; } /* Footer Social Badges */ .footer-social { display: flex; gap: 0.8rem; margin-top: 1.8rem; } .footer-social .social-link { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.1rem; font-weight: 700; text-decoration: none; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .footer-social .social-link:hover { background: var(--accent-green); border-color: var(--accent-green); color: #ffffff; transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 24px rgba(45, 155, 78, 0.4); } .footer-social .social-link svg { width: 20px; height: 20px; display: block; } .cyber-footer .footer-socials a svg { width: 20px; height: 20px; display: block; } /* Columns Typography */ .footer-col h4 { font-size: 0.95rem !important; font-weight: 800 !important; color: #ffffff !important; border-left: 3px solid var(--accent-green); padding-left: 0.6rem; margin-bottom: 1.6rem !important; letter-spacing: 0.08em !important; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 0.85rem !important; } .footer-col ul li a { font-size: 0.92rem !important; color: rgba(255, 255, 255, 0.68) !important; text-decoration: none !important; transition: all 0.28s ease !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; max-width: 100% !important; } .footer-col ul li a::before { content: '\2192'; color: var(--cyan); opacity: 0; margin-right: 0px; font-weight: 800; transition: all 0.28s ease; font-size: 1rem; line-height: 1; display: inline-block; transform: translateX(-8px); } .footer-col ul li a:hover { color: #ffffff !important; transform: translateX(4px); white-space: nowrap !important; } /* Master Site-Wide Readability Override for Landing Pages */ .footer-col ul li a:hover, .footer-links a:hover, .svc-link:hover, .consulting-card .svc-link:hover, .service-card .svc-link:hover, .industry-card .svc-link:hover { color: #ffffff !important; } .footer-col ul li a:hover::before { opacity: 1; margin-right: 6px; transform: translateX(0); } .footer-bottom { border-top-color: rgba(255, 255, 255, 0.06) !important; padding-top: 2.5rem !important; } .footer-bottom p { color: rgba(255, 255, 255, 0.5) !important; font-size: 0.88rem !important; } .footer-links a { color: rgba(255, 255, 255, 0.5) !important; font-size: 0.88rem !important; } .devops-hero { position: relative; overflow: hidden; background: #030712 !important; height: 100vh !important; min-height: 750px !important; display: flex !important; align-items: center !important; } .devops-hero .hero-shell { display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; align-items: center !important; gap: 3rem !important; width: 100% !important; padding: 0 !important; } .devops-hero .hero-content { margin-left: 0 !important; padding-left: 2rem !important; z-index: 10 !important; } .telemetry-card { background: linear-gradient(145deg, rgba(10, 15, 25, 0.9) 0%, rgba(4, 9, 17, 0.95) 100%); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 20px; padding: 2.5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); position: relative; overflow: hidden; } .telemetry-card::before { content: '\2022'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 163, 217, 0.03) 2px, rgba(0, 163, 217, 0.03) 4px); pointer-events: none; } .telemetry-header { display: flex; align-items: center; gap: 1rem; color: #fff; font-size: 1.2rem; font-weight: 700; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .pulse-icon { color: var(--cyan); animation: pulseGlow 2s infinite; } @keyframes pulseGlow { 0% { text-shadow: 0 0 5px rgba(0, 163, 217, 0.2); } 50% { text-shadow: 0 0 20px rgba(0, 163, 217, 0.8); color: #fff; } 100% { text-shadow: 0 0 5px rgba(0, 163, 217, 0.2); } } .telemetry-feed { display: flex; flex-direction: column; gap: 1.8rem; } .telemetry-row { position: relative; z-index: 2; } .t-meta { display: flex; justify-content: space-between; margin-bottom: 0.6rem; color: #cbd5e1; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .t-value { color: var(--cyan); font-family: monospace; font-size: 1.1rem; } .t-track { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; overflow: hidden; } .t-fill { height: 100%; background: var(--cyan); border-radius: 10px; box-shadow: 0 0 10px var(--cyan); position: relative; } .t-fill::after { content: '\2022'; position: absolute; top: 0; bottom: 0; right: 0; width: 20px; background: #fff; box-shadow: 0 0 15px #fff; filter: blur(2px); animation: scanLight 2s infinite linear; } .t-fill.green-fill { background: #2d9b4e; box-shadow: 0 0 10px #2d9b4e; } .telemetry-row:nth-child(even) .t-value { color: #2d9b4e; } @keyframes scanLight { 0% { opacity: 0.2; right: 100%; } 50% { opacity: 1; right: 0%; } 100% { opacity: 0.2; right: 0%; } } /* Unique Cyber Why Section */ .cyber-why-stack { display: flex; flex-direction: column; gap: 1.2rem; position: relative; margin-left: 1rem; } .cyber-why-stack::before { content: '\2022'; position: absolute; top: 1rem; bottom: 1rem; left: 24px; width: 2px; background: linear-gradient(180deg, var(--cyan), #2d9b4e, transparent); z-index: 0; } .cyber-why-plate { position: relative; z-index: 1; background: rgba(12, 21, 36, 0.7); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 16px; padding: 1.5rem 1.5rem 1.5rem 5rem; backdrop-filter: blur(10px); color: #e2e8f0; font-size: 1.05rem; font-weight: 500; line-height: 1.6; transition: all 0.4s ease; overflow: hidden; } .cyber-why-plate::before { content: '\2022'; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--cyan); transition: all 0.4s ease; } .cyber-why-plate:nth-child(even)::before { background: #2d9b4e; } .cyber-why-plate .plate-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: #0a111c; border: 2px solid var(--cyan); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 1.1rem; box-shadow: 0 0 15px rgba(0, 163, 217, 0.3); transition: all 0.4s ease; } .cyber-why-plate:nth-child(even) .plate-icon { border-color: #2d9b4e; color: #2d9b4e; box-shadow: 0 0 15px rgba(45, 155, 78, 0.3); } .cyber-why-plate:hover { transform: translateX(10px); background: rgba(12, 21, 36, 0.95); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); color: #fff; } .cyber-why-plate:hover .plate-icon { background: var(--cyan); color: #fff; box-shadow: 0 0 25px var(--cyan); } .cyber-why-plate:nth-child(even):hover .plate-icon { background: #2d9b4e; box-shadow: 0 0 25px #2d9b4e; } @media (max-width: 768px) { .cyber-why-stack::before { left: 16px; } .cyber-why-plate { padding: 1.2rem 1.2rem 1.2rem 4rem; font-size: 0.95rem; } .cyber-why-plate .plate-icon { width: 36px; height: 36px; left: -2px; font-size: 0.9rem; } } /* Cyber Bento Box */ .cyber-bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; width: 100%; } .bento-card { background: rgba(12, 21, 36, 0.6); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 20px; padding: 2rem; backdrop-filter: blur(12px); display: flex; flex-direction: column; justify-content: flex-start; position: relative; overflow: hidden; transition: all 0.4s ease; } .bento-card:hover { transform: translateY(-5px); border-color: rgba(0, 163, 217, 0.5); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); background: rgba(12, 21, 36, 0.85); } .bento-card.span-2 { grid-column: span 2; } .bento-icon { font-size: 2rem; color: var(--cyan); margin-bottom: 1.2rem; display: inline-block; background: rgba(0, 163, 217, 0.1); padding: 0.8rem; border-radius: 12px; border: 1px solid rgba(0, 163, 217, 0.2); } .bento-card.green-theme .bento-icon { color: #2d9b4e; background: rgba(45, 155, 78, 0.1); border-color: rgba(45, 155, 78, 0.2); } .bento-card.green-theme:hover { border-color: rgba(45, 155, 78, 0.5); } .bento-text { color: #e2e8f0; font-size: 1.05rem; font-weight: 500; line-height: 1.6; position: relative; z-index: 2; } .bento-watermark { position: absolute; right: -10%; bottom: -20%; font-size: 10rem; opacity: 0.03; color: var(--cyan); transition: all 0.6s ease; z-index: 0; pointer-events: none; } .bento-card.green-theme .bento-watermark { color: #2d9b4e; } .bento-card:hover .bento-watermark { opacity: 0.1; transform: scale(1.1) rotate(-10deg); } @media (max-width: 768px) { .cyber-bento-grid { grid-template-columns: 1fr; } .bento-card.span-2 { grid-column: span 1; } } /* --- DevOps Premium Hero Enhancements --- */ .devops-hero { position: relative; overflow: hidden; background: #030712 !important; } .devops-hero .hero-bg { background: radial-gradient(circle at 20% 30%, rgba(0, 163, 217, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(45, 155, 78, 0.12) 0%, transparent 40%) !important; } .devops-hero .hero-media::after { background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08) 0%, transparent 20%), radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.06) 0%, transparent 18%) !important; } .devops-hero .hero-grid { background: none !important; } .devops-premium-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.2rem; background: rgba(0, 163, 217, 0.1); border: 1px solid rgba(0, 163, 217, 0.3); border-radius: 50px; color: var(--cyan); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2rem; box-shadow: 0 0 20px rgba(0, 163, 217, 0.1); } .devops-premium-badge i { font-size: 1rem; animation: rotateSlow 4s linear infinite; } @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .devops-hero .hero-title { font-size: clamp(2.1rem, 5.5vw, 3.5rem); line-height: 1.1; margin-bottom: 1.5rem; } .devops-hero .hero-title span.line2 { color: var(--cyan); background: none !important; -webkit-text-fill-color: initial !important; display: block; } .devops-hero-anim-bg { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 20% 25%, rgba(0, 163, 217, 0.28) 0%, transparent 38%), radial-gradient(circle at 78% 20%, rgba(45, 155, 78, 0.22) 0%, transparent 34%), radial-gradient(circle at 50% 82%, rgba(14, 165, 233, 0.18) 0%, transparent 40%), linear-gradient(135deg, #020712 0%, #071120 48%, #04101b 100%); background-size: 120% 120%, 120% 120%, 140% 140%, 100% 100%; animation: devopsHeroFlow 10s ease-in-out infinite alternate; } .devops-hero-anim-bg::before { content: ""; position: absolute; inset: -20% -10%; background: conic-gradient(from 0deg at 50% 50%, rgba(0, 163, 217, 0.0), rgba(0, 163, 217, 0.22), rgba(45, 155, 78, 0.16), rgba(0, 163, 217, 0.0)); filter: blur(24px); animation: devopsHeroSweep 9s linear infinite; pointer-events: none; } .devops-hero .hero-bg { z-index: 2 !important; opacity: 0 !important; background: transparent !important; } .devops-hero .hero-grid, .devops-hero .hero-glow { z-index: 2 !important; opacity: 0.7; } .devops-hero .container { position: relative; z-index: 3; } @keyframes devopsHeroFlow { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%; filter: saturate(1) brightness(1); } 100% { background-position: 12% 8%, 88% 14%, 55% 88%, 50% 50%; filter: saturate(1.1) brightness(1.04); } } @keyframes devopsHeroSweep { 0% { transform: translateX(-12%) rotate(0deg) scale(1); opacity: 0.55; } 50% { transform: translateX(8%) rotate(180deg) scale(1.08); opacity: 0.8; } 100% { transform: translateX(-12%) rotate(360deg) scale(1); opacity: 0.55; } } .devops-pipeline-stack { position: relative; display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 450px; margin-left: auto; } .pipeline-node { background: rgba(12, 21, 36, 0.7); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 16px; padding: 1.2rem 1.5rem; backdrop-filter: blur(12px); display: flex; align-items: center; gap: 1.2rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; cursor: pointer; } .pipeline-node:hover { transform: translateX(-15px) scale(1.02); border-color: rgba(0, 163, 217, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 163, 217, 0.1); } .pipeline-node.active-node { border-color: rgba(45, 155, 78, 0.5); box-shadow: 0 0 25px rgba(45, 155, 78, 0.2); } .node-icon-wrap { width: 45px; height: 45px; border-radius: 10px; background: rgba(0, 163, 217, 0.1); display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 1.2rem; border: 1px solid rgba(0, 163, 217, 0.2); } .active-node .node-icon-wrap { background: rgba(45, 155, 78, 0.1); color: #2d9b4e; border-color: rgba(45, 155, 78, 0.3); } .node-content h4 { color: #fff; font-size: 1rem; margin-bottom: 0.2rem; } .node-content p { color: #94a3b8; font-size: 0.85rem; margin: 0; } .node-status { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2d9b4e; box-shadow: 0 0 8px #2d9b4e; animation: statusPulse 1.5s infinite; } @keyframes statusPulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } .pipeline-connector { position: absolute; left: 22px; top: -15px; bottom: -15px; width: 2px; background: rgba(0, 163, 217, 0.3) !important; z-index: -1; } /* --- Cybersecurity Premium Hero Enhancements --- */ .cyber-hero { background: #020617 !important; position: relative; overflow: hidden; } .cyber-premium-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.2rem; background: rgba(0, 163, 217, 0.1); border: 1px solid rgba(0, 163, 217, 0.3); border-radius: 50px; color: var(--cyan); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2rem; box-shadow: 0 0 20px rgba(0, 163, 217, 0.1); } .cyber-premium-badge i { font-size: 1rem; color: #2d9b4e; animation: pulseGlow 2s infinite; } .cyber-threat-stack { position: relative; display: flex; flex-direction: column; gap: 1.2rem; width: 100%; max-width: 480px; margin-left: auto; } .threat-card { background: rgba(10, 15, 28, 0.8); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 20px; padding: 1.5rem 1.8rem; backdrop-filter: blur(15px); position: relative; overflow: hidden; transition: all 0.5s ease; cursor: crosshair; } .threat-card:hover { transform: scale(1.03) translateY(-5px); border-color: rgba(0, 163, 217, 0.5); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 163, 217, 0.1); } .threat-card.alert-card { border-color: rgba(45, 155, 78, 0.4); } .threat-card.alert-card:hover { border-color: rgba(45, 155, 78, 0.7); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(45, 155, 78, 0.1); } .threat-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .threat-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: var(--cyan); opacity: 0.8; letter-spacing: 1px; } .threat-card.alert-card .threat-label { color: #2d9b4e; } .threat-scanning-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: threatScan 3s linear infinite; opacity: 0.5; } @keyframes threatScan { 0% { top: 0; } 100% { top: 100%; } } .threat-info h4 { color: #fff; font-size: 1.1rem; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.6rem; } .threat-info p { color: #94a3b8; font-size: 0.85rem; margin: 0; line-height: 1.5; } .threat-status-tag { padding: 0.3rem 0.6rem; border-radius: 4px; background: rgba(0, 163, 217, 0.1); color: var(--cyan); font-size: 0.65rem; font-weight: 800; border: 1px solid rgba(0, 163, 217, 0.2); } .threat-card.alert-card .threat-status-tag { background: rgba(45, 155, 78, 0.1); color: #2d9b4e; border-color: rgba(45, 155, 78, 0.3); } /* --- DevOps Creative Structure Enhancements --- */ .devops-engine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .engine-card { background: rgba(12, 21, 36, 0.6); border: 1px solid rgba(0, 163, 217, 0.1); border-radius: 20px; padding: 2rem; backdrop-filter: blur(10px); transition: all 0.4s ease; position: relative; overflow: hidden; } .engine-card:hover { transform: translateY(-10px); border-color: rgba(0, 163, 217, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .engine-card i { font-size: 2rem; color: var(--cyan); margin-bottom: 1.2rem; display: block; } .engine-card h3 { color: #fff; font-size: 1rem; margin-bottom: 0.8rem; } .engine-card p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; margin: 0; } .devops-service-card-premium { background: rgba(12, 21, 36, 0.7); border: 1px solid rgba(0, 163, 217, 0.15); border-radius: 24px; padding: 2.5rem; position: relative; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; } .devops-service-card-premium:hover { border-color: var(--cyan); transform: translateY(-12px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .devops-service-card-premium .card-icon { width: 60px; height: 60px; background: rgba(0, 163, 217, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 1.5rem; margin-bottom: 1.5rem; transition: all 0.4s ease; } .devops-service-card-premium:hover .card-icon { transform: rotateY(180deg); background: var(--cyan); color: #000; } .devops-tech-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; margin-top: 2rem; } .tech-pill-devops { background: rgba(12, 21, 36, 0.8); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 12px; padding: 0.8rem; text-align: center; color: #fff; font-weight: 600; font-size: 0.85rem; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .tech-pill-devops:hover { background: rgba(0, 163, 217, 0.1); border-color: var(--cyan); transform: scale(1.05); } .devops-bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(160px, auto); gap: 1.5rem; margin-top: 3rem; } .bento-card-devops { grid-column: span 4; background: rgba(12, 21, 36, 0.6); border: 1px solid rgba(0, 163, 217, 0.1); border-radius: 24px; padding: 2rem; position: relative; overflow: hidden; backdrop-filter: blur(10px); transition: all 0.4s ease; } .bento-card-devops:hover { transform: translateY(-5px); border-color: rgba(0, 163, 217, 0.3); } .bento-card-devops.span-8 { grid-column: span 8; } .bento-card-devops.span-6 { grid-column: span 6; } .bento-icon-watermark { position: absolute; right: -20px; bottom: -20px; font-size: 8rem; color: var(--cyan); opacity: 0.03; transform: rotate(-15deg); transition: all 0.6s ease; } .bento-card-devops:hover .bento-icon-watermark { opacity: 0.08; transform: rotate(0deg) scale(1.1); } /* Perfect Alignment for DevOps Hero */ .devops-hero .hero-shell { display: grid !important; grid-template-columns: 1.1fr 0.9fr !important; align-items: center !important; gap: 4rem !important; min-height: 80vh !important; padding: 4rem 0 !important; } @media (max-width: 1024px) { .devops-hero .hero-shell { grid-template-columns: 1fr !important; text-align: center !important; gap: 3rem !important; } .devops-hero .hero-content { display: flex !important; flex-direction: column !important; align-items: center !important; } .devops-pipeline-stack { margin: 0 auto !important; } } @media (max-width: 768px) { .devops-hero .hero-panel-card { transform: none !important; } } /* DevOps Hero Perfection Fixes */ .devops-page .hero-stats { display: flex !important; gap: 2.5rem !important; margin-top: 3rem !important; padding-top: 2rem !important; border-top: 1px solid rgba(0, 163, 217, 0.1) !important; width: fit-content !important; } .devops-page .hstat { display: flex !important; flex-direction: column !important; gap: 0.4rem !important; } .devops-page .hstat-num { font-size: 1.8rem !important; font-weight: 800 !important; line-height: 1 !important; color: #fff !important; text-shadow: 0 0 10px rgba(0, 163, 217, 0.3) !important; } .devops-page .hstat-label { font-size: 0.8rem !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 1px !important; } .devops-page .devops-chip-row { justify-content: flex-start !important; gap: 1rem !important; } @media (max-width: 768px) { .devops-page .hero-stats { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; gap: 1.5rem !important; } } /* Master Visibility & Viewport Fix for DevOps Hero */ .devops-hero .hero-content { transform: none !important; opacity: 1 !important; padding-left: 20px !important; margin-left: 0 !important; } .devops-hero { min-height: 100vh !important; overflow: visible !important; } /* DevOps Pipeline Scanning Effect */ .pipeline-scanning-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: pipeScan 3s linear infinite; opacity: 0.6; z-index: 5; } @keyframes pipeScan { 0% { top: 0; } 100% { top: 100%; } } .devops-hero .hero-proof-strip { display: flex; gap: 1.5rem; margin-top: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; } .devops-hero .hero-proof-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #f1f5f9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .devops-hero .hero-proof-item i { color: var(--cyan); font-size: 1rem; } /* --- DevOps Interactive Overview Grid --- */ .devops-interactive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } @media (max-width: 768px) { .devops-interactive-grid { grid-template-columns: 1fr; } } .interactive-box { background: rgba(12, 21, 36, 0.7); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 20px; padding: 2rem; position: relative; overflow: hidden; backdrop-filter: blur(12px); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; } .interactive-box:hover { transform: translateY(-8px); border-color: rgba(0, 163, 217, 0.5); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 163, 217, 0.15); } .interactive-box .box-icon { font-size: 2rem; color: var(--cyan); margin-bottom: 1.2rem; transition: all 0.4s ease; } .interactive-box h3 { color: #fff; font-size: 1.3rem; margin-bottom: 0.8rem; } .interactive-box p { color: #cbd5e1; font-size: 0.95rem; line-height: 1.6; margin: 0; } /* Box 1: Pipeline Flow */ .pipe-animation { display: flex; align-items: center; margin-top: auto; padding-top: 1.5rem; } .pipe-node { width: 12px; height: 12px; border-radius: 50%; background: rgba(0, 163, 217, 0.3); border: 2px solid var(--cyan); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .pipe-box:hover .pipe-node { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .pipe-line { flex-grow: 1; height: 2px; background: rgba(0, 163, 217, 0.2); position: relative; overflow: hidden; } .pipe-packet { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px #fff, 0 0 15px var(--cyan); opacity: 0; } .pipe-box:hover .pipe-packet { animation: packetFlow 1.5s linear infinite; } @keyframes packetFlow { 0% { left: 0; opacity: 1; } 100% { left: 100%; opacity: 1; } } /* Box 2: Terminal Box */ .terminal-box { padding: 0; } .terminal-header { background: #080c14; padding: 0.8rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .terminal-header .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .terminal-header .dot.red { background: #ef4444; } .terminal-header .dot.yellow { background: #eab308; } .terminal-header .dot.green { background: #22c55e; } .terminal-header .title { margin-left: auto; margin-right: auto; color: #64748b; font-size: 0.75rem; font-family: monospace; } .terminal-body { padding: 1.5rem 2rem 2rem; display: flex; flex-direction: column; flex-grow: 1; } .term-code { margin-top: auto; background: rgba(0, 0, 0, 0.4); padding: 1rem; border-radius: 8px; font-family: monospace; color: #22c55e; font-size: 0.85rem; opacity: 0.5; transition: opacity 0.3s ease; } .terminal-box:hover .term-code { opacity: 1; } .term-cursor { animation: termBlink 1s step-end infinite; } @keyframes termBlink { 50% { opacity: 0; } } /* Box 3: Expand Box */ .expand-box { justify-content: flex-start; } .expand-content { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; } .expand-box:hover .expand-content { max-height: 150px; opacity: 1; margin-top: 1rem; } .expand-content .scan-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); opacity: 0; } .expand-box:hover .scan-line { animation: scanReveal 2s ease-in-out infinite; opacity: 1; } @keyframes scanReveal { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } } /* Box 4: Radar Box */ .radar-bg { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); border: 1px solid rgba(0, 163, 217, 0.1); border-radius: 50%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .radar-bg::before, .radar-bg::after { content: '\2022'; position: absolute; border-radius: 50%; border: 1px solid rgba(0, 163, 217, 0.1); } .radar-bg::before { top: 25px; left: 25px; right: 25px; bottom: 25px; } .radar-bg::after { top: 50px; left: 50px; right: 50px; bottom: 50px; } .radar-sweep { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: conic-gradient(from 0deg, transparent 70%, rgba(0, 163, 217, 0.4) 100%); transform-origin: 0 0; border-radius: 0 100% 0 0; animation: radarSpin 2s linear infinite; display: none; } .radar-box:hover .radar-bg { opacity: 1; } .radar-box:hover .radar-sweep { display: block; } @keyframes radarSpin { 100% { transform: rotate(360deg); } } /* --- DevOps Command Center & Terminal Simulator Hub --- */ .devops-hub-container { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; margin-top: 3.5rem; align-items: start; } .devops-hub-nav { display: flex; flex-direction: column; gap: 1.2rem; position: relative; } .nav-timeline-line { position: absolute; left: 22px; top: 25px; bottom: 25px; width: 2px; background: rgba(0, 163, 217, 0.15); z-index: 1; } .hub-nav-item { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.4rem; border-radius: 18px; background: rgba(12, 21, 36, 0.4); border: 1px solid rgba(0, 163, 217, 0.1); cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; z-index: 2; } .hub-nav-item:hover { background: rgba(12, 21, 36, 0.7); border-color: rgba(0, 163, 217, 0.3); transform: translateX(6px); } .nav-dot { width: 44px; height: 44px; border-radius: 12px; background: #0c1524; border: 1.5px solid rgba(0, 163, 217, 0.25); display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 1.1rem; transition: all 0.4s ease; flex-shrink: 0; } .nav-info { display: flex; flex-direction: column; gap: 0.1rem; } .nav-step { font-size: 0.7rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 1px; } .nav-info h4 { color: #94a3b8; font-size: 0.95rem; font-weight: 700; margin: 0; transition: color 0.4s ease; } /* Tab Checkbox Logic */ #devops-tab-1:checked~.devops-hub-nav .item-1, #devops-tab-2:checked~.devops-hub-nav .item-2, #devops-tab-3:checked~.devops-hub-nav .item-3, #devops-tab-4:checked~.devops-hub-nav .item-4 { background: rgba(0, 163, 217, 0.08) !important; border-color: rgba(0, 163, 217, 0.4) !important; box-shadow: 0 0 20px rgba(0, 163, 217, 0.15) !important; } #devops-tab-1:checked~.devops-hub-nav .item-1 .nav-dot, #devops-tab-2:checked~.devops-hub-nav .item-2 .nav-dot, #devops-tab-3:checked~.devops-hub-nav .item-3 .nav-dot, #devops-tab-4:checked~.devops-hub-nav .item-4 .nav-dot { background: rgba(0, 163, 217, 0.15) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; box-shadow: 0 0 15px rgba(0, 163, 217, 0.3) !important; } #devops-tab-1:checked~.devops-hub-nav .item-1 h4, #devops-tab-2:checked~.devops-hub-nav .item-2 h4, #devops-tab-3:checked~.devops-hub-nav .item-3 h4, #devops-tab-4:checked~.devops-hub-nav .item-4 h4 { color: #ffffff !important; } /* Pane Animations */ .devops-hub-content { position: relative; width: 100%; } .tab-pane { display: none; flex-direction: column; gap: 1.8rem; animation: hubPaneFade 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } @keyframes hubPaneFade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } #devops-tab-1:checked~.devops-hub-content .pane-1, #devops-tab-2:checked~.devops-hub-content .pane-2, #devops-tab-3:checked~.devops-hub-content .pane-3, #devops-tab-4:checked~.devops-hub-content .pane-4 { display: flex; } /* Terminal Simulator Styles */ .hub-terminal { background: #020617; border: 1px solid rgba(0, 163, 217, 0.15); border-radius: 16px; overflow: hidden; font-family: 'Fira Code', 'Courier New', Courier, monospace; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .terminal-header { background: rgba(15, 23, 42, 0.95); padding: 0.75rem 1.2rem; display: flex; align-items: center; border-bottom: 1px solid rgba(0, 163, 217, 0.1); } .terminal-buttons { display: flex; gap: 0.45rem; } .terminal-buttons span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .terminal-buttons span:nth-child(1) { background: #ef4444; } .terminal-buttons span:nth-child(2) { background: #eab308; } .terminal-buttons span:nth-child(3) { background: #22c55e; } .terminal-title { margin-left: 2rem; font-size: 0.8rem; color: #64748b; font-weight: 700; letter-spacing: 0.5px; } .terminal-body { padding: 1.5rem; font-size: 0.88rem; line-height: 1.6; } .t-command { color: #38bdf8; margin: 0 0 0.8rem; } .t-command::before { content: ""; display: inline-block; } .t-output { color: #94a3b8; margin: 0 0 0.4rem; } .t-green { color: var(--cyan); } .t-success { color: #2d9b4e; margin: 0.8rem 0 0; font-weight: 600; } /* Capability Cards Layout */ .hub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* Responsive Overrides */ @media (max-width: 991px) { .devops-hub-container { grid-template-columns: 1fr; gap: 2.5rem; } .devops-hub-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; } .nav-timeline-line { display: none; } .hub-nav-item { flex: 1 1 calc(50% - 1rem); max-width: 320px; } } @media (max-width: 576px) { .hub-nav-item { flex: 1 1 100%; max-width: 100%; } .hub-cards { grid-template-columns: 1fr; } } /* --- DevOps Telemetry Diagnostics Console & Tool Selector --- */ .tech-selectors-devops { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; margin-top: 1.5rem; } .tech-sel-btn { padding: 0.65rem 1.2rem; border-radius: 12px; background: rgba(12, 21, 36, 0.4); border: 1px solid rgba(0, 163, 217, 0.15); color: #94a3b8; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: inline-flex; align-items: center; gap: 0.6rem; user-select: none; } .tech-sel-btn:hover { background: rgba(12, 21, 36, 0.7); border-color: rgba(0, 163, 217, 0.35); color: #ffffff; transform: translateY(-2px); } /* Radio button trigger logic */ #tech-cat-1:checked~.reveal-left .btn-1 { background: rgba(0, 163, 217, 0.12) !important; border-color: var(--cyan) !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(0, 163, 217, 0.2) !important; } #tech-cat-2:checked~.reveal-left .btn-2 { background: rgba(45, 155, 78, 0.12) !important; border-color: #2d9b4e !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(45, 155, 78, 0.2) !important; } #tech-cat-3:checked~.reveal-left .btn-3 { background: rgba(0, 163, 217, 0.12) !important; border-color: var(--cyan) !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(0, 163, 217, 0.2) !important; } #tech-cat-4:checked~.reveal-left .btn-4 { background: rgba(45, 155, 78, 0.12) !important; border-color: #2d9b4e !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(45, 155, 78, 0.2) !important; } .tech-matrix-wrapper { margin-top: 2rem; min-height: 80px; } .tech-matrix-pane { display: none; flex-wrap: wrap; gap: 0.75rem; animation: techPaneFade 0.4s ease forwards; } #tech-cat-1:checked~.reveal-left .pane-1, #tech-cat-2:checked~.reveal-left .pane-2, #tech-cat-3:checked~.reveal-left .pane-3, #tech-cat-4:checked~.reveal-left .pane-4 { display: flex; } /* Tool matrix active styling */ .tech-pill-devops.active-cyan { background: rgba(0, 163, 217, 0.08) !important; border-color: rgba(0, 163, 217, 0.35) !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(0, 163, 217, 0.1) !important; } .tech-pill-devops.active-green { background: rgba(45, 155, 78, 0.08) !important; border-color: rgba(45, 155, 78, 0.35) !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(45, 155, 78, 0.1) !important; } /* Diagnostic Monitor Panels */ .diagnostic-panel-wrapper { padding: 1.5rem; } .diag-screen { display: none; flex-direction: column; gap: 1.5rem; animation: techPaneFade 0.5s ease forwards; } #tech-cat-1:checked~.devops-tech-card .screen-1, #tech-cat-2:checked~.devops-tech-card .screen-2, #tech-cat-3:checked~.devops-tech-card .screen-3, #tech-cat-4:checked~.devops-tech-card .screen-4 { display: flex; } .diag-meta { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 0.8rem; } .diag-status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 0.4rem; } .status-online { color: #2d9b4e; } .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #2d9b4e; box-shadow: 0 0 8px #2d9b4e; animation: pulseGlow 1.5s infinite; } .diag-title { font-family: monospace; color: #64748b; font-size: 0.8rem; font-weight: 700; } /* Dynamic Visualizations */ .diag-visualization { display: flex; justify-content: center; align-items: center; min-height: 120px; border: 1px dashed rgba(255, 255, 255, 0.03); border-radius: 12px; background: rgba(2, 6, 23, 0.4); padding: 1rem; } /* Circular Success Progress */ .circular-progress { position: relative; width: 110px; height: 110px; } .circle-bg { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 8; } .circle-progress { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 251.2; stroke-dashoffset: 251.2; transform: rotate(-90deg); transform-origin: 50px 50px; } .prog-cyan { stroke: var(--cyan); animation: progressFill 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes progressFill { from { stroke-dashoffset: 251.2; } to { stroke-dashoffset: 1; } } .circle-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .circle-text .pct { font-size: 1rem; font-weight: 800; color: #ffffff; } .circle-text .lbl { font-size: 0.65rem; color: #64748b; text-transform: uppercase; font-weight: 700; margin-top: 0.1rem; } /* SVG Line Draw Graph */ .svg-graph-container { width: 100%; max-width: 220px; height: 60px; } .animated-path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawPath 2s linear infinite; } @keyframes drawPath { 0% { stroke-dashoffset: 400; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -400; } } /* Pod Node Matrix Simulator */ .pod-grid-simulator { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; width: fit-content; } .pod-node { width: 16px; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); } .pod-node.running { background: rgba(0, 163, 217, 0.2); border: 1.5px solid rgba(0, 163, 217, 0.7); box-shadow: 0 0 8px rgba(0, 163, 217, 0.4); } .pod-node.alert { background: rgba(45, 155, 78, 0.2); border: 1.5px solid rgba(45, 155, 78, 0.7); box-shadow: 0 0 8px rgba(45, 155, 78, 0.4); animation: podGreenPulse 1.2s infinite alternate; } @keyframes podGreenPulse { 0% { opacity: 0.5; } 100% { opacity: 1; } } /* Radar Sweep simulator */ .security-radar-simulator { position: relative; width: 85px; height: 85px; border-radius: 50%; border: 1.5px solid rgba(45, 155, 78, 0.25); overflow: hidden; background: radial-gradient(circle, rgba(45, 155, 78, 0.06) 0%, transparent 70%); } .security-radar-simulator::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 1px dashed rgba(45, 155, 78, 0.15); } .radar-line { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; background: conic-gradient(from 0deg, transparent 70%, rgba(45, 155, 78, 0.45) 100%); transform-origin: 0 0; border-radius: 0 100% 0 0; animation: radarSpin 2.5s linear infinite; } .radar-ping { position: absolute; top: 30%; left: 45%; width: 6px; height: 6px; border-radius: 50%; background: #2d9b4e; box-shadow: 0 0 10px #2d9b4e; animation: pingFade 1.2s infinite; } @keyframes pingFade { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } @keyframes techPaneFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --- Why Choose Vedtam Bento Grid Widgets --- */ .bento-card-devops { display: flex; flex-direction: row; gap: 2rem; min-height: 280px; overflow: hidden; background: rgba(12, 21, 36, 0.4); border: 1px solid rgba(0, 163, 217, 0.1); border-radius: 24px; padding: 2.2rem; position: relative; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .bento-card-devops.span-8 { grid-column: span 8; } .bento-card-devops:not(.span-8) { grid-column: span 4; flex-direction: column; gap: 1.5rem; } .bento-content-side { flex: 1.1; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; } .bento-widget-side { flex: 0.9; display: flex; position: relative; z-index: 2; min-height: 180px; } .bento-card-devops:not(.span-8) .bento-widget-side { flex: 1; width: 100%; min-height: 120px; } /* Hover shine/lift for Bento cards */ .bento-card-devops:hover { transform: translateY(-5px); background: rgba(12, 21, 36, 0.6); border-color: rgba(0, 163, 217, 0.25); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 163, 217, 0.05); } /* Watermark adjustments */ .bento-icon-watermark { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 4.5rem; color: rgba(255, 255, 255, 0.02); pointer-events: none; z-index: 1; transition: all 0.4s ease; } .bento-card-devops:hover .bento-icon-watermark { color: rgba(0, 163, 217, 0.04); transform: scale(1.1) rotate(5deg); } /* Interactive Bento Buttons */ .bento-interactive-btn { margin-top: 1.5rem; padding: 0.65rem 1.2rem; border-radius: 12px; border: 1px solid rgba(0, 163, 217, 0.2); background: rgba(0, 163, 217, 0.05); color: var(--cyan); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: fit-content; user-select: none; z-index: 5; } .bento-interactive-btn:hover { background: rgba(0, 163, 217, 0.15); border-color: var(--cyan); color: #ffffff; } .bento-interactive-btn .btn-active-text { display: none; } /* Widget 1: Snyk Scanner Console */ .bento-scan-console { width: 100%; background: #020617; border: 1px solid rgba(0, 163, 217, 0.15); border-radius: 14px; overflow: hidden; font-family: monospace; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); position: relative; align-self: center; } .scan-header { background: rgba(15, 23, 42, 0.95); padding: 0.5rem 0.8rem; display: flex; align-items: center; gap: 0.35rem; border-bottom: 1px solid rgba(0, 163, 217, 0.1); } .scan-header span[class^="dot-"] { width: 8px; height: 8px; border-radius: 50%; } .dot-red { background: #ef4444; } .dot-yellow { background: #eab308; } .dot-green { background: #22c55e; } .console-tab { margin-left: 1rem; font-size: 0.7rem; color: #64748b; font-weight: 700; letter-spacing: 0.5px; } .scan-body { padding: 1rem; font-size: 0.78rem; line-height: 1.5; position: relative; min-height: 110px; } .s-log { color: #38bdf8; margin: 0 0 0.5rem; } .s-ready { color: #64748b; margin: 0; } .s-success { color: #2d9b4e; font-weight: 700; margin: 0 0 0.3rem; } .s-meta { color: #94a3b8; margin: 0; font-size: 0.72rem; } .scan-laser-line { position: absolute; left: 0; right: 0; height: 2px; background: rgba(0, 163, 217, 0.6); box-shadow: 0 0 10px var(--cyan); top: 35px; opacity: 0; pointer-events: none; } .scan-results-screen { display: none; } /* Scan Trigger active state */ #bento-scan-ctrl:checked~.devops-bento-grid .bento-sec-card .scan-btn-trigger { border-color: rgba(45, 155, 78, 0.4); background: rgba(45, 155, 78, 0.1); color: #2d9b4e; } #bento-scan-ctrl:checked~.devops-bento-grid .bento-sec-card .scan-btn-trigger .btn-ready-text { display: none; } #bento-scan-ctrl:checked~.devops-bento-grid .bento-sec-card .scan-btn-trigger .btn-active-text { display: inline-block; } #bento-scan-ctrl:checked~.devops-bento-grid .bento-sec-card .scan-laser-line { animation: scanLaser 2s ease-in-out infinite; } #bento-scan-ctrl:checked~.devops-bento-grid .bento-sec-card .scan-default-screen { display: none; } #bento-scan-ctrl:checked~.devops-bento-grid .bento-sec-card .scan-results-screen { display: block; } @keyframes scanLaser { 0% { top: 35px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 95px; opacity: 0; } } /* Widget 2: Canary Routing Switcher */ .deployment-nodes-container { display: flex; align-items: center; gap: 1.2rem; width: 100%; justify-content: center; } .env-node { padding: 0.6rem 0.8rem; border-radius: 12px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; transition: all 0.4s ease; flex-shrink: 0; width: 90px; } .node-blue { border-color: rgba(0, 163, 217, 0.4); box-shadow: 0 0 12px rgba(0, 163, 217, 0.15); } .node-green { border-color: rgba(255, 255, 255, 0.05); opacity: 0.5; } .node-label { display: block; font-size: 0.65rem; font-weight: 800; color: #94a3b8; margin-bottom: 0.2rem; } .node-indicator { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; color: #64748b; } .node-blue .node-indicator { color: var(--cyan); } .routing-traffic-flow { width: 32px; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; position: relative; overflow: hidden; } .flow-packet { position: absolute; top: 0; height: 100%; width: 10px; } .ot-overview-img::after { content: '\2022'; position: absolute; inset: 0; border: 2px solid rgba(0, 163, 217, 0.18) !important; border-radius: 20px; pointer-events: none; } .ot-pill-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .ot-pill { background: rgba(0, 163, 217, 0.1) !important; border: 1px solid rgba(0, 163, 217, 0.25) !important; color: var(--ot-cyan) !important; padding: 5px 14px; border-radius: 100px; font-size: .78rem; font-weight: 600; } @keyframes packetLeftRight { 0% { left: -12px; } 100% { left: 32px; } } /* Deploy Trigger active state */ #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .deploy-btn-trigger { border-color: rgba(45, 155, 78, 0.4); background: rgba(45, 155, 78, 0.1); color: #2d9b4e; } #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .deploy-btn-trigger .btn-ready-text { display: none; } #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .deploy-btn-trigger .btn-active-text { display: inline-block; } #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .node-blue { opacity: 0.5; border-color: rgba(255, 255, 255, 0.05); box-shadow: none; } #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .node-blue .node-indicator { color: #64748b; } #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .node-green { opacity: 1; border-color: #2d9b4e; box-shadow: 0 0 12px rgba(45, 155, 78, 0.2); } #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .node-green .node-indicator { color: #2d9b4e; } #bento-deploy-ctrl:checked~.devops-bento-grid .bento-deploy-card .flow-packet { background: #2d9b4e; box-shadow: 0 0 8px #2d9b4e; } .btn-ot { display: inline-flex; align-items: center; gap: .45rem; background: var(--gradient-brand) !important; color: #ffffff !important; padding: 12px 28px; border-radius: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: var(--trans); box-shadow: 0 8px 30px rgba(45, 155, 78, 0.15); } .btn-ot:hover { background: var(--gradient-hover) !important; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(45, 155, 78, 0.25); } .btn-ot-outline { display: inline-flex; align-items: center; border: 1.5px solid rgba(255, 255, 255, 0.12); color: var(--white) !important; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: var(--trans); } .btn-ot-outline:hover { border-color: var(--ot-cyan); color: var(--ot-cyan) !important; transform: translateY(-3px); } /* Widget 3: Uptime Sparklines */ .uptime-sparkline-widget { width: 100%; display: flex; flex-direction: column; gap: 0.85rem; } .uptime-row { display: flex; flex-direction: column; gap: 0.3rem; } .uptime-header { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: #94a3b8; } .uptime-val { font-family: monospace; font-weight: 800; } .text-cyan { color: var(--cyan); } .text-green { color: #2d9b4e; } .uptime-bar-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.04); width: 100%; overflow: hidden; } .uptime-bar-fill { height: 100%; border-radius: 3px; animation: barGrow 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; } @keyframes barGrow { from { width: 0%; } to { width: 100%; } } .fill-cyan { background: var(--cyan); } .fill-green { background: #2d9b4e; } /* Widget 4: Auto-scaling Simulator */ .autoscaling-nodes-widget { width: 100%; background: rgba(2, 6, 23, 0.4); border: 1px solid rgba(0, 163, 217, 0.1); border-radius: 16px; padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-self: center; } .cluster-status-log { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 800; } .log-label { color: #64748b; font-family: monospace; } .log-info { font-family: monospace; } .log-active-text { display: none; } .nodes-grid { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; } .node-dot.running { width: 22px; height: 22px; border-radius: 6px; background: rgba(0, 163, 217, 0.15); border: 1.5px solid rgba(0, 163, 217, 0.6); box-shadow: 0 0 6px rgba(0, 163, 217, 0.3); } .scaled-node { width: 22px; height: 22px; border-radius: 6px; opacity: 0; transform: scale(0.6); pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Auto-scale triggers */ #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .scale-btn-trigger { border-color: rgba(45, 155, 78, 0.4); background: rgba(45, 155, 78, 0.1); color: #2d9b4e; } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .scale-btn-trigger .btn-ready-text { display: none; } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .scale-btn-trigger .btn-active-text { display: inline-block; } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .log-ready-text { display: none; } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .log-active-text { display: inline-block; } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .scaled-node { opacity: 1; transform: scale(1); background: rgba(45, 155, 78, 0.15); border: 1.5px solid rgba(45, 155, 78, 0.6); box-shadow: 0 0 6px rgba(45, 155, 78, 0.3); } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .scaled-1 { transition-delay: 0.1s; } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .scaled-2 { transition-delay: 0.2s; } #bento-scale-ctrl:checked~.devops-bento-grid .bento-scale-card .scaled-3 { transition-delay: 0.3s; } /* Bento Responsive Overrides */ @media (max-width: 991px) { .bento-card-devops.span-8 { grid-column: span 12 !important; } .bento-card-devops:not(.span-8) { grid-column: span 6 !important; } } @media (max-width: 768px) { .bento-card-devops { flex-direction: column !important; gap: 1.8rem; } .bento-card-devops:not(.span-8) { grid-column: span 12 !important; } .bento-widget-side { min-height: 140px; } } /* Mobile alignment override for DevOps hero panel card offsets */ @media (max-width: 768px) { .hero-panel-card { transform: none !important; } } /* ========================================================================== VEDTAM WEB MOBILE RESPONSIVENESS OVERRIDES & POLISH ========================================================================== */ /* 1. Global Navigation Smooth Mobile Transitions */ @media (max-width: 1024px) { .mobile-nav { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-20px); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .mobile-nav.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } } /* 2. DevOps Hero Section Responsive Layout & High-Res Constraints */ @media (min-width: 1025px) { .devops-hero { height: 100vh !important; max-height: 960px !important; /* Cap vertical growth on high-res monitors to prevent empty spacing voids */ min-height: 750px !important; } } @media (max-width: 1024px) { .devops-hero { height: auto !important; min-height: auto !important; padding: 120px 0 60px !important; overflow: visible !important; } .devops-hero .hero-shell { grid-template-columns: 1fr !important; text-align: center !important; gap: 3.5rem !important; min-height: auto !important; padding: 2rem 0 !important; } .devops-hero .hero-content { padding-left: 1.5rem !important; padding-right: 1.5rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .devops-hero .hero-title { font-size: clamp(2.0rem, 5.8vw, 3.2rem) !important; } .devops-hero .hero-sub { margin-left: auto !important; margin-right: auto !important; font-size: clamp(0.95rem, 2.5vw, 1.1rem) !important; } .devops-hero .hero-actions { justify-content: center !important; width: 100% !important; } .devops-hero .hero-proof-strip { justify-content: center !important; } .devops-pipeline-stack { margin: 0 auto !important; max-width: 100% !important; padding: 0 1rem !important; } .devops-hero .hero-visual { margin-top: 1rem !important; } } @media (max-width: 768px) { .hero-panel-card { padding: 1.2rem 1.4rem !important; gap: 1rem !important; } .devops-hero .pipeline-connector { left: 40px !important; } } @media (max-width: 480px) { .hero-panel-card { padding: 1rem 1.1rem !important; gap: 0.8rem !important; } .devops-hero .pipeline-connector { left: 35px !important; } .hero-panel-card h4 { font-size: 0.95rem !important; } .hero-panel-card p { font-size: 0.78rem !important; } .hero-panel-card>div:last-child { font-size: 0.68rem !important; gap: 0.3rem !important; } } /* 3. Command Center Terminal Responsive Layout (Viewport < 991px & < 576px) */ @media (max-width: 991px) { .hub-terminal .terminal-body { padding: 1.2rem !important; } } @media (max-width: 576px) { .hub-terminal .terminal-body { padding: 1rem !important; font-size: 0.8rem !important; line-height: 1.5 !important; } .hub-terminal .t-command, .hub-terminal .t-output, .hub-terminal .t-success { font-size: 0.78rem !important; } .hub-terminal .terminal-title { margin-left: 1rem !important; font-size: 0.75rem !important; } } /* 4. Diagnostics Telemetry Center Overrides (Viewport < 576px) */ @media (max-width: 576px) { .devops-tech-pill { flex-direction: column !important; align-items: flex-start !important; gap: 0.38rem !important; padding: 0.8rem 1rem !important; } .devops-tech-pill strong { font-size: 0.9rem !important; } .devops-tech-pill span { font-size: 0.82rem !important; color: var(--muted) !important; } .devops-tech-card { padding: 1.2rem !important; } .diagnostic-panel-wrapper { padding: 0.8rem 0.5rem !important; } .diag-meta { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; } .diag-visualization { padding: 0.8rem !important; min-height: 100px !important; } } /* 5. Bento Grid Widgets Touch Optimization & Sizing Fixes (Viewport < 768px) */ @media (max-width: 768px) { .bento-card-devops { padding: 1.5rem !important; min-height: auto !important; } .bento-content-side { gap: 1rem !important; } .bento-widget-side { min-height: auto !important; width: 100% !important; margin-top: 1rem !important; } .bento-scan-console { max-width: 100% !important; } .deployment-nodes-container { gap: 0.8rem !important; } .routing-traffic-flow { width: 24px !important; } } @media (max-width: 480px) { .bento-card-devops { padding: 1.2rem !important; } .deployment-nodes-container { flex-wrap: wrap !important; justify-content: center !important; gap: 0.6rem !important; } .routing-traffic-flow { display: none !important; /* Hide traffic arrow on extremely small viewports to avoid wrapping nodes */ } .env-node { width: 45% !important; min-width: 110px !important; } } /* 6. DevOps Premium Industry Cards Enhancement */ .devops-industries-grid .industry-card { height: auto !important; min-height: 420px !important; justify-content: flex-start !important; align-items: stretch !important; padding: 2.2rem 2rem !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .devops-industries-grid .industry-card .svc-content { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; justify-content: flex-start !important; align-items: flex-start !important; } .devops-industries-grid .industry-card .svc-content p { font-size: 0.92rem !important; line-height: 1.5 !important; margin-top: 0.6rem !important; color: #cbd5e1 !important; font-weight: 500 !important; } .devops-industries-grid .industry-card .industry-icon { font-size: 1.1rem !important; color: var(--cyan) !important; margin-bottom: 0.8rem !important; background: rgba(0, 163, 217, 0.1) !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(0, 163, 217, 0.25) !important; font-weight: 700 !important; } .industry-checklist { list-style: none !important; padding: 0 !important; margin: 1.2rem 0 1.5rem 0 !important; display: flex !important; flex-direction: column !important; gap: 0.68rem !important; text-align: left !important; width: 100% !important; } .industry-checklist li { font-size: 0.88rem !important; color: #e2e8f0 !important; display: flex !important; align-items: flex-start !important; gap: 0.6rem !important; line-height: 1.45 !important; font-weight: 500 !important; } .industry-checklist li i { color: var(--cyan); font-size: 0.88rem; margin-top: 0.15rem; flex-shrink: 0; } .industry-tags { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; margin-top: auto !important; padding-top: 0.8rem !important; width: 100% !important; } .industry-tags span { font-size: 0.72rem !important; background: rgba(0, 163, 217, 0.12) !important; color: var(--cyan) !important; padding: 0.22rem 0.6rem !important; border-radius: 6px !important; border: 1px solid rgba(0, 163, 217, 0.25) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } @media (max-width: 768px) { .devops-industries-grid .industry-card { min-height: auto !important; padding: 1.8rem 1.5rem !important; } } /* ========================================================================== 7. OT SECURITY PREMIUM INTERACTIVE HERO SECTION (OT-SENTINEL) ========================================================================== */ /* Brand & Accents Theme (Corporate Blue-Green & Cyan) */ :root { --ot-green: var(--accent-green); --ot-green-rgb: 45, 155, 78; --ot-cyan: var(--cyan); --ot-cyan-rgb: 0, 163, 217; --ot-red: #ef4444; --ot-red-rgb: 239, 68, 68; } /* Badge Live State Indicator */ .ot-badge-live { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(45, 155, 78, 0.1); border: 1px solid rgba(45, 155, 78, 0.25); padding: 0.45rem 1rem; border-radius: 100px; font-size: 0.78rem; font-weight: 700; color: var(--ot-green); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 1.5rem; box-shadow: 0 4px 20px rgba(45, 155, 78, 0.08); } .ot-live-dot { width: 7px; height: 7px; background: var(--ot-green); border-radius: 50%; position: relative; display: inline-block; animation: ot-dot-pulse 1.8s infinite ease-in-out; } @keyframes ot-dot-pulse { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(45, 155, 78, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(45, 155, 78, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(45, 155, 78, 0); } } /* Hero Titles & Texts */ .ot-hero .ot-title { font-size: clamp(2.2rem, 3.8vw, 3.4rem) !important; line-height: 1.15 !important; font-weight: 800 !important; color: #ffffff !important; margin-bottom: 1rem !important; letter-spacing: -0.5px !important; } .ot-hero .ot-title span { background: linear-gradient(135deg, var(--ot-green) 0%, var(--ot-cyan) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .ot-hero .ot-sub { font-size: 1.05rem !important; line-height: 1.6 !important; color: #94a3b8 !important; margin-bottom: 2rem !important; max-width: 600px !important; } /* Bullet Proof Strip */ .ot-proof-strip { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.2rem; } .ot-proof-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.95rem; color: #cbd5e1; font-weight: 600; } .ot-proof-item i { color: var(--ot-cyan); font-size: 1.05rem; } /* Hero Call to Action Buttons */ .ot-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } .btn-ot-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-brand) !important; color: #ffffff !important; font-weight: 700; padding: 0.9rem 2rem; border-radius: 12px; border: none; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 4px 20px rgba(45, 155, 78, 0.2); font-size: 0.95rem; } .btn-ot-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(45, 155, 78, 0.35); } .btn-ot-outline { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.03); color: #cbd5e1 !important; font-weight: 700; padding: 0.9rem 2rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); font-size: 0.95rem; } .btn-ot-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #ffffff !important; transform: translateY(-2px); } /* OT Page Stats Grid */ .ot-hero-stats { display: flex; gap: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.8rem; max-width: 500px; } .othstat { display: flex; flex-direction: column; gap: 0.35rem; } .othstat-num { font-size: 1.8rem; font-weight: 800; color: #ffffff; line-height: 1; } .othstat-label { font-size: 0.82rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* ========================================== OT SENTINEL CONSOLE REDESIGN & INTERACTIVE STYLING ========================================== */ .ot-console-container { position: relative; background: rgba(10, 15, 30, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 24px; padding: 1.5rem; width: 100%; max-width: 620px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(45, 155, 78, 0.05); overflow: hidden; backdrop-filter: blur(16px); z-index: 10; transition: border-color 0.5s ease, box-shadow 0.5s ease; } .ot-console-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 80% 20%, rgba(0, 163, 217, 0.04) 0%, transparent 60%); pointer-events: none; } /* Interactive secure/segmented transition states */ .state-segmented { border-color: rgba(6, 182, 212, 0.35) !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(6, 182, 212, 0.15) !important; } .state-segmented .ot-console-glow { background: radial-gradient(circle at 30% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 60%) !important; } /* Console Header Styles */ .ot-console-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1rem; margin-bottom: 1.2rem; } .ot-console-title-group { display: flex; align-items: center; gap: 0.6rem; } .ot-pulse-status-dot { width: 9px; height: 9px; background: #22c55e; /* Normal secure */ border-radius: 50%; box-shadow: 0 0 10px rgba(45, 155, 78, 0.5); animation: ot-dot-pulse-green 1.5s infinite; } .ot-pulse-status-dot.alarm { background: var(--ot-red) !important; box-shadow: 0 0 12px var(--ot-red) !important; animation: ot-dot-pulse-red 0.8s infinite !important; } .ot-pulse-status-dot.secured { background: var(--ot-cyan) !important; box-shadow: 0 0 12px var(--ot-cyan) !important; animation: ot-dot-pulse-cyan 1.5s infinite !important; } @keyframes ot-dot-pulse-green { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; box-shadow: 0 0 12px rgba(34, 197, 94, 0.8); } } @keyframes ot-dot-pulse-red { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; box-shadow: 0 0 16px var(--ot-red); } } @keyframes ot-dot-pulse-cyan { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; box-shadow: 0 0 16px var(--ot-cyan); } } .ot-console-title-group strong { font-size: 0.82rem; color: #22c55e; font-weight: 700; letter-spacing: 0.5px; } .ot-console-version { font-size: 0.72rem; color: #475569; font-family: monospace; font-weight: 600; } /* Telemetry Grid Split Layout */ .ot-console-dashboard { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.2rem; } /* Purdue Model Visual Mapping Styles */ .purdue-visual-map { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0.2rem; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; } .purdue-level { display: flex; align-items: center; gap: 0.6rem; width: 100%; } .level-indicator { font-size: 0.65rem; color: #475569; font-family: monospace; font-weight: 700; width: 38px; flex-shrink: 0; text-align: right; } .level-box { flex-grow: 1; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.5rem 0.8rem; border-radius: 8px; display: flex; flex-direction: column; gap: 0.15rem; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .level-box span { font-size: 0.8rem; font-weight: 700; color: #cbd5e1; } .level-box small { font-size: 0.65rem; color: #64748b; font-family: monospace; } /* Connection Pipes */ .purdue-connector { position: relative; height: 22px; width: 2px; background: rgba(255, 255, 255, 0.06); margin-left: 56px; } .packet-flow { position: absolute; top: 0; left: 50%; width: 4px; height: 6px; background: var(--ot-green); border-radius: 20px; transform: translateX(-50%); box-shadow: 0 0 8px var(--ot-green); } .packet-down { animation: flow-downwards 2s infinite linear; } .packet-flow-fast { animation-duration: 0.6s !important; background: var(--ot-red) !important; box-shadow: 0 0 10px var(--ot-red) !important; } @keyframes flow-downwards { 0% { top: 0%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Gateway Shield Override classes */ .level-gateway .level-box { background: rgba(0, 163, 217, 0.05); border-color: rgba(0, 163, 217, 0.25); flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem; } .level-gateway .level-box i { color: var(--ot-cyan); font-size: 0.85rem; } .level-gateway .level-box span { color: var(--ot-cyan); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; } /* Gateway Secure Phase class */ .gateway-secured .level-box { background: rgba(45, 155, 78, 0.08) !important; border-color: rgba(45, 155, 78, 0.5) !important; box-shadow: 0 0 15px rgba(45, 155, 78, 0.1) !important; } .gateway-secured .level-box i { color: var(--ot-green) !important; animation: shield-vibrate 0.3s ease; } .gateway-secured .level-box span { color: var(--ot-green) !important; } /* Vulnerable gateway alert state */ .gateway-vulnerable .level-box { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.5) !important; animation: gap-flash-red 1s infinite alternate; } .gateway-vulnerable .level-box i { color: var(--ot-red) !important; } .gateway-vulnerable .level-box span { color: var(--ot-red) !important; } @keyframes gap-flash-red { 0% { box-shadow: 0 0 2px rgba(239, 68, 68, 0.2); } 100% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); } } @keyframes shield-vibrate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* PLC field devices node animation */ .plc-zone { position: relative; } .plc-status-row { display: flex; gap: 0.35rem; margin-top: 0.2rem; } .plc-node-pulse { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; display: inline-block; } .plc-node-pulse:nth-child(1) { animation: plc-glow 1.2s infinite; } .plc-node-pulse:nth-child(2) { animation: plc-glow 1.2s infinite 0.4s; } .plc-node-pulse:nth-child(3) { animation: plc-glow 1.2s infinite 0.8s; } @keyframes plc-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; box-shadow: 0 0 8px #22c55e; } } /* ========================================== OT SENTINEL CONTROLS, TELEMETRY LOGS & BUTTONS ========================================== */ .ot-console-controls { display: flex; flex-direction: column; height: 100%; } .ot-widget-label { font-size: 0.65rem; color: #475569; font-weight: 700; letter-spacing: 0.8px; margin-bottom: 0.4rem; } .ot-telemetry-logs { background: #020617; border: 1px solid rgba(0, 163, 217, 0.35); border-radius: 10px; padding: 0.72rem; height: 155px; overflow-y: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.78rem; line-height: 1.55; color: #e2e8f0; display: flex; flex-direction: column; gap: 0.42rem; scroll-behavior: smooth; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 24px rgba(2, 6, 23, 0.45); } /* Log lines coloring */ .ot-telemetry-logs .log-line { padding: 0.14rem 0.2rem; border-left: 2px solid rgba(148, 163, 184, 0.35); } .log-line.success { color: #34d399; border-left-color: rgba(52, 211, 153, 0.8); } .log-line.warning { color: #7dd3fc; font-weight: bold; border-left-color: rgba(125, 211, 252, 0.85); } .log-line.error { color: #fca5a5; font-weight: bold; border-left-color: rgba(252, 165, 165, 0.9); animation: log-flash-red 0.5s infinite alternate; } .log-line.action { color: #22d3ee; font-weight: bold; border-left-color: rgba(34, 211, 238, 0.85); } @keyframes log-flash-red { 0% { background: transparent; } 100% { background: rgba(239, 68, 68, 0.08); } } /* Custom Scrollbar for Logs */ .ot-telemetry-logs::-webkit-scrollbar { width: 4px; } .ot-telemetry-logs::-webkit-scrollbar-track { background: transparent; } .ot-telemetry-logs::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.35); border-radius: 2px; } @media (max-width: 768px) { .ot-telemetry-logs { font-size: 0.84rem; line-height: 1.6; height: 185px; padding: 0.78rem; } } /* Alert box */ .ot-threat-alert-box { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 10px; padding: 0.6rem 0.8rem; margin-top: 0.8rem; display: none; flex-direction: column; gap: 0.25rem; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .ot-threat-alert-box.active { display: flex; animation: shake-alert 0.4s ease; } @keyframes shake-alert { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .alert-box-header { display: flex; align-items: center; gap: 0.4rem; color: var(--ot-red); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; } .ot-threat-alert-box p { font-size: 0.72rem; color: #e2e8f0; margin: 0; line-height: 1.35; } /* Large Industrial Action button */ .ot-action-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 0.6rem; background: var(--gradient-brand) !important; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 0.75rem; font-size: 0.78rem; font-weight: 800; cursor: pointer; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(45, 155, 78, 0.15); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .ot-action-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45, 155, 78, 0.25); filter: brightness(1.1); } /* Console Footer styles */ .ot-console-footer { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 1.2rem; padding-top: 0.75rem; font-size: 0.68rem; color: #475569; } .ot-console-footer strong { color: #94a3b8; } .footer-telemetry-status { font-family: monospace; } /* ========================================================================== OT HERO RESPONSIVE STYLING ========================================================================== */ @media (max-width: 991px) { .ot-hero .hero-shell { grid-template-columns: 1fr !important; gap: 3rem !important; } .ot-hero .hero-content { max-width: 100% !important; padding-right: 0 !important; text-align: center !important; } .ot-badge-live { margin-left: auto; margin-right: auto; } .ot-proof-strip { align-items: center; } .ot-actions { justify-content: center; } .ot-hero-stats { margin-left: auto; margin-right: auto; justify-content: center; } .ot-hero .hero-visual { justify-content: flex-start !important; align-items: center !important; width: 100% !important; } .ot-console-container { max-width: 580px; margin-left: auto; margin-right: auto; width: 100% !important; } } @media (max-width: 576px) { .ot-console-container { padding: 1rem; border-radius: 16px; } .ot-console-dashboard { grid-template-columns: 1fr; gap: 1.2rem; } .purdue-connector { margin-left: auto; margin-right: auto; left: 0; } .purdue-level { justify-content: center; } .level-indicator { display: none; /* Hide indicator for layout spacing on mobile */ } .level-box { max-width: 280px; text-align: center; } .ot-telemetry-logs { height: 120px; } } @media (min-width: 992px) { .ot-console-container { margin-top: 0 !important; } } /* ========================================================================== PREMIUM DYNAMIC THREAT TELEMETRY CARDS ========================================================================== */ .ot-threat { background: radial-gradient(circle at 50% 50%, rgba(17, 24, 39, 0.6) 0%, rgba(8, 13, 22, 0.95) 100%), url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm20 20h20v20H20V20z' fill='%2394a3b8' fill-opacity='.02' fill-rule='evenodd'/%3E%3C/svg%3E") !important; border-top: 1px solid rgba(239, 68, 68, 0.15) !important; border-bottom: 1px solid rgba(239, 68, 68, 0.15) !important; position: relative; overflow: hidden; } /* Atmosphere glow overlay behind cards */ .ot-threat::before { content: '\2022'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 250px; background: radial-gradient(circle, rgba(239, 68, 68, 0.08) 0%, transparent 70%); z-index: 1; pointer-events: none; } .ot-threat-card { background: rgba(13, 21, 37, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 20px !important; position: relative; overflow: hidden; padding: 2.2rem 1.8rem !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(12px) !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; z-index: 2; } .ot-threat-card:hover { transform: translateY(-8px) !important; border-color: rgba(239, 68, 68, 0.3) !important; box-shadow: 0 20px 50px rgba(239, 68, 68, 0.12) !important; } /* Scanline animation */ .ot-threat-scanline { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(239, 68, 68, 0.04) 50%, rgba(239, 68, 68, 0.04) 51%, transparent 52%); background-size: 100% 4px; opacity: 0.8; pointer-events: none; z-index: 1; } .ot-threat-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.35rem 0.8rem; border-radius: 100px; font-family: monospace; font-size: 0.72rem; color: var(--white); letter-spacing: 0.05em; margin-bottom: 1.2rem; } /* Pulse animation for badges */ .threat-badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .threat-badge-dot.pulse-red { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: otBadgePulseRed 1.8s infinite; } .threat-badge-dot.pulse-orange { background: #f97316; box-shadow: 0 0 8px #f97316; animation: otBadgePulseOrange 1.8s infinite; } .threat-badge-dot.pulse-yellow { background: #eab308; box-shadow: 0 0 8px #eab308; animation: otBadgePulseYellow 1.8s infinite; } @keyframes otBadgePulseRed { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } @keyframes otBadgePulseOrange { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } } @keyframes otBadgePulseYellow { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(234, 179, 8, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); } } .ot-threat-num-wrap { display: flex; align-items: baseline; justify-content: center; margin-bottom: 0.8rem; } .ot-threat-num { font-size: 3.5rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.02em !important; } .ot-threat-sub-num { font-size: 1.2rem; font-weight: 600; color: var(--white); opacity: 0.7; margin-left: 0.2rem; } /* Gradient text utilities for high contrast visual impact */ .text-gradient-red { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .text-gradient-orange { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .text-gradient-yellow { background: linear-gradient(135deg, #fef08a 0%, #eab308 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Micro progress indicators */ .ot-threat-progress-track { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 100px; overflow: hidden; margin: 1.2rem 0; position: relative; } .ot-threat-progress-fill { height: 100%; border-radius: 100px; transition: width 1s ease-in-out; position: relative; } .ot-threat-progress-fill::after { content: '\2022'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); animation: otBarShimmer 2.5s infinite linear; background-size: 200% 100%; } @keyframes otBarShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .ot-threat-progress-fill.color-red { background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); } .ot-threat-progress-fill.color-orange { background: linear-gradient(90deg, #f97316 0%, #c2410c 100%); box-shadow: 0 0 10px rgba(249, 115, 22, 0.5); } .ot-threat-progress-fill.color-yellow { background: linear-gradient(90deg, #eab308 0%, #a16207 100%); box-shadow: 0 0 10px rgba(234, 179, 8, 0.5); } .ot-threat-desc { color: var(--white) !important; opacity: 0.82 !important; font-size: 0.95rem !important; line-height: 1.6 !important; margin-top: 0.8rem !important; text-align: center; } /* ========================================================================== PREMIUM INTERACTIVE PURDUE DEFENSE MATRIX DASHBOARD ========================================================================== */ .ot-overview { background: var(--dark) !important; position: relative; overflow: hidden; padding: 8rem 0 !important; } /* 3D Dashboard Container */ .purdue-stack-dashboard { background: rgba(13, 21, 37, 0.45); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 2.2rem; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); position: relative; overflow: hidden; max-width: 520px; margin: 0 auto; } .dashboard-header { display: flex; align-items: center; gap: 0.6rem; font-family: monospace; font-size: 0.75rem; color: var(--white); opacity: 0.6; letter-spacing: 0.1em; margin-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 1rem; } .dashboard-circle-dot { width: 8px; height: 8px; background: var(--ot-green); border-radius: 50%; box-shadow: 0 0 8px var(--ot-green); animation: otBadgePulseGreen 2s infinite; } @keyframes otBadgePulseGreen { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .stack-layers { display: flex; flex-direction: column; gap: 0.85rem; perspective: 1000px; /* Enable 3D hover depth */ } /* Individual Layer */ .stack-layer { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 1.2rem 1.5rem; cursor: pointer; position: relative; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transform-style: preserve-3d; } .stack-layer::before { content: '\2022'; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; } /* Layer indicators (glowing left node) */ .layer-indicator { width: 4px; height: 30px; border-radius: 100px; background: transparent; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: all 0.4s ease; } .stack-layer:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); transform: translateY(-3px) translateZ(10px) rotateX(2deg); } .stack-layer:hover::before { opacity: 1; } /* Colors for specific layers on hover */ .layer-it:hover { border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 5px 20px rgba(59, 130, 246, 0.08); } .layer-it:hover .layer-indicator { background: #3b82f6; box-shadow: 0 0 10px #3b82f6; } .layer-dmz:hover { border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 5px 20px rgba(16, 185, 129, 0.08); } .layer-dmz:hover .layer-indicator { background: #10b981; box-shadow: 0 0 10px #10b981; } .layer-scada:hover { border-color: rgba(249, 115, 22, 0.3); box-shadow: 0 5px 20px rgba(249, 115, 22, 0.08); } .layer-scada:hover .layer-indicator { background: #f97316; box-shadow: 0 0 10px #f97316; } .layer-sensors:hover { border-color: rgba(239, 68, 68, 0.3); box-shadow: 0 5px 20px rgba(239, 68, 68, 0.08); } .layer-sensors:hover .layer-indicator { background: #ef4444; box-shadow: 0 0 10px #ef4444; } .layer-info { display: flex; flex-direction: column; gap: 0.2rem; z-index: 2; } .layer-level { font-family: monospace; font-size: 0.68rem; color: var(--white); opacity: 0.5; letter-spacing: 0.05em; } .layer-title { font-size: 0.95rem; font-weight: 700; color: var(--white); margin: 0; } .layer-status-badge { font-family: monospace; font-size: 0.65rem; font-weight: bold; padding: 0.25rem 0.6rem; border-radius: 4px; z-index: 2; letter-spacing: 0.02em; } .status-blue { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); } .status-green { background: rgba(16, 185, 129, 0.1); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); } .status-orange { background: rgba(249, 115, 22, 0.1); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.2); } .status-red { background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); } /* Telemetry Details Panel */ .dashboard-details-panel { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 1.2rem; margin-top: 1.8rem; position: relative; min-height: 110px; } .details-caption { font-family: monospace; font-size: 0.65rem; font-weight: bold; color: var(--white); opacity: 0.4; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .details-text { font-family: monospace; font-size: 0.78rem; color: var(--white); opacity: 0.85; line-height: 1.6; transition: opacity 0.15s ease; } /* Feature grid on the right */ .ot-overview-features { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } .ot-overview-feat { display: flex; gap: 1.2rem; align-items: flex-start; } .ot-overview-feat .feat-icon { width: 44px; height: 44px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--ot-green); flex-shrink: 0; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .ot-overview-feat:hover .feat-icon { background: var(--ot-green); color: var(--dark); box-shadow: 0 0 15px rgba(16, 185, 129, 0.35); transform: translateY(-2px); } .ot-overview-feat .feat-text { display: flex; flex-direction: column; gap: 0.3rem; } .ot-overview-feat .feat-text strong { font-size: 1.05rem; font-weight: 700; color: var(--white); } .ot-overview-feat .feat-text span { font-size: 0.9rem; color: var(--white); opacity: 0.74; line-height: 1.5; } .section-divider-ot { height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%); margin: 2.2rem 0; } .compliance-row-label { font-family: monospace; font-size: 0.72rem; font-weight: bold; color: var(--white); opacity: 0.45; letter-spacing: 0.08em; margin-bottom: 1rem; } .ot-pill-row { display: flex; flex-wrap: wrap; gap: 0.65rem; } .ot-pill { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; color: var(--white) !important; opacity: 0.85 !important; font-weight: 600 !important; padding: 0.45rem 1rem !important; border-radius: 100px !important; font-size: 0.82rem !important; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; cursor: help; } .ot-pill i { font-size: 0.75rem; opacity: 0.6; transition: color 0.3s ease; } .ot-pill:hover { background: rgba(16, 185, 129, 0.05) !important; border-color: rgba(16, 185, 129, 0.25) !important; color: var(--ot-green) !important; opacity: 1 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1) !important; } .ot-pill:hover i { color: var(--ot-green); opacity: 1; } /* Responsive Grid Tweaks */ @media (max-width: 991px) { .ot-overview { padding: 5rem 0 !important; } .ot-overview-visual { margin-bottom: 3.5rem; } .purdue-stack-dashboard { max-width: 100%; } } /* ========================================================================== PREMIUM DYNAMIC SERVICES CONTROL DECK MATRIX ========================================================================== */ .ot-services { background: var(--darker) !important; position: relative; overflow: hidden; padding: 8rem 0 !important; } /* Services Console Layout */ .ot-services-console { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; background: rgba(13, 21, 37, 0.25); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 24px; padding: 1.8rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); position: relative; } /* Sidebar Navigation Triggers */ .ot-services-sidebar { display: flex; flex-direction: column; gap: 0.65rem; } .ot-services-nav-item { display: flex; align-items: center; gap: 1rem; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 1rem 1.2rem; cursor: pointer; width: 100%; text-align: left; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } .ot-services-nav-item::before { content: '\2022'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--ot-green); transition: height 0.3s ease; box-shadow: 0 0 8px var(--ot-green); } .ot-services-nav-item .nav-number { font-family: monospace; font-size: 0.8rem; font-weight: 700; color: var(--white); opacity: 0.4; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .ot-services-nav-item .nav-label { font-size: 0.88rem; font-weight: 600; color: var(--white); opacity: 0.74; flex-grow: 1; line-height: 1.4; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .ot-services-nav-item .nav-arrow { font-size: 0.75rem; color: var(--white); opacity: 0.25; transform: translateX(-3px); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } /* Sidebar Item Hover & Active states */ .ot-services-nav-item:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } .ot-services-nav-item:hover .nav-label { opacity: 0.95; } .ot-services-nav-item.active { background: rgba(16, 185, 129, 0.04); border-color: rgba(16, 185, 129, 0.2); } .ot-services-nav-item.active::before { height: 60%; } .ot-services-nav-item.active .nav-number { color: var(--ot-green); opacity: 0.9; } .ot-services-nav-item.active .nav-label { color: var(--white); opacity: 1; font-weight: 700; } .ot-services-nav-item.active .nav-arrow { color: var(--ot-green); opacity: 0.9; transform: translateX(0); } /* Service Display Control Deck */ .ot-services-deck { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 16px; padding: 2.2rem; position: relative; overflow: hidden; display: flex; flex-direction: column; } .card-glass-glow { position: absolute; top: -100px; right: -100px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(16, 185, 129, 0.04) 0%, transparent 70%); pointer-events: none; z-index: 1; } /* Active Service Pane */ .ot-services-pane { display: none; flex-direction: column; animation: otPaneFadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .ot-services-pane.active { display: flex; } @keyframes otPaneFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .pane-header { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; } .pane-badge { font-family: monospace; font-size: 0.72rem; font-weight: bold; color: var(--ot-green); letter-spacing: 0.1em; } .pane-header h3 { font-size: 1.6rem; font-weight: 800; color: var(--white); margin: 0; letter-spacing: -0.01em; } .pane-desc { font-size: 0.95rem; color: var(--white); opacity: 0.76; line-height: 1.6; margin-bottom: 2rem; } /* Telemetry Visualization Block */ .pane-telemetry-block { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 14px; padding: 1.5rem; margin-bottom: 2rem; position: relative; } .diag-matrix-grid { display: grid; grid-template-columns: 140px 1fr; gap: 1.8rem; align-items: center; } /* Vector Mock Matrix */ .diag-matrix { width: 140px; height: 100px; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; position: relative; overflow: hidden; } /* Specific Diagnostic Visual Mockups */ .net-assessment-matrix { background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 100%); } .radar-sweep { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 50%, rgba(16, 185, 129, 0.15) 100%); animation: otRadarSweep 2.5s linear infinite; transform-origin: bottom center; } @keyframes otRadarSweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .diag-node { width: 6px; height: 6px; border-radius: 50%; position: absolute; } .diag-node.node-active { background: var(--ot-green); box-shadow: 0 0 6px var(--ot-green); animation: otNodePulse 1.5s infinite; } .diag-node.node-warning { background: #fb923c; box-shadow: 0 0 6px #fb923c; animation: otNodePulse 1.2s infinite; } .diag-node.node-secure { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; } @keyframes otNodePulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: 0.5; } } /* Shield Matrix */ .net-shield-matrix { display: flex; align-items: center; justify-content: center; } .diag-shield { position: relative; font-size: 2.2rem; color: var(--ot-green); } .shield-glow { filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5)); animation: otShieldPulse 2s ease-in-out infinite; } @keyframes otShieldPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } } .shield-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 50%; pointer-events: none; } .shield-ring.ring-1 { width: 50px; height: 50px; animation: otRingGlow 3s linear infinite; } .shield-ring.ring-2 { width: 75px; height: 75px; animation: otRingGlow 4s linear infinite reverse; } @keyframes otRingGlow { 0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.2; } 50% { opacity: 0.5; } 100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.2; } } /* Threat Matrix Chart Bars */ .net-threat-matrix { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 12px; } .diag-bar { width: 12px; background: var(--ot-green); border-radius: 2px 2px 0 0; box-shadow: 0 0 6px rgba(16, 185, 129, 0.3); transition: height 0.4s ease; } .animate-bar-1 { height: 35%; animation: otBarWave 2s ease-in-out infinite alternate; } .animate-bar-2 { height: 60%; animation: otBarWave 2.4s ease-in-out infinite alternate 0.2s; } .animate-bar-3 { height: 80%; animation: otBarWave 1.8s ease-in-out infinite alternate 0.4s; } .animate-bar-4 { height: 45%; animation: otBarWave 2.2s ease-in-out infinite alternate 0.1s; } .animate-bar-5 { height: 55%; animation: otBarWave 2.6s ease-in-out infinite alternate 0.3s; } @keyframes otBarWave { 0% { transform: scaleY(0.8); opacity: 0.7; } 100% { transform: scaleY(1.1); opacity: 1; } } /* Tunnel Graphic */ .net-tunnel-matrix { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; } .tunnel-label { font-family: monospace; font-size: 0.65rem; font-weight: bold; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 0.2rem 0.4rem; border-radius: 4px; color: var(--white); opacity: 0.7; } .tunnel-pipe { flex-grow: 1; height: 4px; background: linear-gradient(90deg, transparent, var(--ot-green), transparent); position: relative; margin: 0 6px; } .lock-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--dark); padding: 4px; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 50%; font-size: 0.75rem; color: var(--ot-green); animation: otLockPulse 2s infinite; } @keyframes otLockPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* Virtual Patching */ .net-patch-matrix { display: flex; align-items: center; justify-content: center; gap: 15px; } .patch-node { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .patch-node.node-secure { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); color: #60a5fa; } .patch-node.node-pending { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--ot-green); } /* Segmentation Graphic */ .net-segment-matrix { display: flex; align-items: center; justify-content: center; gap: 10px; } .seg-block { font-family: monospace; font-size: 0.7rem; font-weight: bold; padding: 0.4rem 0.8rem; border-radius: 6px; } .seg-block.b-it { background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); color: #60a5fa; } .seg-block.b-ot { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); color: #f87171; } .seg-line { font-size: 0.9rem; color: var(--ot-green); filter: drop-shadow(0 0 4px var(--ot-green)); } /* Compliance Radial progress */ .net-comply-matrix { display: flex; align-items: center; justify-content: center; } .diag-comply-radial { width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--ot-green) 100%, rgba(255, 255, 255, 0.04) 0); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 10px rgba(16, 185, 129, 0.25); } .diag-comply-radial::before { content: '\2022'; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: var(--dark); } .diag-comply-radial .radial-text { font-family: monospace; font-size: 0.72rem; font-weight: bold; color: var(--white); z-index: 2; } /* Asset Discovery inventory row */ .net-assets-matrix { padding: 10px; display: flex; flex-direction: column; gap: 6px; justify-content: center; } .diag-assets-list { display: flex; flex-direction: column; gap: 5px; } .diag-asset-row { display: flex; justify-content: space-between; align-items: center; font-family: monospace; font-size: 0.58rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); padding: 0.25rem 0.4rem; border-radius: 4px; } .diag-asset-row span { color: var(--white); opacity: 0.74; } .diag-asset-row .asset-ok { color: var(--ot-green); font-weight: bold; } /* Diagnostic Telemetry Text Feed */ .diag-telemetry-feed { display: flex; flex-direction: column; gap: 0.4rem; font-family: monospace; font-size: 0.72rem; border-left: 1px solid rgba(255, 255, 255, 0.05); padding-left: 1.5rem; max-height: 100px; overflow: hidden; } .feed-line { color: var(--white); opacity: 0.5; white-space: nowrap; } .feed-line.text-green { color: var(--ot-green); opacity: 0.9; } .feed-line.text-orange { color: #fb923c; opacity: 0.9; } /* Bottom Detail Grid */ .pane-grid-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1.8rem; } .detail-box { display: flex; flex-direction: column; gap: 0.8rem; } .detail-box strong { font-size: 0.95rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .detail-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .detail-box ul li { font-size: 0.86rem; color: var(--white); opacity: 0.7; position: relative; padding-left: 1rem; line-height: 1.4; } .detail-box ul li::before { content: '○'; position: absolute; left: 0; top: 0; color: var(--ot-green); font-size: 0.7rem; } .compliance-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .compliance-tags span { font-family: monospace; font-size: 0.7rem; font-weight: bold; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); color: var(--white); opacity: 0.8; padding: 0.35rem 0.7rem; border-radius: 6px; } /* ========================================================================== DYNAMIC RESPONSIVE ADJUSTMENTS FOR SERVICES CONSOLE ========================================================================== */ @media (max-width: 991px) { .ot-services-console { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.2rem; } .ot-services-sidebar { flex-direction: row; overflow-x: auto; padding-bottom: 0.6rem; gap: 0.5rem; scroll-snap-type: x mandatory; } .ot-services-nav-item { flex-shrink: 0; width: auto; scroll-snap-align: start; padding: 0.75rem 1rem; gap: 0.6rem; } .ot-services-nav-item::before { left: auto; bottom: 0; top: auto; transform: none; width: 0; height: 3px; transition: width 0.3s ease; } .ot-services-nav-item.active::before { height: 3px; width: 50%; } .ot-services-nav-item .nav-arrow { display: none; } .ot-services-deck { padding: 1.5rem; } .pane-header h3 { font-size: 1.3rem; } .diag-matrix-grid { grid-template-columns: 1fr; gap: 1.2rem; } .diag-matrix { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; } .diag-telemetry-feed { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-left: 0; padding-top: 1rem; } .pane-grid-details { grid-template-columns: 1fr; gap: 1.5rem; } } /* ========================================================================== PREMIUM DYNAMIC TECHNOLOGY PILLARS WORKBENCH ========================================================================== */ .ot-pillars { background: var(--dark) !important; position: relative; overflow: hidden; padding: 8rem 0 !important; } /* Grid Layout */ .ot-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* Glassmorphic Pillar Card */ .ot-pillar-card { background: rgba(13, 21, 37, 0.4); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35); backdrop-filter: blur(12px); position: relative; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; height: 100%; } .pillar-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.05) 0%, transparent 60%); pointer-events: none; opacity: 0.5; transition: opacity 0.4s ease; } .ot-pillar-card:hover { transform: translateY(-5px); border-color: rgba(16, 185, 129, 0.2); box-shadow: 0 20px 50px rgba(16, 185, 129, 0.08); } .ot-pillar-card:hover .pillar-glow { opacity: 1; } /* Pillar Interactive Visualizations */ .pillar-visual-wrapper { height: 130px; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.03); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .pillar-sim { width: 90%; height: 80%; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .sim-label { position: absolute; top: 6px; left: 10px; font-family: monospace; font-size: 0.55rem; font-weight: bold; color: var(--white); opacity: 0.35; letter-spacing: 0.05em; } /* Pillar 1 Simulation: Firewall Flow */ .sim-boundary { background: radial-gradient(circle, rgba(239, 68, 68, 0.04) 0%, transparent 100%); } .boundary-flow { width: 80%; height: 4px; background: rgba(255, 255, 255, 0.04); position: relative; } .firewall-wall { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 36px; background: var(--ot-green); box-shadow: 0 0 10px var(--ot-green); border-radius: 2px; } .flow-packet { position: absolute; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; } .packet-pass { background: var(--ot-green); box-shadow: 0 0 8px var(--ot-green); animation: otFlowPass 3s infinite linear; } .packet-block { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: otFlowBlock 3.2s infinite linear; } @keyframes otFlowPass { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes otFlowBlock { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 48% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { left: 48%; opacity: 0; transform: translateY(-50%) scale(1.4); } 100% { left: 48%; opacity: 0; } } /* Pillar 2 Simulation: Passive Radar Scanner */ .sim-telemetry { background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 100%); } .radar-circle { width: 66px; height: 66px; border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 50%; position: relative; box-shadow: 0 0 15px rgba(16, 185, 129, 0.05); } .radar-circle::before { content: '\2022'; position: absolute; inset: 12px; border: 1px solid rgba(16, 185, 129, 0.08); border-radius: 50%; } .radar-line { position: absolute; top: 50%; left: 50%; width: 50%; height: 1px; background: linear-gradient(90deg, transparent 50%, var(--ot-green) 100%); transform-origin: left center; animation: otRadarRotate 4s linear infinite; } @keyframes otRadarRotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* Pillar 3 Simulation: Compliance Shield Lock */ .sim-policy { background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 100%); } .policy-shield { font-size: 1.8rem; color: #60a5fa; position: relative; filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4)); } .shield-pulse-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 50%; animation: otShieldPulseGlow 3s infinite ease-out; } @keyframes otShieldPulseGlow { 0% { width: 30px; height: 30px; opacity: 0.8; } 100% { width: 70px; height: 70px; opacity: 0; } } /* Content Area */ .pillar-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; } .pillar-badge { font-family: monospace; font-size: 0.65rem; font-weight: bold; color: var(--ot-green); opacity: 0.74; letter-spacing: 0.1em; margin-bottom: 0.5rem; } .pillar-content h3 { font-size: 1rem; font-weight: 800; color: var(--white); margin: 0 0 1rem 0; letter-spacing: -0.01em; } .pillar-content p { font-size: 0.88rem; color: var(--white); opacity: 0.74; line-height: 1.5; margin-bottom: 1.8rem; } .pillar-features { list-style: none; padding: 0; margin: 0 0 2rem 0; display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; } .pillar-features li { font-size: 0.84rem; color: var(--white); opacity: 0.82; display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.4; } .pillar-features li i { color: var(--ot-green); font-size: 0.78rem; margin-top: 0.25rem; } /* Partners Branding Section */ .pillar-partners { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 1.2rem; } .partner-label { font-size: 0.72rem; font-weight: 700; color: var(--white); opacity: 0.45; letter-spacing: 0.05em; text-transform: uppercase; } .partner-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .partner-pills span { font-family: monospace; font-size: 0.68rem; font-weight: bold; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); color: var(--white); opacity: 0.8; padding: 0.25rem 0.5rem; border-radius: 4px; } /* ========================================================================== DYNAMIC RESPONSIVE ADJUSTMENTS FOR PILLARS ========================================================================== */ @media (max-width: 991px) { .ot-pillars { padding: 5rem 0 !important; } .ot-pillars-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* ========================================================================== PREMIUM DYNAMIC PROCESS PIPELINE & ECOSYSTEM ========================================================================== */ .ot-tech { background: var(--darker) !important; position: relative; overflow: hidden; padding: 8rem 0 !important; } /* Grid Layout mapping */ .ot-tech-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: flex-start; } /* Tooling Ecosystem side */ .ecosystem-categories { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; } .eco-category { display: flex; flex-direction: column; gap: 0.8rem; } .eco-cat-label { font-size: 0.76rem; font-weight: 700; color: var(--white); opacity: 0.45; letter-spacing: 0.05em; text-transform: uppercase; } .eco-badges { display: flex; flex-wrap: wrap; gap: 0.65rem; } .eco-badge { display: flex; align-items: center; gap: 0.6rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 0.65rem 1rem; color: var(--white); opacity: 0.85; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: default; } .eco-badge i { font-size: 0.8rem; color: var(--ot-green); opacity: 0.8; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .eco-badge span { font-size: 0.84rem; font-weight: 600; letter-spacing: -0.01em; } /* Tooling Badge Hover */ .eco-badge:hover { transform: translateY(-2px); background: rgba(16, 185, 129, 0.03); border-color: rgba(16, 185, 129, 0.25); color: var(--white); opacity: 1; box-shadow: 0 5px 15px rgba(16, 185, 129, 0.08); } .eco-badge:hover i { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 5px var(--ot-green)); } /* Process Lifecycle Pipeline side */ .ot-tech-pipeline { position: relative; } .pipeline-track { display: flex; flex-direction: column; gap: 2.2rem; margin-top: 2rem; position: relative; padding-left: 3rem; } /* Center connecting track line */ .pipeline-track::before { content: '\2022'; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--ot-green) 20%, var(--ot-green) 80%, rgba(16, 185, 129, 0.05) 100%); opacity: 0.3; } /* Process station nodes */ .pipeline-node { display: flex; align-items: flex-start; gap: 1.5rem; position: relative; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .node-number-wrapper { position: absolute; left: -3rem; top: -2px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; z-index: 2; } .node-num { font-family: monospace; font-size: 0.88rem; font-weight: 700; color: var(--ot-green); background: var(--darker); border: 2px solid var(--ot-green); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .node-pulse { position: absolute; width: 32px; height: 32px; border: 1px solid rgba(16, 185, 129, 0.5); border-radius: 50%; pointer-events: none; animation: otNodePulseRing 2s infinite ease-out; opacity: 0; } @keyframes otNodePulseRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } } .node-content { display: flex; flex-direction: column; gap: 0.4rem; } .node-content h3 { font-size: 1.15rem; font-weight: 800; color: var(--white); margin: 0; letter-spacing: -0.01em; transition: color 0.3s ease; } .node-content p { font-size: 0.86rem; color: var(--white); opacity: 0.7; line-height: 1.5; margin: 0; } /* Process node hover triggers */ .pipeline-node:hover .node-num { color: var(--white); background: var(--ot-green); box-shadow: 0 0 15px var(--ot-green); } .pipeline-node:hover .node-content h3 { color: var(--ot-green); } /* ========================================================================== DYNAMIC RESPONSIVE ADJUSTMENTS FOR PROCESS & ECOSYSTEM ========================================================================== */ @media (max-width: 991px) { .ot-tech-grid { grid-template-columns: 1fr; gap: 3rem; } } /* ========================================================================== PREMIUM DYNAMIC BENTO MATRIX (WHY CHOOSE VEDTAM) ========================================================================== */ .ot-why { background: var(--dark) !important; position: relative; overflow: hidden; padding: 8rem 0 !important; } /* Grid Layout mapping */ .ot-why-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 4rem; align-items: center; } /* Left Column: Trust presentation block */ .trust-mesh-box { display: flex; gap: 1.5rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 16px; padding: 1.5rem; margin-top: 2rem; backdrop-filter: blur(8px); } .trust-stat { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .stat-number { font-size: 1.8rem; font-weight: 800; color: var(--ot-green); letter-spacing: -0.02em; text-shadow: 0 0 10px rgba(16, 185, 129, 0.15); } .stat-text { font-size: 0.76rem; color: var(--white); opacity: 0.65; line-height: 1.4; } /* Right Column: Bento Dashboard Grid Layout */ .ot-why-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* Bento Cards base */ .bento-card { background: rgba(13, 21, 37, 0.35); border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 18px; padding: 1.5rem; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; gap: 1.2rem; backdrop-filter: blur(10px); } /* Top bento card spans both columns */ .card-scada { grid-column: span 2; flex-direction: row; align-items: center; gap: 2rem; } .bento-card-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.03) 0%, transparent 60%); pointer-events: none; opacity: 0.5; transition: opacity 0.4s ease; } /* Bento Card Hover */ .bento-card:hover { transform: translateY(-4px); border-color: rgba(16, 185, 129, 0.2); box-shadow: 0 15px 40px rgba(16, 185, 129, 0.06); } .bento-card:hover .bento-card-glow { opacity: 1; } /* Card Visuals */ .bento-card-visual { height: 60px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.02); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } /* Visual 1: SCADA Mesh */ .card-scada .bento-card-visual { width: 130px; height: 90px; flex-shrink: 0; } .visual-scada-mesh { width: 80%; height: 80%; position: relative; } .mesh-point { position: absolute; width: 6px; height: 6px; background: var(--ot-green); border-radius: 50%; box-shadow: 0 0 8px var(--ot-green); } .mesh-point.p1 { top: 20%; left: 20%; animation: otMeshPulse 2.5s infinite ease-in-out; } .mesh-point.p2 { top: 70%; left: 50%; animation: otMeshPulse 2.5s infinite ease-in-out 0.8s; } .mesh-point.p3 { top: 30%; left: 80%; animation: otMeshPulse 2.5s infinite ease-in-out 1.6s; } .visual-scada-mesh::before { content: '\2022'; position: absolute; top: 23%; left: 23%; width: 57%; height: 47%; border-left: 1px dashed rgba(16, 185, 129, 0.3); border-bottom: 1px dashed rgba(16, 185, 129, 0.3); pointer-events: none; } @keyframes otMeshPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.6); opacity: 1; filter: drop-shadow(0 0 4px var(--ot-green)); } } /* Visual 2: Compliance Progress */ .visual-progress-bar { width: 85%; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; position: relative; } .progress-fill { height: 100%; background: var(--ot-green); box-shadow: 0 0 8px var(--ot-green); transform-origin: left center; animation: otProgressLoad 3.5s infinite cubic-bezier(0.4, 0, 0.2, 1); } .visual-progress-text { position: absolute; bottom: 4px; font-family: monospace; font-size: 0.55rem; font-weight: 700; color: var(--ot-green); letter-spacing: 0.05em; opacity: 0.8; } @keyframes otProgressLoad { 0% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } } /* Visual 3: Downtime Pill */ .downtime-pill { font-family: monospace; font-size: 0.72rem; font-weight: 800; color: var(--ot-green); background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.3); padding: 0.4rem 0.8rem; border-radius: 6px; box-shadow: 0 0 10px rgba(16, 185, 129, 0.05); animation: otDowntimePulse 2.2s infinite ease-in-out; } @keyframes otDowntimePulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); } } /* Visual 4: Legacy Bridge */ .visual-bridge { display: flex; align-items: center; gap: 0.5rem; width: 90%; justify-content: center; } .bridge-node { font-family: monospace; font-size: 0.55rem; font-weight: bold; padding: 0.25rem 0.5rem; border-radius: 4px; } .bridge-node.legacy { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); color: #f87171; } .bridge-node.modern { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); color: var(--ot-green); } .bridge-line { flex-grow: 1; height: 1px; background: linear-gradient(90deg, #f87171 0%, var(--ot-green) 100%); position: relative; } .bridge-line::after { content: '\2022'; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; background: var(--ot-green); border-radius: 50%; transform: translateY(-50%); animation: otBridgePulse 2.5s infinite linear; } @keyframes otBridgePulse { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* Visual 5: SOC Waves */ .visual-soc-chart { width: 80%; height: 40px; display: flex; align-items: flex-end; gap: 3px; } .chart-wave { flex-grow: 1; background: var(--ot-green); border-radius: 1px; animation: otSocChartAnim 1.8s infinite ease-in-out; opacity: 0.7; } .chart-wave.wave-1 { height: 30%; animation-delay: 0.2s; } .chart-wave.wave-2 { height: 60%; animation-delay: 0.4s; } .visual-soc-chart::before { content: '\2022'; flex-grow: 1; height: 45%; background: var(--ot-green); border-radius: 1px; animation: otSocChartAnim 1.8s infinite ease-in-out 0.6s; } .visual-soc-chart::after { content: '\2022'; flex-grow: 1; height: 20%; background: var(--ot-green); border-radius: 1px; animation: otSocChartAnim 1.8s infinite ease-in-out 0.8s; } @keyframes otSocChartAnim { 0%, 100% { height: 20%; } 50% { height: 85%; opacity: 1; filter: drop-shadow(0 0 3px var(--ot-green)); } } /* Bento Card Typography details */ .bento-card-content { display: flex; flex-direction: column; gap: 0.4rem; } .bento-card-content h3 { font-size: 1.05rem; font-weight: 800; color: var(--white); margin: 0; letter-spacing: -0.01em; } .bento-card-content p { font-size: 0.82rem; color: var(--white); opacity: 0.68; line-height: 1.45; margin: 0; } /* ========================================================================== DYNAMIC RESPONSIVE ADJUSTMENTS FOR BENTO ========================================================================== */ @media (max-width: 991px) { .ot-why-grid { grid-template-columns: 1fr; gap: 3.5rem; } } .scroll-top:hover svg { transform: translateY(-2px); } @media (max-width: 767px) { .ot-why-bento { grid-template-columns: 1fr; } .card-scada .bento-card-visual { width: 100%; height: 70px; } } /* ========================================================================== PREMIUM DYNAMIC MISSION CONTROL SECTORS (INDUSTRIES WE SECURE) ========================================================================== */ .ot-industries { background: var(--darker) !important; position: relative; overflow: hidden; padding: 8rem 0 !important; } /* Dashboard Console Grid Wrapper */ .ot-ind-dashboard { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 2rem; background: rgba(13, 21, 37, 0.25); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); } /* Left side navigation menu */ .ind-console-nav { background: rgba(13, 21, 37, 0.4); border-right: 1px solid rgba(255, 255, 255, 0.04); padding: 2.2rem; display: flex; flex-direction: column; gap: 1.5rem; } .console-nav-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; } .system-status-indicator { font-family: monospace; font-size: 0.65rem; font-weight: 700; color: var(--ot-green); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.4rem; } .pulse-dot { width: 6px; height: 6px; background: var(--ot-green); border-radius: 50%; box-shadow: 0 0 8px var(--ot-green); animation: otIndPulse 1.8s infinite ease-in-out; } @keyframes otIndPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .console-nav-header h3 { font-size: 0.95rem; font-weight: 800; color: var(--white); opacity: 0.45; letter-spacing: 0.05em; margin: 0; } .console-nav-buttons { display: flex; flex-direction: column; gap: 0.8rem; } /* Console buttons */ .ind-console-btn { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; color: var(--white); opacity: 0.7; text-align: left; cursor: pointer; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } .ind-console-btn::before { content: '\2022'; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ot-green); transform: scaleY(0); transition: transform 0.3s ease; } .ind-console-btn .btn-num { font-family: monospace; font-size: 0.84rem; font-weight: 700; color: var(--ot-green); opacity: 0.6; transition: opacity 0.3s ease; } .ind-console-btn .btn-label { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; transition: transform 0.3s ease; } /* Console button interactions */ .ind-console-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } .ind-console-btn.active { opacity: 1; background: rgba(16, 185, 129, 0.03); border-color: rgba(16, 185, 129, 0.25); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05); } .ind-console-btn.active::before { transform: scaleY(1); } .ind-console-btn.active .btn-num { opacity: 1; } .ind-console-btn.active .btn-label { transform: translateX(4px); color: var(--ot-green); } /* Right side screen terminals */ .ind-terminal-screen { position: relative; min-height: 420px; } .ind-panel { display: none; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; flex-direction: column; justify-content: flex-end; padding: 3rem; box-sizing: border-box; } .ind-panel.active { display: flex; opacity: 1; animation: otIndPanelFadeIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } @keyframes otIndPanelFadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* Panel Background visual with blur-to-clear overlay */ .ind-panel-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; filter: brightness(0.75); transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .ind-panel:hover .ind-panel-bg { transform: scale(1.03); } .ind-panel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(13, 21, 37, 0.2) 0%, rgba(13, 21, 37, 0.7) 40%, rgba(13, 21, 37, 0.95) 100%); z-index: 2; } /* Swapped panel content text */ .ind-panel-content { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 1.2rem; } .panel-badge { font-family: monospace; font-size: 0.68rem; font-weight: 700; color: var(--ot-green); letter-spacing: 0.05em; opacity: 0.9; } .ind-panel-content h3 { font-size: 1.8rem; font-weight: 800; color: var(--white); margin: 0; letter-spacing: -0.02em; } .ind-panel-content p { font-size: 0.95rem; color: var(--white); opacity: 0.8; line-height: 1.6; margin: 0; max-width: 580px; } /* Secondary digital metrics readout */ .panel-telemetry-metrics { display: flex; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 1.2rem; margin-top: 0.5rem; } .metric-box { display: flex; flex-direction: column; gap: 0.3rem; } .metric-box strong { font-size: 0.65rem; font-weight: 700; color: var(--white); opacity: 0.45; letter-spacing: 0.05em; text-transform: uppercase; } .metric-box span { font-family: monospace; font-size: 0.8rem; font-weight: bold; } .metric-box span.text-green { color: var(--ot-green); text-shadow: 0 0 10px rgba(16, 185, 129, 0.2); } /* ========================================================================== DYNAMIC RESPONSIVE ADJUSTMENTS FOR MISSION CONTROL SECTORS ========================================================================== */ @media (max-width: 991px) { .ot-ind-dashboard { grid-template-columns: 1fr; } .ind-console-nav { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding: 1.8rem; } .console-nav-buttons { flex-direction: row; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; gap: 0.8rem; } .console-nav-buttons::-webkit-scrollbar { display: none; } .ind-console-btn { flex-shrink: 0; padding: 0.8rem 1.2rem; } .ind-console-btn::before { left: 0; right: 0; top: auto; bottom: 0; height: 3px; width: auto; transform: scaleX(0); } .ind-console-btn.active::before { transform: scaleX(1); } .ind-console-btn.active .btn-label { transform: none; } } .scroll-top:hover svg { transform: translateY(-2px); } @media (max-width: 767px) { .ind-panel { padding: 2rem; min-height: 380px; } .ind-panel-content h3 { font-size: 1.5rem; } .ind-panel-content p { font-size: 0.88rem; } } /* --- Cloud Hero Custom Interactive Styles --- */ .cloud-hero-panel-card { position: relative; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); } .cloud-hero-panel-card:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(6, 182, 212, 0.7) !important; box-shadow: 0 12px 40px rgba(6, 182, 212, 0.25); background: rgba(12, 21, 36, 0.95) !important; } @keyframes cloudPulseLine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } @keyframes cloudPulseGlow { 0%, 100% { opacity: 0.6; box-shadow: 0 0 4px #10b981; } 50% { opacity: 1; box-shadow: 0 0 12px #10b981; } } /* Ensure proper responsive wrapping on mobile */ @media (max-width: 991px) { .cloud-hero .hero-shell { grid-template-columns: 1fr; gap: 3rem; } .cloud-hero .hero-visual { margin-top: 2rem; } .cloud-hero-panel-card { transform: none !important; } .cloud-pipeline-connector { display: none; } } /* --- Cloud Overview Interactive Simulator Styles --- */ .cloud-model-btn.active { box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25); } @keyframes pubNodePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 4px rgba(6, 182, 212, 0.2); } 50% { transform: scale(1.08); box-shadow: 0 0 12px rgba(6, 182, 212, 0.6); } } @keyframes vaultRotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes hybridPacketFlow { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes scaleActiveGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* --- Cloud Services Terminal & Console Styles --- */ .cloud-console-btn { border: 1px solid rgba(255, 255, 255, 0.05) !important; background: rgba(12, 21, 36, 0.5) !important; color: #94a3b8 !important; } .cloud-console-btn:hover { border-color: rgba(6, 182, 212, 0.4) !important; background: rgba(12, 21, 36, 0.8) !important; transform: translateX(5px); color: #ffffff !important; } .cloud-console-btn.active { border-color: rgba(6, 182, 212, 0.6) !important; background: rgba(12, 21, 36, 0.95) !important; box-shadow: 0 4px 20px rgba(6, 182, 212, 0.15); color: #ffffff !important; } .cloud-console-btn.active .btn-icon { background: rgba(6, 182, 212, 0.2) !important; border-color: rgba(6, 182, 212, 0.6) !important; color: #06b6d4 !important; } .cloud-console-btn.active .btn-num { color: #06b6d4 !important; } @keyframes terminalScan { 0% { top: 0%; opacity: 0.4; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0.4; } } /* Responsive grid adaptations for services console */ @media (max-width: 991px) { .cloud-console-wrapper { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .cloud-console-deck { flex-direction: row !important; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; gap: 0.8rem; } .cloud-console-deck::-webkit-scrollbar { display: none; } .cloud-console-btn { flex-shrink: 0; padding: 0.8rem 1.2rem !important; } .cloud-console-btn:hover { transform: none !important; } } /* --- Cloud Capability Shield Custom Hover Styles --- */ .cloud-capability-shield { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .cloud-capability-shield:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(6, 182, 212, 0.5) !important; box-shadow: 0 12px 30px rgba(6, 182, 212, 0.12); } .cloud-capability-shield:hover .shield-icon-ring { background: rgba(6, 182, 212, 0.15) !important; border-color: rgba(6, 182, 212, 0.6) !important; color: #06b6d4 !important; transform: rotate(15deg); } .cloud-capability-shield:hover .status-bar-fill { transform: scaleX(1) !important; } /* Responsive grid for capability shields */ @media (max-width: 991px) { .cloud-capability-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 650px) { .cloud-capability-grid { grid-template-columns: 1fr !important; } } /* OT Security Page Footer Brand Text Color Customization */ .ot-page .footer-brand p, .ot-page .footer-brand .footer-contact a { color: #ffffff !important; } .ot-page .footer-brand .footer-contact a:hover { color: var(--accent-green) !important; } /* ==================================================== VEDTAM CLOUD CONTROL ENGINE (VCCE) INTERACTIVE STACK ==================================================== */ .vcce-wrapper { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 2rem; } .vcce-tabs-deck { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-bottom: 1rem; } .vcce-tab-btn { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.4rem; background: rgba(12, 21, 36, 0.45); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; color: #94a3b8; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); } .vcce-tab-btn:hover { background: rgba(12, 21, 36, 0.7); border-color: rgba(6, 182, 212, 0.2); color: #ffffff; transform: translateY(-2px); } .vcce-tab-btn.active { background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.4); color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .vcce-tab-btn .tab-icon { font-size: 0.95rem; transition: transform 0.3s ease; } .vcce-tab-btn.active .tab-icon { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.5)); } .vcce-grid-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: stretch; } @media (max-width: 991px) { .vcce-grid-layout { grid-template-columns: 1fr; } } /* Tool Matrix Column */ .vcce-tool-matrix { display: flex; flex-direction: column; gap: 1.2rem; } .vcce-matrix-pane { display: none; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.9rem; animation: vcceFadeIn 0.5s ease forwards; } .vcce-matrix-pane.active { display: grid; } .vcce-tool-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem; background: rgba(18, 26, 42, 0.4); border: 1px solid rgba(56, 130, 200, 0.1); border-radius: 18px; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .vcce-tool-card:hover { background: rgba(18, 26, 42, 0.6); border-color: rgba(6, 182, 212, 0.3); transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(6, 182, 212, 0.05); } .vcce-tool-card::before { content: '\2022'; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent); transform: scaleX(0); transition: transform 0.4s ease; } .vcce-tool-card:hover::before { transform: scaleX(1); } .vcce-tool-icon-wrapper { width: 42px; height: 42px; border-radius: 12px; background: rgba(6, 182, 212, 0.06); border: 1px solid rgba(6, 182, 212, 0.15); display: flex; align-items: center; justify-content: center; color: #06b6d4; font-size: 1.2rem; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .vcce-tool-card:hover .vcce-tool-icon-wrapper { background: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.4); color: #ffffff; box-shadow: 0 0 10px rgba(6, 182, 212, 0.3); } .vcce-tool-name { font-size: 0.95rem; font-weight: 800; color: #ffffff; } .vcce-tool-tag { font-size: 0.7rem; font-family: monospace; color: #64748b; text-transform: uppercase; font-weight: 700; } /* Dynamic brand highlights */ .vcce-tool-card[data-brand="aws"]:hover { border-color: rgba(255, 153, 0, 0.4); } .vcce-tool-card[data-brand="aws"]:hover .vcce-tool-icon-wrapper { color: #ff9900; border-color: rgba(255, 153, 0, 0.4); background: rgba(255, 153, 0, 0.08); box-shadow: 0 0 10px rgba(255, 153, 0, 0.2); } .vcce-tool-card[data-brand="azure"]:hover { border-color: rgba(0, 120, 212, 0.4); } .vcce-tool-card[data-brand="azure"]:hover .vcce-tool-icon-wrapper { color: #0078d4; border-color: rgba(0, 120, 212, 0.4); background: rgba(0, 120, 212, 0.08); box-shadow: 0 0 10px rgba(0, 120, 212, 0.2); } .vcce-tool-card[data-brand="gcp"]:hover { border-color: rgba(66, 133, 244, 0.4); } .vcce-tool-card[data-brand="gcp"]:hover .vcce-tool-icon-wrapper { color: #4285f4; border-color: rgba(66, 133, 244, 0.4); background: rgba(66, 133, 244, 0.08); box-shadow: 0 0 10px rgba(66, 133, 244, 0.2); } .vcce-tool-card[data-brand="terraform"]:hover { border-color: rgba(132, 79, 246, 0.4); } .vcce-tool-card[data-brand="terraform"]:hover .vcce-tool-icon-wrapper { color: #844ff6; border-color: rgba(132, 79, 246, 0.4); background: rgba(132, 79, 246, 0.08); box-shadow: 0 0 10px rgba(132, 79, 246, 0.2); } .vcce-tool-card[data-brand="k8s"]:hover { border-color: rgba(50, 108, 230, 0.4); } .vcce-tool-card[data-brand="k8s"]:hover .vcce-tool-icon-wrapper { color: #326ce5; border-color: rgba(50, 108, 230, 0.4); background: rgba(50, 108, 230, 0.08); box-shadow: 0 0 10px rgba(50, 108, 230, 0.2); } /* Telemetry Terminal chassis */ .vcce-telemetry-console { background: rgba(10, 18, 30, 0.88); border: 1px solid rgba(6, 182, 212, 0.25); border-radius: 24px; backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 410px; } .vcce-console-glow { position: absolute; width: 150px; height: 150px; background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%); top: -50px; right: -50px; pointer-events: none; } .vcce-console-header { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.4rem; background: rgba(6, 12, 22, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vcce-dot-group { display: flex; gap: 0.4rem; } .vcce-dot { width: 9px; height: 9px; border-radius: 50%; } .vcce-dot.red { background: #ef4444; } .vcce-dot.yellow { background: #f59e0b; } .vcce-dot.green { background: #10b981; } .vcce-host-badge { font-family: monospace; font-size: 0.72rem; color: #06b6d4; font-weight: 700; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.4rem; } .vcce-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: vccePulseGlow 1.5s infinite; } .vcce-console-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; flex-grow: 1; } .vcce-cli-terminal { background: rgba(5, 8, 14, 0.7); border: 1px solid rgba(6, 182, 212, 0.12); border-radius: 12px; padding: 1rem 1.2rem; font-family: 'Consolas', 'Fira Code', monospace; font-size: 0.78rem; line-height: 1.5; color: #c084fc; overflow: hidden; height: 95px; position: relative; } .vcce-cli-terminal .cli-green { color: #10b981; } .vcce-cli-terminal .cli-cyan { color: #06b6d4; } .vcce-cli-terminal .cli-white { color: #ffffff; } .vcce-cli-terminal::after { content: '\2022'; position: absolute; bottom: 0; left: 0; right: 0; height: 25px; background: linear-gradient(to top, rgba(5, 8, 14, 0.95), transparent); pointer-events: none; } .vcce-visual-canvas { flex-grow: 1; position: relative; min-height: 180px; display: flex; align-items: center; justify-content: center; } .vcce-canvas-screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; animation: vcceFadeIn 0.6s ease forwards; } .vcce-canvas-screen.active { display: flex; } /* SCREEN 1: Cloud Platforms Topology Map */ .platforms-map-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .platforms-central-hub { width: 72px; height: 72px; border-radius: 50%; background: rgba(6, 182, 212, 0.15); border: 2px solid #06b6d4; box-shadow: 0 0 25px rgba(6, 182, 212, 0.4), inset 0 0 10px rgba(6, 182, 212, 0.2); display: flex; align-items: center; justify-content: center; z-index: 10; } .platforms-central-hub img { width: 38px; filter: brightness(0) invert(1); } .platform-node-node { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(18, 26, 42, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; z-index: 10; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .platform-node-node.node-aws { top: 10px; left: 20%; border-color: rgba(255, 153, 0, 0.3); color: #ff9900; box-shadow: 0 0 15px rgba(255, 153, 0, 0.1); } .platform-node-node.node-azure { top: 10px; right: 20%; border-color: rgba(0, 120, 212, 0.3); color: #0078d4; box-shadow: 0 0 15px rgba(0, 120, 212, 0.1); } .platform-node-node.node-gcp { bottom: 10px; border-color: rgba(66, 133, 244, 0.3); color: #4285f4; box-shadow: 0 0 15px rgba(66, 133, 244, 0.1); } .platforms-svg-connections { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .topo-link-line { stroke-dasharray: 6 4; animation: topoLineDash 20s infinite linear; } .platforms-latency-meters { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 0.35rem 0.5rem; } .latency-metric { font-size: 0.68rem; font-family: monospace; color: #64748b; } .latency-metric strong { color: #10b981; } /* SCREEN 2: IaC Provisioning Pipeline */ .iac-pipeline-container { width: 100%; display: flex; flex-direction: column; gap: 1.5rem; padding: 0.5rem 1rem; } .iac-steps-row { display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; } .iac-steps-row::before { content: '\2022'; position: absolute; left: 5%; right: 5%; height: 2px; background: rgba(6, 182, 212, 0.1); z-index: 1; } .iac-pipeline-progress-bar-fill { position: absolute; left: 5%; height: 2px; background: linear-gradient(90deg, #06b6d4, #10b981); width: 0%; z-index: 2; transition: width 0.4s ease; } .iac-step-node { width: 38px; height: 38px; border-radius: 50%; background: rgba(15, 23, 42, 0.9); border: 2px solid rgba(6, 182, 212, 0.15); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #64748b; z-index: 3; position: relative; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .iac-step-node .node-check { display: none; font-size: 0.72rem; color: #ffffff; } .iac-step-node.completed { background: #10b981; border-color: #10b981; color: #ffffff; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); } .iac-step-node.completed .node-icon { display: none; } .iac-step-node.completed .node-check { display: inline-block; } .iac-step-node.current { border-color: #06b6d4; color: #06b6d4; background: rgba(6, 182, 212, 0.12); box-shadow: 0 0 15px rgba(6, 182, 212, 0.3); animation: iacNodePulse 1.5s infinite; } .iac-step-node .node-label-txt { position: absolute; top: 45px; white-space: nowrap; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; transition: color 0.3s ease; } .iac-step-node.current .node-label-txt { color: #06b6d4; } .iac-step-node.completed .node-label-txt { color: #10b981; } .iac-meta-panel { display: flex; justify-content: space-between; align-items: center; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(6, 182, 212, 0.12); border-radius: 12px; padding: 0.6rem 1rem; margin-top: 0.8rem; } .iac-action-trigger { background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); color: #06b6d4; padding: 0.35rem 0.8rem; border-radius: 8px; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: all 0.28s ease; } .iac-action-trigger:hover { background: #06b6d4; color: #ffffff; box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); } /* SCREEN 3: Kubernetes Pod Matrix */ .k8s-matrix-container { width: 100%; display: flex; flex-direction: column; gap: 1rem; } .k8s-pod-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; } .vcce-pod-node { aspect-ratio: 1; background: rgba(100, 116, 139, 0.1); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; position: relative; transition: all 0.4s ease; } .vcce-pod-node.active { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 0 8px rgba(16, 185, 129, 0.15); } .vcce-pod-node.active::before { content: '\2022'; position: absolute; inset: 4px; border-radius: 4px; background: #10b981; animation: vccePodPulse 2s infinite ease-in-out; } .vcce-pod-node.scaled-pod { opacity: 0; transform: scale(0.5); } .vcce-pod-node.scaled-pod.active { opacity: 1; transform: scale(1); } .k8s-metrics-bar { display: flex; gap: 1.5rem; background: rgba(15, 23, 42, 0.4); border-radius: 12px; padding: 0.6rem 1rem; align-items: center; } .k8s-metric-item { flex-grow: 1; } .k8s-metric-header-row { display: flex; justify-content: space-between; font-size: 0.65rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 0.25rem; } .k8s-metric-header-row span.val { color: #06b6d4; } .k8s-progress-track { height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; } .k8s-progress-fill { height: 100%; background: #06b6d4; width: 45%; transition: width 0.5s ease; } /* SCREEN 4: Security Radar */ .sec-radar-container { width: 100%; display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem; align-items: center; } .sec-radar-visual { width: 130px; height: 130px; border-radius: 50%; border: 1px solid rgba(6, 182, 212, 0.2); position: relative; background: radial-gradient(circle, rgba(6, 182, 212, 0.05) 0%, transparent 70%); display: flex; align-items: center; justify-content: center; } .sec-radar-ring { position: absolute; border: 1px dashed rgba(6, 182, 212, 0.15); border-radius: 50%; } .sec-radar-ring.ring-1 { width: 90px; height: 90px; } .sec-radar-ring.ring-2 { width: 50px; height: 50px; } .sec-radar-sweeper { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(6, 182, 212, 0.15) 0deg, rgba(6, 182, 212, 0) 90deg); animation: vcceRadarSweep 4s infinite linear; } .sec-radar-shield-icon { font-size: 1.6rem; color: #06b6d4; filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4)); z-index: 5; } .sec-metrics-group { display: flex; flex-direction: column; gap: 0.6rem; } .sec-metric-card { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 0.5rem 0.8rem; display: flex; justify-content: space-between; align-items: center; } .sec-metric-card span.label { font-size: 0.72rem; color: #64748b; } .sec-metric-card strong.value { font-size: 0.82rem; color: #10b981; } /* SCREEN 5: DR & Replication */ .dr-sync-container { width: 100%; display: flex; flex-direction: column; gap: 1.2rem; } .dr-sync-topology { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; } .dr-node-box { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(6, 182, 212, 0.2); border-radius: 12px; padding: 0.6rem 0.9rem; text-align: center; width: 110px; position: relative; overflow: hidden; } .dr-node-box strong { font-size: 0.72rem; display: block; color: #ffffff; margin-bottom: 0.2rem; } .dr-node-box span { font-size: 0.6rem; color: #06b6d4; font-family: monospace; font-weight: 700; } .dr-sync-flow-arrow { flex-grow: 1; height: 2px; background: rgba(6, 182, 212, 0.15); position: relative; margin: 0 1rem; } .dr-sync-flow-arrow::before { content: '\2022'; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #06b6d4; box-shadow: 0 0 10px #06b6d4; top: -3px; animation: drFlowPacket 2s infinite linear; } .dr-sync-progress-card { background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(6, 182, 212, 0.15); border-radius: 12px; padding: 0.8rem 1.2rem; } .dr-progress-header { display: flex; justify-content: space-between; margin-bottom: 0.4rem; } .dr-progress-header span.lbl { font-size: 0.72rem; color: #94a3b8; font-weight: 700; } .dr-progress-header span.status-txt { font-size: 0.72rem; color: #10b981; font-weight: 800; } .dr-progress-track { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; } .dr-progress-fill { height: 100%; background: linear-gradient(90deg, #06b6d4, #10b981); width: 99.8%; animation: drPulseBar 2.5s infinite; } .dr-details-row { display: flex; justify-content: space-between; font-size: 0.62rem; font-family: monospace; color: #64748b; } /* Animations */ @keyframes vcceFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes vccePulseGlow { 0% { box-shadow: 0 0 4px #10b981; opacity: 0.8; } 50% { box-shadow: 0 0 12px #10b981; opacity: 1; } 100% { box-shadow: 0 0 4px #10b981; opacity: 0.8; } } @keyframes topoLineDash { to { stroke-dashoffset: -1000px; } } @keyframes iacNodePulse { 0% { box-shadow: 0 0 4px rgba(6, 182, 212, 0.2); } 50% { box-shadow: 0 0 15px rgba(6, 182, 212, 0.45); } 100% { box-shadow: 0 0 4px rgba(6, 182, 212, 0.2); } } @keyframes vccePodPulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @keyframes vcceRadarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes drFlowPacket { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes drPulseBar { 0% { opacity: 0.9; } 50% { opacity: 1; filter: brightness(1.15); } 100% { opacity: 0.9; } } /* ==================================================== CLOUD WHY VEDTAM VALUE ENGINE STYLES ==================================================== */ .cloud-why-section { padding: 8rem 0; position: relative; background: radial-gradient(120% 120% at 50% 0%, rgba(6, 182, 212, 0.015) 0%, transparent 100%); overflow: hidden; } .cloud-why-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center; } /* Pillar Cards (Left) */ .why-pillars-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; } .why-pillar-card { display: flex; gap: 1.2rem; padding: 1.5rem; background: rgba(10, 18, 30, 0.4); border: 1px solid rgba(255, 255, 255, 0.03); border-left: 4px solid transparent; border-radius: 12px; cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .why-pillar-card:hover, .why-pillar-card.active { background: rgba(10, 18, 30, 0.75); border-color: rgba(6, 182, 212, 0.2); border-left-color: #06b6d4; transform: translateX(6px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(6, 182, 212, 0.05); } .why-pillar-icon-box { width: 48px; height: 48px; border-radius: 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #94a3b8; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; flex-shrink: 0; } .why-pillar-card:hover .why-pillar-icon-box, .why-pillar-card.active .why-pillar-icon-box { background: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.3); color: #06b6d4; box-shadow: 0 0 10px rgba(6, 182, 212, 0.15); } .why-pillar-content h3 { font-size: 1.1rem; font-weight: 600; color: #f1f5f9; margin-bottom: 0.4rem; transition: color 0.3s ease; } .why-pillar-card:hover h3, .why-pillar-card.active h3 { color: #ffffff; } .why-pillar-content p { font-size: 0.88rem; color: #94a3b8; line-height: 1.5; } /* Telemetry Hub (Right) */ .why-telemetry-console { background: rgba(10, 18, 30, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 1.8rem; position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); overflow: hidden; height: 380px; display: flex; flex-direction: column; } .why-telemetry-console::before { content: '\2022'; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent); } /* Telemetry Screen Transitions */ .why-canvas-screen { display: none; opacity: 0; transform: scale(0.97); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); flex-grow: 1; flex-direction: column; justify-content: space-between; } .why-canvas-screen.active { display: flex; opacity: 1; transform: scale(1); } /* Telemetry Header inside Screen */ .why-screen-header { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 0.8rem; margin-bottom: 1rem; } .why-screen-header h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #06b6d4; font-weight: 700; margin-bottom: 0.2rem; } .why-screen-header span { font-size: 0.65rem; color: #64748b; font-family: monospace; } /* State 1: Compliance / Security Grid styles */ .why-sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; } .why-sec-tile { background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 0.8rem; text-align: center; position: relative; overflow: hidden; } .why-sec-tile::after { content: '\2022'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.04) 0%, transparent 80%); } .why-sec-tile i { font-size: 1.2rem; color: #10b981; margin-bottom: 0.4rem; display: block; } .why-sec-tile strong { font-size: 0.72rem; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: 1px; } .why-sec-tile span { font-size: 0.95rem; color: #f1f5f9; font-family: monospace; font-weight: 700; margin-top: 0.2rem; display: block; } .why-sec-shield-footer { display: flex; align-items: center; gap: 0.8rem; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.75rem; color: #10b981; } /* State 2: Speedometer & Latency Visualizer */ .why-scale-latency-box { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; } .why-scale-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #94a3b8; } .why-scale-row strong { color: #f1f5f9; font-family: monospace; } .why-scale-bar-track { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; position: relative; } .why-scale-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #06b6d4); width: 0%; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); } .why-canvas-screen.active .why-scale-bar-fill { width: 100%; } .why-scale-latency-footer { display: flex; justify-content: space-between; gap: 0.8rem; } .why-scale-mini-card { flex: 1; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 0.6rem; text-align: center; } .why-scale-mini-card span { font-size: 0.6rem; color: #64748b; display: block; text-transform: uppercase; } .why-scale-mini-card strong { font-size: 0.9rem; color: #06b6d4; font-family: monospace; display: block; margin-top: 0.2rem; } /* State 3: FinOps Budget Chart styles */ .why-finops-chart-container { display: flex; justify-content: space-around; align-items: flex-end; height: 120px; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 1rem; position: relative; } .why-finops-bar-wrapper { display: flex; flex-direction: column; align-items: center; width: 35%; position: relative; } .why-finops-bar { width: 100%; border-radius: 6px 6px 0 0; position: relative; transition: height 1s cubic-bezier(0.16, 1, 0.3, 1); height: 0; } .why-finops-bar.standard { background: linear-gradient(180deg, #ef4444, rgba(239, 68, 68, 0.3)); } .why-finops-bar.vedtam { background: linear-gradient(180deg, #10b981, rgba(16, 185, 129, 0.3)); box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); } .why-canvas-screen.active .why-finops-bar.standard { height: 100px; } .why-canvas-screen.active .why-finops-bar.vedtam { height: 38px; } .why-finops-val-bubble { position: absolute; top: -24px; font-size: 0.72rem; font-family: monospace; font-weight: 700; color: #ffffff; } .why-finops-bar-lbl { font-size: 0.65rem; color: #94a3b8; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 1px; } .why-finops-saving-callout { display: flex; justify-content: space-between; align-items: center; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.78rem; color: #10b981; } .why-finops-saving-callout strong { font-size: 0.95rem; font-family: monospace; } /* Pulse Glows & Scans specifically for Why Choose Console */ .why-scanner-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.4), transparent); animation: whyScannerSweep 4s infinite linear; pointer-events: none; } @keyframes whyScannerSweep { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } } /* Responsiveness overrides for Why grid */ @media (max-width: 991px) { .cloud-why-grid { grid-template-columns: 1fr; gap: 2.5rem; } .why-telemetry-console { height: 360px; } } /* ==================================================== CLOUD INDUSTRIES MULTI-SECTOR COMPLIANCE CONSOLE ==================================================== */ .cloud-industries-section { padding: 8rem 0; position: relative; background: radial-gradient(120% 120% at 50% 100%, rgba(16, 185, 129, 0.015) 0%, transparent 100%); overflow: hidden; } .ind-console-wrapper { background: rgba(10, 18, 30, 0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 18px; padding: 2rem; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); margin-top: 3rem; position: relative; } /* Horizontal Selector Bar */ .ind-selector-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 1.5rem; margin-bottom: 2.5rem; overflow-x: auto; } .ind-tab-btn { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 0.9rem 0.5rem; color: #94a3b8; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-family: inherit; } .ind-tab-btn span { font-size: 0.8rem; font-weight: 600; text-align: center; } .ind-btn-icon { font-size: 1.2rem; transition: transform 0.3s ease; } .ind-tab-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #f1f5f9; } .ind-tab-btn.active { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); color: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); } .ind-tab-btn.active .ind-btn-icon { transform: translateY(-2px); } /* Console Inner Grid Layout */ .ind-grid-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: flex-start; } /* Details Panel (Left) */ .ind-detail-content { display: none; opacity: 0; transform: translateY(10px); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ind-detail-content.active { display: block; opacity: 1; transform: translateY(0); } .ind-num-lbl { font-family: monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: #10b981; margin-bottom: 0.8rem; } .ind-detail-content h3 { font-size: 2.2rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; letter-spacing: -0.5px; } .ind-desc-txt { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; margin-bottom: 2rem; } .ind-checklist { list-style: none; padding: 0; margin: 0 0 2rem 0; display: flex; flex-direction: column; gap: 0.9rem; } .ind-checklist li { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; color: #e2e8f0; } .ind-checklist li i { color: #10b981; font-size: 1rem; } .ind-case-highlight { display: flex; gap: 1rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 1.2rem; align-items: center; } .ind-case-highlight i { font-size: 1.5rem; color: #f59e0b; flex-shrink: 0; } .ind-case-highlight span { font-size: 0.82rem; color: #94a3b8; line-height: 1.4; } /* Telemetry Screen (Right) */ .ind-telemetry-panel { background: rgba(10, 18, 30, 0.75); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 1.8rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; height: 380px; display: flex; flex-direction: column; } .ind-panel-glow { position: absolute; top: -30%; left: -30%; width: 160%; height: 160%; background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 60%); pointer-events: none; } .ind-graphic-screen { display: none; opacity: 0; transform: scale(0.98); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); flex-grow: 1; flex-direction: column; justify-content: space-between; } .ind-graphic-screen.active { display: flex; opacity: 1; transform: scale(1); } .ind-screen-header { display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 0.8rem; margin-bottom: 1rem; } .ind-screen-header span { font-size: 0.68rem; font-family: monospace; letter-spacing: 1px; color: #64748b; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #64748b; } .status-dot.green { background: #10b981; box-shadow: 0 0 8px #10b981; } /* Graphics 1: Banking Ledger Console */ .banking-ledger-console { display: flex; flex-direction: column; gap: 0.6rem; flex-grow: 1; } .banking-ledger-item { display: flex; justify-content: space-between; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.03); padding: 0.7rem 0.8rem; border-radius: 6px; font-family: monospace; font-size: 0.75rem; } .tx-time { color: #64748b; } .tx-id { color: #f1f5f9; } .tx-status.success { color: #10b981; font-weight: 700; } /* Graphics 2: Healthcare HIPAA Widget */ .healthcare-encrypt-widget { display: flex; align-items: center; justify-content: space-around; flex-grow: 1; margin: 1.5rem 0; position: relative; } .encrypt-node { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); padding: 1rem; border-radius: 12px; width: 100px; text-align: center; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .encrypt-node.active { border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 0 15px rgba(59, 130, 246, 0.1); } .encrypt-node.locked { border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); } .encrypt-node i { font-size: 1.5rem; color: #3b82f6; } .encrypt-node.locked i { color: #10b981; } .encrypt-node span { font-size: 0.65rem; color: #94a3b8; } .encrypt-arrow-flow { width: 60px; height: 2px; background: linear-gradient(90deg, #3b82f6, #10b981); position: relative; } .encrypt-arrow-flow::after { content: '\2022'; position: absolute; top: -3px; right: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #10b981; } /* Graphics 3: SCADA Telemetry */ .scada-telemetry-box { display: flex; flex-direction: column; gap: 0.7rem; flex-grow: 1; } .scada-stat-row { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.03); padding: 0.7rem 0.8rem; border-radius: 6px; font-size: 0.78rem; } .scada-green { color: #10b981; font-family: monospace; font-weight: bold; } /* Graphics 4: SaaS Build Pipelines */ .saas-pipeline-box { display: flex; justify-content: space-around; align-items: center; flex-grow: 1; margin: 1rem 0; } .pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.4; transition: all 0.4s ease; } .pipeline-step.completed { opacity: 1; } .pipeline-step i { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #94a3b8; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .pipeline-step.completed i { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.15); } .pipeline-step span { font-size: 0.7rem; color: #94a3b8; } /* Graphics 5: Gov Sovereign Monitors */ .gov-sovereign-monitor { display: flex; align-items: center; justify-content: center; flex-grow: 1; } .gov-enclave-circle { width: 130px; height: 130px; border-radius: 50%; border: 2px dashed rgba(16, 185, 129, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; background: rgba(16, 185, 129, 0.02); animation: rotateGovCircle 20s infinite linear; } .gov-enclave-circle i { font-size: 1.6rem; color: #10b981; } .gov-enclave-circle strong { font-size: 0.7rem; color: #f1f5f9; text-transform: uppercase; } .gov-enclave-circle span { font-size: 0.58rem; font-family: monospace; color: #64748b; } @keyframes rotateGovCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Graphics 6: Retail Metrics */ .retail-elastic-monitor { display: flex; gap: 1rem; flex-grow: 1; align-items: center; } .retail-stat-item { flex: 1; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 0.9rem; text-align: center; } .retail-stat-item span { font-size: 0.65rem; color: #64748b; display: block; text-transform: uppercase; margin-bottom: 0.4rem; } .retail-stat-item strong { font-size: 1rem; color: #10b981; font-family: monospace; } /* Button override */ .iac-action-trigger { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); color: #10b981; border-radius: 8px; padding: 0.7rem 1.2rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; font-family: inherit; } .iac-action-trigger:hover:not(:disabled) { background: #10b981; color: #000000; box-shadow: 0 0 15px rgba(16, 185, 129, 0.35); transform: translateY(-1px); } .iac-action-trigger:disabled { opacity: 0.5; cursor: not-allowed; } /* Multi-sector Responsiveness */ @media (max-width: 991px) { .ind-selector-bar { grid-template-columns: repeat(6, 150px); overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; } .ind-grid-layout { grid-template-columns: 1fr; gap: 3rem; } .ind-telemetry-panel { height: 340px; } } /* ==================================================== CLOUD FAQ HUB CATEGORY BUTTONS ==================================================== */ .faq-cat-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 30px; padding: 0.6rem 1.4rem; color: #94a3b8; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; font-family: inherit; } .faq-cat-btn i { color: #10b981; } .faq-cat-btn:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; border-color: rgba(255, 255, 255, 0.15); } .faq-cat-btn.active { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); } /* FAQ Accordion Transitions */ .faq-group { display: none; opacity: 0; transform: translateY(10px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .faq-group.active { display: block; opacity: 1; transform: translateY(0); } /* ==================================================== CLOUD CEO STRATEGIC VISION SECTION ==================================================== */ .ceo-vision-section { padding: 5rem 0; position: relative; overflow: hidden; background: var(--dark) !important; } .ceo-card { max-width: 960px; margin: 0 auto; background: rgba(12, 21, 36, 0.7) !important; border: 1px solid rgba(16, 185, 129, 0.15) !important; border-radius: 28px; padding: 3rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; display: flex; gap: 3rem; align-items: center; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .ceo-card:hover { border-color: rgba(16, 185, 129, 0.35) !important; box-shadow: 0 15px 40px rgba(16, 185, 129, 0.08); } @media (max-width: 768px) { .ceo-card { flex-direction: column; padding: 2.2rem 1.8rem; gap: 2rem; text-align: center; } } /* ==================================================== GLOBAL HERO RESPONSIVENESS OVERRIDES ==================================================== */ @media (max-width: 992px) { /* Force columns to stack vertically */ .hero-shell, [class*="-hero"] .hero-shell, .home-page .hero-shell, .devops-hero .hero-shell, .ot-hero .hero-shell, .cert-hero .hero-shell, .cloud-hero .hero-shell, .about-hero .hero-shell, .software-hero .hero-shell { grid-template-columns: 1fr !important; gap: 2.5rem !important; } /* Center hero titles, badges, and lists */ .hero-content, [class*="-hero"] .hero-content, .about-hero .hero-content, .software-hero .hero-content { max-width: 100% !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } /* Ensure text limits and readability */ .hero-sub { margin-left: auto !important; margin-right: auto !important; max-width: 600px !important; font-size: 1rem !important; } /* Center CTA action button rows */ .hero-actions { justify-content: center !important; width: 100% !important; } /* Center stats blocks */ .hero-stats { justify-content: center !important; width: 100% !important; flex-wrap: wrap !important; gap: 1.5rem !important; } /* Center partner marquee strips and badges */ .hero-proof-strip, .sw-chip-row { justify-content: center !important; flex-wrap: wrap !important; gap: 0.8rem !important; } /* Stack visual panels correctly below text */ .hero-visual, [class*="-hero"] .hero-visual { width: 100% !important; max-width: 100% !important; margin: 1.5rem auto 0 !important; display: flex !important; justify-content: center !important; } /* Center the graphic panels and prevent overflow */ .hero-panel, [class*="-hero"] .hero-panel, .devops-pipeline-stack { max-width: 480px !important; width: 100% !important; margin: 0 auto !important; } } @media (max-width: 480px) { .hero-title, [class*="-hero"] .hero-title { font-size: clamp(1.8rem, 8.5vw, 2.5rem) !important; line-height: 1.25 !important; } .hero-sub { font-size: 0.95rem !important; } .hero-actions { flex-direction: column !important; gap: 1rem !important; align-items: stretch !important; width: 100% !important; } .hero-actions .btn { width: 100% !important; text-align: center !important; } } /* ========================================================================== IT MANAGED SERVICES - NOC MONITOR HERO VISUALIZATION ========================================================================== */ .it-noc-monitor { position: relative; width: 100%; max-width: 580px; background: rgba(12, 21, 36, 0.65); border: 1px solid rgba(45, 155, 78, 0.3); border-radius: 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05); margin-left: auto; } /* Header */ .noc-header { padding: 1.2rem 1.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); } .noc-status-indicator { display: flex; align-items: center; gap: 0.6rem; color: var(--accent-green); font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .noc-title { color: rgba(255, 255, 255, 0.4); font-family: monospace; font-size: 0.8rem; letter-spacing: 2px; } /* Topology Body */ .noc-body { padding: 3rem 2rem; position: relative; min-height: 380px; display: flex; justify-content: center; align-items: center; } .noc-topology { position: relative; width: 300px; height: 240px; } /* SVG Lines & Packets */ .topology-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .t-line { fill: none; stroke: rgba(45, 155, 78, 0.2); stroke-width: 2; stroke-dasharray: 4 4; animation: lineFlow 20s linear infinite; } @keyframes lineFlow { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } } .t-packet { fill: var(--accent-green); filter: drop-shadow(0 0 6px var(--accent-green)); } .packet-1 { fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); } .packet-3 { fill: #3b82f6; filter: drop-shadow(0 0 6px #3b82f6); } /* Nodes */ .topo-node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; text-align: center; } /* Core Node */ .topo-core { top: 120px; left: 150px; transform: translate(-50%, -50%); width: 70px; height: 70px; background: radial-gradient(circle at center, rgba(16, 185, 129, 0.2), transparent); border: 1px solid rgba(16, 185, 129, 0.5); border-radius: 50%; color: var(--accent-green); font-size: 1.8rem; box-shadow: 0 0 30px rgba(16, 185, 129, 0.2); } .core-rings { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--accent-green); opacity: 0; animation: pulseRing 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } .r1 { width: 90px; height: 90px; animation-delay: 0s; } .r2 { width: 120px; height: 120px; animation-delay: 1.5s; } @keyframes pulseRing { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /* Peripheral Nodes */ .peripheral { background: rgba(12, 21, 36, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.8rem 1rem; border-radius: 12px; min-width: 110px; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .peripheral i { font-size: 1.4rem; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.9); } .p-left i { color: var(--cyan); } .p-right i { color: var(--accent-green); } .p-bottom i { color: #3b82f6; } .peripheral .node-label { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; margin-bottom: 0.2rem; } .peripheral .node-stat { font-size: 0.85rem; font-weight: 800; color: #fff; } /* Positioning Peripherals */ .p-left { top: 60px; left: 70px; transform: translate(-50%, -50%); } .p-right { top: 60px; left: 230px; transform: translate(-50%, -50%); } .p-bottom { top: 190px; left: 150px; transform: translate(-50%, -50%); } .peripheral:hover { border-color: rgba(255, 255, 255, 0.3); transform: translate(-50%, -55%); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } /* Ticker Tape */ .noc-ticker-container { background: #080c14; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.8rem 0; overflow: hidden; white-space: nowrap; position: relative; } .noc-ticker-container::before, .noc-ticker-container::after { content: '\2022'; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; } .noc-ticker-container::before { left: 0; background: linear-gradient(to right, #080c14, transparent); } .noc-ticker-container::after { right: 0; background: linear-gradient(to left, #080c14, transparent); } .noc-ticker-tape { display: inline-flex; gap: 2rem; animation: tickerScroll 25s linear infinite; padding-left: 1rem; } .noc-ticker-tape span { font-family: monospace; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); } .noc-ticker-tape .t-alert { color: #f59e0b; } .noc-ticker-tape .t-action { color: var(--cyan); } .noc-ticker-tape .t-ok { color: var(--accent-green); } .noc-ticker-tape .t-info { color: #64748b; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Responsive constraints */ @media (max-width: 991px) { .it-noc-monitor { margin-left: auto; margin-right: auto; } } @media (max-width: 480px) { .noc-body { transform: scale(0.9); } .it-noc-monitor { border-radius: 16px; } } /* ========================================================================== IT MANAGED SERVICES - BURDEN MATRIX (OVERVIEW) ========================================================================== */ .it-burden-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 1.5rem; } .burden-card { position: relative; background: rgba(18, 26, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.5rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; z-index: 1; } /* The Animated Scanning Background (Hidden until hover) */ .bc-scanner-bg { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 70%, rgba(45, 155, 78, 0.1) 80%, rgba(0, 163, 217, 0.3) 100%); z-index: -1; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .burden-card:hover .bc-scanner-bg { opacity: 1; animation: scanRotate 4s linear infinite; } @keyframes scanRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Icon & Typography */ .bc-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } /* Specific Icon Colors */ .b-monitoring .bc-icon { color: var(--cyan); } .b-security .bc-icon { color: var(--accent-green); } .b-infrastructure .bc-icon { color: #8b5cf6; } /* Purple */ .b-compliance .bc-icon { color: #f59e0b; } /* Amber */ .burden-card strong { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; display: block; letter-spacing: -0.2px; } .burden-card span { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; line-height: 1.5; display: block; } /* Hover States */ .burden-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); background: rgba(22, 32, 52, 0.85); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .burden-card:hover .bc-icon { transform: scale(1.1) translateY(-2px); border-color: currentColor; box-shadow: 0 0 15px currentColor; } /* Responsive Overrides */ @media (max-width: 768px) { .it-burden-matrix { grid-template-columns: 1fr !important; } } /* ========================================================================== IT MANAGED SERVICES - SERVER RACK GRID ========================================================================== */ .it-server-rack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; } .server-blade { position: relative; background: rgba(8, 14, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1.5rem 1.5rem 1.8rem 4rem; /* Left padding for LED & Slot */ display: flex; flex-direction: column; justify-content: center; overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Hover effects */ .server-blade:hover { background: rgba(12, 21, 36, 0.95); border-color: rgba(45, 155, 78, 0.4); transform: translateX(5px); box-shadow: -5px 10px 25px rgba(0, 0, 0, 0.5), inset 1px 0 0 rgba(45, 155, 78, 0.5); } /* Status LED */ .blade-status-led { position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .server-blade:hover .blade-status-led { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: ledBlink 1s infinite; } @keyframes ledBlink { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: 0.4; transform: translateY(-50%) scale(0.8); } } /* Slot Number (Vertical Text) */ .blade-slot-num { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%) rotate(-90deg); font-family: monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; color: rgba(255, 255, 255, 0.2); transition: color 0.3s ease; } .server-blade:hover .blade-slot-num { color: var(--cyan); } /* Content */ .blade-content h3 { color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.6rem; letter-spacing: -0.2px; } .blade-content p { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; line-height: 1.6; margin: 0; } /* Data Transfer Strip */ .blade-data-strip { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.05); overflow: hidden; } .data-pulse { position: absolute; left: -20%; top: 0; height: 100%; width: 20%; background: linear-gradient(90deg, transparent, rgba(45, 155, 78, 0.8), transparent); animation: dataSlide 4s infinite cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.5; } .server-blade:hover .data-pulse { background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation-duration: 1.5s; opacity: 1; } @keyframes dataSlide { 0% { left: -20%; } 100% { left: 120%; } } /* Mobile Responsiveness */ @media (max-width: 991px) { .it-server-rack-grid { grid-template-columns: 1fr !important; } } /* ========================================================================== IT MANAGED SERVICES - CAPABILITIES GRID REDESIGN ========================================================================== */ /* The layout fix: Fluid grid prevents horizontal scrollbar on all devices */ .it-capability-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 1.5rem !important; } .it-capability-card { position: relative; overflow: hidden; z-index: 1; } /* Base state for icons */ .it-capability-card .it-capability-num { position: relative; transition: all 0.4s ease; z-index: 2; } .it-capability-card .it-capability-num svg { transition: all 0.4s ease; } /* Hover States with Custom Glowing Variables */ .it-capability-card:hover { border-color: var(--glow-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.2); } .it-capability-card:hover .it-capability-num { color: var(--glow-color); text-shadow: 0 0 10px var(--glow-color); } .it-capability-card:hover .it-capability-num svg { fill: none; stroke: var(--glow-color); stroke-width: 1.5px; filter: drop-shadow(0 0 8px var(--glow-color)); } /* The Diagnostic Scanner Sweep Animation */ .cap-scanner { position: absolute; top: -10px; left: 0; width: 100%; height: 2px; background: var(--glow-color); box-shadow: 0 0 15px 3px var(--glow-color); opacity: 0; z-index: 0; } .it-capability-card:hover .cap-scanner { opacity: 0.8; animation: scanSweep 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes scanSweep { 0% { top: -10px; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 110%; opacity: 0; } } /* Update capability grid to explicit 3 columns on desktop */ .it-capability-grid { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 991px) { .it-capability-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .it-capability-grid { grid-template-columns: 1fr !important; } } /* ========================================================================== ADVANCED ARC REACTOR & CYBER BORDER TRACE ========================================================================== */ /* The Card Structure for Perimeter Tracking */ .it-capability-card { position: relative; background: transparent !important; border: none !important; overflow: hidden; z-index: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border-radius: 22px; } /* The Animated Laser Border Layer */ .it-capability-card::before { content: '\2022'; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: conic-gradient(transparent 70%, var(--glow-color) 100%); z-index: -2; animation: borderRotate 4s linear infinite; } @keyframes borderRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Inner Background Layer to hide the middle of the conic gradient */ .it-capability-card::after { content: '\2022'; position: absolute; inset: 1px; /* The gap size forms the border thickness */ background: rgba(12, 18, 30, 0.98); border-radius: 21px; /* Matches card inner radius */ z-index: -1; box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6); transition: background 0.4s ease; } /* Arc Reactor Core Glow behind the icon */ .it-capability-card .it-capability-num { position: relative; z-index: 3; } .it-capability-card .it-capability-num::before { content: '\2022'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%); opacity: 0.15; z-index: -1; border-radius: 50%; transition: all 0.4s ease; } /* Hover Enhancements */ .it-capability-card:hover::before { animation-duration: 1.5s; /* Speed up laser trace */ } .it-capability-card:hover::after { background: rgba(16, 24, 40, 0.98); /* Slight lightening on hover */ } .it-capability-card:hover .it-capability-num::before { width: 90px; height: 90px; opacity: 0.5; /* Pulse arc reactor */ animation: pulseCore 1s infinite alternate; } @keyframes pulseCore { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; } } /* Glass Flare Wipe on Hover (Repurposing .cap-scanner) */ .cap-scanner { position: absolute; top: 0; left: -100%; width: 40%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent); transform: skewX(-25deg); z-index: 5; pointer-events: none; box-shadow: none !important; /* Override previous scanner shadow */ opacity: 1 !important; /* Override previous scanner opacity */ } .it-capability-card:hover .cap-scanner { animation: glassFlare 0.8s ease forwards; } @keyframes glassFlare { 0% { left: -100%; } 100% { left: 200%; } } /* Make text sit above everything */ .it-capability-card h3, .it-capability-card p { position: relative; z-index: 3; } /* ========================================================================== IT MANAGED SERVICES - TECH STACK (MARQUEE & ACCORDION) ========================================================================== */ /* The Infinite Marquee */ .tech-marquee-container { overflow: hidden; white-space: nowrap; width: 100%; position: relative; margin-top: 1.5rem; padding: 1rem 0; } /* Fading edges */ .tech-marquee-container::before, .tech-marquee-container::after { content: '\2022'; position: absolute; top: 0; width: 60px; height: 100%; z-index: 2; pointer-events: none; } .tech-marquee-container::before { left: 0; background: linear-gradient(to right, var(--bg-deep), transparent); } .tech-marquee-container::after { right: 0; background: linear-gradient(to left, var(--bg-deep), transparent); } .tech-marquee-track { display: inline-flex; gap: 1rem; animation: marqueeScroll 25s linear infinite; } /* Pause on hover */ .tech-marquee-container:hover .tech-marquee-track { animation-play-state: paused; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* Scrolls exactly half the width */ } /* Pill Styling for Marquee */ .tech-marquee-track span { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.4rem; background: rgba(12, 21, 36, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; font-weight: 600; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; backdrop-filter: blur(5px); } .tech-marquee-track span:hover { background: var(--accent-green); color: #000; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(45, 155, 78, 0.4); cursor: pointer; } /* Interactive Hover Accordion */ .acc-group { display: flex; flex-direction: column; gap: 0.8rem; } .acc-pill { background: rgba(12, 18, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1rem 1.2rem; cursor: pointer; overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* The "shrink" default state */ max-height: 55px; opacity: 0.7; } .acc-title { display: flex; align-items: center; gap: 0.8rem; font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: 0.5rem; } .acc-title i { color: var(--cyan); font-size: 1.2rem; width: 24px; text-align: center; transition: color 0.3s ease; } .acc-desc { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; line-height: 1.5; opacity: 0; transform: translateY(10px); transition: all 0.4s ease; } /* Group Hover State: Dim all unhovered pills */ .acc-group:hover .acc-pill { opacity: 0.4; } /* The Expansion State */ .acc-pill:hover { max-height: 160px; opacity: 1 !important; background: rgba(22, 32, 52, 0.9); border-color: rgba(45, 155, 78, 0.4); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } /* Default Open First Child */ .acc-group:not(:hover) .acc-pill:first-child { max-height: 160px; opacity: 1; background: rgba(22, 32, 52, 0.9); border-color: rgba(45, 155, 78, 0.4); } .acc-group:not(:hover) .acc-pill:first-child .acc-desc { opacity: 1; transform: translateY(0); } .acc-group:not(:hover) .acc-pill:first-child .acc-title i { color: var(--accent-green); } /* Specific Hover actions */ .acc-pill:hover .acc-desc { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .acc-pill:hover .acc-title i { color: var(--accent-green); text-shadow: 0 0 10px var(--accent-green); } /* ========================================================================== TECH STACK - PARALLAX FLOW & COMMAND CONSOLE ========================================================================== */ /* 1. Parallax Tech Track */ .parallax-tech-track { display: flex; gap: 1.5rem; height: 400px; /* Viewport for the scroll */ overflow: hidden; position: relative; margin-top: 2rem; /* Fade out top and bottom edges */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); } .p-col { display: flex; flex-direction: column; gap: 1.2rem; width: calc(33.333% - 1rem); } .p-marquee { display: flex; flex-direction: column; gap: 1.2rem; } .p-marquee span { background: rgba(18, 25, 40, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); padding: 1rem 1.5rem; border-radius: 12px; color: var(--cyan); font-weight: 600; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; backdrop-filter: blur(4px); } .p-marquee span:hover { background: rgba(45, 155, 78, 0.2); border-color: var(--accent-green); color: #fff; transform: scale(1.05); } /* Animations for Infinite Scroll */ .p-up .p-marquee { animation: scrollUp 25s linear infinite; } .p-down .p-marquee { /* Translate starting position so it doesn't jump */ transform: translateY(-50%); animation: scrollDown 28s linear infinite; } .p-fast .p-marquee { animation: scrollUp 18s linear infinite; } /* Pause on hover */ .parallax-tech-track:hover .p-marquee { animation-play-state: paused; } @keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } /* Scrolls exactly half its duplicated height */ } @keyframes scrollDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } } /* 2. Interactive Command Console */ .command-console { background: rgba(8, 12, 20, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; height: 100%; min-height: 400px; } /* Console Header */ .console-header { background: rgba(0, 0, 0, 0.4); padding: 0.8rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: space-between; } .console-dots { display: flex; gap: 6px; } .c-dot { width: 10px; height: 10px; border-radius: 50%; } .c-dot.r { background: #ff5f56; } .c-dot.y { background: #ffbd2e; } .c-dot.g { background: #27c93f; } .console-title { font-family: monospace; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); letter-spacing: 1px; } /* Console Body & Screen */ .console-body { display: flex; flex-direction: column; flex-grow: 1; } .console-screen { flex-grow: 1; padding: 2rem; font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; line-height: 1.6; color: var(--cyan); position: relative; background: radial-gradient(circle at center, rgba(14, 28, 46, 0.4) 0%, transparent 80%); } .screen-output { display: none; animation: typeReveal 0.5s steps(40, end) forwards; white-space: pre-wrap; } .screen-default { display: block; } .blink { animation: blinkCursor 1s step-end infinite; } @keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes typeReveal { from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } /* Interface Buttons */ .console-interface { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.2); } .c-btn { padding: 1rem 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); cursor: pointer; border-right: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .c-btn:last-child { border-right: none; } .c-btn i { font-size: 1.2rem; margin-bottom: 4px; } .c-btn:hover { background: rgba(45, 155, 78, 0.1); color: var(--accent-green); box-shadow: inset 0 -3px 0 var(--accent-green); } /* Pure CSS Interactivity via :has() */ .console-body:has(.btn-monitoring:hover) .screen-default, .console-body:has(.btn-security:hover) .screen-default, .console-body:has(.btn-support:hover) .screen-default, .console-body:has(.btn-backup:hover) .screen-default, .console-body:has(.btn-strategy:hover) .screen-default { display: none; } .console-body:has(.btn-monitoring:hover) .o-monitoring, .console-body:has(.btn-security:hover) .o-security, .console-body:has(.btn-support:hover) .o-support, .console-body:has(.btn-backup:hover) .o-backup, .console-body:has(.btn-strategy:hover) .o-strategy { display: block; } /* Mobile Responsiveness */ @media (max-width: 991px) { .it-tech-grid { display: flex; flex-direction: column; gap: 3rem; } .parallax-tech-track { height: 250px; } .console-interface { grid-template-columns: repeat(3, 1fr); } .c-btn { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } } @media (max-width: 600px) { .console-interface { grid-template-columns: repeat(2, 1fr); } } /* Shrink the Command Console and move buttons to the top for better visibility */ .command-console { min-height: auto !important; height: auto !important; } .parallax-tech-track { height: 300px !important; /* Shrink parallax track to match */ } .console-body { flex-direction: column !important; } /* Move interface to the top */ .console-interface { order: -1 !important; border-top: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .console-screen { padding: 1.2rem !important; min-height: 180px; /* Ensure enough space for text */ } .c-btn { padding: 0.8rem 0.4rem !important; gap: 0.2rem !important; } .c-btn i { font-size: 1rem !important; } /* ========================================================================== WHY CHOOSE US - CYBERNETIC VALUE TRACKER ========================================================================== */ .value-tracker { position: relative; padding-left: 3rem; display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.5rem; } /* The Vertical Energy Beam */ .energy-beam { position: absolute; top: 0; bottom: 0; left: 6px; width: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; overflow: hidden; } .energy-beam::before { content: '\2022'; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, var(--cyan), transparent); animation: beamPulse 4s infinite linear; } @keyframes beamPulse { 0% { top: -50%; } 100% { top: 100%; } } /* Value Node Blocks */ .value-node { position: relative; background: rgba(12, 18, 30, 0.6); padding: 1.2rem 1.5rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); backdrop-filter: blur(4px); } .value-node .node-content strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 0.4rem; transition: color 0.3s ease; } .value-node .node-content p { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin: 0; line-height: 1.5; } /* The Connection Points */ .node-connector { position: absolute; left: -3rem; /* Push back to the beam */ top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #111; border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transition: all 0.4s ease; z-index: 2; } /* The Horizontal Wire connecting the node to the block */ .node-connector::after { content: '\2022'; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: calc(3rem - 16px); height: 2px; background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease; } /* Hover States (The Connection Flare) */ .value-node:hover { background: rgba(45, 155, 78, 0.15); border-color: rgba(45, 155, 78, 0.5); transform: translateX(10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 5px 0 0 var(--accent-green); } .value-node:hover .node-content strong { color: var(--accent-green); } .value-node:hover .node-connector { border-color: var(--accent-green); background: var(--accent-green); box-shadow: 0 0 15px var(--accent-green); transform: translateY(-50%) scale(1.2); } .value-node:hover .node-connector::after { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); } /* ========================================================================== INDUSTRIES - EXPANDING CARDS MATRIX ========================================================================== */ .it-expanding-grid { display: flex; height: 450px; gap: 15px; margin-top: 3rem; width: 100%; } .expanding-card { position: relative; flex: 1; border-radius: 20px; overflow: hidden; transition: flex 0.6s cubic-bezier(0.25, 1.2, 0.5, 1); cursor: pointer; background: #000; border: 1px solid rgba(255, 255, 255, 0.05); } .expanding-card:hover, .expanding-card.active { flex: 5; border-color: var(--cyan); } /* Background Image Blur-to-Clear Reveal */ .exp-bg { position: absolute; inset: 0; width: 100%; height: 100%; } .exp-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) blur(8px); opacity: 0.5; transition: all 0.6s ease; } .expanding-card:hover .exp-bg img, .expanding-card.active .exp-bg img { filter: grayscale(0%) blur(0px); opacity: 0.8; transform: scale(1.05); } /* Gradient Overlay for Text Readability */ .exp-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 12, 20, 1) 0%, rgba(8, 12, 20, 0.2) 60%, transparent 100%); pointer-events: none; } /* Content Container */ .exp-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; pointer-events: none; } .exp-num { position: absolute; top: 1.5rem; left: 1.5rem; font-family: monospace; font-size: 1.2rem; color: var(--cyan); background: rgba(0, 0, 0, 0.5); padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); } /* Vertical Title (Shown when collapsed) */ .exp-title-vert { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: 1px; white-space: nowrap; opacity: 1; transition: opacity 0.3s ease; margin-top: auto; } .expanding-card:hover .exp-title-vert, .expanding-card.active .exp-title-vert { opacity: 0; visibility: hidden; } /* Detailed Content (Shown when expanded) */ .exp-details { opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s ease 0.1s; min-width: 300px; } .expanding-card:hover .exp-details, .expanding-card.active .exp-details { opacity: 1; visibility: visible; transform: translateY(0); } .exp-details h3 { color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem; } .exp-details p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.6; margin: 0; } /* Mobile Fallback: Vertical Stack */ @media (max-width: 991px) { .it-expanding-grid { flex-direction: column; height: 700px; } .expanding-card { border-radius: 12px; } .expanding-card:hover, .expanding-card.active { flex: 3; } .exp-title-vert { writing-mode: horizontal-tb; transform: none; margin-top: 0; margin-bottom: 0; } .exp-content { justify-content: center; } .exp-num { top: auto; bottom: 1.5rem; right: 1.5rem; left: auto; } } /* Force footer text to be white globally */ .footer, .footer p, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer a, .footer li, .footer span, .footer div { color: #ffffff !important; } .footer a:hover { color: var(--cyan) !important; } /* ========================================================================== VIRTUAL CISO - EXECUTIVE DASHBOARD (HERO) ========================================================================== */ .dashboard-hologram { position: relative; width: 100%; height: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; perspective: 1000px; } .dashboard-hologram .hero-panel-main { position: relative; z-index: 1; margin: 0 auto; width: 80%; border: 1px solid rgba(0, 255, 255, 0.2); box-shadow: 0 0 50px rgba(0, 255, 255, 0.05), inset 0 0 20px rgba(0, 255, 255, 0.05); background: rgba(10, 15, 25, 0.85); backdrop-filter: blur(12px); padding: 2.5rem; } .dash-metric { position: absolute; background: rgba(12, 18, 30, 0.9); border: 1px solid rgba(0, 255, 255, 0.15); border-radius: 12px; padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: 1.2rem; backdrop-filter: blur(10px); z-index: 2; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); } .dm-1 { top: 5%; left: -5%; animation: floatObj 6s ease-in-out infinite; } .dm-2 { bottom: 5%; right: -5%; animation: floatObj 8s ease-in-out infinite reverse; padding-bottom: 1.5rem; /* Space for progress bar */ } @keyframes floatObj { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } .dm-icon i { font-size: 2rem; color: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); } .dm-info { display: flex; flex-direction: column; } .dm-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .dm-value { font-size: 1.15rem; font-weight: 700; color: #fff; } .dm-bar { position: absolute; bottom: 0; left: 0; height: 4px; width: 100%; background: rgba(255, 255, 255, 0.1); border-radius: 0 0 12px 12px; overflow: hidden; } .dm-fill { height: 100%; width: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transform-origin: left; animation: fillBar 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @keyframes fillBar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } /* Radar Scan for Hero Core */ .radar-scan { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 255, 255, 0.05) 0%, transparent 100%); border-top: 1px solid rgba(0, 255, 255, 0.3); opacity: 0.5; animation: radarSweep 4s linear infinite; pointer-events: none; } @keyframes radarSweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* ========================================================================== VIRTUAL CISO - C-SUITE BENTO MATRIX ========================================================================== */ .bento-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .bento-box { position: relative; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 1.5rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; } .bento-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 0.5rem; transition: all 0.4s ease; } .bento-box strong { color: #fff; font-size: 1.05rem; transition: color 0.3s ease; } .bento-box span { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; line-height: 1.5; } /* Hover States */ .bento-box:hover { background: rgba(0, 255, 255, 0.05); border-color: rgba(0, 255, 255, 0.3); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(0, 255, 255, 0.05); } .bento-box:hover .bento-icon { color: var(--cyan); transform: scale(1.1); filter: drop-shadow(0 0 8px var(--cyan)); } .bento-box:hover strong { color: var(--cyan); } /* Bento Hover Radar Effect */ .bento-radar { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 70%, rgba(0, 255, 255, 0.1) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; } .bento-box:hover .bento-radar { opacity: 1; animation: radarSpin 4s linear infinite; } .bento-box>* { position: relative; z-index: 1; } @keyframes radarSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Mobile Responsiveness for vCISO */ @media (max-width: 768px) { .dashboard-hologram .hero-panel-main { width: 100%; } .dm-1, .dm-2 { position: relative; top: 0; left: 0; right: 0; bottom: 0; margin-bottom: 1rem; animation: none; } .bento-matrix { grid-template-columns: 1fr; } } /* ========================================================================== VIRTUAL CISO - HERO TELEMETRY DASHBOARD ========================================================================== */ .vciso-dashboard { position: relative; background: rgba(12, 18, 30, 0.55); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.05); padding: 1.8rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); width: 100%; max-width: 440px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); margin-left: auto; overflow: hidden; } .dash-glow { position: absolute; bottom: -40px; right: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(0, 243, 255, 0.12) 0%, transparent 70%); pointer-events: none; } .dash-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 0.8rem; margin-bottom: 1.2rem; } .dash-status { display: flex; align-items: center; gap: 0.5rem; color: var(--accent-green); font-size: 0.65rem; font-family: monospace; letter-spacing: 0.5px; } .status-indicator.live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); animation: vtBlink 1.5s infinite; } @keyframes vtBlink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .dash-meta { color: rgba(255, 255, 255, 0.35); font-family: monospace; font-size: 0.65rem; } .dash-grid { display: flex; flex-direction: column; gap: 1rem; } .dash-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 1rem; } /* Score / Posture Ring */ .card-score { display: flex; align-items: center; gap: 1.2rem; } .score-circle-wrap { position: relative; width: 65px; height: 65px; flex-shrink: 0; } .score-ring { width: 100%; height: 100%; transform: rotate(-90deg); } .score-ring .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 7; } .score-ring .ring-active { fill: none; stroke: var(--cyan); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; } .score-ring .ring-active.animate-ring { animation: fillRing 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s; } @keyframes fillRing { to { stroke-dashoffset: 14; } } .score-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .score-val { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1; } .score-lbl { color: rgba(255, 255, 255, 0.4); font-size: 0.45rem; text-transform: uppercase; margin-top: 1px; } .score-details h4 { color: #fff; font-size: 0.9rem; margin: 0 0 0.15rem 0; } .score-details p { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; margin: 0; line-height: 1.3; } /* GRC Roadmap Step Track */ .card-roadmap .card-title { color: #fff; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 0.4rem; } .roadmap-track { display: flex; flex-direction: column; gap: 0.8rem; position: relative; border-left: 2px dashed rgba(255, 255, 255, 0.08); margin-left: 10px; padding-left: 18px; } .track-step { display: flex; gap: 0.5rem; position: relative; } .track-step .step-icon { position: absolute; left: -27px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #090f1a; border: 2px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; font-size: 0.45rem; color: rgba(255, 255, 255, 0.3); } .track-step.completed .step-icon { border-color: var(--accent-green); background: var(--accent-green); color: #0c121e; } .track-step.active .step-icon { border-color: var(--cyan); background: #090f1a; color: var(--cyan); } .track-step.active .pulse-dot { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; animation: vtBlink 1s infinite; } .track-step .step-info strong { display: block; color: #fff; font-size: 0.78rem; line-height: 1.2; } .track-step .step-info span { color: rgba(255, 255, 255, 0.4); font-size: 0.68rem; } /* Dashboard Console Footer */ .dash-footer { margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 0.6rem; display: flex; flex-direction: column; gap: 0.2rem; } .dash-log-line { color: rgba(0, 243, 255, 0.65); font-family: monospace; font-size: 0.68rem; overflow: hidden; white-space: nowrap; } /* ========================================================================== FRAMEWORK SCROLLING TICKER ========================================================================== */ .framework-ticker-wrap { width: 100%; margin-top: 3.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0.9rem 0; overflow: hidden; display: flex; align-items: center; gap: 1.5rem; background: rgba(8, 12, 20, 0.3); } .ticker-title { color: rgba(0, 243, 255, 0.6); font-size: 0.72rem; font-family: monospace; letter-spacing: 1.5px; white-space: nowrap; font-weight: 700; border-right: 1px solid rgba(255, 255, 255, 0.08); padding-right: 1.5rem; padding-left: 1rem; } .ticker-track { overflow: hidden; width: 100%; display: flex; } .ticker-items { display: flex; gap: 2.5rem; white-space: nowrap; animation: frameworkScroll 25s infinite linear; } .ticker-items span { color: rgba(255, 255, 255, 0.55); font-family: monospace; font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; } .ticker-items span::after { content: '\2022'; color: var(--cyan); margin-left: 2.5rem; } @keyframes frameworkScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Responsive adjustments */ @media (max-width: 991px) { .vciso-dashboard { margin: 2rem auto 0 auto; } } /* ─── INTERACTIVE STRATEGIC ADVISORY CARDS ─── */ .home-page .consulting-card { height: auto !important; min-height: 525px !important; justify-content: space-between !important; display: flex !important; flex-direction: column !important; } @media (max-width: 1024px) { .home-page .consulting-card { min-height: 510px !important; } } @media (max-width: 768px) { .home-page .consulting-card { min-height: 480px !important; } } @media (max-width: 480px) { .home-page .consulting-card { min-height: 450px !important; padding: 1.5rem !important; } } .consulting-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; width: 100%; } .card-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); } .cyber-badge { color: #00f2fe !important; border-color: rgba(0, 242, 254, 0.3) !important; background: rgba(0, 242, 254, 0.06) !important; } .compliance-badge { color: #00f2fe !important; border-color: rgba(16, 185, 129, 0.3) !important; background: rgba(16, 185, 129, 0.06) !important; } .iso-badge { color: #00f2fe !important; border-color: rgba(168, 85, 247, 0.3) !important; background: rgba(168, 85, 247, 0.06) !important; } .cloud-badge { color: #00f2fe !important; border-color: rgba(14, 165, 233, 0.3) !important; background: rgba(14, 165, 233, 0.06) !important; } .card-widget { background: rgba(10, 20, 38, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; padding: 0.95rem !important; margin: 1.25rem 0 !important; height: 120px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; position: relative !important; overflow: hidden !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* Cyber Widget */ .cyber-widget { gap: 1rem !important; } .cyber-dial-wrap { position: relative; width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .cyber-dial { transform: rotate(-90deg); width: 100%; height: 100%; } .cyber-dial circle { fill: none; } .cyber-dial .dial-bg { stroke: rgba(255, 255, 255, 0.08); stroke-width: 6; } .cyber-dial .dial-fill { stroke: #00f2fe; stroke-width: 6; stroke-dasharray: 251.2; stroke-dashoffset: 5.02; /* 98% filled */ transition: stroke-dashoffset 1s ease-out; stroke-linecap: round; filter: drop-shadow(0 0 4px #00f2fe); } .dial-text { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; } .dial-num { font-size: 0.95rem; font-weight: 800; color: #fff !important; } .dial-lbl { font-size: 0.45rem; font-weight: 700; color: rgba(255, 255, 255, 0.5) !important; letter-spacing: 0.05em; margin-top: 2px; } .cyber-metrics { display: flex !important; flex-direction: column !important; gap: 6px !important; flex-grow: 1; } .metric-item { font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.8) !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; line-height: 1.2 !important; } .metric-item .dot { width: 6px; height: 6px; border-radius: 50%; } .metric-item .dot.green { background: #10b981; box-shadow: 0 0 8px #10b981; } .metric-item .dot.blue { background: #00f2fe; box-shadow: 0 0 8px #00f2fe; } /* Compliance Widget */ .compliance-widget { flex-direction: column !important; justify-content: space-between !important; align-items: stretch !important; gap: 8px !important; } .compliance-checklist { display: flex !important; justify-content: space-between !important; width: 100% !important; gap: 6px !important; } .check-item { display: flex !important; align-items: center !important; gap: 6px !important; cursor: pointer; user-select: none; margin: 0 !important; } .check-item input { display: none !important; } .check-box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.3); display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease; background: rgba(255, 255, 255, 0.05); } .check-item input:checked+.check-box { background: #10b981 !important; border-color: #10b981 !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); } .check-box::after { content: '' !important; width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(0.5px, -0.5px); opacity: 0; transition: opacity 0.2s ease; } .check-item input:checked+.check-box::after { opacity: 1 !important; } .check-label { font-size: 0.68rem !important; color: rgba(255, 255, 255, 0.85) !important; font-weight: 600 !important; } .compliance-gauge { width: 100% !important; } .gauge-bar { width: 100% !important; height: 6px !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; overflow: hidden !important; margin-bottom: 4px !important; } .gauge-fill { height: 100% !important; background: linear-gradient(90deg, #10b981, #34d399) !important; border-radius: 10px !important; transition: width 0.3s ease !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); } .gauge-txt { font-size: 0.65rem !important; color: rgba(255, 255, 255, 0.6) !important; font-weight: 500 !important; } .gauge-txt strong { color: #10b981 !important; font-weight: 700 !important; } /* ISO Widget */ .iso-widget { padding: 0.6rem 0.85rem !important; flex-direction: column !important; justify-content: center !important; } .iso-steps { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 8px !important; } .iso-step { display: flex !important; align-items: center !important; gap: 10px !important; position: relative !important; } .iso-step:not(:last-child)::after { content: '' !important; position: absolute !important; left: 9px !important; top: 18px !important; width: 1px !important; height: 10px !important; background: rgba(255, 255, 255, 0.15) !important; } .iso-step.active:not(:last-child)::after { background: #a855f7 !important; } .step-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.6rem !important; font-weight: 800 !important; color: rgba(255, 255, 255, 0.6) !important; } .iso-step.active .step-dot { background: #a855f7 !important; border-color: #a855f7 !important; color: #fff !important; box-shadow: 0 0 8px rgba(168, 85, 247, 0.4); } .iso-step.current .step-dot { background: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; box-shadow: 0 0 8px rgba(14, 165, 233, 0.4); animation: pulse-step 1.5s infinite alternate; } @keyframes pulse-step { from { box-shadow: 0 0 4px rgba(14, 165, 233, 0.4); } to { box-shadow: 0 0 10px rgba(14, 165, 233, 0.8); } } .step-info { display: flex !important; justify-content: space-between !important; width: 100% !important; } .step-name { font-size: 0.72rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.9) !important; } .step-status { font-size: 0.68rem !important; font-weight: 700 !important; } .text-green { color: #10b981 !important; } .text-blue { color: #0ea5e9 !important; } /* Cloud Widget */ .cloud-widget { flex-direction: column !important; justify-content: space-between !important; align-items: stretch !important; gap: 10px !important; } .cloud-slider-group { width: 100% !important; } .slider-header { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.7rem !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 600 !important; margin-bottom: 4px !important; } .spend-val { color: #0ea5e9 !important; font-weight: 800 !important; } .cloud-slider { -webkit-appearance: none !important; width: 100% !important; height: 4px !important; border-radius: 4px !important; background: rgba(255, 255, 255, 0.1) !important; outline: none !important; cursor: pointer !important; } .cloud-slider::-webkit-slider-thumb { -webkit-appearance: none !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #0ea5e9 !important; cursor: pointer !important; margin-top: 0px !important; box-shadow: 0 0 10px rgba(14, 165, 233, 0.6); transition: transform 0.1s ease !important; } .cloud-slider::-webkit-slider-thumb:hover { transform: scale(1.2) !important; } .cloud-savings-callout { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; background: rgba(14, 165, 233, 0.08) !important; border: 1px dashed rgba(14, 165, 233, 0.25) !important; border-radius: 6px !important; padding: 6px 10px !important; box-sizing: border-box !important; } .savings-label { font-size: 0.65rem !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 500 !important; } .savings-val { font-size: 0.78rem !important; font-weight: 800 !important; color: #0ea5e9 !important; text-shadow: 0 0 10px rgba(14, 165, 233, 0.3) !important; } /* Light theme support */ [data-theme="light"] .card-badge { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .card-widget { background: rgba(243, 244, 246, 0.9) !important; border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .dial-num, [data-theme="light"] .step-name { color: #111827 !important; } [data-theme="light"] .dial-lbl, [data-theme="light"] .check-label, [data-theme="light"] .metric-item, [data-theme="light"] .slider-header, [data-theme="light"] .savings-label { color: #4b5563 !important; } [data-theme="light"] .check-box { border-color: rgba(0, 0, 0, 0.2); } /* ─── INTERACTIVE INDUSTRY TELEMETRY ─── */ .home-page .cyber-industries-section .industry-card { height: auto !important; min-height: 330px !important; justify-content: flex-start !important; padding: 2.2rem 1.8rem !important; } @media (max-width: 1024px) { .home-page .cyber-industries-section .industry-card { min-height: 325px !important; padding: 1.8rem 1.5rem !important; justify-content: flex-start !important; } } @media (max-width: 600px) { .home-page .cyber-industries-section .industry-card { min-height: 295px !important; padding: 1.5rem !important; justify-content: flex-start !important; } } .industry-title-row { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 0.85rem !important; width: 100% !important; } .ind-icon-wrap { width: 38px !important; height: 38px !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--accent-green) !important; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important; flex-shrink: 0 !important; } .industry-card:hover .ind-icon-wrap { background: var(--accent-green) !important; color: #070d1a !important; box-shadow: 0 0 15px var(--accent-green) !important; transform: scale(1.1) !important; } .ind-icon { width: 20px !important; height: 20px !important; } /* Terminal Console Styling */ .industry-terminal { width: 100% !important; background: #040a12 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; margin-top: 1.15rem !important; overflow: hidden !important; box-sizing: border-box !important; font-family: 'Courier New', Courier, monospace !important; transition: border-color 0.3s ease !important; } .industry-card:hover .industry-terminal { border-color: rgba(0, 242, 254, 0.25) !important; } .terminal-hdr { background: rgba(255, 255, 255, 0.02) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding: 6px 12px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } .terminal-title { font-size: 0.58rem !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.4) !important; letter-spacing: 0.08em !important; } .terminal-pulse { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #10b981 !important; box-shadow: 0 0 6px #10b981 !important; animation: terminal-blink 1.2s infinite alternate !important; } @keyframes terminal-blink { from { opacity: 0.3; } to { opacity: 1; } } .terminal-body { padding: 8px 12px !important; height: 70px !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 4px !important; scrollbar-width: none !important; } .terminal-body::-webkit-scrollbar { display: none !important; } .terminal-line { font-size: 0.62rem !important; color: #10b981 !important; text-shadow: 0 0 2px rgba(16, 185, 129, 0.5) !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; animation: scan-line-type 0.15s ease-out forwards !important; margin: 0 !important; } @keyframes scan-line-type { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } /* Color codes for terminal alerts */ .terminal-line.info { color: #00f2fe !important; text-shadow: 0 0 2px rgba(0, 242, 254, 0.5) !important; } .terminal-line.alert { color: #f43f5e !important; text-shadow: 0 0 2px rgba(244, 63, 94, 0.5) !important; } .terminal-line.sys { color: rgba(255, 255, 255, 0.55) !important; text-shadow: none !important; } /* Light Theme Overrides */ [data-theme="light"] .ind-icon-wrap { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .industry-terminal { background: #f9fafb !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .terminal-hdr { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .terminal-title { color: rgba(0, 0, 0, 0.5) !important; } [data-theme="light"] .terminal-line.sys { color: #4b5563 !important; } /* ─── INDUSTRY CARD CONTENT VISIBILITY OVERRIDES ─── */ .home-page .cyber-industries-section .industry-card .svc-overlay { clip-path: none !important; background: linear-gradient(180deg, rgba(7, 13, 26, 0.78) 0%, rgba(7, 13, 26, 0.94) 100%) !important; opacity: 1 !important; z-index: 1 !important; } .home-page .cyber-industries-section .industry-card:hover .svc-overlay { background: linear-gradient(180deg, rgba(7, 13, 26, 0.85) 0%, rgba(7, 13, 26, 0.98) 100%) !important; } .home-page .cyber-industries-section .industry-card p { opacity: 1 !important; transform: none !important; pointer-events: auto !important; color: rgba(255, 255, 255, 0.85) !important; } .home-page .cyber-industries-section .industry-card h3 { color: #ffffff !important; font-weight: 600 !important; } /* Light Theme overrides for proper contrast */ [data-theme="light"] .home-page .cyber-industries-section .industry-card .svc-overlay { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%) !important; } [data-theme="light"] .home-page .cyber-industries-section .industry-card p { color: #4b5563 !important; } [data-theme="light"] .home-page .cyber-industries-section .industry-card h3 { color: #111827 !important; } /* Virtual CISO Hero Layout Fix */ .vciso-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 90vh; padding-top: 140px; padding-bottom: 80px; } .vciso-hero .container { display: flex; flex-direction: column; width: 100%; position: relative; z-index: 2; } .vciso-hero .hero-shell { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; width: 100%; } .vciso-hero .hero-content { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; text-align: left; } .vciso-hero .hero-badge { display: inline-block; padding: 0.4rem 1rem; background: rgba(45, 155, 78, 0.15); color: var(--accent-green); border: 1px solid rgba(45, 155, 78, 0.3); border-radius: 50px; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .vciso-hero .hero-title { font-size: clamp(2.5rem, 4vw, 3.8rem); line-height: 1.15; font-weight: 700; margin: 0; } .vciso-hero .hero-title .line2 { display: block; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 0.1em; } .vciso-hero .hero-sub { font-size: 1.1rem; color: var(--off); max-width: 600px; line-height: 1.6; margin: 0; } .vciso-hero .hero-actions { display: flex; gap: 1.2rem; margin-top: 0.5rem; flex-wrap: wrap; } .vciso-hero .hero-stats { display: flex; gap: 3rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); width: 100%; } .vciso-hero .hstat { display: flex; flex-direction: column; gap: 0.4rem; } .vciso-hero .hstat-num { font-size: 2.8rem; font-weight: 800; color: var(--white); line-height: 1; } .vciso-hero .hstat-num span { color: var(--accent-green); } .vciso-hero .hstat-label { font-size: 0.9rem; color: var(--muted); max-width: 180px; line-height: 1.4; } .vciso-hero .hero-visual { width: 100%; display: flex; justify-content: center; align-items: center; } .vciso-dashboard { background: rgba(13, 21, 32, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 1.8rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); width: 100%; max-width: 600px; } .dash-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.2rem; } .vciso-hero .framework-ticker-wrap { margin-top: 4rem; width: 100%; } @media (max-width: 992px) { .vciso-hero .hero-shell { grid-template-columns: 1fr; gap: 3rem; } .vciso-hero .hero-content { align-items: center; text-align: center; } .vciso-hero .hero-sub { margin: 0 auto; } .vciso-hero .hero-actions, .vciso-hero .hero-stats { justify-content: center; } .dash-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .vciso-hero .hero-actions { flex-direction: column; width: 100%; } .vciso-hero .hero-actions .btn { width: 100%; justify-content: center; } .vciso-hero .hero-stats { flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } } /* Cyber Overview Section Styling */ .cyber-overview-section { padding: 5rem 0; position: relative; } .cyber-overview-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } .cyber-overview-copy { display: flex; flex-direction: column; gap: 1.2rem; } .cyber-overview-copy .section-label { display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 163, 217, 0.1); color: var(--cyan); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 4px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; width: max-content; } .cyber-overview-copy .section-heading { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; line-height: 1.2; margin: 0; color: var(--white); } .cyber-overview-copy .section-heading span { color: var(--accent-green); display: block; } .cyber-overview-copy .section-sub { font-size: 1.1rem; line-height: 1.7; color: var(--white); margin: 0; } /* Premium Card */ .cyber-overview-card { background: rgba(13, 21, 32, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 2.5rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .cyber-card-top { font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .cyber-stack-list { display: flex; flex-direction: column; gap: 1.5rem; } .cyber-stack-item { display: flex; flex-direction: column; gap: 0.4rem; padding-left: 1.5rem; position: relative; } .cyber-stack-item::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 8px var(--accent-green); } .cyber-stack-item strong { font-size: 1.1rem; color: var(--white); } .cyber-stack-item span { font-size: 0.95rem; color: var(--white); line-height: 1.5; } @media (max-width: 992px) { .cyber-overview-grid { grid-template-columns: 1fr; gap: 3.5rem; } } @media (max-width: 576px) { .cyber-overview-section { padding: 3.5rem 0; } .cyber-overview-card { padding: 1.8rem; } } /* Cyber Services Section Styling */ .cyber-services-section { padding: 6rem 0; position: relative; } .cyber-services-section .text-center { text-align: center; max-width: 750px; margin: 0 auto 4rem; } .cyber-services-section .section-label { display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 163, 217, 0.1); color: var(--cyan); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 4px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .cyber-services-section .section-heading { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--white); line-height: 1.2; } .cyber-services-section .section-heading span { color: var(--accent-green); } .cyber-services-section .section-sub { font-size: 1.15rem; color: var(--off); line-height: 1.6; } .cyber-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .cyber-service-card { background: rgba(13, 21, 32, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .cyber-service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(0, 163, 217, 0.1), transparent 70%); opacity: 0; transition: opacity 0.4s ease; } .cyber-service-card:hover { transform: translateY(-8px); border-color: rgba(0, 163, 217, 0.3); background: rgba(13, 21, 32, 0.75); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .cyber-service-card:hover::before { opacity: 1; } .cyber-service-icon { font-size: 3rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15); font-family: 'Space Mono', monospace, sans-serif; line-height: 1; transition: all 0.4s ease; } .cyber-service-card:hover .cyber-service-icon { -webkit-text-stroke: 1px var(--accent-green); text-shadow: 0 0 15px rgba(45, 155, 78, 0.4); } .cyber-service-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin: 0; position: relative; z-index: 2; } .cyber-service-card p { font-size: 0.95rem; color: var(--off); line-height: 1.6; margin: 0; position: relative; z-index: 2; } @media (max-width: 768px) { .cyber-services-section { padding: 4rem 0; } .cyber-services-section .text-center { margin-bottom: 3rem; } .cyber-services-grid { gap: 1.5rem; } } /* Cyber Tools Section (Redesigned with HUD Targeting & 3D Tunnel) */ .cyber-tools-section { padding: 7rem 0; position: relative; overflow: hidden; background: #050810; } /* Background Grid Overlay */ .cyber-tools-section::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 163, 217, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 163, 217, 0.05) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } .cyber-tools-section .container { position: relative; z-index: 1; } .cyber-tools-section .section-label { display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 163, 217, 0.1); color: var(--cyan); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 4px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .cyber-tools-section .section-heading { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--white); line-height: 1.2; } .cyber-tools-section .section-heading span { color: var(--accent-green); } .cyber-tools-section .section-sub { font-size: 1.15rem; color: var(--off); line-height: 1.6; margin-top: 1rem; } .cyber-tools-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; } .cyber-tools-tags { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 3rem; } /* HUD Targeting Brackets Tags */ .cyber-tools-tags span { display: inline-block; padding: 0.8rem 1.5rem; background: transparent; color: #ffffff; font-size: 0.95rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; cursor: default; position: relative; text-shadow: 0 0 5px rgba(0, 163, 217, 0.8); } /* The Brackets */ .cyber-tools-tags span::before, .cyber-tools-tags span::after { content: ''; position: absolute; width: 15px; height: 15px; border: 2px solid var(--cyan); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: -1; } .cyber-tools-tags span::before { top: 0; left: 0; border-right: none; border-bottom: none; } .cyber-tools-tags span::after { bottom: 0; right: 0; border-left: none; border-top: none; } /* Hover: Brackets expand to form a full glowing box */ .cyber-tools-tags span:hover { color: #ffffff; text-shadow: 0 0 10px #ffffff; transform: scale(1.05); } .cyber-tools-tags span:hover::before, .cyber-tools-tags span:hover::after { width: 100%; height: 100%; background: rgba(0, 163, 217, 0.15); box-shadow: 0 0 20px rgba(0, 163, 217, 0.4); } /* 3D Cyberspace Tunnel Card */ .cyber-metrics-card { background: rgba(8, 12, 18, 0.85); border: 1px solid rgba(45, 155, 78, 0.4); border-radius: 12px; padding: 3rem 2.5rem; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); position: relative; overflow: hidden; box-shadow: inset 0 0 50px rgba(45, 155, 78, 0.1), 0 20px 50px rgba(0, 0, 0, 0.6); perspective: 800px; /* Crucial for 3D effect */ } /* Infinite Tunnel Animation */ .cyber-metrics-card::before { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: repeating-radial-gradient(circle at center, transparent 0, transparent 20px, rgba(45, 155, 78, 0.15) 21px, transparent 23px); transform-origin: center; animation: tunnelZoom 6s infinite linear; pointer-events: none; z-index: 0; } /* Second tunnel layer for depth */ .cyber-metrics-card::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: repeating-radial-gradient(circle at center, transparent 0, transparent 40px, rgba(0, 163, 217, 0.1) 41px, transparent 43px); transform-origin: center; animation: tunnelZoom 6s infinite linear 3s; /* offset phase */ pointer-events: none; z-index: 0; } @keyframes tunnelZoom { 0% { transform: translate(-50%, -50%) translateZ(-500px) scale(0.2); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) translateZ(300px) scale(2.5); opacity: 0; } } .cyber-card-top, .cyber-metric { position: relative; z-index: 2; /* Keep text above the 3D tunnel */ } .cyber-card-top { font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } .cyber-metric { margin-bottom: 2rem; } .cyber-metric:last-child { margin-bottom: 0; } .cyber-metric-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.8rem; } .cyber-metric-head span { font-size: 1rem; color: var(--white); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .cyber-metric-head strong { font-size: 1.2rem; color: var(--accent-green); font-family: 'Space Mono', monospace; text-shadow: 0 0 15px rgba(45, 155, 78, 0.6); } /* Cyber Hazard-Stripe Animated Bar */ .cyber-metric-bar { width: 100%; height: 12px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(45, 155, 78, 0.3); border-radius: 3px; position: relative; overflow: hidden; } .cyber-metric-bar span { display: block; height: 100%; width: 0; /* Starts empty until interaction */ background: repeating-linear-gradient(-45deg, var(--accent-green) 0, var(--accent-green) 10px, rgba(45, 155, 78, 0.4) 10px, rgba(45, 155, 78, 0.4) 20px); background-size: 28px 28px; box-shadow: 0 0 15px var(--accent-green); transition: width 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: stripeSlide 1s linear infinite; } @keyframes stripeSlide { 0% { background-position: 0 0; } 100% { background-position: 28px 0; } } /* Animate width when card is hovered */ .cyber-metrics-card:hover .cyber-metric-bar span { width: 100%; } @media (max-width: 992px) { .cyber-tools-grid { grid-template-columns: 1fr; gap: 3.5rem; } } @media (max-width: 576px) { .cyber-tools-section { padding: 4rem 0; } .cyber-metrics-card { padding: 1.8rem; } } /* Cyber FAQ Section Styling */ .cyber-faq-section { padding: 6rem 0; position: relative; background: radial-gradient(ellipse at bottom, rgba(13, 21, 32, 0.8), var(--bg-dark)); } .faq-intro { text-align: center; max-width: 700px; margin: 0 auto 4rem; } .cyber-faq-section .section-label { display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 163, 217, 0.1); color: var(--cyan); border: 1px solid rgba(0, 163, 217, 0.2); border-radius: 4px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .cyber-faq-section .section-heading { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--white); line-height: 1.2; } .cyber-faq-section .section-heading span { color: var(--accent-green); } .cyber-faq-section .section-sub { font-size: 1.15rem; color: var(--off); line-height: 1.6; margin-top: 1rem; } .faq-list { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; } .faq-item { background: rgba(13, 21, 32, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.4s ease; position: relative; } /* Futuristic side border */ .faq-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); transform: scaleY(0); transition: transform 0.4s ease; transform-origin: center; } .faq-item:hover { border-color: rgba(0, 163, 217, 0.3); box-shadow: 0 10px 30px rgba(0, 163, 217, 0.1); } .faq-item:hover::before { transform: scaleY(0.5); } .faq-item.open { border-color: rgba(45, 155, 78, 0.4); background: rgba(13, 21, 32, 0.7); box-shadow: 0 10px 40px rgba(45, 155, 78, 0.15); } .faq-item.open::before { background: var(--accent-green); transform: scaleY(1); } .faq-question { padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 1.15rem; font-weight: 600; color: var(--white); user-select: none; transition: color 0.3s ease; } .faq-item:hover .faq-question { color: var(--cyan); } .faq-item.open .faq-question { color: var(--accent-green); } .faq-toggle { font-size: 1.8rem; font-weight: 300; color: var(--off); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease, background 0.3s ease; line-height: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); } .faq-item:hover .faq-toggle { background: rgba(0, 163, 217, 0.15); color: var(--cyan); } .faq-item.open .faq-toggle { transform: rotate(45deg); background: rgba(45, 155, 78, 0.15); color: var(--accent-green); } .faq-answer { max-height: 0; opacity: 0; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; overflow: hidden; } .faq-item.open .faq-answer { max-height: 400px; opacity: 1; } .faq-answer-inner { padding: 0 2rem 1.8rem; color: var(--off); font-size: 1.05rem; line-height: 1.7; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 0.5rem; padding-top: 1.5rem; } @media (max-width: 576px) { .faq-question { padding: 1.2rem; font-size: 1rem; gap: 1rem; } .faq-answer-inner { padding: 0 1.2rem 1.2rem; } .faq-toggle { min-width: 28px; height: 28px; font-size: 1.5rem; } } /* Premium Contact Section */ .contact-premium-section { padding: 8rem 0; position: relative; background: #030712; overflow: hidden; } /* Mesh Gradients */ .mesh-gradient-1, .mesh-gradient-2, .mesh-gradient-3 { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4; z-index: 0; pointer-events: none; } .mesh-gradient-1 { top: -10%; right: -5%; width: 500px; height: 500px; background: rgba(0, 163, 217, 0.4); } .mesh-gradient-2 { bottom: -10%; left: -10%; width: 600px; height: 600px; background: rgba(45, 155, 78, 0.3); } .contact-premium-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center; } /* Left Info Side */ .response-badge-premium { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.5rem 1rem; background: rgba(45, 155, 78, 0.1); border: 1px solid rgba(45, 155, 78, 0.2); border-radius: 50px; color: var(--accent-green); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2rem; } .pulse-icon { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 10px var(--accent-green); animation: pulseNeon 2s infinite; } @keyframes pulseNeon { 0% { box-shadow: 0 0 0 0 rgba(45, 155, 78, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(45, 155, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 155, 78, 0); } } .premium-heading { font-size: clamp(2.5rem, 4vw, 3.5rem); color: var(--white); font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; } .premium-heading span { color: var(--cyan); display: block; } .premium-sub { font-size: 1.15rem; color: var(--off); line-height: 1.7; margin-bottom: 3rem; max-width: 90%; } .consultation-features { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; } .feature-tag { display: flex; align-items: flex-start; gap: 1.2rem; } .feature-tag i { font-size: 1.5rem; color: var(--cyan); background: rgba(0, 163, 217, 0.1); padding: 1rem; border-radius: 12px; } .feature-text strong { display: block; color: var(--white); font-size: 1.1rem; margin-bottom: 0.3rem; } .feature-text span { color: var(--off); font-size: 0.95rem; } .client-trust-widget { display: flex; align-items: center; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); } .trust-avatars { display: flex; } .trust-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-dark); border: 2px solid #030712; display: flex; align-items: center; justify-content: center; color: var(--cyan); font-weight: 700; margin-left: -15px; } .trust-avatar:first-child { margin-left: 0; } .trust-text { color: var(--off); font-size: 0.95rem; } .trust-text strong { color: var(--white); } /* Right Form Side */ .contact-glass-card-premium { background: rgba(13, 21, 32, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 3rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .card-glass-glow { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.5; } .form-header { margin-bottom: 2.5rem; } .form-header h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 0.5rem; } .form-header p { color: var(--off); font-size: 0.95rem; } .premium-form-row { margin-bottom: 1.5rem; } .premium-input-group label { display: block; color: var(--white); font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; } .input-wrapper { position: relative; } .input-wrapper i { position: absolute; left: 1rem; top: 1.2rem; color: var(--off); font-size: 1rem; transition: color 0.3s ease; } .input-wrapper input, .input-wrapper select, .input-wrapper textarea { width: 100%; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1rem 1rem 1rem 3rem; color: var(--white); font-family: inherit; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .input-wrapper textarea { padding-top: 1.2rem; resize: vertical; min-height: 100px; } .input-wrapper input:focus, .input-wrapper select:focus, .input-wrapper textarea:focus { outline: none; border-color: rgba(0, 163, 217, 0.5); background: rgba(0, 0, 0, 0.4); } .input-wrapper input:focus+.input-focus-border, .input-wrapper select:focus+.input-focus-border, .input-wrapper textarea:focus+.input-focus-border { width: 100%; } .input-wrapper input:focus~i, .input-wrapper select:focus~i, .input-wrapper textarea:focus~i { color: var(--cyan); } .input-focus-border { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--cyan); transition: width 0.4s ease; border-radius: 0 0 8px 8px; } .premium-submit-btn { width: 100%; background: linear-gradient(90deg, var(--cyan), var(--accent-green)); border: none; border-radius: 8px; padding: 1.2rem; color: var(--bg-dark); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 1rem; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; margin-top: 1rem; } .premium-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 163, 217, 0.3); } .premium-submit-btn:hover i { transform: translateX(5px); } @media (max-width: 992px) { .contact-premium-grid { grid-template-columns: 1fr; gap: 4rem; } } @media (max-width: 576px) { .contact-premium-section { padding: 4rem 0; } .contact-glass-card-premium { padding: 1.8rem; } .premium-heading { font-size: 2.2rem; } } /* ======================================= vCISO Hero Section - Redesigned ======================================= */ .vciso-hero-new { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #03060f; padding-top: 100px; } .hero-bg-animated { position: absolute; inset: 0; z-index: 0; } .hero-bg-animated video { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(3, 6, 15, 0.95) 0%, rgba(3, 6, 15, 0.7) 100%); z-index: 1; } .hero-container-new { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-bottom: 4rem; } .cyber-hero-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; width: 100%; } /* Left Content Styles */ .hero-badge-glow { display: inline-block; padding: 0.5rem 1.2rem; background: rgba(0, 163, 217, 0.1); border: 1px solid rgba(0, 163, 217, 0.4); color: var(--cyan); border-radius: 4px; font-size: 0.85rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 1.5rem; box-shadow: 0 0 15px rgba(0, 163, 217, 0.2); } .hero-title-glitch { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 1.2rem; text-shadow: 0 0 20px rgba(255, 255, 255, 0.1); } .hero-title-glitch span { color: var(--accent-green); text-shadow: 0 0 20px rgba(45, 155, 78, 0.4); } .hero-description { font-size: 1.05rem; color: #b3c2d4; line-height: 1.7; margin-bottom: 2.5rem; max-width: 90%; } .hero-action-group { display: flex; gap: 1.5rem; margin-bottom: 3rem; } .cyber-btn { display: inline-flex; align-items: center; gap: 0.8rem; padding: 1rem 2rem; background: linear-gradient(90deg, var(--cyan), #00d4ff); color: #000; font-weight: 700; border-radius: 6px; text-decoration: none; border: none; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .cyber-btn svg { width: 20px; height: 20px; } .cyber-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 163, 217, 0.4); } .cyber-btn-outline { padding: 1rem 2rem; background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .cyber-btn-outline:hover { background: rgba(255, 255, 255, 0.05); border-color: #fff !important; } .hero-metrics-row { display: flex; gap: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; } .metric-box { display: flex; flex-direction: column; gap: 0.3rem; } .m-val { font-size: 2rem; font-weight: 800; color: #fff; font-family: 'Space Mono', monospace; } .m-accent { color: var(--cyan); } .m-lbl { font-size: 0.9rem; color: #8b9bb4; text-transform: uppercase; letter-spacing: 0.5px; } /* Right Side: Orbital Core System */ .hero-visual-right { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; } .orbital-core-system { position: relative; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } .core-center { position: relative; width: 120px; height: 120px; background: rgba(0, 163, 217, 0.15); border: 2px solid var(--cyan); border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 10; box-shadow: inset 0 0 30px rgba(0, 163, 217, 0.5), 0 0 50px rgba(0, 163, 217, 0.4); } .core-icon svg { width: 50px; height: 50px; color: #fff; filter: drop-shadow(0 0 10px #fff); } .core-pulse-1, .core-pulse-2 { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--cyan); animation: corePulse 3s infinite cubic-bezier(0.2, 0.8, 0.2, 1); } .core-pulse-2 { animation-delay: 1.5s; } @keyframes corePulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } /* Orbital Rings */ .orbit-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.15); } .ring-1 { width: 250px; height: 250px; animation: spinRight 20s linear infinite; } .ring-2 { width: 380px; height: 380px; animation: spinLeft 30s linear infinite; } .ring-3 { width: 510px; height: 510px; animation: spinRight 40s linear infinite; } @keyframes spinRight { 100% { transform: rotate(360deg); } } @keyframes spinLeft { 100% { transform: rotate(-360deg); } } /* Nodes on rings */ .orbit-node { position: absolute; display: flex; align-items: center; gap: 0.8rem; background: rgba(8, 12, 18, 0.9); border: 1px solid rgba(45, 155, 78, 0.4); padding: 0.6rem 1rem; border-radius: 50px; backdrop-filter: blur(5px); white-space: nowrap; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Reverse rotation to keep text upright */ } .ring-1 .orbit-node { animation: spinLeft 20s linear infinite; } .ring-2 .orbit-node { animation: spinRight 30s linear infinite; } .ring-3 .orbit-node { animation: spinLeft 40s linear infinite; } .node-top { top: -20px; left: 50%; margin-left: -50px; } .node-right { top: 50%; right: -30px; margin-top: -20px; } .node-left { bottom: 15%; left: -20px; } .node-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(45, 155, 78, 0.2); border-radius: 50%; color: var(--accent-green); } .node-icon svg { width: 14px; height: 14px; } .node-text { font-size: 0.85rem; font-weight: 600; color: #fff; letter-spacing: 0.5px; } /* Bottom Ticker */ .bottom-ticker { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.4) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; z-index: 10; padding: 1.2rem 0 !important; backdrop-filter: blur(10px); } .bottom-ticker .ticker-title { color: var(--cyan); } @media (max-width: 1024px) { .cyber-hero-layout { grid-template-columns: 1fr; text-align: center; gap: 3rem; } .hero-action-group, .hero-metrics-row { justify-content: center; } .hero-description { margin: 0 auto 2.5rem; } .orbital-core-system { transform: scale(0.7); } } @media (max-width: 576px) { .hero-metrics-row { flex-direction: column; gap: 1.5rem; } .orbital-core-system { display: none; /* Hide complex orbital on small mobile for perf */ } } /* ======================================= ISO Hero Section - Redesigned ======================================= */ .iso-hero-new { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #020b14; padding-top: 100px; } .hero-overlay-iso { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2, 11, 20, 0.96) 0%, rgba(2, 11, 20, 0.75) 100%), linear-gradient(90deg, rgba(0, 191, 255, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 191, 255, 0.04) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; z-index: 1; } /* Upgraded ISO Metrics */ .iso-hero-new .metric-box { background: rgba(0, 191, 255, 0.05); border: 1px solid rgba(0, 191, 255, 0.2); border-left: 3px solid #00bfff; padding: 1rem 1.5rem; border-radius: 8px; backdrop-filter: blur(10px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .iso-hero-new .metric-box:hover { background: rgba(0, 191, 255, 0.15); box-shadow: 0 10px 25px rgba(0, 191, 255, 0.25); transform: translateY(-5px); border-color: rgba(0, 191, 255, 0.5); } .hero-badge-iso { display: inline-block; padding: 0.5rem 1.2rem; background: rgba(0, 191, 255, 0.1); border: 1px solid rgba(0, 191, 255, 0.4); color: #00bfff; border-radius: 50px; font-size: 0.85rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 1.5rem; box-shadow: 0 0 15px rgba(0, 191, 255, 0.2); } .hero-title-iso { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 1.2rem; text-shadow: 0 0 20px rgba(255, 255, 255, 0.1); } .hero-title-iso span { color: #00bfff; text-shadow: 0 0 25px rgba(0, 191, 255, 0.4); background: linear-gradient(90deg, #00bfff, #00ffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .iso-btn { background: linear-gradient(90deg, #00bfff, #0077ff); box-shadow: 0 0 20px rgba(0, 191, 255, 0.3); color: #fff !important; } .iso-btn:hover { box-shadow: 0 10px 30px rgba(0, 191, 255, 0.5); } /* ======================================= 3D Isometric Authorization Terminal ======================================= */ .auth-terminal-system { position: relative; width: 500px; height: 500px; perspective: 1500px; display: flex; justify-content: center; align-items: center; } .iso-terminal-base { position: relative; width: 360px; height: 460px; transform-style: preserve-3d; transform: rotateX(55deg) rotateZ(-35deg); transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .auth-terminal-system:hover .iso-terminal-base { transform: rotateX(45deg) rotateZ(-25deg) scale(1.05); } .terminal-screen { position: absolute; inset: 0; background: rgba(2, 11, 20, 0.85); border: 2px solid #00bfff; border-radius: 20px; box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.9), inset 0 0 50px rgba(0, 191, 255, 0.3), 0 0 25px rgba(0, 191, 255, 0.5); backdrop-filter: blur(15px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } /* Grid overlay inside the screen */ .scan-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 191, 255, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 255, 0.15) 1px, transparent 1px); background-size: 30px 30px; z-index: 0; } /* Laser scan line moving up and down */ .laser-scanner { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #00ffff; box-shadow: 0 0 20px 8px rgba(0, 255, 255, 0.6); z-index: 5; animation: laserScan 3.5s ease-in-out infinite; } @keyframes laserScan { 0%, 100% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 95% { top: 100%; opacity: 0; } } /* Central Fingerprint / Auth Area */ .auth-circle { position: relative; width: 150px; height: 150px; z-index: 2; display: flex; justify-content: center; align-items: center; } .auth-icon { font-size: 5rem; color: #00bfff; filter: drop-shadow(0 0 20px rgba(0, 191, 255, 0.9)); animation: pulseAuthIcon 2s infinite; } @keyframes pulseAuthIcon { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; color: #00ffff; filter: drop-shadow(0 0 30px #00ffff); } } .auth-ring-1, .auth-ring-2 { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; } .auth-ring-1 { border-top-color: #00bfff; border-bottom-color: #00bfff; animation: spinRight 4s linear infinite; } .auth-ring-2 { inset: -15px; border-left-color: #00ffff; border-right-color: #00ffff; animation: spinLeft 6s linear infinite; opacity: 0.7; } /* Status Text at bottom of screen */ .auth-status { position: absolute; bottom: 40px; z-index: 2; background: rgba(0, 191, 255, 0.15); border: 1px solid rgba(0, 191, 255, 0.5); padding: 0.6rem 2rem; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 191, 255, 0.2); } .status-text { color: #fff; font-family: 'Space Mono', monospace; font-size: 0.95rem; font-weight: 700; letter-spacing: 2px; animation: textFlash 1.5s infinite; } @keyframes textFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Floating Holographic Displays (TranslateZ creates 3D popping effect) */ .holo-display { position: absolute; width: 240px; background: rgba(2, 11, 20, 0.75); border: 1px solid rgba(0, 191, 255, 0.3); border-left: 4px solid #00bfff; padding: 1.2rem; border-radius: 8px; backdrop-filter: blur(8px); box-shadow: -20px 20px 30px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 191, 255, 0.1); z-index: 10; } .holo-1 { top: 5%; right: -80px; transform: translateZ(80px); animation: floatHolo1 5s ease-in-out infinite; } .holo-2 { bottom: 15%; left: -80px; transform: translateZ(120px); animation: floatHolo2 6s ease-in-out infinite 1s; } @keyframes floatHolo1 { 0%, 100% { transform: translateZ(80px) translateY(0); } 50% { transform: translateZ(100px) translateY(-15px); } } @keyframes floatHolo2 { 0%, 100% { transform: translateZ(120px) translateY(0); } 50% { transform: translateZ(140px) translateY(-15px); } } .holo-header { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 1rem; letter-spacing: 1px; } .progress-track { height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; margin-bottom: 0.6rem; } .progress-fill { height: 100%; background: #00ffff; box-shadow: 0 0 10px #00ffff; animation: fillBar 4s ease-in-out infinite; } @keyframes fillBar { 0% { width: 0%; } 40%, 100% { width: 100%; } } .holo-body span { font-size: 0.8rem; color: #00ffff; font-weight: 700; font-family: 'Space Mono', monospace; letter-spacing: 1px; } @media (max-width: 1024px) { .auth-terminal-system { transform: scale(0.75); } } @media (max-width: 576px) { .auth-terminal-system { display: none; } } /* ======================================= ISO Overview Section - Sci-Fi Grid ======================================= */ .iso-overview-section { padding: 100px 0; background: #020b14; position: relative; overflow: hidden; } .iso-overview-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 191, 255, 0.03) 1px, transparent 1px), linear-gradient(rgba(0, 191, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: 0; } .iso-overview-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; position: relative; z-index: 2; } .iso-section-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; background: rgba(0, 191, 255, 0.1); border-left: 3px solid #00bfff; color: #00bfff; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 1.5rem; box-shadow: 0 0 15px rgba(0, 191, 255, 0.2); } .iso-section-heading { font-size: clamp(2rem, 3.5vw, 2.8rem); color: #fff; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; } .iso-section-heading span { color: #00bfff; text-shadow: 0 0 15px rgba(0, 191, 255, 0.3); } .iso-section-sub { color: #b3c2d4; font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.2rem; } .iso-overview-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .iso-feature-card { position: relative; background: rgba(2, 11, 20, 0.6); padding: 2rem 1.5rem; clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%); border-left: 2px solid rgba(0, 191, 255, 0.2); border-bottom: 2px solid rgba(0, 191, 255, 0.2); backdrop-filter: blur(10px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; } .iso-feature-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(0, 191, 255, 0.05) 100%); z-index: 0; transition: all 0.4s ease; } .iso-feature-card:hover { transform: translateY(-8px); border-left: 2px solid #00ffff; border-bottom: 2px solid #00ffff; } .iso-feature-card:hover::before { background: linear-gradient(135deg, transparent 20%, rgba(0, 191, 255, 0.2) 100%); } .feature-num { position: absolute; top: 10px; right: 20px; font-size: 4.5rem; font-weight: 800; color: rgba(0, 191, 255, 0.05); transition: all 0.5s ease; z-index: 0; font-family: 'Space Mono', monospace; line-height: 1; } .iso-feature-card:hover .feature-num { color: rgba(0, 191, 255, 0.15); transform: scale(1.1) translateX(-5px); } .feature-icon { position: relative; font-size: 2rem; color: #00bfff; margin-bottom: 1.2rem; z-index: 1; transition: all 0.4s ease; } .iso-feature-card:hover .feature-icon { color: #00ffff; transform: scale(1.1); filter: drop-shadow(0 0 10px #00ffff); } .iso-feature-card h3 { position: relative; color: #fff; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.8rem; z-index: 1; } .iso-feature-card p { position: relative; color: #8fa6c2; font-size: 0.95rem; line-height: 1.6; z-index: 1; margin-bottom: 0; } @media (max-width: 992px) { .iso-overview-layout { grid-template-columns: 1fr; } } @media (max-width: 576px) { .iso-overview-features { grid-template-columns: 1fr; } } /* ======================================= ISO Standards Hub Section ======================================= */ .iso-standards-hub-section { padding: 100px 0; background: #01060b; } .iso-hub-container input { display: none; } .iso-hub-container { display: flex; gap: 3rem; background: rgba(2, 11, 20, 0.6); border: 1px solid rgba(0, 191, 255, 0.2); border-radius: 12px; padding: 2.5rem; backdrop-filter: blur(15px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(0, 191, 255, 0.05); } .iso-hub-menu { flex: 0 0 320px; display: flex; flex-direction: column; gap: 1rem; } .hub-btn { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; background: rgba(0, 191, 255, 0.03); border: 1px solid rgba(0, 191, 255, 0.1); color: #8fa6c2; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .hub-btn i { font-size: 1.3rem; margin-right: 15px; color: #00bfff; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .hub-btn .arr { opacity: 0; transform: translateX(-15px); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; font-size: 1.2rem; } .hub-btn:hover { background: rgba(0, 191, 255, 0.1); color: #fff; border-color: rgba(0, 191, 255, 0.3); transform: translateX(5px); } /* Radio State Logic */ #tab-27001:checked~.iso-hub-menu label[for="tab-27001"], #tab-22301:checked~.iso-hub-menu label[for="tab-22301"], #tab-20000:checked~.iso-hub-menu label[for="tab-20000"], #tab-31000:checked~.iso-hub-menu label[for="tab-31000"], #tab-9001:checked~.iso-hub-menu label[for="tab-9001"] { background: linear-gradient(90deg, #00bfff, #0077ff); color: #fff; box-shadow: 0 10px 25px rgba(0, 191, 255, 0.4); border-color: transparent; transform: translateX(10px); } #tab-27001:checked~.iso-hub-menu label[for="tab-27001"] i, #tab-22301:checked~.iso-hub-menu label[for="tab-22301"] i, #tab-20000:checked~.iso-hub-menu label[for="tab-20000"] i, #tab-31000:checked~.iso-hub-menu label[for="tab-31000"] i, #tab-9001:checked~.iso-hub-menu label[for="tab-9001"] i { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } #tab-27001:checked~.iso-hub-menu label[for="tab-27001"] .arr, #tab-22301:checked~.iso-hub-menu label[for="tab-22301"] .arr, #tab-20000:checked~.iso-hub-menu label[for="tab-20000"] .arr, #tab-31000:checked~.iso-hub-menu label[for="tab-31000"] .arr, #tab-9001:checked~.iso-hub-menu label[for="tab-9001"] .arr { opacity: 1; transform: translateX(0); } /* Panel Logic */ .iso-hub-panels { flex: 1; display: grid; grid-template-columns: 1fr; } .hub-panel { grid-column: 1; grid-row: 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px) scale(0.98); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: rgba(2, 11, 20, 0.8); border: 1px solid rgba(0, 191, 255, 0.2); border-radius: 12px; padding: 3rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .panel-glow { position: absolute; top: -50px; right: -50px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0, 191, 255, 0.15) 0%, transparent 70%); filter: blur(25px); pointer-events: none; } #tab-27001:checked~.iso-hub-panels #panel-27001, #tab-22301:checked~.iso-hub-panels #panel-22301, #tab-20000:checked~.iso-hub-panels #panel-20000, #tab-31000:checked~.iso-hub-panels #panel-31000, #tab-9001:checked~.iso-hub-panels #panel-9001 { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); z-index: 2; } .panel-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .panel-header h3 { font-size: 3rem; font-weight: 800; color: #fff; text-shadow: 0 0 15px rgba(0, 191, 255, 0.4); margin: 0; font-family: 'Space Mono', monospace; letter-spacing: -1px; } .panel-header .badge { background: rgba(0, 191, 255, 0.1); color: #00ffff; border: 1px solid #00bfff; padding: 0.5rem 1.2rem; border-radius: 50px; font-size: 0.9rem; font-weight: 700; letter-spacing: 1.5px; box-shadow: 0 0 15px rgba(0, 191, 255, 0.2); } .panel-desc { font-size: 1.15rem; line-height: 1.7; color: #b3c2d4; margin-bottom: 2.5rem; max-width: 95%; } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .pg-item { background: rgba(0, 191, 255, 0.04); border-left: 4px solid #00bfff; padding: 1.2rem; border-radius: 6px; color: #fff; font-size: 1rem; font-weight: 600; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .pg-item:hover { background: rgba(0, 191, 255, 0.1); transform: translateX(5px); border-color: #00ffff; } .pg-item strong { color: #00bfff; display: block; margin-bottom: 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; } @media (max-width: 992px) { .iso-hub-container { flex-direction: column; } .iso-hub-menu { flex: auto; flex-direction: row; flex-wrap: wrap; } .hub-btn { flex: 1 1 200px; } .panel-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .iso-hub-container { padding: 1.5rem; } .hub-panel { padding: 2rem 1.5rem; } .panel-header h3 { font-size: 2.2rem; } } @media (max-width: 1024px) { .iso-hologram-system { transform: scale(0.8); } } @media (max-width: 576px) { .iso-hologram-system { display: none; } } /* ======================================= ISO Implementation Pipeline Section ======================================= */ .iso-pipeline-section { padding: 100px 0; background: #020b14; position: relative; overflow: hidden; } .iso-timeline { position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 0; } .timeline-track { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: rgba(0, 191, 255, 0.15); z-index: 1; } .timeline-track::after { content: ''; position: absolute; top: 0; left: -1.5px; width: 5px; height: 120px; background: #00bfff; border-radius: 10px; box-shadow: 0 0 20px #00bfff, 0 0 40px #00ffff; animation: dataStream 4s linear infinite; } @keyframes dataStream { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } } .timeline-node { position: relative; display: flex; justify-content: flex-end; padding-right: 50%; margin-bottom: 4rem; z-index: 2; } .timeline-node.right { justify-content: flex-start; padding-right: 0; padding-left: 50%; } .node-point { position: absolute; top: 40px; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: #020b14; border: 4px solid #00bfff; border-radius: 50%; z-index: 3; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .timeline-node:hover .node-point { background: #00ffff; border-color: #00ffff; box-shadow: 0 0 25px #00ffff; transform: translate(-50%, -50%) scale(1.4); } .node-content { width: 85%; background: rgba(2, 11, 20, 0.6); border: 1px solid rgba(0, 191, 255, 0.2); padding: 2.5rem; border-radius: 12px; backdrop-filter: blur(10px); position: relative; transition: all 0.4s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .timeline-node.right .node-content { margin-left: auto; margin-right: 0; } .node-content::before { content: ''; position: absolute; top: 40px; right: -7.5%; /* Connect to center */ width: 7.5%; height: 2px; background: rgba(0, 191, 255, 0.3); transition: all 0.4s ease; } .timeline-node.right .node-content::before { right: auto; left: -7.5%; } .timeline-node:hover .node-content { transform: translateY(-8px); border-color: #00ffff; box-shadow: 0 15px 35px rgba(0, 191, 255, 0.15); } .timeline-node:hover .node-content::before { background: #00ffff; box-shadow: 0 0 15px #00ffff; } .node-num { position: absolute; top: -25px; left: 20px; font-size: 4rem; font-weight: 800; color: rgba(0, 191, 255, 0.05); font-family: 'Space Mono', monospace; line-height: 1; transition: all 0.5s ease; } .timeline-node.right .node-num { left: auto; right: 20px; } .timeline-node:hover .node-num { color: rgba(0, 191, 255, 0.15); transform: scale(1.1); } .node-content h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 1rem; position: relative; z-index: 2; } .node-content p { color: #8fa6c2; font-size: 1.05rem; line-height: 1.7; margin: 0; position: relative; z-index: 2; } /* Mobile responsive */ @media (max-width: 992px) { .node-content { width: 95%; } .node-content::before { width: 5%; right: -5%; } .timeline-node.right .node-content::before { width: 5%; left: -5%; } } @media (max-width: 768px) { .timeline-track { left: 30px; } .timeline-node, .timeline-node.right { padding-left: 70px; padding-right: 0; justify-content: flex-start; } .node-point { left: 30px; } .node-content { width: 100%; padding: 2rem; } .node-content::before, .timeline-node.right .node-content::before { left: -40px; width: 40px; right: auto; } .timeline-node.right .node-num, .timeline-node .node-num { left: 20px; right: auto; } } /* ======================================= QMS Hero Holographic PDCA Ring ======================================= */ .qms-pdca-hologram { position: relative; width: 450px; height: 450px; margin: 0 auto; perspective: 1200px; display: flex; align-items: center; justify-content: center; } .pdca-core { position: absolute; width: 50px; height: 50px; transform-style: preserve-3d; animation: spinCube 8s infinite linear; z-index: 10; } .core-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .core-cube .face { position: absolute; width: 50px; height: 50px; background: rgba(0, 255, 255, 0.1); border: 1px solid #00ffff; box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.5); } .core-cube .front { transform: translateZ(25px); } .core-cube .back { transform: rotateY(180deg) translateZ(25px); } .core-cube .left { transform: rotateY(-90deg) translateZ(25px); } .core-cube .right { transform: rotateY(90deg) translateZ(25px); } .core-cube .top { transform: rotateX(90deg) translateZ(25px); } .core-cube .bottom { transform: rotateX(-90deg) translateZ(25px); } @keyframes spinCube { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } .pdca-ring { position: absolute; width: 320px; height: 320px; border-radius: 50%; transform-style: preserve-3d; transform: rotateX(65deg) rotateZ(0deg); animation: spinRing 20s infinite linear; } @keyframes spinRing { 0% { transform: rotateX(65deg) rotateZ(0deg); } 100% { transform: rotateX(65deg) rotateZ(360deg); } } .quadrant { position: absolute; top: 0; left: 0; width: 160px; height: 160px; transform-origin: bottom right; border-radius: 100% 0 0 0; border-top: 3px solid; border-left: 3px solid; border-bottom: none; border-right: none; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .q-label { position: absolute; color: #fff; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 1.1rem; letter-spacing: 2px; transform: rotate(-45deg); opacity: 0.9; } .q-plan { border-color: #00bfff; background: rgba(0, 191, 255, 0.1); transform: rotate(0deg); } .q-plan .q-label { color: #00bfff; text-shadow: 0 0 10px #00bfff; top: 45%; left: 45%; } .q-do { border-color: #ffcc00; background: rgba(255, 204, 0, 0.1); transform: rotate(90deg); } .q-do .q-label { color: #ffcc00; text-shadow: 0 0 10px #ffcc00; top: 45%; left: 45%; } .q-check { border-color: #34c759; background: rgba(52, 199, 89, 0.1); transform: rotate(180deg); } .q-check .q-label { color: #34c759; text-shadow: 0 0 10px #34c759; top: 45%; left: 45%; } .q-act { border-color: #ff3b30; background: rgba(255, 59, 48, 0.1); transform: rotate(270deg); } .q-act .q-label { color: #ff3b30; text-shadow: 0 0 10px #ff3b30; top: 45%; left: 45%; } .ring-scanner { position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; transform-origin: top left; background: conic-gradient(from 180deg, rgba(0, 255, 255, 0.5) 0deg, transparent 60deg); animation: sweepScanner 3s infinite linear; border-radius: 100% 0 0 0; z-index: 5; pointer-events: none; } @keyframes sweepScanner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .outer-orbit { position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1px dashed rgba(0, 191, 255, 0.4); transform: rotateX(65deg) rotateZ(0deg); animation: spinOuter 30s infinite linear reverse; } .outer-orbit::after { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #00ffff; border-radius: 50%; box-shadow: 0 0 20px 5px #00ffff; } .outer-orbit::before { content: ''; position: absolute; bottom: -6px; left: 20%; width: 8px; height: 8px; background: #ffcc00; border-radius: 50%; box-shadow: 0 0 15px 5px #ffcc00; } @keyframes spinOuter { 0% { transform: rotateX(65deg) rotateZ(0deg); } 100% { transform: rotateX(65deg) rotateZ(360deg); } } .qms-pdca-hologram:hover .pdca-ring, .qms-pdca-hologram:hover .outer-orbit { animation-play-state: paused; } .qms-pdca-hologram:hover .pdca-ring { transform: rotateX(30deg) rotateZ(0deg); transition: transform 0.5s ease; } @media (max-width: 992px) { .qms-pdca-hologram { transform: scale(0.75); margin-top: -30px; } } /* ======================================= QMS QC HUD Interface (Overview) ======================================= */ .qms-hud-card { position: relative; background: rgba(2, 11, 20, 0.8); border: 1px solid rgba(0, 191, 255, 0.2); padding: 2.5rem; border-radius: 8px; overflow: hidden; backdrop-filter: blur(10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 191, 255, 0.05); } .hud-corners span { position: absolute; width: 25px; height: 25px; border: 2px solid #00bfff; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .hud-corners .tl { top: 15px; left: 15px; border-bottom: none; border-right: none; } .hud-corners .tr { top: 15px; right: 15px; border-bottom: none; border-left: none; } .hud-corners .bl { bottom: 15px; left: 15px; border-top: none; border-right: none; } .hud-corners .br { bottom: 15px; right: 15px; border-top: none; border-left: none; } .qms-hud-card:hover .hud-corners span { width: 40px; height: 40px; border-color: #00ffff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); } .hud-scanline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(0, 255, 255, 0.6); box-shadow: 0 0 20px 8px rgba(0, 255, 255, 0.15); animation: hudScan 4s linear infinite; z-index: 5; pointer-events: none; } @keyframes hudScan { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .hud-header { display: flex; align-items: center; gap: 1rem; border-bottom: 1px dashed rgba(0, 191, 255, 0.3); padding-bottom: 1rem; margin-bottom: 2rem; color: #00ffff; font-family: 'Space Mono', monospace; font-weight: 700; letter-spacing: 2px; } .hud-header i { font-size: 1.5rem; animation: spinCrosshair 4s linear infinite; } @keyframes spinCrosshair { 100% { transform: rotate(360deg); } } .hud-body { display: flex; flex-direction: column; gap: 1.2rem; } .hud-item { display: flex; align-items: flex-start; gap: 1.5rem; background: rgba(0, 191, 255, 0.03); padding: 1.5rem; border-left: 3px solid rgba(0, 191, 255, 0.3); border-radius: 0 6px 6px 0; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; position: relative; overflow: hidden; } .hud-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent); transition: left 0.5s ease; } .hud-item:hover { background: rgba(0, 191, 255, 0.08); border-left-color: #00ffff; transform: translateX(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .hud-item:hover::before { left: 100%; } .hud-item-icon { font-family: 'Space Mono', monospace; color: #00bfff; font-weight: 800; font-size: 1.3rem; width: 60px; text-align: center; text-shadow: 0 0 10px rgba(0, 191, 255, 0.3); } .hud-item-text strong { display: block; color: #fff; font-size: 1.1rem; margin-bottom: 0.4rem; font-family: 'Space Mono', monospace; letter-spacing: 1px; } .hud-item-text span { color: #8fa6c2; font-size: 0.95rem; line-height: 1.6; } @media (max-width: 768px) { .qms-hud-card { padding: 1.5rem; } .hud-item { flex-direction: column; gap: 0.5rem; padding: 1rem; } .hud-item-icon { text-align: left; margin-bottom: 0.5rem; } } /* ======================================= QMS Holographic Projector Cards (Services) ======================================= */ .qms-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; padding: 3rem 0; } .qms-holo-card { position: relative; background: transparent; padding: 2rem; border-radius: 8px; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; min-height: 280px; } /* The Pedestal at the bottom */ .holo-pedestal { position: absolute; bottom: 0; left: 15%; right: 15%; height: 4px; background: #00ffff; box-shadow: 0 0 15px 2px #00ffff; border-radius: 10px; transition: all 0.4s ease; z-index: 2; } .holo-pedestal::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 8px; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 0 20px #fff; } /* The Holographic Light Beam shining up */ .holo-beam { position: absolute; bottom: 4px; left: 15%; right: 15%; height: 100%; background: linear-gradient(to top, rgba(0, 255, 255, 0.1) 0%, transparent 80%); clip-path: polygon(15% 100%, 85% 100%, 100% 0%, 0% 0%); opacity: 0.5; transition: all 0.4s ease; z-index: 1; } /* Giant wireframe number behind text */ .holo-number { position: absolute; top: 5%; right: 5%; font-family: 'Space Mono', monospace; font-size: 8rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(0, 191, 255, 0.15); z-index: 0; transition: all 0.4s ease; user-select: none; line-height: 1; } /* Content */ .holo-content { position: relative; z-index: 5; margin-top: auto; margin-bottom: 2rem; /* Make room for pedestal beam */ text-align: center; } .holo-content h3 { color: #fff; font-size: 1.3rem; margin-bottom: 1rem; font-family: 'Space Mono', monospace; letter-spacing: 1px; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .holo-content p { color: #8fa6c2; font-size: 0.95rem; line-height: 1.6; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); } /* Hover Effects */ .qms-holo-card:hover { transform: translateY(-10px); } .qms-holo-card:hover .holo-pedestal { left: 5%; right: 5%; box-shadow: 0 0 25px 5px #00ffff; height: 6px; } .qms-holo-card:hover .holo-beam { left: 5%; right: 5%; opacity: 0.8; clip-path: polygon(5% 100%, 95% 100%, 100% 0%, 0% 0%); background: linear-gradient(to top, rgba(0, 255, 255, 0.25) 0%, transparent 90%); } .qms-holo-card:hover .holo-number { -webkit-text-stroke: 1px rgba(0, 255, 255, 0.4); transform: translateY(-10px) scale(1.05); text-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .qms-holo-card:hover .holo-content h3 { color: #00ffff; text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); } /* HIPAA Shield Hologram */ .hipaa-shield-hologram { position: relative; width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; perspective: 1000px; } @media (min-width: 992px) { .hipaa-shield-hologram { height: 500px; } } .medical-cross-core { position: relative; width: 80px; height: 80px; z-index: 5; filter: drop-shadow(0 0 15px #00ffff); animation: float 4s ease-in-out infinite; } .cross-vert, .cross-horiz { position: absolute; background: #00ffff; border-radius: 4px; } .cross-vert { width: 24px; height: 80px; left: 50%; top: 0; transform: translateX(-50%); } .cross-horiz { width: 80px; height: 24px; top: 50%; left: 0; transform: translateY(-50%); } .shield-ring { position: absolute; width: 240px; height: 240px; border: 2px dashed #00ffff; opacity: 0.5; border-radius: 50%; animation: spinRing 15s linear infinite; } .shield-scanner { position: absolute; width: 100%; height: 2px; background: #00ffff; top: 50%; box-shadow: 0 0 15px #00ffff; animation: scan-vertical 4s ease-in-out infinite alternate; } .outer-orbit-medical { position: absolute; width: 340px; height: 340px; border: 1px solid transparent; border-radius: 50%; border-top: 1px solid #00ffff; border-bottom: 1px solid #00ffff; opacity: 0.3; animation: spinOuter 20s linear infinite reverse; } @keyframes scan-vertical { 0% { transform: translateY(-110px); } 100% { transform: translateY(110px); } } /* ======================================= HIPAA Interactive Vault (Hero) ======================================= */ .hipaa-interactive-vault { position: relative; width: 450px; height: 450px; margin: 0 0 0 auto; perspective: 1200px; display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (max-width: 991px) { .hipaa-interactive-vault { transform: scale(0.8); margin-top: -20px; margin-left: auto; margin-right: auto; } } .vault-core { position: relative; width: 100px; height: 100px; background: rgba(10, 20, 35, 0.9); border: 2px solid #00ffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 0 25px rgba(0, 255, 255, 0.4), inset 0 0 15px rgba(0, 255, 255, 0.2); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .vault-lock { font-size: 2.5rem; color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); z-index: 2; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .medical-cross { position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 2px dashed rgba(0, 255, 255, 0.4); animation: spinRing 20s linear infinite; } .phi-node { position: absolute; background: rgba(2, 11, 20, 0.85); border: 1px solid rgba(0, 255, 255, 0.2); padding: 0.7rem 1rem; border-radius: 8px; display: flex; align-items: center; gap: 0.8rem; backdrop-filter: blur(10px); color: #8fa6c2; font-family: 'Space Mono', monospace; font-size: 0.8rem; font-weight: 700; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 5; white-space: nowrap; } .phi-icon { width: 32px; height: 32px; background: rgba(0, 255, 255, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #00ffff; font-size: 1rem; transition: all 0.4s ease; } /* Initial Node Positions */ .node-1 { top: 8%; left: -5%; transform: translate(-10px, 0); animation: float 4s ease-in-out infinite; } .node-2 { top: 12%; right: -5%; transform: translate(10px, 0); animation: float 5s ease-in-out infinite 1s; } .node-3 { bottom: 12%; left: 0%; transform: translate(-10px, 0); animation: float 4.5s ease-in-out infinite 0.5s; } .node-4 { bottom: 8%; right: 0%; transform: translate(10px, 0); animation: float 5.5s ease-in-out infinite 1.5s; } .vault-shield-dome { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 255, 255, 0.12) 0%, transparent 70%); border: 2px solid rgba(0, 255, 255, 0); top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1; } .vault-scanner-ring { position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 1px dotted rgba(0, 255, 255, 0.3); top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(60deg); animation: spinOuter 15s linear infinite; z-index: 2; transition: all 0.6s ease; } .hover-hint-badge { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.3); padding: 0.4rem 1rem; border-radius: 20px; color: #00ffff; font-family: 'Space Mono', monospace; font-size: 0.75rem; display: flex; align-items: center; gap: 0.5rem; animation: float 3s ease-in-out infinite; pointer-events: none; opacity: 0.8; transition: opacity 0.3s ease; } /* Hover Interactions */ .hipaa-interactive-vault:hover .vault-core { transform: scale(1.15); box-shadow: 0 0 50px rgba(0, 255, 255, 0.8), inset 0 0 25px rgba(0, 255, 255, 0.5); background: rgba(0, 255, 255, 0.2); } .hipaa-interactive-vault:hover .vault-lock { transform: scale(1.1); color: #ffffff; text-shadow: 0 0 15px #ffffff, 0 0 30px #00ffff; } .hipaa-interactive-vault:hover .vault-shield-dome { transform: translate(-50%, -50%) scale(1); opacity: 1; border-color: rgba(0, 255, 255, 0.4); box-shadow: inset 0 0 60px rgba(0, 255, 255, 0.25); } .hipaa-interactive-vault:hover .vault-scanner-ring { border: 2px solid rgba(0, 255, 255, 0.7); box-shadow: 0 0 25px rgba(0, 255, 255, 0.3); animation-duration: 5s; background: radial-gradient(circle, rgba(0,255,255,0.05) 0%, transparent 70%); } .hipaa-interactive-vault:hover .hover-hint-badge { opacity: 0; } /* Bring nodes inside the shield and secure them */ .hipaa-interactive-vault:hover .node-1 { top: 22%; left: 18%; transform: translate(0, 0) scale(0.9); border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .hipaa-interactive-vault:hover .node-2 { top: 22%; right: 18%; transform: translate(0, 0) scale(0.9); border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .hipaa-interactive-vault:hover .node-3 { bottom: 22%; left: 22%; transform: translate(0, 0) scale(0.9); border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .hipaa-interactive-vault:hover .node-4 { bottom: 22%; right: 22%; transform: translate(0, 0) scale(0.9); border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .hipaa-interactive-vault:hover .phi-icon { background: #00ffff; color: #000000; box-shadow: 0 0 15px #00ffff; } .hipaa-interactive-vault:hover .phi-node span { color: #ffffff; } /* Small medical crosses inside the dome when secured */ .shield-particle { position: absolute; color: rgba(0, 255, 255, 0); font-size: 1rem; transition: color 0.5s ease; z-index: 6; } .hipaa-interactive-vault:hover .shield-particle { color: rgba(0, 255, 255, 0.7); text-shadow: 0 0 10px #00ffff; animation: float 3s ease-in-out infinite alternate; } .sp-1 { top: 15%; left: 50%; transform: translateX(-50%); } .sp-2 { bottom: 25%; right: 35%; } .sp-3 { top: 40%; left: 20%; } /* HIPAA Encryption Log */ .hipaa-encryption-log { margin-top: 2rem; margin-bottom: 2rem; background: rgba(10, 20, 35, 0.8); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 8px; overflow: hidden; font-family: 'Space Mono', monospace; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.05); max-width: 450px; position: relative; transition: all 0.4s ease; } .hipaa-encryption-log:hover { border-color: rgba(0, 255, 255, 0.6); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(0, 255, 255, 0.15); transform: translateY(-5px); } .hipaa-encryption-log .log-header { background: rgba(0, 255, 255, 0.1); padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(0, 255, 255, 0.2); } .log-dot { width: 10px; height: 10px; border-radius: 50%; } .log-dot.red { background: #ff3b30; } .log-dot.yellow { background: #ffcc00; } .log-dot.green { background: #34c759; box-shadow: 0 0 8px #34c759; } .log-title { color: #00ffff; font-size: 0.75rem; margin-left: auto; letter-spacing: 1.5px; font-weight: 700; } .hipaa-encryption-log .log-body { padding: 1.2rem; font-size: 0.85rem; color: #8fa6c2; position: relative; } .log-line { margin-bottom: 0.6rem; opacity: 0; animation: typeLine 0.5s ease-out forwards; } .log-line:last-child { margin-bottom: 0; } .log-line.delay-1 { animation-delay: 1.2s; } .log-line.delay-2 { animation-delay: 2.4s; } .log-line.delay-3 { animation-delay: 3.6s; } .log-status { color: #34c759; float: right; font-weight: 700; } .log-status.highlight { color: #00ffff; text-shadow: 0 0 10px #00ffff; } .log-scan-effect { position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: linear-gradient(to bottom, transparent, rgba(0, 255, 255, 0.2), transparent); animation: logScanner 3s linear infinite; pointer-events: none; } @keyframes typeLine { 0% { opacity: 0; transform: translateX(-15px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes logScanner { 0% { top: -10px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* HIPAA Hero Creative Additions (Right Side) */ .gyro-rings { position: absolute; top: 50%; left: 60%; width: 500px; height: 500px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; perspective: 1200px; } .gyro-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px dashed rgba(0, 255, 255, 0.15); border-radius: 50%; box-sizing: border-box; } .ring-x { animation: gyroSpinX 25s infinite linear; } .ring-y { border-style: dotted; border-color: rgba(0, 255, 255, 0.3); animation: gyroSpinY 30s infinite linear; } .ring-z { border: 1px solid rgba(0, 255, 255, 0.08); animation: gyroSpinZ 35s infinite linear reverse; } @keyframes gyroSpinX { 0% { transform: rotateX(0deg) rotateY(45deg); } 100% { transform: rotateX(360deg) rotateY(45deg); } } @keyframes gyroSpinY { 0% { transform: rotateX(45deg) rotateY(0deg); } 100% { transform: rotateX(45deg) rotateY(360deg); } } @keyframes gyroSpinZ { 0% { transform: rotateZ(0deg) rotateX(60deg); } 100% { transform: rotateZ(360deg) rotateX(60deg); } } .hipaa-holo-pedestal { position: absolute; bottom: -40px; left: 55%; transform: translateX(-50%); width: 250px; display: flex; flex-direction: column; align-items: center; z-index: 1; pointer-events: none; } .pedestal-base { width: 100%; height: 15px; background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.5) 0%, transparent 70%); border-radius: 50%; box-shadow: 0 0 30px rgba(0, 255, 255, 0.6); animation: pulseBase 4s infinite alternate; } .pedestal-beam { width: 200px; height: 400px; background: linear-gradient(to top, rgba(0, 255, 255, 0.15) 0%, transparent 100%); clip-path: polygon(20% 100%, 80% 100%, 100% 0%, 0% 0%); position: absolute; bottom: 5px; opacity: 0.6; animation: beamFlicker 3s infinite alternate; } @keyframes pulseBase { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.1); opacity: 1; } } @keyframes beamFlicker { 0% { opacity: 0.4; } 50% { opacity: 0.7; } 100% { opacity: 0.5; } } /* Make vault float inside the beam */ .hipaa-interactive-vault { animation: floatVault 6s ease-in-out infinite; z-index: 5; } @keyframes floatVault { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* Handle mobile layout for the floating vault */ @media (max-width: 991px) { .gyro-rings { width: 350px; height: 350px; left: 50%; } .hipaa-holo-pedestal { left: 50%; } .hipaa-interactive-vault { animation: floatVaultMobile 6s ease-in-out infinite; } } @keyframes floatVaultMobile { 0%, 100% { transform: scale(0.8) translateY(0); } 50% { transform: scale(0.8) translateY(-15px); } } /* Fix for horizontal scrollbar caused by hero elements */ .vciso-hero-new { overflow-x: hidden; } /* Scroll state: white navbar + black text/icons */ .navbar.scrolled, #navbar.scrolled { background: #ffffff !important; border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important; box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08) !important; } .navbar.scrolled .nav-links > li > a, #navbar.scrolled .nav-links > li > a, .navbar.scrolled .nav-links > li > a svg, #navbar.scrolled .nav-links > li > a svg { color: #0f172a !important; fill: #0f172a !important; stroke: #0f172a !important; } .navbar.scrolled .nav-links > li > a:hover, .navbar.scrolled .nav-links > li > a.active, #navbar.scrolled .nav-links > li > a:hover, #navbar.scrolled .nav-links > li > a.active { color: #0b5db8 !important; } .navbar.scrolled .nav-hamburger span, #navbar.scrolled .nav-hamburger span { background: #0f172a !important; } .navbar.scrolled .nav-links > li > a, #navbar.scrolled .nav-links > li > a, .navbar.scrolled .nav-links > li > a svg, #navbar.scrolled .nav-links > li > a svg, .navbar.scrolled .nav-hamburger span, #navbar.scrolled .nav-hamburger span { text-shadow: none !important; filter: none !important; box-shadow: none !important; } /* Cookie consent banner */ .cookie-consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; background: rgba(2, 6, 23, 0.95); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .cookie-consent-banner.hide { opacity: 0; transform: translateY(8px); } .cookie-consent-content { padding: 14px 16px; display: flex; gap: 14px; align-items: center; justify-content: space-between; } .cookie-consent-content p { margin: 0; color: #e2e8f0; font-size: 0.92rem; line-height: 1.45; max-width: 760px; } .cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; } .cookie-btn { border: none; border-radius: 10px; padding: 9px 14px; font-size: 0.87rem; font-weight: 700; cursor: pointer; } .cookie-btn-primary { background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff; } .cookie-btn-outline { background: transparent; color: #e2e8f0; border: 1px solid rgba(148, 163, 184, 0.35); } .cookie-customise-link { color: #7dd3fc; text-decoration: none; font-weight: 700; font-size: 0.92rem; } .cookie-customise-link:hover { text-decoration: underline; } @media (max-width: 768px) { .cookie-consent-content { flex-direction: column; align-items: flex-start; } .cookie-consent-actions { width: 100%; } .cookie-btn { flex: 1; text-align: center; } } /* Final mobile override: service/consulting landing pages hero + footer */ @media (max-width: 768px) { body:not(.home-page) .hero, body:not(.home-page) [class*="-hero"] { min-height: auto !important; padding: 96px 0 56px !important; } body:not(.home-page) .hero .container, body:not(.home-page) [class*="-hero"] .container { padding-left: 16px !important; padding-right: 16px !important; } body:not(.home-page) .hero-shell, body:not(.home-page) .hero-grid, body:not(.home-page) [class*="-hero"] .hero-shell, body:not(.home-page) [class*="-hero"] .hero-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; align-items: start !important; } body:not(.home-page) .hero-content, body:not(.home-page) [class*="-hero"] .hero-content { width: 100% !important; max-width: 100% !important; padding: 18px !important; border-radius: 16px !important; } body:not(.home-page) .hero-title, body:not(.home-page) [class*="-hero"] .hero-title { font-size: clamp(1.55rem, 6.2vw, 2.05rem) !important; line-height: 1.2 !important; text-align: left !important; } body:not(.home-page) .hero-sub, body:not(.home-page) [class*="-hero"] .hero-sub { font-size: 0.95rem !important; line-height: 1.6 !important; text-align: left !important; } body:not(.home-page) .hero-actions, body:not(.home-page) [class*="-hero"] .hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } body:not(.home-page) .hero-actions .btn, body:not(.home-page) [class*="-hero"] .hero-actions .btn { width: 100% !important; justify-content: center !important; } body:not(.home-page) .hero-stats, body:not(.home-page) [class*="-hero"] .hero-stats, body:not(.home-page) .hero-proof-strip, body:not(.home-page) [class*="-hero"] .hero-proof-strip { grid-template-columns: 1fr !important; display: grid !important; gap: 10px !important; } body:not(.home-page) .hero-visual, body:not(.home-page) .hero-panel, body:not(.home-page) [class*="-hero"] .hero-visual, body:not(.home-page) [class*="-hero"] .hero-panel { width: 100% !important; max-width: 100% !important; } .footer { padding: 42px 0 16px !important; } .footer-top { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; } .footer-brand, .footer-col { width: 100% !important; max-width: 100% !important; } .footer-col h4 { margin-bottom: 10px !important; } .footer-bottom { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; text-align: left !important; } .footer-links { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: flex-start !important; } } /* Mobile fix: Network Security hero readability and spacing */ @media (max-width: 768px) { .networksecurity-page .hero, .network-hero { padding-top: 88px !important; padding-bottom: 36px !important; min-height: auto !important; } .networksecurity-page .hero-content, .network-hero .hero-content { padding: 14px !important; border-radius: 14px !important; background: rgba(8, 18, 32, 0.68) !important; backdrop-filter: blur(2px); } .networksecurity-page .hero-title, .network-hero .hero-title { font-size: clamp(1.85rem, 10vw, 2.35rem) !important; line-height: 1.1 !important; margin-bottom: 10px !important; } .networksecurity-page .hero-sub, .network-hero .hero-sub { font-size: 0.98rem !important; line-height: 1.6 !important; margin-bottom: 12px !important; } .networksecurity-page .hero-proof-strip, .network-hero .hero-proof-strip { gap: 8px !important; margin-bottom: 12px !important; } .networksecurity-page .hero-proof-item, .network-hero .hero-proof-item { font-size: 0.82rem !important; padding: 7px 10px !important; } .networksecurity-page .hero-actions, .network-hero .hero-actions { gap: 8px !important; margin-top: 6px !important; } .networksecurity-page .hero-actions .btn, .network-hero .hero-actions .btn { min-height: 44px !important; font-size: 0.92rem !important; } .networksecurity-page .hero-stats, .network-hero .hero-stats { gap: 8px !important; margin-top: 10px !important; } } /* Final mobile responsiveness pass: OT Security landing page */ @media (max-width: 768px) { .ot-page { overflow-x: hidden !important; } .ot-page .container { padding-left: 14px !important; padding-right: 14px !important; } .ot-page .ot-hero, .ot-page .hero.ot-hero { min-height: auto !important; padding-top: 88px !important; padding-bottom: 38px !important; } .ot-page .ot-hero .hero-shell, .ot-page .ot-hero .hero-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; align-items: start !important; } .ot-page .ot-hero .hero-content { width: 100% !important; max-width: 100% !important; padding: 14px !important; border-radius: 14px !important; } .ot-page .ot-title { font-size: clamp(1.75rem, 9.5vw, 2.2rem) !important; line-height: 1.12 !important; margin-bottom: 10px !important; } .ot-page .ot-sub { font-size: 0.96rem !important; line-height: 1.6 !important; margin-bottom: 12px !important; } .ot-page .ot-proof-strip, .ot-page .ot-actions, .ot-page .ot-hero-stats, .ot-page .ot-stats { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .ot-page .btn-ot-primary, .ot-page .btn-ot-outline { width: 100% !important; min-height: 44px !important; text-align: center !important; justify-content: center !important; } .ot-page .ot-console-container { width: 100% !important; max-width: 100% !important; padding: 10px !important; border-radius: 12px !important; overflow: hidden !important; } .ot-page .ot-console-dashboard, .ot-page .ot-services-console, .ot-page .ot-services-deck, .ot-page .ot-ind-dashboard { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; } .ot-page .ot-services-sidebar { width: 100% !important; } .ot-page .ot-services-nav-item { min-height: 44px !important; } .ot-page .ot-threat-grid, .ot-page .ot-overview-grid, .ot-page .ot-pillars-grid, .ot-page .ot-tech-grid, .ot-page .ot-why-grid, .ot-page .ot-why-bento, .ot-page .ot-ind-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .ot-page .ot-threat-card, .ot-page .ot-pillar-card, .ot-page .ot-overview-feat, .ot-page .ot-why-item { padding: 12px !important; } .ot-page .ot-pill-row { gap: 8px !important; } .ot-page .ot-pill { font-size: 0.8rem !important; padding: 6px 10px !important; } } /* DevOps hero right panel refinement + mobile responsiveness */ .devops-mini-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #e2e8f0; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.65); } @media (max-width: 768px) { .devops-hero .hero-visual { margin-top: 6px !important; } .devops-hero .hero-panel { max-width: 100% !important; gap: 10px !important; } .devops-hero .hero-panel-card { padding: 12px !important; border-radius: 14px !important; transform: none !important; } .devops-hero .pipeline-connector { display: none !important; } .devops-hero .hero-panel-card h4 { font-size: 0.98rem !important; } .devops-hero .hero-panel-card p { font-size: 0.8rem !important; line-height: 1.45 !important; } .devops-outcome-card > div { grid-template-columns: 1fr !important; gap: 6px !important; } .devops-stack-badges { padding-top: 10px !important; padding-bottom: 10px !important; } .devops-mini-badge { font-size: 0.72rem; padding: 5px 9px; } } /* Ensure DevOps hero is fully visible in viewport (mobile + desktop) */ .devops-hero { min-height: auto !important; height: auto !important; overflow: visible !important; } .devops-hero .hero-shell { min-height: auto !important; } @media (max-width: 768px) { .devops-hero { padding-top: 92px !important; /* account for fixed navbar */ padding-bottom: 36px !important; } .devops-hero .container { padding-left: 14px !important; padding-right: 14px !important; } .devops-hero .hero-content { padding: 14px !important; } .devops-hero .hero-title { font-size: clamp(1.65rem, 8.6vw, 2.15rem) !important; line-height: 1.14 !important; } .devops-hero .hero-sub { font-size: 0.94rem !important; line-height: 1.58 !important; } .devops-hero .hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .devops-hero .hero-actions .btn { width: 100% !important; justify-content: center !important; } } /* Home Industries section: QMS-like premium hover effect */ .home-page .cyber-industries-section .industry-card { position: relative; overflow: hidden; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease; } .home-page .cyber-industries-section .industry-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at 18% 18%, rgba(0, 163, 217, 0.28), transparent 48%), radial-gradient(circle at 85% 82%, rgba(45, 155, 78, 0.22), transparent 52%); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 0; } .home-page .cyber-industries-section .industry-card > * { position: relative; z-index: 1; } .home-page .cyber-industries-section .industry-card:hover { transform: translateY(-10px) scale(1.01); border-color: rgba(0, 163, 217, 0.55) !important; box-shadow: 0 22px 42px rgba(2, 6, 23, 0.42), 0 0 24px rgba(0, 163, 217, 0.22); } .home-page .cyber-industries-section .industry-card:hover::after { opacity: 1; } .home-page .cyber-industries-section .industry-card .ind-content-box h3, .home-page .cyber-industries-section .industry-card .svc-content h3 { transition: color 0.35s ease, transform 0.35s ease; } .home-page .cyber-industries-section .industry-card:hover .ind-content-box h3, .home-page .cyber-industries-section .industry-card:hover .svc-content h3 { color: #ffffff; transform: translateY(-2px); } /* Full premium hover effect for home Industries cards */ .home-page .cyber-industries-section .industry-card::before { content: ""; position: absolute; top: -120%; left: -40%; width: 60%; height: 300%; transform: rotate(22deg); background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0) 100% ); opacity: 0; pointer-events: none; z-index: 2; } .home-page .cyber-industries-section .industry-card:hover::before { opacity: 1; animation: industryShineSweep 0.9s ease; } .home-page .cyber-industries-section .industry-card .svc-bg, .home-page .cyber-industries-section .industry-card .ind-bg-image { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s ease; } .home-page .cyber-industries-section .industry-card:hover .svc-bg, .home-page .cyber-industries-section .industry-card:hover .ind-bg-image { transform: scale(1.08); filter: saturate(1.12) contrast(1.06); } .home-page .cyber-industries-section .industry-card .industry-icon, .home-page .cyber-industries-section .industry-card .ind-icon-wrap { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, background 0.45s ease; } .home-page .cyber-industries-section .industry-card:hover .industry-icon, .home-page .cyber-industries-section .industry-card:hover .ind-icon-wrap { transform: translateY(-4px) scale(1.08); box-shadow: 0 10px 24px rgba(0, 163, 217, 0.35); } .home-page .cyber-industries-section .industry-card .svc-link, .home-page .cyber-industries-section .industry-card .ind-terminal-label { transition: transform 0.35s ease, color 0.35s ease, opacity 0.35s ease; } .home-page .cyber-industries-section .industry-card:hover .svc-link, .home-page .cyber-industries-section .industry-card:hover .ind-terminal-label { transform: translateX(6px); color: #7dd3fc; } @keyframes industryShineSweep { 0% { left: -45%; opacity: 0; } 15% { opacity: 1; } 100% { left: 125%; opacity: 0; } } @media (max-width: 768px) { .home-page .cyber-industries-section .industry-card:hover { transform: translateY(-4px) scale(1.005); } } /* Exact QMS-style holographic hover mapped to home industry cards */ .home-page .cyber-industries-section .industry-card { position: relative; overflow: hidden; background: transparent; } .home-page .cyber-industries-section .industry-glass-card { position: relative; overflow: hidden; background: transparent; } /* Holographic pedestal */ .home-page .cyber-industries-section .industry-card .holo-pedestal-home { position: absolute; bottom: 0; left: 15%; right: 15%; height: 4px; background: #00ffff; box-shadow: 0 0 15px 2px #00ffff; border-radius: 10px; transition: all 0.4s ease; z-index: 2; } .home-page .cyber-industries-section .industry-glass-card .holo-pedestal-home { position: absolute; bottom: 0; left: 15%; right: 15%; height: 4px; background: #00ffff; box-shadow: 0 0 15px 2px #00ffff; border-radius: 10px; transition: all 0.4s ease; z-index: 2; } .home-page .cyber-industries-section .industry-card .holo-pedestal-home::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 8px; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 0 20px #fff; } .home-page .cyber-industries-section .industry-glass-card .holo-pedestal-home::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 8px; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 0 20px #fff; } /* Beam */ .home-page .cyber-industries-section .industry-card .holo-beam-home { position: absolute; bottom: 4px; left: 15%; right: 15%; height: 100%; background: linear-gradient(to top, rgba(0, 255, 255, 0.1) 0%, transparent 80%); clip-path: polygon(15% 100%, 85% 100%, 100% 0%, 0% 0%); opacity: 0.5; transition: all 0.4s ease; z-index: 1; pointer-events: none; } .home-page .cyber-industries-section .industry-glass-card .holo-beam-home { position: absolute; bottom: 4px; left: 15%; right: 15%; height: 100%; background: linear-gradient(to top, rgba(0, 255, 255, 0.1) 0%, transparent 80%); clip-path: polygon(15% 100%, 85% 100%, 100% 0%, 0% 0%); opacity: 0.5; transition: all 0.4s ease; z-index: 1; pointer-events: none; } /* Use existing number as hologram number */ .home-page .cyber-industries-section .industry-card .ind-hollow-number { color: transparent !important; -webkit-text-stroke: 1px rgba(0, 191, 255, 0.15); transition: all 0.4s ease; z-index: 0; } .home-page .cyber-industries-section .industry-card .ind-content-box h3 { font-family: 'Space Mono', monospace; letter-spacing: 1px; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } .home-page .cyber-industries-section .industry-card:hover { transform: translateY(-10px); } .home-page .cyber-industries-section .industry-card:hover .holo-pedestal-home { left: 5%; right: 5%; box-shadow: 0 0 25px 5px #00ffff; height: 6px; } .home-page .cyber-industries-section .industry-glass-card:hover .holo-pedestal-home { left: 5%; right: 5%; box-shadow: 0 0 25px 5px #00ffff; height: 6px; } .home-page .cyber-industries-section .industry-card:hover .holo-beam-home { left: 5%; right: 5%; opacity: 0.8; clip-path: polygon(5% 100%, 95% 100%, 100% 0%, 0% 0%); background: linear-gradient(to top, rgba(0, 255, 255, 0.25) 0%, transparent 90%); } .home-page .cyber-industries-section .industry-glass-card:hover .holo-beam-home { left: 5%; right: 5%; opacity: 0.8; clip-path: polygon(5% 100%, 95% 100%, 100% 0%, 0% 0%); background: linear-gradient(to top, rgba(0, 255, 255, 0.25) 0%, transparent 90%); } .home-page .cyber-industries-section .industry-card:hover .ind-hollow-number { -webkit-text-stroke: 1px rgba(0, 255, 255, 0.4); transform: translateY(-10px) scale(1.05); text-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .home-page .cyber-industries-section .industry-glass-card:hover .ind-hollow-number { -webkit-text-stroke: 1px rgba(0, 255, 255, 0.4); transform: translateY(-10px) scale(1.05); text-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .home-page .cyber-industries-section .industry-card:hover .ind-content-box h3 { color: #00ffff !important; text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); } .home-page .cyber-industries-section .industry-glass-card:hover .ind-content-box h3 { color: #00ffff !important; text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); } /* Home consulting CTA label: FREE STRATEGY CALL */ .consulting-cta .section-label { color: #ffd84d !important; } /* Contact section: icon inside feature-text heading */ .feature-title-icon { margin-right: 0.45rem; font-size: 0.86em; color: #22c55e; vertical-align: middle; } /* Keep inline heading icon visible even when generic `.feature-tag i` mobile rules apply */ .feature-text .feature-title-icon { display: inline-block !important; background: none !important; border: 0 !important; padding: 0 !important; margin-right: 0.45rem !important; font-size: 0.86em !important; line-height: 1 !important; color: transparent !important; vertical-align: -0.02em !important; width: 0.95em !important; height: 0.95em !important; position: relative !important; } /* Robust check icon (works even if Font Awesome glyph doesn't load) */ .feature-text .feature-title-icon::before { content: "" !important; position: absolute !important; left: 0.18em !important; top: 0.18em !important; width: 0.5em !important; height: 0.28em !important; border-left: 2px solid #22c55e !important; border-bottom: 2px solid #22c55e !important; transform: rotate(-45deg) !important; } /* Mobile/Desktop-mode-on-phone fix: prevent fixed backgrounds from misalignment and large gaps */ @media (max-width: 1200px) { .home-page .cyber-industries-section, .sw-page .cyber-industries-section, .cybersecurity-page .cyber-industries-section, .about-page .timeline-section { background-attachment: scroll !important; background-position: center center !important; background-size: cover !important; } } /* Next Hub Max / large-tablet navbar tweak: shrink Contact Us CTA */ @media (min-width: 1025px) and (max-width: 1368px) { .nav-cta .btn.btn-primary { padding: 0.55rem 1rem !important; font-size: 0.86rem !important; min-height: 40px !important; border-radius: 10px !important; white-space: nowrap !important; } } /* Surface Pro 7 (portrait/tablet widths): remove excessive gap inside CERT insight card */ @media (min-width: 800px) and (max-width: 1024px) { .home-page .cert-insight-card { justify-content: flex-start !important; gap: 0.45rem !important; padding: 0.95rem 1.1rem !important; } .home-page .cert-update-list { margin-top: 0.45rem !important; max-height: 170px !important; } .home-page .cert-update-list li { padding: 0.32rem 0 !important; line-height: 1.35 !important; } } /* Final fix: stable scroll-top arrow hover animation */ .scroll-top { display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } .scroll-top svg { width: 20px !important; height: 20px !important; display: block !important; transform: translateY(0) scale(1) !important; transform-origin: 50% 50% !important; transition: transform 0.22s ease !important; will-change: transform; backface-visibility: hidden; } .scroll-top:hover svg { transform: translateY(-1px) scale(1.06) !important; } /* Home hero premium interactive first-impression background */ .home-page .hero .hero-media, .home-page .hero .hero-bg, .home-page .hero .hero-grid, .home-page .hero .hero-glow { display: block !important; } .home-page .hero { --hx: 50%; --hy: 45%; background: #050b16 !important; } .home-page .hero .hero-media { z-index: 0; } .home-page .hero-interactive-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(1200px 700px at var(--hx) var(--hy), rgba(59, 130, 246, 0.2), transparent 58%), linear-gradient(180deg, rgba(5, 11, 22, 0.65), rgba(5, 11, 22, 0.92)); } .home-page .hero-aurora { position: absolute; border-radius: 999px; filter: blur(56px); opacity: 0.55; pointer-events: none; mix-blend-mode: screen; } .home-page .hero-aurora.orb-a { width: 44vw; height: 44vw; min-width: 280px; min-height: 280px; left: -8%; top: 4%; background: radial-gradient(circle, rgba(0, 163, 217, 0.65), rgba(0, 163, 217, 0.05) 62%, transparent 72%); animation: heroFloatA 14s ease-in-out infinite; } .home-page .hero-aurora.orb-b { width: 38vw; height: 38vw; min-width: 240px; min-height: 240px; right: -8%; top: 18%; background: radial-gradient(circle, rgba(45, 155, 78, 0.62), rgba(45, 155, 78, 0.05) 64%, transparent 74%); animation: heroFloatB 17s ease-in-out infinite; } .home-page .hero-aurora.orb-c { width: 34vw; height: 34vw; min-width: 220px; min-height: 220px; left: 30%; bottom: -12%; background: radial-gradient(circle, rgba(56, 189, 248, 0.55), rgba(56, 189, 248, 0.04) 66%, transparent 76%); animation: heroFloatC 18s ease-in-out infinite; } .home-page .hero-spotlight { position: absolute; width: 36rem; height: 36rem; left: calc(var(--hx) - 18rem); top: calc(var(--hy) - 18rem); border-radius: 50%; background: radial-gradient(circle, rgba(125, 211, 252, 0.22), rgba(125, 211, 252, 0.04) 46%, transparent 70%); filter: blur(10px); pointer-events: none; transition: left 120ms linear, top 120ms linear; } .home-page .hero .hero-grid { opacity: 0.32; z-index: 1; } .home-page .hero .hero-glow { opacity: 0.55; z-index: 1; } .home-page .hero .hero-bg { z-index: 1; background: linear-gradient(180deg, rgba(4, 10, 20, 0.28), rgba(4, 10, 20, 0.62)) !important; } @keyframes heroFloatA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%, 4%, 0) scale(1.08); } } @keyframes heroFloatB { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-8%, -3%, 0) scale(1.06); } } @keyframes heroFloatC { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%, -6%, 0) scale(1.1); } } @media (max-width: 900px) { .home-page .hero .hero-grid, .home-page .hero .hero-glow { opacity: 0.18; } .home-page .hero-aurora { filter: blur(42px); opacity: 0.48; } .home-page .hero-spotlight { width: 24rem; height: 24rem; left: calc(var(--hx) - 12rem); top: calc(var(--hy) - 12rem); } } /* Home hero: remove unwanted white pseudo dots */ .home-page .hero .hero-content::before, .home-page .hero .hero-panel-card::before, .home-page .hero .hero-badge::before { content: none !important; display: none !important; } /* CERT-In insight: keep date on right side of label */ .cert-insight-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .cert-insight-meta #latestDate { margin: 0 !important; white-space: nowrap; text-align: right; } @media (max-width: 640px) { .cert-insight-meta { align-items: flex-start; gap: 0.5rem; } .cert-insight-meta #latestDate { font-size: 0.88rem; } }