:root {
scroll-behavior: auto; /* avoid default smooth interfering with snap */
}
.projects-showcase,
.solution-section#about-projects {
scroll-snap-type: y mandatory;
}
.project-block {
scroll-snap-align: start;
scroll-margin-top: var(--header-height) !important;
min-height: calc(100vh - var(--header-height));
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding-top: 0;
}
/* Headings: keep hero white; do not override global site headings */
.image-hero .hero-title { color: #ffffff !important; }
/* Customers spacing/alignment fixed for carousel */
.customers { padding: 4rem 0; }
.customers .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.customers .section-header { text-align: center; margin-bottom: 2rem !important; }
.customers .customers-carousel { margin-top: 0 !important; }
.customers .customers-carousel { position: relative; overflow: hidden; }
.customers .customers-track { display: flex; align-items: center; gap: 2rem; padding: 0; will-change: transform; }
.customers .customer-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.customers .customer-item img { display: block; height: 60px; width: auto; object-fit: contain; }
@media (max-width: 1024px){
.customers .customers-track { gap: 1.75rem; }
}
@media (max-width: 768px){ .customers .customers-track { gap: 1.25rem; } .customers .customer-item img { height: 50px; } }
/* Projects section - clean implementation */
.projects-showcase .section-header { text-align: center !important; margin-bottom: 2rem !important; }
.projects-showcase .section-title { color: #1f2937 !important; }
.projects-showcase .section-subtitle { color: #6b7280 !important; font-style: normal !important; }
.projects-showcase .projects-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.25rem !important; }
@media (max-width: 1024px){ .projects-showcase .projects-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px){ .projects-showcase .projects-grid { grid-template-columns: 1fr !important; } }
.projects-showcase .project-card { background:#fff !important; border:1px solid #e5e7eb !important; border-radius:8px !important; box-shadow:0 2px 6px rgba(0,0,0,.05) !important; overflow:hidden !important; }
.projects-showcase .project-image img { display:block !important; width:100% !important; height:auto !important; object-fit:cover !important; }
/* Classic restore: core homepage sections */
.about-industry, .what-we-do, .projects-showcase, .our-mission { padding: 4rem 0; }
.about-industry .section-header,
.what-we-do .section-header,
.projects-showcase .section-header,
.our-mission .section-header { text-align: center; margin-bottom: 2rem; }
.about-industry .section-title,
.what-we-do .section-title,
.projects-showcase .section-title,
.our-mission .section-title { color: #1f2937 !important; }
.about-industry .section-subtitle,
.what-we-do .section-subtitle,
.projects-showcase .section-subtitle,
.our-mission .section-subtitle { color: #6b7280 !important; font-style: normal !important; }
/* Classic layout normalization */
.section-header .section-title { color: #1f2937 !important; }
.section-header .section-subtitle { color: #6b7280 !important; font-style: normal !important; }
.hero-title { color: #1f2937 !important; }
.about-industry .section-title { color: #1f2937 !important; }
/* Restore About Our Industry styling to original look */
.about-industry { padding: 4rem 0; background: transparent; }
.about-industry .section-header { text-align: center; margin-bottom: 2rem; }
.about-industry .section-title { color: #1f2937 !important; }
.about-industry .industry-content { max-width: 800px; margin: 0 auto; }
.about-industry .industry-content p { color: var(--text-secondary); line-height: 1.7; }
/* Normalize home heading colors to theme */
.hero-title { color: var(--text-primary); }
.section-header .section-title { color: var(--text-primary); }
.section-header .section-subtitle { color: var(--text-secondary); }
/* Ensure project tiles render correctly */
.projects-showcase .projects-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1024px) { .projects-showcase .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .projects-showcase .projects-grid { grid-template-columns: 1fr; } }
.projects-showcase .project-card { background: #ffffff; border-radius: 8px; overflow: hidden; }
.projects-showcase .project-image img { display: block; width: 100%; height: auto; object-fit: cover; }
/* Restore Projects section visibility and layout */
.projects-showcase { padding: 4rem 0; }
.projects-showcase .section-header { margin-bottom: 2rem; }
.projects-showcase .projects-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
@media (max-width: 1024px) {
.projects-showcase .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.projects-showcase .projects-grid { grid-template-columns: 1fr; }
}
.projects-showcase .project-image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* Customers carousel minimal styles (scoped) */
.customers .customers-carousel { position: relative; overflow: hidden; }
.customers .customers-track { display: flex; align-items: center; gap: 2rem; will-change: transform; flex-wrap: nowrap; width: max-content; white-space: nowrap; backface-visibility: hidden; transform: translate3d(0,0,0); }
.customers .customers-track img { display: block; height: 60px; width: auto; object-fit: contain; }
@media (max-width: 768px) { .customers .customers-track img { height: 50px; } }
/* Home page: Partners carousel specific rules (scoped to .partners section only) */
.partners .partners-carousel { position: relative; overflow: hidden; }
.partners .partners-track { display: flex; align-items: center; gap: 2rem; will-change: transform; }
.partners .partners-track img {
display: block;
height: 60px;
max-height: 60px;
width: auto;
object-fit: contain;
filter: none !important;
opacity: 1 !important;
}
@media (max-width: 768px) {
.partners .partners-track { gap: 1.25rem; }
.partners .partners-track img { height: 50px; max-height: 50px; }
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
}
/* Fix navbar overlap with content - COMPREHENSIVE SOLUTION */
/* 1. Set consistent navbar height and ensure it's stable */
.header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
height: 80px !important;
min-height: 80px;
max-height: 80px;
background: #ffffff; /* solid to match logo blend and avoid tint */
backdrop-filter: none;
transition: all 0.3s ease;
border-bottom: none;
box-sizing: border-box;
}
/* 2. Add scroll-padding-top to html for all anchor links */
html {
scroll-padding-top: 100px; /* 80px navbar + 20px buffer */
}
/* 3. Specific scroll-margin-top for all sections with IDs */
section[id] {
scroll-margin-top: 120px;
}
/* Solutions page specific sections - ensure proper alignment */
#it, #surveillance, #communication, #ai-automation, #cybersecurity, #contact-centers {
scroll-margin-top: 80px;
scroll-snap-align: start;
}
/* Ensure solution sections have proper spacing when scrolled to */
.solution-section {
position: relative;
}
.solution-section .section-header {
margin-top: 2rem;
}
/* 4. Specific adjustments for different section types */
.hero-section,
.solution-section,
.about-section,
.partners-section {
scroll-margin-top: 100px;
}
/* 5. Mobile adjustments - navbar might be different height */
@media (max-width: 768px) {
.header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
height: 70px !important;
min-height: 70px;
max-height: 70px;
}
html {
scroll-padding-top: 90px; /* 70px navbar + 20px buffer */
}
/* Solutions page mobile adjustments */
#it, #surveillance, #communication, #ai-automation, #cybersecurity, #contact-centers {
scroll-margin-top: 70px;
}
.solution-section .section-header {
margin-top: 1rem;
}
section[id],
.hero-section,
.solution-section,
.about-section,
.partners-section {
scroll-margin-top: 90px;
}
}
/* 6. Special case for hero arrow - should go to exact top */
#about-industry {
scroll-margin-top: 0 !important;
scroll-snap-align: start;
}
/* 7. Ensure navbar doesn't change height on scroll */
.header.scrolled {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
height: 80px !important;
min-height: 80px;
max-height: 80px;
background: #ffffff;
box-shadow: none;
}
@media (max-width: 768px) {
.header.scrolled {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
height: 70px !important;
min-height: 70px;
max-height: 70px;
}
}
/* Ensure site logo has no underline or nav underline effect */
.nav-logo,
a.nav-logo,
.nav-logo .logo-text {
text-decoration: none !important;
border: none !important;
}
.nav-logo::before,
.nav-logo::after,
a.nav-logo::before,
a.nav-logo::after {
content: none !important;
display: none !important;
}
/* If nav links use underline via ::after, exclude the logo */
.nav-link.nav-logo::after,
a.nav-logo.nav-link::after {
content: none !important;
}
/* Logo styling - remove underlines completely */
.nav-logo:hover,
.nav-logo:focus,
.nav-logo:active {
text-decoration: none !important;
}
.nav-logo::after {
content: none !important;
}
.nav-logo:hover::after,
.nav-logo:focus::after,
.nav-logo:active::after {
content: none !important;
}
/* Ensure logo text span also has no underlines */
.nav-logo .logo-text {
text-decoration: none !important;
}
.nav-logo .logo-text:hover,
.nav-logo .logo-text:focus,
.nav-logo .logo-text:active {
text-decoration: none !important;
}
/* Specific rules for logo span elements */
.nav-logo span {
text-decoration: none !important;
border: none !important;
}
.nav-logo span:hover,
.nav-logo span:focus,
.nav-logo span:active {
text-decoration: none !important;
border: none !important;
}
.nav-logo span::after,
.nav-logo span::before {
display: none !important;
content: none !important;
}
.nav-logo span:hover::after,
.nav-logo span:hover::before,
.nav-logo span:focus::after,
.nav-logo span:focus::before,
.nav-logo span:active::after,
.nav-logo span:active::before {
display: none !important;
content: none !important;
}
/* Ensure logo link is completely protected from nav-link styling */
a.nav-logo {
text-decoration: none !important;
border: none !important;
border-bottom: none !important;
}
a.nav-logo:hover,
a.nav-logo:focus,
a.nav-logo:active {
text-decoration: none !important;
border: none !important;
border-bottom: none !important;
}
/* Revert: remove image-based navbar logo helpers */
/* Navbar brand layout with image logo left of text */
header .nav .nav-container a.nav-logo {
display: flex;
flex-direction: row !important; /* ensure logo sits left of text */
align-items: center;
gap: 10px; /* add a bit more space between logo and brand */
white-space: nowrap; /* keep brand on one line */
}
/* Ensure the wrapper with class nav-logo (div) also stays horizontal */
header .nav .nav-container > .nav-logo {
display: flex;
flex-direction: row !important;
align-items: center;
}
/* Site logo sizing and blending to remove black background */
.site-logo {
height: auto;
max-height: 36px; /* slightly smaller to align with brand text */
width: auto;
max-width: 160px;
display: block;
object-fit: contain;
background: transparent !important;
mix-blend-mode: normal; /* ensure logo remains visible */
border: 0;
flex: 0 0 auto;
}
/* Use screen blend so black becomes transparent against light navbar */
.site-logo.blend { mix-blend-mode: screen; } /* visually removes black background on light nav */
@media (max-width: 768px) {
.site-logo {
height: auto;
max-height: 36px;
max-width: 120px;
}
/* Hard cap the logo size on mobile with high specificity */
header .nav .nav-container a.nav-logo img.site-logo {
display: none !important; /* Hide logo on mobile as requested */
}
/* Ensure hamburger is visible and above menu */
.nav-toggle { display: flex !important; z-index: 1002 !important; }
/* Correct mobile menu position/height and make it scrollable */
.nav-menu {
top: 70px !important;
height: calc(100vh - 70px) !important;
background: #ffffff !important;
overflow-y: auto !important;
z-index: 1001 !important;
}
}
/* Apply the same safety rules up to tablet widths */
@media (max-width: 992px) {
/* Hard kill switch: hide ANY image inside brand on mobile/tablet */
header .nav .nav-container .nav-logo img { display: none !important; max-height: 0 !important; width: 0 !important; }
.nav-toggle { display: flex !important; z-index: 1002 !important; }
.nav-menu {
top: 70px !important;
height: calc(100vh - 70px) !important;
background: #ffffff !important;
overflow-y: auto !important;
z-index: 1001 !important;
}
}
/* Desktop explicit cap with high specificity */
@media (min-width: 769px) {
header .nav .nav-container a.nav-logo img.site-logo {
height: auto !important;
width: auto !important;
max-height: 36px !important; /* align with brand name height */
max-width: 120px !important;
flex: 0 0 auto !important;
}
/* Ensure logo is visible on tablet widths where a broader hide rule existed */
header .nav .nav-container .nav-logo img {
display: block !important;
height: auto !important;
width: auto !important;
max-height: 36px !important;
max-width: 120px !important;
}
}
/* Keep brand text stacked neatly and vertically centered */
header .nav .nav-container .text-wrap {
display: flex;
flex-direction: column;
line-height: 1.1;
align-items: flex-start;
justify-content: center; /* center brand text vertically next to logo */
}
/* Keep brand on one line by hiding tagline in navbar */
.nav-logo .company-tagline { display: none; }
/* Ensure the nav container vertically centers contents */
.nav-container { align-items: center; }
/* NUCLEAR OPTION - Remove ALL underlines from logo */
.nav-logo,
.nav-logo *,
.nav-logo a,
.nav-logo a:link,
.nav-logo a:visited,
.nav-logo a:hover,
.nav-logo a:active,
.nav-logo a:focus,
.nav-logo span,
.nav-logo .logo-text,
a.nav-logo,
a.nav-logo:link,
a.nav-logo:visited,
a.nav-logo:hover,
a.nav-logo:active,
a.nav-logo:focus,
a.nav-logo span,
a.nav-logo .logo-text {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-style: none !important;
text-decoration-color: transparent !important;
border-bottom: none !important;
border: none !important;
outline: none !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
}
/* Remove ALL pseudo-elements from logo */
.nav-logo::before,
.nav-logo::after,
.nav-logo *::before,
.nav-logo *::after,
a.nav-logo::before,
a.nav-logo::after,
a.nav-logo *::before,
a.nav-logo *::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* EXTREME SPECIFICITY - Target exact HTML structure */
header .nav .nav-container .nav-logo a[href="index.html"],
header .nav .nav-container .nav-logo a[href="index.html"]:link,
header .nav .nav-container .nav-logo a[href="index.html"]:visited,
header .nav .nav-container .nav-logo a[href="index.html"]:hover,
header .nav .nav-container .nav-logo a[href="index.html"]:active,
header .nav .nav-container .nav-logo a[href="index.html"]:focus {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-style: none !important;
text-decoration-color: transparent !important;
border-bottom: none !important;
border: none !important;
outline: none !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
}
/* Target the logo text span specifically */
header .nav .nav-container .nav-logo a[href="index.html"] span.logo-text,
header .nav .nav-container .nav-logo a[href="index.html"] span.logo-text:hover,
header .nav .nav-container .nav-logo a[href="index.html"] span.logo-text:focus,
header .nav .nav-container .nav-logo a[href="index.html"] span.logo-text:active {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-style: none !important;
text-decoration-color: transparent !important;
border-bottom: none !important;
border: none !important;
outline: none !important;
}
/* FINAL NUCLEAR OPTION - Override ANY possible external CSS */
.nav-logo a,
.nav-logo a:link,
.nav-logo a:visited,
.nav-logo a:hover,
.nav-logo a:active,
.nav-logo a:focus {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-style: none !important;
text-decoration-color: transparent !important;
border-bottom: none !important;
border: none !important;
outline: none !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
position: relative !important;
}
.nav-logo a::before,
.nav-logo a::after,
.nav-logo a span::before,
.nav-logo a span::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
/* Logo styling - completely remove underlines */
.nav-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none !important;
}
.nav-logo:hover,
.nav-logo:focus,
.nav-logo:active {
text-decoration: none !important;
}
/* Disable ::after underline effect for logo */
.nav-logo::after {
display: none !important;
content: none !important;
}
/* Ensure logo is completely isolated from nav-link styling */
a.nav-logo,
a.nav-logo:link,
a.nav-logo:visited,
a.nav-logo:hover,
a.nav-logo:active,
a.nav-logo:focus {
text-decoration: none !important;
border-bottom: none !important;
border: none !important;
outline: none !important;
background: none !important;
background-image: none !important;
}
a.nav-logo::before,
a.nav-logo::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
}
/* Protect logo text span from any inherited styling */
a.nav-logo .logo-text,
a.nav-logo .logo-text:hover,
a.nav-logo .logo-text:focus,
a.nav-logo .logo-text:active {
text-decoration: none !important;
border-bottom: none !important;
border: none !important;
outline: none !important;
}
/* Ultra-specific logo override to beat any browser defaults */
header .nav .nav-container .nav-logo a,
header .nav .nav-container .nav-logo a:link,
header .nav .nav-container .nav-logo a:visited,
header .nav .nav-container .nav-logo a:hover,
header .nav .nav-container .nav-logo a:active,
header .nav .nav-container .nav-logo a:focus {
text-decoration: none !important;
border-bottom: none !important;
border: none !important;
outline: none !important;
background: none !important;
background-image: none !important;
text-decoration-line: none !important;
text-decoration-style: none !important;
text-decoration-color: transparent !important;
}
:root {
--primary-color: #2563eb;
--primary-dark: #1d4ed8;
--secondary-color: #10b981;
--accent-color: #f59e0b;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-light: #9ca3af;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-dark: #111827;
--border-color: #e5e7eb;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
/* Header height variables for consistent spacing */
--header-height: 80px;
--header-height-mobile: 70px;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
overflow-x: hidden;
margin: 0;
padding: 0;
height: 100%;
}
html {
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
scroll-behavior: auto;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
color: var(--text-primary);
background-color: var(--bg-primary);
width: 100%;
box-sizing: border-box;
}
/* Ensure no gaps on solutions page */
.solutions-page {
margin: 0;
padding: 0;
height: 100%;
}
/* Scroll margin handled by JavaScript */
.solutions-page body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--secondary-color);
color: white;
}
.btn-secondary:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-outline {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
/* Header - consolidated with above definition */
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
padding: 0 2rem; /* exact vertical centering within fixed header */
max-width: 1200px;
margin: 0 auto;
}
/* Ensure consistent vertical centering of brand across all pages (including About) */
header .nav .nav-container { height: var(--header-height) !important; }
header .nav .nav-container .nav-logo { align-items: center !important; }
header .nav .nav-container .text-wrap { justify-content: center !important; }
.nav-logo .logo-text {
font-size: 1.5rem;
font-weight: 700;
color: #2563eb !important;
line-height: 1; /* tighter line-height to center visually */
text-decoration: none !important;
border-bottom: none !important;
border: none !important;
display: inline-block;
}
.nav-logo .company-tagline {
font-size: 0.75rem;
font-weight: 400;
color: #6b7280 !important;
text-decoration: none !important;
border-bottom: none !important;
border: none !important;
display: block;
line-height: 1.2;
margin-top: -2px;
letter-spacing: 0.025em;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
.nav-link:not(.nav-logo) {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
.nav-link:not(.nav-logo):hover,
.nav-link:not(.nav-logo).active {
color: var(--primary-color);
}
.nav-link:not(.nav-logo)::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.nav-link:not(.nav-logo):hover::after,
.nav-link:not(.nav-logo).active::after {
width: 100%;
}
/* Mega Menu Styles */
.nav-item-dropdown {
position: relative;
}
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 600px;
background: white;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px);
transition: all 0.3s ease;
z-index: 1001;
border: 1px solid rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.mega-menu.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-menu-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
}
.mega-menu-left {
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.mega-menu-image {
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
}
.mega-menu-image img {
width: 100%;
height: 150px;
object-fit: cover;
transition: transform 0.3s ease;
}
.mega-menu-image:hover img {
transform: scale(1.05);
}
.mega-menu-left h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.mega-menu-left p {
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.5;
font-size: 0.9rem;
}
.mega-menu-left .btn {
width: 100%;
justify-content: center;
font-size: 0.9rem;
padding: 12px 20px;
}
.mega-menu-column {
padding: 1.5rem;
}
.mega-menu-column h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary-color);
display: inline-block;
}
.mega-menu-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.mega-menu-column li {
margin-bottom: 0.75rem;
}
.mega-menu-column a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
display: block;
padding: 0.5rem 0;
border-radius: 6px;
position: relative;
}
.mega-menu-column a:hover {
color: var(--primary-color);
background: rgba(37, 99, 235, 0.05);
padding-left: 0.75rem;
}
.mega-menu-column a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.mega-menu-column a:hover::before {
width: 4px;
}
/* Responsive Mega Menu */
@media (max-width: 1024px) {
.mega-menu {
width: 550px;
}
.mega-menu-content {
grid-template-columns: 1fr 1fr;
}
.mega-menu-left {
grid-column: 1 / -1;
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
@media (max-width: 768px) {
.mega-menu {
width: 90vw;
left: 5vw;
transform: translateX(0) translateY(-10px);
}
.mega-menu.show {
transform: translateX(0) translateY(0);
}
.mega-menu-content {
grid-template-columns: 1fr;
}
.mega-menu-left,
.mega-menu-column {
padding: 1.5rem;
}
.mega-menu-image img {
height: 150px;
}
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
gap: 4px;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: var(--text-primary);
transition: all 0.3s ease;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0b1220 0%, #0b1220 100%);
position: relative;
overflow: visible;
padding-top: 80px;
padding-bottom: 100px;
}
/* Ensure homepage hero uses only its image overlay and fits viewport */
.image-hero {
background: transparent !important;
min-height: 100vh !important;
padding-top: var(--header-height);
padding-bottom: 0 !important;
overflow: hidden !important;
}
/* Reduce homepage hero text sizes without affecting other pages */
.image-hero .hero-title { font-size: 3.4rem !important; line-height: 1.12 !important; }
.image-hero .hero-subtitle { font-size: 1.25rem !important; }
@media (max-width: 1024px) {
.image-hero .hero-title { font-size: 2.8rem !important; line-height: 1.15 !important; }
.image-hero .hero-subtitle { font-size: 1.1rem !important; }
}
@media (max-width: 640px) {
.image-hero .hero-title {
font-size: 1.9rem !important;
line-height: 1.2 !important;
max-width: 88vw !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
hyphens: auto !important;
}
.image-hero .hero-subtitle { font-size: 0.9rem !important; }
.image-hero .hero-container { padding-left: 1rem !important; padding-right: 1rem !important; }
}
/* Extra-small phones */
@media (max-width: 360px) {
.image-hero .hero-title {
font-size: 1.7rem !important;
line-height: 1.2 !important;
max-width: 86vw !important;
}
.image-hero .hero-subtitle { font-size: 0.85rem !important; }
}
.hero-container {
display: flex;
align-items: center;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
min-height: 70vh;
position: relative;
text-align: center;
width: 100%;
}
.hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.hero-title {
font-size: 7rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 0;
color: #fff;
text-align: center;
width: 100%;
}
.highlight {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
text-align: center;
}
.hero-subtitle {
font-size: 1.6rem;
color: #fff;
margin-bottom: 0;
line-height: 1.6;
text-align: center;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto;
}
/* Hero spacing and layout adjustments */
.hero-spacing {
height: 1.5rem;
}
.hero-spacing-large {
height: 3rem;
}
/* Image Hero (full-bleed background) */
.image-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(0.45);
transform: translateZ(0);
}
.image-hero .hero-container { position: relative; z-index: 1; }
.image-hero .hero-title { color: #fff; }
.image-hero .hero-subtitle { color: rgba(255,255,255,0.9); }
/* Scroll down arrow - positioned at bottom of hero section */
.scroll-down-arrow {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 1000;
opacity: 1;
transition: opacity 0.3s ease;
pointer-events: auto;
}
.scroll-down-arrow.hidden {
opacity: 0;
pointer-events: none;
}
.scroll-down-arrow a {
display: inline-block;
color: rgba(255, 255, 255, 0.8);
font-size: 2rem;
text-decoration: none;
transition: all 0.3s ease;
animation: bounce 2s infinite;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.scroll-down-arrow a:hover {
color: #fff;
transform: translateY(5px);
}
.hero-scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
}
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
/* Solutions Overview Section - Hero Section */
.solutions-overview.hero-section {
min-height: 100vh;
background: var(--bg-secondary);
padding: 100px 0 0 0;
}
/* Mobile adjustments for solutions overview */
@media (max-width: 768px) {
.solutions-overview.hero-section {
padding: 80px 0 0 0;
}
.overview-content {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 1rem;
}
}
/* Page Header */
.page-header {
padding: calc(var(--header-height) + 2rem) 0 4rem 0;
background: var(--bg-primary);
text-align: center;
border-bottom: 1px solid var(--border-color);
}
/* Mobile adjustments for page header */
@media (max-width: 768px) {
.page-header {
padding: calc(var(--header-height-mobile) + 2rem) 0 4rem 0;
}
}
/* Solution sections base styling */
.solution-section {
padding: 6rem 0 4rem 0;
position: relative;
}
.overview-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.overview-text h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.overview-text p {
font-size: 1.125rem;
margin-bottom: 2rem;
color: var(--text-secondary);
}
.solutions-list ul {
list-style: none;
padding: 0;
}
.solutions-list li {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.125rem;
color: var(--text-primary);
}
.solutions-list li i {
color: var(--secondary-color);
margin-right: 1rem;
font-size: 1.2rem;
}
.overview-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 12px;
box-shadow: var(--shadow-lg);
}
@media (max-width: 768px) {
.overview-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.overview-text h2 {
font-size: 2rem;
}
.overview-image img {
height: 300px;
}
}
/* Contact CTA Section */
.contact-cta {
text-align: center;
padding: 3rem 0;
}
.btn-large {
padding: 16px 32px;
font-size: 1.25rem;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.btn-large:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.section-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* What We Do Section - Netflix Style Slideshow */
.what-we-do {
padding: 6rem 0;
background: var(--bg-primary);
position: relative;
}
.services-slideshow {
position: relative;
height: 600px;
overflow: hidden;
border-radius: 20px;
margin-bottom: 2rem;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.slide.active {
opacity: 1;
}
.slide-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0.7);
}
.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
}
.slide-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
max-width: 600px;
padding: 2rem;
}
.slide-content .service-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: var(--shadow-lg);
}
.slide-content .service-icon i {
font-size: 2rem;
color: white;
}
.slide-content h3 {
font-size: 2rem;
margin-bottom: 1rem;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.slide-content p {
font-size: 1.125rem;
margin-bottom: 1.5rem;
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
.slide-content .learn-more {
color: white;
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 12px 24px;
background: rgba(255,255,255,0.2);
border-radius: 25px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.3);
}
.slide-content .learn-more:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-2px);
}
.slideshow-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.slide-indicators {
display: flex;
gap: 0.75rem;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border-color);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: var(--primary-color);
transform: scale(1.2);
}
.control-btn {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:hover {
color: var(--primary-color);
background: var(--bg-secondary);
transform: scale(1.1);
}
/* About Our Industry Section */
.about-industry {
padding: 6rem 0;
background: var(--bg-secondary);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.about-industry .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.industry-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.industry-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-primary);
margin-bottom: 1.5rem;
}
/* Projects Showcase Section */
.projects-showcase {
padding: 6rem 0;
background: var(--bg-primary);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.project-card {
background: white;
border-radius: 16px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
/* Project cards sliding animation - initial state */
.projects-showcase .project-card {
opacity: 0;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform, opacity;
}
/* Left column cards slide from left */
.projects-showcase .project-card:nth-child(1),
.projects-showcase .project-card:nth-child(3) {
transform: translateX(-100px);
}
/* Right column cards slide from right */
.projects-showcase .project-card:nth-child(2),
.projects-showcase .project-card:nth-child(4) {
transform: translateX(100px);
}
/* Staggered animation delays for smooth sequential effect */
.projects-showcase .project-card:nth-child(1) { transition-delay: 0.1s; }
.projects-showcase .project-card:nth-child(2) { transition-delay: 0.2s; }
.projects-showcase .project-card:nth-child(3) { transition-delay: 0.3s; }
.projects-showcase .project-card:nth-child(4) { transition-delay: 0.4s; }
/* Active state when animation triggers */
.projects-showcase .project-card.animate-in {
opacity: 1;
transform: translateX(0);
}
/* Hover effect removed to prevent interference with slide animation */
.project-image {
height: 200px;
overflow: hidden;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.project-card:hover .project-image img {
transform: scale(1.05);
}
.project-content {
padding: 1.5rem;
}
.project-content h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.project-content p {
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.6;
}
.read-more-btn {
display: inline-block;
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
padding: 8px 16px;
border: 2px solid var(--primary-color);
border-radius: 20px;
transition: all 0.3s ease;
background: transparent;
}
.read-more-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Our Mission Section */
.our-mission {
padding: 6rem 0;
background: var(--bg-secondary);
}
.mission-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.mission-description {
font-size: 1.25rem;
line-height: 1.8;
color: var(--text-primary);
font-style: italic;
}
/* Mobile adjustments for long section descriptions */
@media (max-width: 768px) {
.industry-description { font-size: 1rem; line-height: 1.7; }
.mission-description { font-size: 1.1rem; line-height: 1.7; }
}
@media (max-width: 640px) {
.industry-description { font-size: 0.95rem; line-height: 1.65; }
.mission-description { font-size: 1rem; line-height: 1.65; }
}
/* Partners Section - Infinite Logo Carousel */
.partners {
padding: 4rem 0;
background: var(--bg-primary);
}
/* Partners Grid (for partners.html) */
.partners-grid { padding: 6rem 0 4rem 0; background: var(--bg-secondary); }
.partners-grid { padding-top: var(--header-height) !important; }
.partners-grid-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
/* Partners section header styling */
.partners-grid .section-header {
text-align: center;
margin-bottom: 3rem;
margin-top: 1rem;
}
/* Partners page: heading hero background */
.partners-hero {
position: relative;
/* Full-bleed horizontally using negative margins (avoids tiny overflow) */
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
min-height: 240px;
padding: 2.5rem 1rem;
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
/* Provide breathing room under fixed navbar */
margin-top: var(--header-height);
}
.partners-hero { margin-top: 0 !important; }
.partners-hero::before {
content: '';
position: absolute;
inset: 0;
/* Try common filenames to avoid case/extension/path mismatches */
background-image: url('../img/partners-hero.jpg'), url('../img/partners-hero.jpeg'), url('../img/partners-hero.PNG'), url('../img/handshake.jpg'), url('../img/handshake.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: grayscale(100%) brightness(0.6);
z-index: 0;
background-color: #0b1220; /* fallback color */
}
.partners-hero::after {
/* subtle overlay for text readability */
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.25));
z-index: 0;
}
.partners-hero > * {
position: relative;
z-index: 1;
color: #ffffff !important;
}
.partners-hero .section-title { color: #ffffff !important; }
.partners-hero .section-subtitle { color: rgba(255,255,255,0.9) !important; }
.partners-hero .section-title,
.partners-hero .section-subtitle {
margin: 0.5rem 0 !important;
}
/* Remove container side padding so full-bleed header truly spans edge-to-edge */
.partners-grid-container { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 768px) {
.partners-hero { min-height: 200px; padding: 2rem 1rem; margin-top: var(--header-height-mobile); }
}
.partners-grid .section-title {
font-size: 2.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 1rem;
}
.partners-grid .section-subtitle {
font-size: 1.125rem;
color: #6b7280;
max-width: 600px;
margin: 0 auto;
}
.partners-grid-list {
list-style: none;
padding: 0;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
align-items: flex-start;
}
.partner-card-name { margin-top: 10px; font-size: .95rem; color: var(--text-secondary); text-align: center; line-height: 1.3; }
.partner-card {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: left;
min-height: 110px;
padding: 12px 10px;
flex: 1 1 220px;
max-width: 320px;
gap: 12px;
}
.partner-logo { display: flex; align-items: center; justify-content: center; width: auto; min-width: 120px; }
.partner-card-name { white-space: nowrap; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.partners-grid-list .partner-card .partner-card-name { margin-top: 0 !important; text-align: left !important; display: inline-block; }
.partners-grid-list .partner-card img {
max-height: 90px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain;
display: block;
margin: 0;
filter: grayscale(.15) opacity(.95);
transition: none;
transform: none;
}
.partners-grid-list .partner-card:hover img,
.partners-grid-list .partner-card:focus-within img { filter: grayscale(.15) opacity(.95) !important; transform: none !important; }
.partners-grid-list .partner-card:hover img { filter: grayscale(.15) opacity(.95) !important; transform: none !important; }
/* Allow select wide logos to appear a bit larger */
.partner-card.wide img { max-height: 120px !important; }
.partner-card-name { min-height: 24px; }
/* New Partners Logos Grid: 5/3/2 responsive columns */
.logos-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.logos-grid > li { list-style: none; }
.logo-card {
display: grid;
place-items: center;
text-align: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 16px;
min-height: 180px;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.logo-card:hover {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.logo-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 140px;
height: 80px;
background: transparent;
color: #7a8594;
border-radius: 8px;
font-weight: 600;
}
.logo-box img { max-height: 70px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.logo-name {
margin-top: 12px;
font-size: 0.95rem;
color: var(--text-primary, #111111);
}
@media (max-width: 1024px) {
.logos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.logos-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile viewport fixes */
@media (max-width: 640px) {
html, body { max-width: 100%; overflow-x: hidden; height: 100%; }
.nav .nav-container { padding-left: 16px; padding-right: 16px; width: 100%; box-sizing: border-box; }
.nav-toggle { margin-right: 0; }
.image-hero { min-height: 100svh !important; height: 100svh !important; }
.hero { overflow: hidden; min-height: 100svh !important; height: 100svh !important; padding-top: 60px; padding-bottom: 0; }
.hero .hero-container { padding-left: 16px !important; padding-right: 16px !important; min-height: auto; }
.hero-title { font-size: 1.25rem !important; white-space: nowrap !important; line-height: 1.2 !important; }
.hero-subtitle { font-size: 1rem !important; line-height: 1.35 !important; }
.image-hero .hero-title { font-size: 1.25rem !important; white-space: nowrap !important; }
.image-hero .hero-subtitle { font-size: 1rem !important; }
.image-hero::before { background-attachment: scroll; background-position: center center; background-size: cover; }
.highlight { display: inline; }
.hero-title .highlight { white-space: nowrap; font-size: inherit !important; }
/* Match slide title size for IP Surveillance heading */
.slide[data-slide="2"] .slide-title {
font-size: 1.6rem !important;
}
.scroll-down-arrow { bottom: 10px; }
}
@media (max-width: 768px) {
.partners-grid-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; }
}
.partners-carousel {
position: relative;
overflow: hidden;
/* Disabled masks to avoid visible fade/reset at edges */
mask-image: none;
-webkit-mask-image: none;
width: 100%;
display: block;
}
.partners-track {
display: flex;
flex-direction: row !important;
align-items: center;
gap: 3rem;
animation: partners-scroll 36s linear infinite;
will-change: transform;
flex-wrap: nowrap;
width: max-content;
white-space: nowrap;
backface-visibility: hidden;
transform: translate3d(0,0,0);
}
/* Guarantee children never wrap or grow */
.partners-track > * { flex: 0 0 auto !important; }
/* Pause on hover */
.partners-carousel:hover .partners-track {
animation-play-state: paused;
}
.partner-item {
flex: 0 0 auto;
height: 48px;
display: flex;
align-items: center;
}
.partner-item img {
height: 100% !important;
width: auto !important;
max-width: none !important;
display: block;
filter: grayscale(100%) contrast(1.1) opacity(0.8);
transition: filter 0.2s ease, transform 0.2s ease;
}
.partner-item img:hover {
filter: grayscale(0%) opacity(1);
transform: translateY(-2px);
}
@keyframes partners-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-33.3333%, 0, 0); }
}
/* Responsiveness */
@media (max-width: 1024px) {
.partners-track { gap: 2.25rem; animation-duration: 28s; }
.partner-item { height: 44px; }
}
@media (max-width: 768px) {
.partners { padding: 3rem 0; }
.partners-track { gap: 1.75rem; animation-duration: 30s; }
.partner-item { height: 40px; }
}
@media (max-width: 480px) {
.partners-track { gap: 1.25rem; animation-duration: 32s; }
.partner-item { height: 36px; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.partners-track { animation: none; }
}
/* Clickable Service Cards */
.clickable-service {
cursor: pointer;
}
.clickable-service:hover {
border-color: var(--primary-color);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
border: 1px solid var(--border-color);
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.service-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.service-icon i {
font-size: 1.5rem;
color: white;
}
.service-card h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.service-card p {
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
.learn-more {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
transition: gap 0.3s ease;
}
.learn-more:hover {
gap: 0.75rem;
}
/* About Preview Section */
.about-preview {
padding: 6rem 0;
background: var(--bg-secondary);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-text h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.about-text p {
font-size: 1.125rem;
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.stat-item {
text-align: center;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--text-secondary);
font-weight: 500;
}
/* Testimonials Section */
.testimonials {
padding: 6rem 0;
background: var(--bg-primary);
}
.testimonials-carousel {
position: relative;
max-width: 800px;
margin: 0 auto 3rem;
}
.testimonial-item {
display: none;
text-align: center;
}
.testimonial-item.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.testimonial-text {
font-size: 1.25rem;
font-style: italic;
color: var(--text-primary);
margin-bottom: 2rem;
line-height: 1.6;
}
.testimonial-author h4 {
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.testimonial-author span {
color: var(--text-secondary);
}
.testimonial-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
}
.control-btn {
background: none;
border: none;
font-size: 1.25rem;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.control-btn:hover {
color: var(--primary-color);
background: var(--bg-secondary);
}
.testimonial-dots {
display: flex;
gap: 0.5rem;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border-color);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: var(--primary-color);
}
/* CTA Section */
.cta-section {
padding: 6rem 0;
background: var(--gradient-primary);
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: white;
}
.cta-content p {
font-size: 1.125rem;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-section .btn-primary {
background: white;
color: var(--primary-color);
}
.cta-section .btn-outline {
border-color: white;
color: white;
}
.cta-section .btn-outline:hover {
background: white;
color: var(--primary-color);
}
/* Newsletter Section */
.newsletter {
padding: 4rem 0;
background: var(--bg-secondary);
text-align: center;
}
.newsletter-content h3 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.newsletter-content p {
font-size: 1.125rem;
margin-bottom: 2rem;
color: var(--text-secondary);
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.form-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.form-group input {
flex: 1;
min-width: 300px;
padding: 12px 16px;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
}
/* Footer */
.footer {
background: var(--bg-dark);
color: white;
padding: 4rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.footer-logo .logo-text {
font-size: 1.5rem;
font-weight: 700;
color: white;
text-decoration: none !important;
}
.footer-section h4 {
color: white;
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: var(--text-light);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: white;
}
.contact-info p {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text-light);
}
.contact-info i {
color: var(--primary-color);
width: 16px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
text-align: center;
color: var(--text-light);
}
.footer-bottom a {
color: var(--text-light);
text-decoration: none;
}
.footer-bottom a:hover {
color: white;
}
/* Responsive Design */
@media (max-width: 1024px) {
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-title {
font-size: 3.5rem;
}
.about-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.vision-pillars,
.team-stats,
.certifications {
flex-direction: column;
align-items: center;
}
.vision-pillars .pillar,
.team-stats .team-stat,
.certifications .certification-item {
min-width: 280px;
}
}
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 80px;
left: 0;
width: 100%;
height: calc(100vh - 80px);
background: white;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 2rem 0;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.nav-menu.active {
transform: translateX(0);
}
.nav-menu li {
margin: 1rem 0;
}
.nav-link:not(.nav-logo) {
font-size: 1.2rem;
padding: 1rem 2rem;
display: block;
width: 100%;
text-align: center;
}
.nav-toggle {
display: flex;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.hero {
min-height: 80vh;
padding-top: 60px;
padding-bottom: 60px;
}
.hero-container {
min-height: 60vh;
padding: 0 1rem;
}
.hero-title {
font-size: 2.5rem;
line-height: 1.2;
text-align: center;
width: 100%;
}
.hero-subtitle {
font-size: 1.4rem;
text-align: center;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.image-hero::before {
background-attachment: scroll;
background-position: center center;
}
.section-title {
font-size: 2rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.projects-grid {
grid-template-columns: 1fr;
max-width: 100%;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.form-group {
flex-direction: column;
align-items: center;
}
.form-group input {
min-width: 100%;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.hero {
min-height: 70vh;
padding-top: 50px;
padding-bottom: 50px;
}
.hero-container {
min-height: 50vh;
padding: 0 1rem;
}
.hero-title {
font-size: 2.5rem;
line-height: 1.1;
text-align: center;
width: 100%;
}
.hero-subtitle {
font-size: 1.3rem;
text-align: center;
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.image-hero::before {
background-attachment: scroll;
background-position: center center;
}
.section-title {
font-size: 1.75rem;
}
.about-stats {
grid-template-columns: 1fr;
}
}
/* Animation Classes */
[data-aos] {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
[data-aos].aos-animate {
opacity: 1;
transform: translateY(0);
}
/* Smooth Scrolling handled via JS to avoid edge-case jitter at top */
/* Focus States */
button:focus,
input:focus,
a:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Loading States */
.loading {
opacity: 0.7;
pointer-events: none;
}
/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
/* Contact Form Container - Centered */
.contact-form-container {
max-width: 800px;
margin: 0 auto;
padding: 4rem 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.contact-form-container .form-header {
text-align: center;
margin-bottom: 3rem;
}
.contact-form-container .form-header h2 {
font-size: 2.5rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.contact-form-container .form-header p {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* Contact Form Section Background */
.contact-form-section {
background: #f8fafc;
padding: 4rem 0;
}
/* Ensure form inputs look good in centered container */
.contact-form-container .form-group input,
.contact-form-container .form-group select,
.contact-form-container .form-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.contact-form-container .form-group input:focus,
.contact-form-container .form-group select:focus,
.contact-form-container .form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.about-header {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.about-header h1 {
font-size: 3.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 3rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-description {
text-align: left;
}
.about-description p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 1.5rem;
text-align: justify;
}
/* Team Section */
.team-section {
padding: 6rem 0;
background: var(--bg-secondary);
}
.team-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.team-content h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2rem;
}
.team-description {
margin-bottom: 3rem;
}
.team-description p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.team-visual {
margin-top: 3rem;
}
.team-stats {
display: flex;
justify-content: center;
gap: 2rem;
max-width: 700px;
margin: 0 auto;
flex-wrap: wrap;
}
.team-stat {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
}
.team-stat:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.stat-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.team-stat .stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.team-stat .stat-label {
color: var(--text-secondary);
font-weight: 500;
}
/* Vision Section */
.vision-section {
padding: 6rem 0;
background: var(--bg-primary);
}
.vision-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.vision-content h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2rem;
}
.vision-description {
margin-bottom: 3rem;
}
.vision-description p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 1rem;
text-align: justify;
text-align-last: center;
margin-left: auto;
margin-right: auto;
}
.vision-visual {
margin-top: 3rem;
}
.vision-pillars {
display: flex;
justify-content: center;
gap: 2rem;
max-width: 900px;
margin: 0 auto;
flex-wrap: wrap;
}
.pillar {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
}
.pillar:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.pillar-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.pillar h3 {
font-size: 1.5rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.pillar p {
color: var(--text-secondary);
margin-bottom: 0;
}
/* Business Philosophy Section */
.philosophy-section {
padding: 6rem 0;
background: var(--bg-secondary);
}
.philosophy-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.philosophy-content h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2rem;
}
.philosophy-description {
margin-bottom: 3rem;
}
.philosophy-description p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 1rem;
text-align: justify;
}
.certifications {
display: flex;
justify-content: center;
gap: 2rem;
max-width: 900px;
margin: 0 auto;
flex-wrap: wrap;
}
.certification-item {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
}
.certification-item:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.cert-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.certification-item h3 {
font-size: 1.25rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.certification-item p {
color: var(--text-secondary);
margin-bottom: 0;
}
@media (max-width: 640px) {
/* Disable slide animations on mobile for better performance */
.projects-showcase .project-card {
transform: none;
opacity: 1;
transition: none;
}
.projects-showcase .project-card.animate-in {
transform: none;
opacity: 1;
}
/* Mobile responsive for about-industry section */
.about-industry {
min-height: auto;
padding: 3rem 0;
}
}
/* Responsive hero adjustments - moved to specific about hero section */
.about-hero .hero-spacing {
height: 1rem;
}
.about-hero .hero-spacing-large {
height: 2rem;
}
.scroll-down-arrow a {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.popup-content {
width: 95%;
margin: 1rem;
}
.popup-header,
.popup-body {
padding: 1rem;
}
}
/* Automation Options Section */
.automation-options {
padding: 6rem 0;
background: var(--bg-primary);
}
.automation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.automation-card {
background: var(--bg-primary);
border-radius: 20px;
padding: 3rem;
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}
.automation-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.automation-card:hover::before {
transform: scaleX(1);
}
.automation-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.automation-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
position: relative;
}
.automation-icon i {
font-size: 2.5rem;
color: white;
}
.automation-card h3 {
font-size: 1.75rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.automation-card p {
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.6;
}
.automation-features ul {
list-style: none;
padding: 0;
}
.automation-features li {
padding: 0.5rem 0;
color: var(--text-secondary);
position: relative;
padding-left: 1.5rem;
}
.automation-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--secondary-color);
font-weight: bold;
}
.automation-cta {
margin-top: 2rem;
text-align: center;
}
/* Hover Popup Effects */
.automation-card {
position: relative;
}
.automation-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(37, 99, 235, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.automation-card:hover::after {
opacity: 1;
}
/* Industrial Card Specific */
.industrial-card:hover .automation-icon {
background: var(--gradient-secondary);
transform: scale(1.1);
}
.industrial-card:hover h3 {
color: var(--primary-color);
}
/* Commercial Card Specific */
.commercial-card:hover .automation-icon {
background: var(--gradient-accent);
transform: scale(1.1);
}
.commercial-card:hover h3 {
color: var(--secondary-color);
}
/* Contact Section Styles */
.contact-section {
padding: 6rem 0;
background: var(--bg-secondary);
}
.contact-content {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.contact-form {
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
max-width: 100%;
width: 100%;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text-primary);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
html.marquee-enabled .partners-track {
animation: none !important;
}
/* IP Surveillance Section Styles */
.ip-surveillance-section {
padding: 6rem 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.ip-surveillance-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 0;
}
.surveillance-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.surveillance-text h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.surveillance-text .lead {
font-size: 1.2rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.surveillance-text p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.7;
}
.what-we-offer {
margin-top: 2rem !important;
padding: 2rem 0 !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 16px !important;
border: 2px solid #2563eb !important;
display: block !important;
width: 100% !important;
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2) !important;
}
.what-we-offer h3 {
font-size: 1.8rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
margin-bottom: 2rem !important;
position: relative !important;
text-align: center !important;
padding: 0 2rem !important;
display: block !important;
}
.what-we-offer h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.offerings-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1.5rem !important;
margin-top: 1rem !important;
padding: 0 2rem !important;
width: 100% !important;
}
.offering-item {
display: flex !important;
align-items: flex-start !important;
gap: 1rem !important;
padding: 1.5rem !important;
background: white !important;
border-radius: 12px !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
transition: all 0.3s ease !important;
border: 2px solid #10b981 !important;
min-height: 120px !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 1rem !important;
}
.offering-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
border-color: var(--primary-color);
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.offering-icon {
flex-shrink: 0 !important;
width: 50px !important;
height: 50px !important;
background: linear-gradient(135deg, #2563eb, #10b981) !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: white !important;
font-size: 1.2rem !important;
transition: all 0.3s ease !important;
border: 2px solid #1d4ed8 !important;
}
.offering-item:hover .offering-icon {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.offering-content {
flex: 1 !important;
display: block !important;
width: 100% !important;
}
.offering-content h4 {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
margin-bottom: 0.5rem !important;
line-height: 1.3 !important;
display: block !important;
}
.offering-content p {
font-size: 0.95rem !important;
color: var(--text-secondary) !important;
line-height: 1.5 !important;
margin: 0 !important;
display: block !important;
}
.surveillance-visual {
position: relative;
}
.visual-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
background: white;
padding: 1rem;
}
.main-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 12px;
transition: transform 0.3s ease;
}
.visual-container:hover .main-image {
transform: scale(1.05);
}
.visual-overlay {
position: absolute;
top: 2rem;
right: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.overlay-item {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.95);
padding: 0.75rem 1rem;
border-radius: 25px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.overlay-item:hover {
transform: translateX(-5px);
background: white;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.overlay-item i {
color: var(--primary-color);
font-size: 1.1rem;
}
.overlay-item span {
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
/* Responsive Design for IP Surveillance Section */
@media (max-width: 1024px) {
.surveillance-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.offerings-grid {
grid-template-columns: 1fr;
}
.surveillance-text h2 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.ip-surveillance-section {
padding: 4rem 0;
}
.surveillance-text h2 {
font-size: 2rem;
}
/* Match slide title size for IP Surveillance heading */
.slide[data-slide="2"] .slide-title {
font-size: 2rem !important;
}
.surveillance-text .lead {
font-size: 1.1rem;
}
.what-we-offer {
padding: 1.5rem 0;
}
.what-we-offer h3 {
font-size: 1.5rem;
padding: 0 1rem;
}
.offerings-grid {
padding: 0 1rem;
}
.offering-item {
padding: 1rem;
min-height: 100px;
}
.offering-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.visual-overlay {
position: static;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
flex-wrap: wrap;
}
.overlay-item {
padding: 0.5rem 0.75rem;
}
.overlay-item span {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.surveillance-content {
gap: 2rem;
}
.surveillance-text h2 {
font-size: 1.8rem;
}
/* Match slide title size for IP Surveillance heading */
.slide[data-slide="2"] .slide-title {
font-size: 1.6rem !important;
}
.what-we-offer {
padding: 1rem 0;
}
.what-we-offer h3 {
font-size: 1.3rem;
padding: 0 0.5rem;
}
.offerings-grid {
gap: 1rem;
padding: 0 0.5rem;
}
.offering-item {
flex-direction: column;
text-align: center;
gap: 0.75rem;
padding: 1rem;
min-height: 90px;
}
.visual-overlay {
flex-direction: column;
align-items: center;
}
}
/* Grid Background for Alternate Sections */
.solution-section.grid-bg {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
position: relative !important;
overflow: hidden !important;
}
.solution-section.grid-bg::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: url('data:image/svg+xml,') !important;
opacity: 0.3 !important;
z-index: 0 !important;
}
.solution-section.grid-bg .container {
position: relative !important;
z-index: 1 !important;
}
.section-header {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.section-header h2 {
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.section-header p {
font-size: 1.1rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* Responsive Design for Placeholder Sections */
@media (max-width: 768px) {
.solution-section {
padding: 3rem 0;
}
.solution-section.grid-bg {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}
}
@media (max-width: 480px) {
.section-header h2 {
font-size: 1.8rem;
}
.section-header p {
font-size: 1rem;
}
}
/* Partner Logo Background Handling */
.logo-with-bg {
background: #ffffff !important;
border-radius: 8px !important;
padding: 12px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
position: relative !important;
overflow: hidden !important;
}
.logo-with-bg::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: #ffffff !important;
z-index: 1 !important;
}
.logo-with-bg img {
position: relative !important;
z-index: 2 !important;
background: #ffffff !important;
padding: 8px !important;
border-radius: 6px !important;
filter: none !important;
mix-blend-mode: normal !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* Specific handling for logos with vector backgrounds */
.logo-with-bg img[alt="Avaya"],
.logo-with-bg img[alt="AWS"],
.logo-with-bg img[alt="AudioCodes"] {
background: #ffffff !important;
padding: 10px !important;
border-radius: 6px !important;
filter: none !important;
}
/* Hide mega menu completely on mobile to prevent stray text rendering */
@media (max-width: 992px) {
.mega-menu,
.mega-menu * {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
z-index: -1 !important;
}
}
/* Solutions sections: prevent horizontal overflow and fix grid on mobile */
.ip-surveillance-section {
overflow-x: hidden !important;
}
.ip-surveillance-section .container,
.solution-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.offerings-grid {
max-width: 100% !important;
box-sizing: border-box !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.offering-item {
width: 100% !important;
box-sizing: border-box !important;
}
/* Catch all 2-column inline grids inside solution sections and stack them on small screens */
@media (max-width: 1024px) {
.ip-surveillance-section .container,
.solution-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
.ip-surveillance-section div[style*="display: grid"],
.solution-section div[style*="display: grid"] {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.offerings-grid {
grid-template-columns: 1fr !important;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
gap: 1rem !important;
}
}
@media (max-width: 480px) {
.ip-surveillance-section .container,
.solution-section .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.offerings-grid { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}
/* Removed global overflow-x rule to avoid side effects */
/* (Removed mobile-specific hover and scroll-in styles to restore original) */
/* Ensure the home hero scroll arrow is always clickable on mobile */
.scroll-down-arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 16px;
z-index: 1002;
pointer-events: auto;
}
/* Partners carousel image sizing and appearance (stabilize on all screens) */
.partners-carousel { position: relative; overflow: hidden; }
.partners-track { display: flex; align-items: center; gap: 2rem; will-change: transform; }
.partners-track img {
height: 60px;
max-height: 60px;
width: auto;
max-width: 160px;
object-fit: contain;
display: block;
filter: none; /* keep original logo colors */
opacity: 1;
}
@media (max-width: 768px) {
.partners-track { gap: 1.5rem; }
.partners-track img { height: 50px; max-height: 50px; max-width: 140px; }
}
.scroll-down-arrow a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 9999px;
background: transparent;
color: rgba(255, 255, 255, 0.8);
box-shadow: none;
border: none;
backdrop-filter: blur(10px);
}
.scroll-down-arrow a i { font-size: 18px; }
@media (max-width: 768px) {
.scroll-down-arrow { bottom: 20px; z-index: 1100; }
.scroll-down-arrow a { width: 56px; height: 56px; }
.scroll-down-arrow a i { font-size: 20px; }
}
/* (Removed temporary heading and projects overrides to restore original styles) */
/* (Removed customers carousel styles) */
/* Final overrides: scope heading color to home sections only */
.about-industry .section-title,
.about-industry .section-header .section-title,
.what-we-do .section-title,
.what-we-do .section-header .section-title,
.projects-showcase .section-title,
.projects-showcase .section-header .section-title,
.our-mission .section-title,
.partners .section-title,
.partners .section-header .section-title,
.customers .section-title,
.customers .section-header .section-title { color: #1f2937 !important; background: none !important; -webkit-text-fill-color: initial !important; }
/* Normalize section subtitles */
.section-subtitle { color: #6b7280 !important; font-style: normal !important; }
/* Customers carousel spacing/gap */
.customers { padding: 4rem 0 !important; }
.customers .section-header { margin-bottom: 2rem !important; }
.customers .customers-carousel { margin-top: 0 !important; }
.customers .customers-track { gap: 2rem !important; }
.customers .customer-item img { height: 60px !important; }
@media (max-width: 768px){
.customers .customers-track { gap: 1.25rem !important; }
.customers .customer-item img { height: 50px !important; }
}
/* Partners carousel spacing/gap */
.partners { padding: 4rem 0 !important; }
.partners .section-header { margin-bottom: 2rem !important; }
.partners .partners-track { gap: 2rem !important; }
.partners .partner-item { height: 68px !important; }
.partners .partner-item img { height: 100% !important; filter: none !important; opacity: 1 !important; }
@media (max-width: 768px){
.partners .partners-track { gap: 1.5rem !important; }
.partners .partner-item { height: 58px !important; }
}
/* Exceptions: keep CTA heading and footer headings white */
.cta-section .cta-content h2,
.cta-section .cta-content p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.footer .footer-section h4 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
/* Customers carousel: CSS marquee fallback (disabled when JS marquee runs) */
.customers .customers-track { animation: customers-scroll 36s linear infinite; }
@keyframes customers-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-33.3333%,0,0); } }
html.customers-marquee-enabled .customers .customers-track { animation: none !important; }
/* Clean Projects Section */
.projects-showcase {
padding: 4rem 0;
background: #ffffff;
}
.projects-showcase .section-header {
text-align: center;
margin-bottom: 3rem;
}
.projects-showcase .section-title {
color: #1f2937;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.projects-showcase .section-subtitle {
color: #6b7280;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.projects-showcase .projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 768px) {
.projects-showcase .projects-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.projects-showcase .project-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
/* Hover effect removed to prevent interference with slide animation */
.projects-showcase .project-image {
width: 100%;
height: 200px;
overflow: hidden;
}
.projects-showcase .project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.projects-showcase .project-card:hover .project-image img {
transform: scale(1.05);
}
.projects-showcase .project-content {
padding: 1.5rem;
}
.projects-showcase .project-content h3 {
color: #1f2937;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.projects-showcase .project-content p {
color: #6b7280;
line-height: 1.6;
margin-bottom: 1rem;
}
.projects-showcase .read-more-btn {
display: inline-block;
color: #2563eb;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
padding: 8px 16px;
border: 2px solid #2563eb;
border-radius: 20px;
transition: all 0.3s ease;
background: transparent;
}
.projects-showcase .read-more-btn:hover {
background: #2563eb;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* Force Projects grid to 2 columns with slight scroll-in animation */
.projects-showcase .projects-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 2rem !important;
max-width: 1000px !important;
margin: 0 auto !important;
}
@media (max-width: 768px) {
.projects-showcase .projects-grid {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
}
/* About Hero Section */
.about-hero {
background: transparent !important;
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
position: relative !important;
color: #ffffff !important;
/* Ensure the hero fits the viewport and doesn't add extra space */
padding-top: var(--header-height);
padding-bottom: 0 !important;
}
/* About hero: show background image (with gradient as fallback) */
.about-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../img/about-hero.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
filter: brightness(0.45);
z-index: 0;
}
/* Ensure content sits above the image overlay */
.about-hero .hero-container { position: relative; z-index: 1; }
/* Mobile: avoid fixed attachment issues */
@media (max-width: 768px) {
.about-hero::before { background-attachment: scroll; }
}
.about-hero .hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
}
.about-hero .hero-content {
max-width: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.about-hero .hero-title {
font-size: 3.5rem !important;
font-weight: 700 !important;
line-height: 1.1 !important;
margin-bottom: 2rem !important;
color: #ffffff !important;
}
/* Keep About heading on a single line on larger screens */
@media (min-width: 1025px) {
.about-hero .hero-title { white-space: nowrap; }
}
.about-hero .hero-title .highlight {
background: linear-gradient(135deg, #60a5fa, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-hero .hero-subtitle {
font-size: 1.8rem !important;
font-weight: 500 !important;
line-height: 1.5 !important;
margin-bottom: 2.5rem !important;
color: #f8fafc !important;
opacity: 0.95 !important;
}
.about-hero .hero-description {
margin-bottom: 2rem;
}
.about-hero .hero-description p {
font-size: 1.2rem !important;
line-height: 1.7 !important;
margin-bottom: 1.8rem !important;
color: #e2e8f0 !important;
opacity: 0.9 !important;
text-align: justify !important;
text-align-last: center;
margin-left: auto;
margin-right: auto;
}
/* Responsive Design for About Hero */
@media (max-width: 768px) {
.about-hero .hero-container {
padding: 0 1rem;
}
.about-hero .hero-title {
font-size: 2rem !important;
white-space: normal; /* allow wrap on smaller screens */
line-height: 1.2 !important;
}
.about-hero .hero-subtitle {
font-size: 1rem !important;
}
.about-hero .hero-description p {
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
}
@media (max-width: 640px) {
.about-hero .hero-title {
font-size: 1.75rem !important;
line-height: 1.3 !important;
}
.about-hero .hero-subtitle {
font-size: 0.95rem !important;
}
.about-hero .hero-description p {
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
}
@media (max-width: 480px) {
.about-hero .hero-title {
font-size: 1.5rem !important;
line-height: 1.3 !important;
}
.about-hero .hero-subtitle {
font-size: 0.85rem !important;
}
.about-hero .hero-description p {
font-size: 0.85rem !important;
line-height: 1.4 !important;
}
}
/* Force home hero title on one line for mobile */
@media (max-width: 768px) {
.hero.image-hero .hero-container .hero-content .hero-title {
white-space: normal !important;
overflow: visible;
text-overflow: clip;
font-size: inherit !important;
line-height: inherit !important;
margin-bottom: inherit !important;
}
}
@media (max-width: 640px) {
.hero.image-hero .hero-container .hero-content .hero-title {
white-space: normal !important;
overflow: visible;
text-overflow: clip;
font-size: inherit !important;
line-height: inherit !important;
}
}
@media (max-width: 480px) {
.hero.image-hero .hero-container .hero-content .hero-title {
white-space: normal !important;
overflow: visible;
text-overflow: clip;
font-size: inherit !important;
line-height: inherit !important;
}
}
/* Slightly reduce home hero title sizes for better alignment */
.image-hero .hero-title { font-size: 3.6rem !important; }
@media (max-width: 1024px) { .image-hero .hero-title { font-size: 2.8rem !important; } }
@media (max-width: 768px) { .image-hero .hero-title { font-size: 1.35rem !important; white-space: nowrap !important; letter-spacing: -0.01em; } }
@media (max-width: 640px) { .image-hero .hero-title { font-size: 1.25rem !important; white-space: nowrap !important; letter-spacing: -0.01em; } }
@media (max-width: 480px) { .image-hero .hero-title { font-size: 1.15rem !important; white-space: nowrap !important; letter-spacing: -0.01em; } }
@media (max-width: 360px) { .image-hero .hero-title { font-size: 1.05rem !important; white-space: nowrap !important; letter-spacing: -0.01em; } }
/* Mobile-only line break control */
.mobile-break { display: none; }
@media (min-width: 769px) { .mobile-break { display: inline; } }
/* Global anchor offset for mobile so arrow lands below fixed header */
@media (max-width: 768px) {
html { scroll-padding-top: 100px; }
}
@media (max-width: 640px) {
html { scroll-padding-top: 90px; }
}
/* Give hero content a bit more width on mobile to keep line in one row */
@media (max-width: 640px) {
.hero .hero-container { padding-left: 10px; padding-right: 10px; }
.hero .hero-content { padding-left: 6px; padding-right: 6px; }
}
/* Mobile: ensure About section fits and anchors align correctly */
@media (max-width: 768px) {
#about-industry { scroll-margin-top: 120px; }
#about-industry-title { scroll-margin-top: 120px; margin-top: 0.5rem; }
.about-industry { padding: 2rem 0; }
.about-industry .section-header { margin-bottom: 1rem; }
}
@media (max-width: 640px) {
#about-industry { scroll-margin-top: 110px; }
#about-industry-title { scroll-margin-top: 110px; margin-top: 0.5rem; }
.about-industry { padding: 1.5rem 0; }
}
/* Final mobile hero title sizing overrides (home only) */
@media (max-width: 768px) {
header ~ .hero.image-hero .hero-container .hero-content .hero-title {
font-size: 2.1rem !important;
line-height: 1.2 !important;
}
}
@media (max-width: 640px) {
header ~ .hero.image-hero .hero-container .hero-content .hero-title {
font-size: 1.75rem !important;
line-height: 1.25 !important;
}
}
/* Ensure navbar logo is visible on mobile */
@media (max-width: 768px) {
header .nav .nav-container a.nav-logo img.site-logo,
header .nav .nav-container .nav-logo img.site-logo,
header .nav .nav-container .nav-logo img {
display: block !important;
height: auto !important;
max-height: 36px !important;
max-width: 120px !important;
width: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
}