/* ==========================================================================
NEXUS STYLESHEET (formatted)
========================================================================== */
/* Variables */
:root {
--nexus-black: #03070d;
--nexus-dark: #07101a;
--nexus-panel: #0d1b29;
--nexus-blue: #00a8ff;
--nexus-blue-light: #36c5ff;
--nexus-cyan: #00e5ff;
--nexus-white: #fff;
--nexus-text: #d8e4ee;
--nexus-muted: #8fa5b8;
--nexus-border: rgba(0, 168, 255, 0.24);
--transition-standard: all 0.25s ease;
}
/* 2. Base */
html {
scroll-behavior: smooth;
}
body {
min-height: 100%;
margin: 0;
background: radial-gradient(circle at 15% 15%, rgba(0, 168, 255, 0.06), transparent 30%), radial-gradient(circle at 85% 65%, rgba(0, 229, 255, 0.04), transparent 30%), var(--nexus-black);
color: var(--nexus-text);
font-family: Inter, "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.7;
}
a {
color: var(--nexus-blue-light);
text-decoration: none;
transition: var(--transition-standard);
}
a:hover {
    color: var(--nexus-cyan);
}

img {
max-width: 100%;
}
/* 3. Header and Navigation */
.site-header {
position: relative;
z-index: 1000;
}
.nexus-navbar {
min-height: 82px;
background: rgba(3, 7, 13, 0.94);
border-bottom: 1px solid rgba(0, 168, 255, 0.2);
backdrop-filter: blur(14px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.nexus-brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
max-height: 85px;
width: auto;
object-fit: contain;
mix-blend-mode: screen;
filter: drop-shadow(0 0 8px rgba(0, 168, 255, 0.55));
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-name {
color: #fff;
font-size: 17px;
font-weight: 800;
letter-spacing: 1.8px;
}
.brand-subtitle {
margin-top: 5px;
color: var(--nexus-blue-light);
font-size: 9px;
font-weight: 700;
letter-spacing: 4px;
}
.navbar-dark .navbar-nav .nav-link {
margin: 0 8px;
color: #bccbd7;
font-size: 14px;
font-weight: 600;
}
/* 4. Buttons */
.btn {
border-radius: 5px;
font-weight: 700;
transition: var(--transition-standard);
}
.btn-cyber {
padding: 12px 24px;
border: 1px solid var(--nexus-blue);
background: linear-gradient(135deg, #007ec4, #00a8ff);
color: #fff;
box-shadow: 0 0 16px rgba(0, 168, 255, 0.2);
}
.btn-cyber:hover {
    border-color: var(--nexus-cyan);
    background: linear-gradient(135deg, #0098e8, #00c8ff);
    color: #fff;
    transform: translateY(-2px);
}

.btn-outline-cyber {
padding: 12px 24px;
border: 1px solid rgba(0, 168, 255, 0.55);
background: rgba(0, 168, 255, 0.03);
color: var(--nexus-blue-light);
}
.btn-outline-cyber:hover {
    background: rgba(0, 168, 255, 0.1);
    color: #fff;
}

.btn-nav-contact {
padding: 9px 18px;
border: 1px solid rgba(0, 168, 255, 0.7);
background: rgba(0, 168, 255, 0.08);
color: var(--nexus-blue-light);
}
/* 5. Hero Section */
.hero-section {
position: relative;
min-height: 720px;
overflow: hidden;
background: linear-gradient( 90deg, rgba(3, 7, 13, 0.99) 0%, rgba(4, 12, 22, 0.96) 42%, rgba(4, 12, 22, 0.7) 70%, rgba(3, 7, 13, 0.65) 100% ), url("../images/banner.jpg") center / cover no-repeat;
}
/* Subtle grid pattern */
.hero-section:before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 168, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 255, 0.025) 1px, transparent 1px);
    background-size: 45px 45px;
    content: "";
}

.hero-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at 72% 45%, rgba(0, 168, 255, 0.1), transparent 32%);
}
.hero-content {
position: relative;
z-index: 2;
}
.min-vh-75 {
min-height: 720px;
}
.hero-badge {
display: inline-flex;
margin-bottom: 24px;
padding: 7px 15px;
border: 1px solid rgba(0, 168, 255, 0.35);
border-radius: 3px;
background: rgba(0, 168, 255, 0.06);
color: var(--nexus-blue-light);
font-size: 12px;
font-weight: 700;
letter-spacing: 2.3px;
}
.hero-title {
max-width: 900px;
margin-bottom: 25px;
color: #fff;
font-size: clamp(3rem, 6vw, 5.7rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -3px;
}
.text-cyber-blue {
display: block;
color: var(--nexus-blue-light);
text-shadow: 0 0 25px rgba(0, 168, 255, 0.2);
}
.hero-description {
max-width: 720px;
margin-bottom: 36px;
color: #afc0cd;
font-size: 19px;
line-height: 1.8;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* 6. Sections and Typography */
.section-padding {
padding: 100px 0;
}
.section-label {
margin-bottom: 12px;
color: var(--nexus-blue-light);
font-size: 12px;
font-weight: 800;
letter-spacing: 2.5px;
}
.section-title {
margin-bottom: 25px;
color: #fff;
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 750;
line-height: 1.15;
letter-spacing: -1.5px;
}
.section-text,
.section-subtitle {
color: var(--nexus-muted);
font-size: 17px;
line-height: 1.9;
}
.section-heading {
max-width: 850px;
margin: 0 auto 55px;
}
.intro-section,
.about-preview-section {
border-top: 1px solid rgba(0, 168, 255, 0.08);
background: linear-gradient(180deg, #050b12, #07111b);
}
/* 7. Panels and Cards */
.cyber-panel,
.glow-card,
.service-card {
border: 1px solid var(--nexus-border);
border-radius: 8px;
background: linear-gradient(145deg, rgba(17, 37, 56, 0.78), rgba(5, 14, 23, 0.94));
box-shadow: 0 0 30px rgba(0, 168, 255, 0.1);
}
.cyber-panel {
padding: 35px;
}
.cyber-panel-line {
width: 70px;
height: 3px;
margin-bottom: 34px;
background: linear-gradient(to right, var(--nexus-blue), var(--nexus-cyan));
}
/* Numbered stats */
.cyber-stat {
display: flex;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cyber-stat-number {
flex: 0 0 46px;
height: 46px;
border: 1px solid rgba(0, 168, 255, 0.3);
border-radius: 4px;
background: rgba(0, 168, 255, 0.06);
color: var(--nexus-blue-light);
font-size: 13px;
font-weight: 800;
line-height: 44px;
text-align: center;
}
.cyber-stat h3,
.about-value h3 {
color: #fff;
font-size: 17px;
}
.cyber-stat p,
.about-value p {
margin: 0;
color: var(--nexus-muted);
font-size: 14px;
}
/* 8. Services */
.service-card {
position: relative;
height: 100%;
padding: 0;
overflow: hidden;
border: 1px solid rgba(0, 168, 255, 0.24);
border-radius: 9px;
background: linear-gradient( 145deg, rgba(13, 31, 47, 0.98), rgba(4, 13, 22, 0.99) );
box-shadow: 0 8px 35px rgba(0, 0, 0, 0.20);
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 183, 255, 0.65);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), 0 0 28px rgba(0, 168, 255, 0.12);
}

/* SERVICE IMAGE */
.service-image-wrapper {
position: relative;
width: 100%;
height: 190px;
overflow: hidden;
border-bottom: 1px solid rgba(0, 168, 255, 0.24);
background: #06111b;
}
.service-card-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.45s ease, filter 0.45s ease;
}
.service-image-wrapper::after {
position: absolute;
inset: 0;
background: linear-gradient( to bottom, transparent 45%, rgba(4, 13, 22, 0.15) 65%, rgba(4, 13, 22, 0.72) 100% );
content: "";
pointer-events: none;
}
.service-card:hover .service-card-image {
transform: scale(1.045);
}
/* SERVICE CONTENT */
.service-card-content {
padding: 27px 30px 34px;
}
.service-number {
margin-bottom: 15px;
color: #00a8ff;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.service-title {
min-height: 58px;
margin-bottom: 17px;
color: #ffffff;
font-size: 22px;
font-weight: 750;
line-height: 1.3;
}
.service-description {
margin: 0;
color: #8db8d4;
font-size: 14px;
line-height: 1.85;
}
.service-card-line {
position: absolute;
right: 28px;
bottom: 0;
left: 28px;
height: 2px;
background: linear-gradient( 90deg, transparent, #00a8ff, #00e5ff, transparent );
opacity: 0;
transition: opacity 0.28s ease;
}
.service-card:hover .service-card-line {
opacity: 1;
}
/* RESPONSIVE SERVICE IMAGE SIZE */
@media (max-width: 991.98px) {
.service-image-wrapper {
    height: 210px;
}

}
@media (max-width: 767.98px) {
.service-image-wrapper {
    height: 230px;
}

}
@media (max-width: 480px) {
.service-image-wrapper {
    height: 190px;
}

.service-card-content {
    padding: 24px;
}

}
/* 9. Capabilities (glow card) */
.glow-card-header {
padding: 19px 25px;
border-bottom: 1px solid rgba(0, 168, 255, 0.2);
background: rgba(0, 168, 255, 0.045);
color: var(--nexus-blue-light);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.glow-card-body {
padding: 20px 26px 28px;
}
.capability-item {
display: flex;
padding: 16px 0;
align-items: center;
gap: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: #c8d5df;
}
.capability-icon {
width: 35px;
color: var(--nexus-blue-light);
font-size: 11px;
font-weight: 800;
}
/* 10. Inner Page Header and About */
.page-header {
padding: 110px 0 100px;
border-bottom: 1px solid rgba(0, 168, 255, 0.13);
background: linear-gradient(105deg, #03070d, #061420);
}
.page-title {
margin-bottom: 16px;
color: #fff;
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 800;
}
.page-header-text {
color: var(--nexus-muted);
font-size: 18px;
}
.about-value {
padding: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.about-dark-section {
background: #050b12;
}
/* 11. Footer */
.site-footer {
padding-top: 70px;
border-top: 1px solid rgba(0, 168, 255, 0.14);
background: #02060a;
}
.footer-brand {
color: #fff;
font-size: 22px;
font-weight: 800;
letter-spacing: 2px;
}
.footer-brand-subtitle {
margin-bottom: 20px;
color: var(--nexus-blue-light);
font-size: 10px;
font-weight: 700;
letter-spacing: 5px;
}
.footer-description,
.footer-contact,
.footer-links a {
color: #7f95a7;
font-size: 14px;
}
.footer-heading {
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.footer-links {
margin: 0;
padding: 0;
list-style: none;
}
.footer-links li {
    margin-bottom: 9px;
}

.footer-bottom {
display: flex;
margin-top: 55px;
padding: 24px 0;
justify-content: space-between;
gap: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.055);
color: #526574;
font-size: 12px;
}
/* 12. Responsive */
/* Tablet and below */
@media (max-width: 991.98px) {
.navbar-collapse {
margin-top: 15px;
padding: 20px;
background: rgba(5, 13, 22, 0.98);
}
.hero-section,
.min-vh-75 {
    min-height: 620px;
}

.section-padding {
    padding: 80px 0;
}

}
/* Mobile */
@media (max-width: 767.98px) {
.hero-section,
.min-vh-75 {
min-height: 580px;
}
.hero-content {
    padding: 65px 0;
}

.hero-title {
    font-size: 3rem;
}

.hero-actions {
    flex-direction: column;
}

    .hero-actions .btn {
        width: 100%;
    }

.section-padding {
    padding: 65px 0;
}

.footer-bottom {
    flex-direction: column;
}

}
/* Small mobile */
@media (max-width: 480px) {
.brand-logo {
max-height: 55px;
width: auto;
}
.brand-name {
    font-size: 14px;
}

.brand-subtitle {
    font-size: 8px;
}

.hero-title {
    font-size: 2.6rem;
}

.section-title {
    font-size: 2rem;
}

}
/* UNDERSTAND / ARCHITECT / DELIVER */
.cyber-stat {
position: relative;
display: flex;
align-items: center;
gap: 26px;
padding: 24px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.cyber-stat:last-child {
    border-bottom: none;
}

.cyber-stat-image-wrapper {
position: relative;
flex: 0 0 118px;
width: 118px;
height: 118px;
overflow: hidden;
border: 1px solid rgba(0, 168, 255, 0.38);
border-radius: 10px;
background: linear-gradient( 145deg, rgba(0, 168, 255, 0.10), rgba(3, 12, 20, 0.95) );
box-shadow: 0 0 22px rgba(0, 168, 255, 0.10);
}
.cyber-stat-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cyber-stat-content h3 {
margin: 0 0 8px;
color: #ffffff;
font-size: 21px;
font-weight: 750;
}
.cyber-stat-content p {
margin: 0;
color: var(--nexus-muted);
font-size: 14px;
line-height: 1.75;
}
.capability-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.capability-icon {
width: 48px;
height: 48px;
object-fit: contain;
filter: drop-shadow(0 0 6px #00f0ff);
}
/* B11: Correct inherited Bootstrap gutters that caused 12px mobile overflow. */
@media (max-width: 767px) {
.hero-section .container.hero-content { padding-left: 12px; padding-right: 12px; }
.intro-section .row.g-5,
.about-preview-section .row.g-5 { --bs-gutter-x: 1.5rem; }
}
/* 13. TEAM / LEADERSHIP CARDS */
.capabilities-list li {
color: #d8e4ee;
font-size: 14.5px;
}

/* 14. EXTENDED FOOTER STYLING (Idea 01) */

/* Social Media Hover Icons */
.footer-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 4px;
background: rgba(0, 168, 255, 0.05);
color: var(--nexus-blue-light);
border: 1px solid rgba(0, 168, 255, 0.2);
transition: var(--transition-standard);
}

.footer-socials a:hover {
background: rgba(0, 168, 255, 0.15);
color: var(--nexus-cyan);
border-color: var(--nexus-cyan);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 229, 255, 0.2);
}

/* The Trust Badge */
.footer-trust-badge {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 18px;
border: 1px solid rgba(0, 168, 255, 0.3);
border-radius: 6px;
background: linear-gradient(145deg, rgba(13, 31, 47, 0.8), rgba(4, 13, 22, 0.95));
box-shadow: 0 4px 15px rgba(0, 168, 255, 0.1);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}

.footer-trust-badge svg {
width: 26px;
height: 26px;
color: var(--nexus-cyan);
filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4));
}

/* Hover effect for all vertical text links */
.footer-links li a {
display: inline-block;
transition: var(--transition-standard);
}

.footer-links li a:hover {
color: var(--nexus-cyan);
padding-left: 6px; /* Creates a slick indent effect on hover */
}

/* Specific Contact Styling */
.footer-contact-list a {
color: #7f95a7;
transition: var(--transition-standard);
}

.footer-contact-list a:hover {
color: var(--nexus-cyan);
}

.footer-contact-list svg {
color: var(--nexus-blue);
}

/* Active "Online" Dot with pulse animation */
.footer-hours {
display: flex;
align-items: flex-start;
gap: 12px;
color: #7f95a7;
font-size: 13px;
line-height: 1.6;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.status-dot {
display: inline-block;
flex-shrink: 0;
width: 9px;
height: 9px;
margin-top: 5px;
border-radius: 50%;
background: #00e5ff; /* Cyan active dot */
box-shadow: 0 0 10px #00e5ff;
animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}