/* =========================================
GLOBAL VARIABLES & FONTS
========================================= */
:root {
--color-navy: #18264a;
--color-navy-dark: #0e1730;
--color-royal: #2841A2;
--color-royal-dark: #1f327e;
--color-gray: #7e8a96;
--color-light: #f3f6fa;
--color-accent: #5ec8e5;
--color-accent-dark: #3fb0cf;
--color-white: #ffffff;
--font-main: 'Inter', sans-serif;
/* Static hero headline gradient — no hover, no animation */
--hero-title-gradient: linear-gradient(90deg, var(--color-royal) 0%, var(--color-accent) 100%);
/* Single shared body-copy size used everywhere text isn't a heading/title
(nav links, footer copy, paragraphs) so type stays consistent site-wide. */
--font-size-base: 1rem;
--shadow-sm: 0 4px 15px rgba(24, 38, 74, 0.06);
--shadow-md: 0 10px 30px rgba(24, 38, 74, 0.10);
--shadow-lg: 0 20px 45px rgba(24, 38, 74, 0.14);
/* Aliases (fixes previously-undefined var references found in the codebase) */
--color-dark: var(--color-navy);
--color-transparent: transparent;
/* Legacy aliases — the 16 page stylesheets still reference --color-blue
in dozens of places. Keeping these pointed at the new royal blue means
the rename is a one-line change here instead of a find-and-replace
across every page file. */
--color-blue: var(--color-royal);
--color-blue-dark: var(--color-royal-dark);
}
/* Force all text-based elements to use Inter */
h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea, select, li {
font-family: var(--font-main);
}
/* =========================================
RESET & BASE STYLES
========================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-main);
font-size: var(--font-size-base);
color: var(--color-navy);
line-height: 1.6;
background-color: var(--color-white);
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
ul {
list-style: none;
}
/* Base Layout & Utilities */
section {
padding: 5rem 0 5rem;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* Global Grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
/* =========================================
GLOBAL MEDIA-SPLIT STANDARD
Every section that pairs text with a photo uses this. It is the
single source of truth for the layout: an exact 50%/50% column
split, with the photo column stretched (align-items: stretch) so
its frame runs from the top of the first line of text to the
bottom of the last line, whatever the text's natural height is.
Usage:
Add `.media-split-reverse` to flip the order (photo on the left,
text on the right) without touching the markup order.
Page stylesheets (about.css, index.css, etc.) may still tune the
gap or add their own decorative styling to what's INSIDE each
column, but must never redeclare grid-template-columns on a
`.media-split` element — that 50/50 ratio is owned here so it
can't be silently overridden per page. */
.media-split {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 3.5rem;
}
.media-split-reverse {
direction: rtl;
}
.media-split-reverse > * {
direction: ltr;
}
.media-split-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.media-split-media {
width: 100%;
height: 100%;
}
/* Generic photo box for a media-split column: fills the column's full
stretched height (i.e. the full height of the text beside it) and
crops its image/background to match, so the frame's top edge lines
up with the first line of copy and its bottom edge with the last. */
.media-frame {
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
border-radius: 24px;
overflow: hidden;
background-color: var(--color-light);
box-shadow: var(--shadow-sm);
}
.media-frame img,
.media-frame .media-frame-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
display: block;
}
@media (max-width: 900px) {
.media-split,
.media-split-reverse {
grid-template-columns: 1fr;
direction: ltr;
gap: 2.25rem;
}
.media-frame { min-height: 260px; }
}
/* Text Utilities */
.text-center { text-align: center; }
.text-white { color: var(--color-white); }
.text-accent { color: var(--color-accent) !important; }
.text-blue { color: var(--color-royal); }
.full-width { width: 100%; text-align: center; }
/* Visually hidden but crawlable — used for SEO headings behind
text-free visuals (e.g. the homepage hero video) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Global JS Animation Classes */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* =========================================
GLOBAL TYPOGRAPHY
========================================= */
h1,
.hero-title {
font-size: clamp(2.2rem, 5.5vw, 4rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 1.5rem;
letter-spacing: -1px;
}
h2.section-title {
font-size: clamp(1.7rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.75rem;
letter-spacing: -0.5px;
}
.overline {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-royal);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 0.6rem;
}
/* =========================================
HERO BANNER
One shared class for the banner at the top of every inner page.
Auto-sweeping navy -> royal blue -> navy gradient plus a slow
drifting aurora layer. Nothing here reacts to the pointer — no
hover, no spotlight, no mouse tracking.
Markup:
... (optional)
...
Title Highlight
Modifiers:
.hero-banner--tall keeps the taller 8rem top padding used by
About, Careers, Contact, Partners, Services
.hero-banner--compact tighter bottom padding (Partners, Services)
.hero-banner-title--lg bigger H1 (Careers only)
========================================= */
.hero-banner {
--hero-pad-top: 6.5rem;
--hero-pad-bottom: 3rem;
position: relative;
min-height: 50vh;
display: flex;
align-items: center;
padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
overflow: hidden;
isolation: isolate;
background: linear-gradient(135deg,
var(--color-navy) 0%,
var(--color-royal) 50%,
var(--color-navy) 100%);
background-size: 200% auto;
background-position: 0% center;
animation: heroBannerSweep 18s ease-in-out infinite;
}
.hero-banner--tall {
--hero-pad-top: 8rem;
}
.hero-banner--compact {
--hero-pad-bottom: 2.5rem;
}
@keyframes heroBannerSweep {
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
/* Drifting aurora blobs layered over the gradient */
.hero-banner::before {
content: "";
position: absolute;
inset: -25%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(38% 42% at 22% 28%, rgba(40, 65, 162, 0.65) 0%, rgba(40, 65, 162, 0) 66%),
radial-gradient(34% 38% at 78% 70%, rgba(24, 38, 74, 0.60) 0%, rgba(24, 38, 74, 0) 68%),
radial-gradient(30% 34% at 62% 16%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
animation: heroBannerAurora 26s ease-in-out infinite alternate;
}
@keyframes heroBannerAurora {
0% { transform: translate3d(-3%, -2%, 0) scale(1); }
50% { transform: translate3d(3%, 3%, 0) scale(1.08); }
100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}
/* Content sits above the animated layers and stays completely still */
.hero-banner-container {
position: relative;
z-index: 1;
width: 100%;
}
.hero-banner .overline {
color: var(--color-accent);
}
.hero-banner h1 {
color: var(--color-white);
margin-bottom: 0;
}
.hero-banner h1 .highlight-blue {
color: var(--color-accent);
}
.hero-banner-title--lg {
font-size: 3.5rem;
margin-top: 1rem;
}
.hero-banner-title--top-gap {
margin-top: 1rem;
}
/* Solutions hero has no .hero-back-link above the overline, so on
mobile the overline needs extra clearance from the fixed header. */
@media (max-width: 640px) {
.hero-banner--overline-gap .overline {
margin-top: 4rem;
}
}
/* Back-link above the headline on the service/solution detail heroes */
.hero-back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.75);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1.5rem;
transition: color 0.3s ease, gap 0.3s ease;
}
.hero-back-link i {
font-size: 0.7rem;
transform: rotate(-90deg);
transition: transform 0.3s ease;
}
.hero-back-link:hover {
color: var(--color-white);
gap: 0.75rem;
}
/* --- Hero responsive --------------------------------- */
@media (max-width: 900px) {
.hero-banner--tall {
--hero-pad-top: 8.5rem;
--hero-pad-bottom: 3.5rem;
}
}
@media (max-width: 640px) {
.hero-banner {
--hero-pad-top: 6rem;
--hero-pad-bottom: 6rem;
}
.hero-banner--tall.hero-banner--compact {
--hero-pad-top: 6rem;
--hero-pad-bottom: 2.5rem;
}
.hero-banner-title--lg {
font-size: 2.4rem;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-banner,
.hero-banner::before {
animation: none;
}
}
/* ===== END HERO BANNER ===== */
/* =========================================
GLOBAL BUTTONS
========================================= */
.btn {
display: inline-block;
padding: 0.8rem 1.8rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background-color: var(--color-royal);
color: var(--color-white);
border: 2px solid var(--color-royal);
}
.btn-primary:hover {
background-color: var(--color-navy);
border-color: var(--color-navy);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(40, 65, 162, 0.2);
}
.btn-secondary {
background-color: var(--color-light);
color: var(--color-navy);
border: 1px solid var(--color-navy);
}
.btn-secondary:hover {
border-color: var(--color-royal);
color: var(--color-royal);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(24, 38, 74, 0.1);
}
.btn-white {
background-color: var(--color-white);
color: var(--color-navy);
border: 1px solid var(--color-white);
}
.btn-white:hover {
background-color: var(--color-light);
transform: translateY(-2px);
}
.btn-accent {
background-color: var(--color-accent);
color: var(--color-navy);
border: none;
font-weight: 700;
}
.btn-accent:hover {
background-color: #4db8d9;
transform: translateY(-2px);
}
/* =========================================
BACK TO TOP BUTTON (scroll progress ring)
========================================= */
.back-to-top {
position: fixed;
right: 6.75rem; /* sits beside the chatbot bubble — chatbot first, this next to it */
bottom: 1.9rem;
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background-color: var(--color-white);
box-shadow: var(--shadow-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 900;
opacity: 0;
visibility: hidden;
/* --footer-lift is set by main.js whenever the user scrolls close to
the true bottom of the page, so this button slides up and clears
the footer's last line no matter how that footer is laid out. */
transform: translateY(calc(12px + var(--footer-lift, 0px)));
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(var(--footer-lift, 0px));
}
.back-to-top svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg); /* start the ring at 12 o'clock */
}
.back-to-top-track {
fill: none;
stroke: var(--color-light);
stroke-width: 3;
}
.back-to-top-progress {
fill: none;
stroke: var(--color-royal);
stroke-width: 3;
stroke-linecap: round;
/* r=21 → circumference ≈ 131.9 */
stroke-dasharray: 131.9;
stroke-dashoffset: 131.9; /* fully hidden until JS updates it */
transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}
.back-to-top i {
position: relative;
z-index: 1;
color: var(--color-navy);
font-size: 1rem;
transition: color 0.3s ease, transform 0.3s ease;
}
.back-to-top:hover {
box-shadow: 0 12px 28px rgba(40, 65, 162, 0.25);
}
.back-to-top:hover .back-to-top-progress {
stroke: var(--color-accent);
}
.back-to-top:hover i {
color: var(--color-royal);
transform: translateY(-2px);
}
.back-to-top:active i {
transform: translateY(0) scale(0.9);
}
/* Removed entirely on mobile — the scroll-to-top button isn't shown
on small screens (it would crowd the chatbot bubble in that corner). */
@media (max-width: 640px) {
.back-to-top {
display: none !important;
}
}
/* =========================================
HEADER & NAVIGATION
========================================= */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
header.scrolled {
border-bottom: 1px solid var(--color-light);
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
/* Slides the navbar up out of view while scrolling down, and back down
into view while scrolling up (see main.js). Reuses header's existing
"transition: all 0.3s ease" for the slide animation. */
header.nav-hidden {
transform: translateY(-100%);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.logo {
display: flex;
align-items: center;
font-weight: 800;
font-size: 1.4rem;
letter-spacing: -0.5px;
}
.logo img {
height: 38px;
width: auto;
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-links a {
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-gray);
}
/* Hamburger Toggle (hidden on desktop) */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
background: transparent;
border: none;
cursor: pointer;
z-index: 1100;
border-radius: 8px;
transition: background-color 0.25s ease;
}
.nav-toggle:hover {
background-color: var(--color-light);
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
background-color: var(--color-navy);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease;
}
.nav-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Dropdown caret rotation when open (mobile) */
.dropdown.mobile-open .nav-icon {
transform: rotate(180deg);
}
.nav-icon {
font-size: 0.7rem;
margin-left: 4px;
transition: transform 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active,
.dropdown:hover .dropbtn {
color: var(--color-royal) !important;
}
/* Contact/Get in Touch Button in Nav */
.nav-btn {
background-color: #2841a2;
border: 1px solid #2841a2;
padding: 0.4rem 1.1rem;
border-radius: 50px;
color: #ffffff !important;
transition: all 0.2s ease;
}
.nav-btn:hover {
background-color: #18264a;
color: #ffffff !important;
border-color: #18264a;
}
.nav-links a.nav-btn:hover {
color: #ffffff !important;
}
/* Keep the button text white when this is also the active page link —
otherwise .nav-links a.active's blue text wins on the blue button
background and the label becomes invisible. */
.nav-links a.nav-btn.active {
color: #ffffff !important;
}
/* Smooth Navigation Dropdown */
.dropdown {
position: relative;
}
.dropbtn {
display: inline-flex;
align-items: center;
}
.dropdown-content {
position: absolute;
top: 100%;
left: -20px;
background-color: var(--color-white);
min-width: 240px;
box-shadow: 0 15px 35px rgba(24, 38, 74, 0.1);
border-radius: 12px;
padding: 0.5rem 0;
z-index: 2000;
border: 1px solid var(--color-light);
visibility: hidden;
opacity: 0;
transform: translateY(15px);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.dropdown-content li {
margin-bottom: 0;
}
.dropdown-content li a {
color: var(--color-navy) !important;
padding: 0.8rem 1.5rem;
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.9rem;
font-weight: 500;
transition: background 0.2s ease, color 0.2s ease;
}
.dropdown-content li a i {
width: 16px;
text-align: center;
color: var(--color-gray);
transition: color 0.2s ease;
}
.dropdown-content li a:hover,
.dropdown-content li a.active {
background-color: #f8fafc;
color: var(--color-royal) !important;
}
.dropdown-content li a:hover i,
.dropdown-content li a.active i {
color: var(--color-royal);
}
/* Nested sub-list inside a dropdown — e.g. Managed NOC / Managed SOC
stacked directly beneath "Managed Services" in the Services menu.
Unlike a flyout, this is just an indented continuation of the same
panel: always visible together with its parent item, no separate
hover/tap state needed. */
.dropdown-group > a {
font-weight: 600;
}
.dropdown-subitems {
padding: 0.15rem 0 0.4rem;
position: relative;
}
.dropdown-subitems li a {
padding: 0.6rem 2rem 0.6rem 3rem;
font-size: 0.85rem;
font-weight: 500;
position: relative;
}
/* Small "L" connector so the parent/child relationship to Managed
Services reads clearly at a glance, not just from the padding. */
.dropdown-subitems li a::before {
content: "";
position: absolute;
left: 2rem;
top: 50%;
width: 8px;
height: 8px;
border-left: 2px solid var(--color-gray);
border-bottom: 2px solid var(--color-gray);
transform: translateY(-65%);
}
.dropdown-subitems li a i {
font-size: 0.8rem;
}
/* =========================================
TOP INFORMATION BANNER
========================================= */
.info-banner {
background-color: var(--color-navy);
color: var(--color-white);
padding: 1.5rem 0;
}
.banner-container {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
}
.banner-link {
color: var(--color-accent);
font-weight: 500;
}
.banner-link:hover {
text-decoration: underline;
}
/* =========================================
GLOBAL FOOTER
========================================= */
footer {
background-color: var(--color-navy);
color: var(--color-white);
/* Equal top and bottom padding, so the space above the first row
matches the space below the copyright/ISO row. Clearance for the
fixed back-to-top / chatbot buttons is handled dynamically at
runtime by `updateFooterLift()` in main.js (via the
`--footer-lift` custom property), so it no longer needs extra
static padding reserved here. */
padding: 2.75rem 0;
}
/* Three horizontal footer rows, each separated by a faded divider line.
Row 1 and Row 2 share the exact same column template so columns line
up vertically: Brand/Stay-Updated, Company/Lebanon, Solutions/Jordan,
Services/KSA. */
.footer-row-1,
.footer-row-2 {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 1.5rem;
}
.footer-divider {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin: 1.5rem 0;
}
.footer-logo img {
height: 30px;
width: auto;
}
.footer-tagline-strong {
color: var(--color-white);
font-weight: 600;
font-size: var(--font-size-base);
margin-top: 0.5rem;
}
.footer-brand p {
color: var(--color-gray);
font-size: var(--font-size-base);
margin-top: 0.5rem;
}
.footer-seo-tagline {
color: var(--color-gray);
font-size: var(--font-size-base);
line-height: 1.55;
max-width: 320px;
margin-top: 0.75rem !important;
text-align: justify;
}
.newsletter-desc {
color: var(--color-gray);
font-size: var(--font-size-base);
line-height: 1.55;
margin-bottom: 0.75rem;
text-align: justify;
}
/* Click-and-drag affordance for every draggable carousel/track on
the site (logo/service scrollers, client-reference carousels, and
the "Who We Are" coverflow stages on Home & About). */
#services-track,
.carousel-track,
#wwaStage,
#wwaCarousel {
cursor: grab;
}
#services-track.is-dragging,
.carousel-track.is-dragging,
#wwaStage.is-dragging,
#wwaCarousel.is-dragging {
cursor: grabbing;
}
/* Stay Updated column (row 2) — icon sits beside the title, not above it */
.footer-newsletter-heading {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.5rem;
}
.footer-newsletter-col {
max-width: 320px;
}
.footer-newsletter-heading .footer-title {
margin-bottom: 0;
}
.footer-newsletter-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
/* Office/contact columns (row 2) */
.footer-office-col .footer-title {
margin-bottom: 0.75rem;
}
.footer-office-line {
margin-bottom: 0.4rem;
color: var(--color-gray);
font-size: var(--font-size-base);
}
.footer-office-line:last-child {
margin-bottom: 0;
}
.footer-office-line i {
width: 16px;
color: var(--color-accent);
margin-right: 0.4rem;
}
.footer-office-line a {
color: var(--color-gray);
}
.footer-office-line a:hover {
color: var(--color-accent);
}
/* Social icons centered beneath row 2 */
.footer-social-row {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
.newsletter-form {
display: flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50px;
padding: 0.3rem 0.3rem 0.3rem 1.1rem;
margin-bottom: 0.5rem;
transition: border-color 0.3s ease;
}
.newsletter-form:focus-within {
border-color: var(--color-accent);
}
.newsletter-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--color-white);
font-size: var(--font-size-base);
font-family: var(--font-main);
min-width: 0;
}
.newsletter-input::placeholder {
color: var(--color-gray);
}
.newsletter-btn {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background-color: var(--color-accent);
color: var(--color-navy);
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.newsletter-btn:hover {
background-color: var(--color-white);
transform: scale(1.08);
}
/* Shared column-title style — applies wherever a footer heading appears
(Company/Solutions/Services/Contact/Stay Updated), regardless of which
column wraps it, so every title in the footer stays consistent. */
.footer-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 1rem;
}
.footer-links h4 {
margin-bottom: 1rem;
}
.footer-links ul li {
margin-bottom: 0.55rem;
}
.footer-links ul li, .footer-links ul li a {
color: var(--color-gray);
font-size: var(--font-size-base);
}
.footer-links ul li a:hover {
color: var(--color-accent);
}
/* Global Social Icons (Used in Footer & Contact) */
.social-icons {
display: flex;
gap: 1rem;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background-color: var(--color-white);
color: var(--color-navy);
border-radius: 50%;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-decoration: none;
}
.social-icons a:hover {
background-color: var(--color-royal);
color: var(--color-white);
transform: scale(1.18);
box-shadow: 0 4px 12px rgba(40, 65, 162, 0.25);
}
/* Row 3: copyright on the left, Terms & Conditions in the middle,
ISO badge on the right */
.footer-row-3 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-base);
color: var(--color-gray);
}
.footer-row-3 p {
margin: 0;
}
.footer-terms a {
color: var(--color-gray);
transition: color 0.2s ease;
}
.footer-terms a:hover {
color: var(--color-accent);
}
.footer-title a:hover {
color: var(--color-accent);
transform: scale(1.05);
}
/* =========================================
NEWSLETTER SUCCESS POPUP
Sitewide dismissible modal card shown after
a successful "Stay Updated" form submission.
========================================= */
.newsletter-popup-overlay {
position: fixed;
inset: 0;
background: rgba(14, 23, 48, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.newsletter-popup-overlay.is-visible {
opacity: 1;
visibility: visible;
}
.newsletter-popup-card {
position: relative;
background: var(--color-white);
border-radius: 18px;
padding: 2.5rem 2.25rem;
max-width: 380px;
width: calc(100% - 2rem);
text-align: center;
box-shadow: var(--shadow-lg);
transform: translateY(16px) scale(0.96);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.newsletter-popup-overlay.is-visible .newsletter-popup-card {
transform: translateY(0) scale(1);
}
.newsletter-popup-icon {
font-size: 2.75rem;
color: var(--color-accent);
margin-bottom: 1rem;
}
.newsletter-popup-card h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-navy);
margin-bottom: 0.6rem;
}
.newsletter-popup-card p {
color: var(--color-gray);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
}
.newsletter-popup-close {
position: absolute;
top: 0.75rem;
right: 0.9rem;
background: none;
border: none;
font-size: 1.4rem;
line-height: 1;
color: var(--color-gray);
cursor: pointer;
transition: color 0.2s ease;
}
.newsletter-popup-close:hover {
color: var(--color-navy);
}
html {
scroll-behavior: smooth;
}
/* =========================================
UNIFIED CTA BANNER
(single source of truth — used by the
homepage, solutions, services, partners
and clients pages so every CTA matches
the "Transform Your Digital Journey" style)
========================================= */
.cta-rounded-box {
background: #f3f6fa;
background-size: 200% auto;
background-position: 0% center;
border-radius: 24px;
padding: 2.75rem 2.5rem 1.5rem;
text-align: center;
max-width: 1280px;
margin: 0 auto;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-md);
transition: background-position 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
transform 0.4s ease,
box-shadow 0.4s ease;
}
.cta-rounded-box:hover {
background-position: 100% center;
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.cta-rounded-box h2 {
font-family: var(--font-main);
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 800;
color: var(--color-white);
margin-bottom: 0.75rem;
line-height: 1.25;
}
.cta-rounded-box p {
font-family: var(--font-main);
color: rgba(255, 255, 255, 0.75);
font-size: 1.05rem;
max-width: 100%;
margin: 0 auto 0.75rem auto;
line-height: 1.6;
}
.cta-button-group {
display: flex;
justify-content: center;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
}
.btn-solid-navy {
display: inline-flex;
align-items: center;
gap: 0.7rem;
background-color: var(--color-white);
color: var(--color-navy);
font-family: var(--font-main);
font-weight: 700;
font-size: 0.95rem;
padding: 0.9rem 2rem;
border-radius: 50px;
text-decoration: none;
border: 3px solid transparent;
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn-solid-navy:hover {
background-color: transparent;
color: var(--color-white);
border-color: white;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
/* =========================================
GLOBAL RESPONSIVE FRAMEWORK
(Mobile nav drawer, fluid grids, spacing)
========================================= */
/* ---- Large desktops: tighten max container a touch ---- */
@media (max-width: 1300px) {
.container { padding: 0 1.75rem; }
}
/* ---- Tablets & small laptops ---- */
@media (max-width: 1024px) {
section { padding: 4.5rem 0; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-5 { grid-template-columns: repeat(3, 1fr); }
.footer-row-1,
.footer-row-2 {
grid-template-columns: 1fr 1fr;
gap: 1.75rem 1.5rem;
}
}
/* ---- Tablets / nav breakpoint ---- */
@media (max-width: 900px) {
.container { padding: 0 1.5rem; }
section { padding: 4rem 0; }
.grid-3 { grid-template-columns: 1fr 1fr; }
.stats-container {
flex-wrap: wrap;
gap: 2rem 1rem;
justify-content: center;
text-align: center;
}
.stat-divider { display: none; }
/* --- Nav Toggle Appears --- */
.nav-toggle { display: flex; }
.nav-container { height: 72px; }
nav#siteNav {
position: fixed;
top: 72px;
left: 0;
width: 100%;
height: calc(100vh - 72px);
background-color: var(--color-white);
overflow-y: auto;
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, visibility 0.3s ease;
z-index: 1050;
border-top: 1px solid var(--color-light);
}
nav#siteNav.nav-open {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.nav-links {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 1rem 1.5rem 2.5rem;
}
.nav-links > li {
border-bottom: 1px solid var(--color-light);
}
.nav-links > li > a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.1rem 0.25rem;
font-size: 1rem;
color: var(--color-navy);
}
.nav-links > li > a.nav-btn {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 60%;
max-width: 240px;
padding: 0.75rem 1.5rem;
margin: 1.25rem auto 0;
border-radius: 20px;
}
/* Bigger tap target on the arrow itself (the part that toggles the
accordion), without disturbing the visual layout — the rest of
the link's label stays tappable as a normal navigation link. */
.dropbtn .nav-icon {
padding: 0.75rem;
margin: -0.75rem -0.5rem -0.75rem 0.25rem;
}
/* The Contact button keeps its own pill shape, sized to its label
and centered in the menu — it must never stretch edge-to-edge
like the plain nav links above it. */
.nav-btn {
display: flex;
justify-content: center;
align-items: center; /* Added to vertically center the text */
text-align: center;
width: 50%; /* Reduced from 85% to make the box smaller */
max-width: 200px; /* Reduced from 320px */
padding: 0.75rem 1.5rem; /* Slightly reduced top/bottom padding */
margin: 1.25rem auto 0; /* Keeps the box centered in the menu */
border-radius: 20px;
}
/* Dropdowns become accordions on mobile */
.dropdown-content {
position: static;
visibility: visible;
opacity: 1;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
display: none;
min-width: 0;
padding: 0 0 0.5rem 1rem;
}
.dropdown.mobile-open .dropdown-content {
display: block;
}
.dropdown-content li a {
color: var(--color-gray) !important;
padding: 0.7rem 0.5rem;
font-size: 0.92rem;
}
/* Nested sub-list (Managed NOC / Managed SOC under Managed Services) */
.dropdown-subitems li a {
padding: 0.6rem 0.5rem 0.6rem 2.75rem;
font-size: 0.85rem;
}
/* Keep the L-connector in the gutter, not over the label */
.dropdown-subitems li a::before {
left: 1.9rem;
}
}
/* ---- Mobile phones ---- */
@media (max-width: 640px) {
.container { padding: 0 1.25rem; }
section { padding: 3.25rem 0; }
.grid-3, .grid-4 {
grid-template-columns: 1fr;
}
.grid-5 { grid-template-columns: repeat(2, 1fr); }
.footer-row-1,
.footer-row-2 {
grid-template-columns: 1fr;
text-align: left;
}
.footer-divider { margin: 2rem 0; }
.footer-social-row { margin-top: 2rem; }
.footer-row-3 {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.banner-container {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.cta-button-group { flex-direction: column; }
.cta-button-group .btn-solid-navy { width: 100%; justify-content: center; }
/* Center every standalone CTA button on mobile — this makes each
button its own centered block instead of following whatever
text-alignment its surrounding paragraph/column happens to use.
More specific selectors (like the two directly above, for
buttons inside a .cta-button-group) still win over this. */
.btn,
.btn-solid-navy,
.btn-primary,
.btn-secondary,
.btn-white,
.btn-accent {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.logo img { height: 20px; }
}
@media (max-width: 400px) {
.container { padding: 0 1rem; }
}