/* ==========================================================================
Nice Infotech — Modern Theme Layer
--------------------------------------------------------------------------
Additive design layer loaded AFTER style.css / header.css / footer.css /
responsive.css. It only restyles (color, radius, shadow, spacing, motion)
— it never changes markup, JS hooks, or interaction logic. Selectors
intentionally mirror the base stylesheets so they win on source order
without needing !important, except where noted (overriding legacy inline
styles in the footer markup).
Scope of this pass: Navbar (header-style-three, sticky header, mobile
menu) + Footer. Other components are restyled in later passes.
========================================================================== */
/* Visually hidden but present in the DOM/accessibility tree — used for the
hero's real (see index.html), which sits outside the rotating
carousel so it can't be duplicated by owl-carousel's slide cloning. */
.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;
}
.featured-services-carousel .client-one_image-box-two {
background: #f1f8f3;
padding: 16px 12px 18px;
box-shadow: 0 2px 8px rgba(31, 95, 60, 0.06);
transition: transform 300ms ease, box-shadow 300ms ease;
}
.featured-services-carousel .client-one_image-box-two:hover {
transform: translateY(-5px);
box-shadow: 0 8px 18px rgba(31, 95, 60, 0.14);
}
.featured-services-carousel .client-one_image-box-two a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}
.featured-services-carousel .client-one_image-box-two a::after {
content: "";
display: block;
width: 28px;
height: 3px;
margin: 10px auto 0;
border-radius: 3px;
background: #1f5f3c;
transition: width 300ms ease;
}
.featured-services-carousel .client-one_image-box-two:hover a::after {
width: 46px;
}
.featured-services-carousel .client-one_image-box-two img {
width: 64px !important;
height: 64px;
padding: 10px;
margin-bottom: 2px;
border-radius: 50%;
background: #dcefe2;
object-fit: contain;
}
.featured-services-carousel .client-one_image-box-two span {
font-size: 15px;
font-weight: 700;
color: #1f5f3c;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.detail-services-carousel .client-one_image-box-two a::before {
display: block;
order: 2;
margin-top: 10px;
font-size: 15px;
font-weight: 700;
color: #1f5f3c;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.detail-services-carousel .client-one_image-box-two a::after {
order: 3;
}
.detail-services-carousel a:has(img[src*="service-8-1"])::before {
content: "Data Center";
}
.detail-services-carousel a:has(img[src*="service-9-1"])::before {
content: "Command & Control Canter";
}
.detail-services-carousel a:has(img[src*="service-10-1"])::before {
content: "Desktop Virtualization";
}
.detail-services-carousel a:has(img[src*="service-11-1"])::before {
content: "Enterprise Network";
}
.detail-services-carousel a:has(img[src*="service-12-1"])::before {
content: "Software Development";
}
.detail-services-carousel a:has(img[src*="service-13-1"])::before {
content: "Office Automation";
}
:root {
--nt-radius-sm: 8px;
--nt-radius-md: 14px;
--nt-radius-lg: 20px;
--nt-radius-pill: 999px;
--nt-shadow-sm: 0 2px 10px rgba(3, 20, 12, 0.06);
--nt-shadow-md: 0 14px 34px rgba(3, 20, 12, 0.12);
--nt-shadow-lg: 0 24px 60px rgba(3, 20, 12, 0.16);
--nt-border: rgba(3, 20, 12, 0.08);
--nt-surface-alt: #f5f8f6;
--nt-ink-muted: #5c6b64;
--nt-ease: cubic-bezier(0.16, 1, 0.3, 1);
/* style.css's own "gradient" for these ribbons/overlays
(linear-gradient(var(--color-two), var(--color-seven))) is a no-op:
both variables resolve to the same rgb(29,113,67), so it always
rendered as flat solid green. This is a real two-tone gradient. */
--nt-gradient-brand: linear-gradient(135deg, #0da457 0%, #023d20 100%);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Accessible focus rings (site-wide, low risk / additive only) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.theme-btn:focus-visible,
.mobile-nav-toggler:focus-visible,
.navbar-toggler:focus-visible {
outline: 2px solid var(--main-color);
outline-offset: 3px;
border-radius: 4px;
}
/* --------------------------------------------------------------------------
Navbar — header-style-three
-------------------------------------------------------------------------- */
.header-style-three {
background-color: #ffffff;
box-shadow: none;
border-bottom: 1px solid var(--nt-border);
}
.header-style-three .header-upper {
padding: 4px 0;
}
.header-style-three .header-upper .inner-container {
min-height: 82px;
}
.header-style-three .logo img {
transition: transform 400ms var(--nt-ease);
}
.header-style-three .logo:hover img {
transform: scale(1.03);
}
/* Nav links: replace the underline sweep with a soft pill hover/active state */
.header-style-three .main-menu .navigation {
display: flex;
align-items: center;
}
.header-style-three .main-menu .navigation > li {
margin-right: 4px;
}
.header-style-three .main-menu .navigation > li > a {
padding: 12px 18px;
border-radius: var(--nt-radius-pill);
font-family: var(--font-family-Inter);
font-weight: 500;
letter-spacing: -0.01em;
transition: color 250ms var(--nt-ease), background-color 250ms var(--nt-ease);
}
.header-style-three .main-menu .navigation > li > a:before {
display: none;
}
/* header.css zeroes out the last nav item's right padding
(.main-header .main-menu .navigation > li:last-child > a { padding-right:0 }),
sized for the old underline hover. With the pill background above, that
left "Contact" with no padding on one side, so its hover pill looked cut
off instead of matching the others. Restore it at matching specificity. */
.main-header .main-menu .navigation > li:last-child > a {
padding-right: 18px;
}
.header-style-three .main-menu .navigation > li:hover > a,
.header-style-three .main-menu .navigation > li.current > a {
color: var(--main-color);
background-color: rgba(var(--main-color-rgb), 0.08);
}
.header-style-three .main-menu .navigation > li.dropdown > a:after {
transition: transform 250ms var(--nt-ease);
}
.header-style-three .main-menu .navigation > li.dropdown:hover > a:after {
transform: rotate(180deg);
}
/* script.js clones the nav into .sticky-header at runtime (see js/script.js
line ~91). header.css has a pre-existing, more specific selector for that
context (.main-header .sticky-header .main-menu .navigation > li > a,
4 classes) that otherwise beats the rule above (3 classes) regardless of
stylesheet order, collapsing the link spacing back to `padding:22px 0px`
once the header goes sticky. Mirror it here at matching specificity. */
.main-header .sticky-header .main-menu .navigation > li > a {
padding: 10px 16px;
border-radius: var(--nt-radius-pill);
font-family: var(--font-family-Inter);
font-weight: 500;
letter-spacing: -0.01em;
transition: color 250ms var(--nt-ease), background-color 250ms var(--nt-ease);
}
/* Header social icons as ghost icon-buttons */
.header-social_box-two {
display: flex;
align-items: center;
gap: 8px;
margin-left: 22px;
padding-right: 0;
border-right: none;
}
.header-social_box-two li {
margin-left: 0;
}
.header-social_box-two li a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: var(--nt-surface-alt);
transition: all 250ms var(--nt-ease);
}
.header-social_box-two li a:hover {
background-color: var(--main-color);
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: var(--nt-shadow-sm);
}
/* Mobile nav toggler (custom slide-in menu button).
header.css hides it by default (display:none) and responsive.css only
flips it to display:block at max-width:1023px — that's the breakpoint
where the desktop nav gives way to the hamburger. Scope the cosmetic
flex-centering to the same breakpoint so it doesn't leak onto desktop. */
@media only screen and (max-width: 1023px) {
.main-header .mobile-nav-toggler {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
margin-left: 14px;
border-radius: 50%;
background-color: var(--nt-surface-alt);
transition: all 250ms var(--nt-ease);
}
.main-header .mobile-nav-toggler:hover {
background-color: rgba(var(--main-color-rgb), 0.1);
}
}
/* Bootstrap navbar-toggler (in-flow collapse, mid breakpoints) */
.main-header .navbar-toggler {
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-sm);
padding: 8px 10px;
transition: border-color 250ms var(--nt-ease);
}
.main-header .navbar-toggler:hover {
border-color: var(--main-color);
}
/* --------------------------------------------------------------------------
Sticky header — frosted glass on scroll
-------------------------------------------------------------------------- */
.main-header .sticky-header {
background-color: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow: var(--nt-shadow-md);
}
/* --------------------------------------------------------------------------
Mobile slide-in menu
-------------------------------------------------------------------------- */
.mobile-menu .menu-backdrop {
background: rgba(6, 14, 10, 0.6);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.mobile-menu .menu-box {
border-radius: 0 var(--nt-radius-lg) var(--nt-radius-lg) 0;
box-shadow: var(--nt-shadow-lg);
}
.mobile-menu .nav-logo {
padding: 28px 0 18px;
}
.mobile-menu .close-btn {
top: 18px;
right: 18px;
width: 38px;
height: 38px;
line-height: 38px;
border-radius: 50%;
background-color: var(--nt-surface-alt);
transition: transform 300ms var(--nt-ease), background-color 250ms var(--nt-ease), opacity 250ms ease;
}
.mobile-menu .close-btn:hover {
opacity: 1;
background-color: rgba(var(--main-color-rgb), 0.12);
transform: rotate(90deg);
}
.mobile-menu .navigation li {
border-bottom: 1px solid rgba(3, 20, 12, 0.06);
transition: background-color 250ms var(--nt-ease);
}
.mobile-menu .navigation li > a {
transition: color 250ms var(--nt-ease), padding-left 250ms var(--nt-ease);
}
.mobile-menu .navigation li:hover > a,
.mobile-menu .navigation li.current > a {
color: var(--main-color);
padding-left: 6px;
}
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.main-footer {
position: relative;
padding-top: 110px;
}
.main-footer:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-two), var(--color-seven));
}
.main-footer .footer-widget h4:before {
border-radius: var(--nt-radius-pill);
}
.main-footer .logo-widget .text {
line-height: 1.8em;
}
/* Modern pill CTA button */
.main-footer .logo-widget .about-btn {
padding: 12px 28px;
border-radius: var(--nt-radius-pill);
box-shadow: var(--nt-shadow-sm);
transition: transform 250ms var(--nt-ease), box-shadow 250ms var(--nt-ease);
}
.main-footer .logo-widget .about-btn:hover {
transform: translateY(-2px);
box-shadow: var(--nt-shadow-md);
}
/* Footer "links" list — overrides legacy inline style="color:gray" in markup */
.main-footer .newsletter-widget .contact-list li {
margin-bottom: 12px !important;
}
.main-footer .newsletter-widget .contact-list li a {
color: var(--color-twentyseven) !important;
transition: color 250ms var(--nt-ease), padding-left 250ms var(--nt-ease);
display: inline-block;
}
.main-footer .newsletter-widget .contact-list li a:hover {
color: #ffffff !important;
padding-left: 4px;
}
.main-footer .newsletter-widget .contact-list li i {
transition: transform 250ms var(--nt-ease);
color: var(--color-two);
}
.main-footer .newsletter-widget .contact-list li:hover i {
transform: translateX(2px);
}
/* Footer social icons — same ghost icon-button treatment as navbar */
.newsletter-widget .social-box li a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.06);
opacity: 1;
color: rgba(255, 255, 255, 0.6);
}
.newsletter-widget .social-box li a:hover {
background-color: var(--main-color);
color: #ffffff;
transform: translateY(-2px);
}
/* Footer gallery thumbnails. The 6 source photos are all different
aspect ratios (control room, dashboard screenshot, server racks...), and
footer.css lays them out as unequal-height float:left boxes -- floats
with mismatched heights wrap unevenly, which staggers the grid. Grid +
a fixed image aspect-ratio fixes it without touching markup. */
.main-footer .instagram-widget .images-outer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 0;
}
.main-footer .instagram-widget .image-box {
float: none;
width: auto;
padding: 0;
margin-bottom: 0;
overflow: hidden;
border-radius: var(--nt-radius-sm);
}
.main-footer .instagram-widget .image-box img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.main-footer .instagram-widget .image-box img:hover {
opacity: 1;
transform: scale(1.08);
}
.main-footer .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.main-footer .footer-bottom .copyright a {
transition: color 250ms var(--nt-ease);
}
.main-footer .footer-bottom .copyright a:hover {
color: var(--main-color);
}
/* --------------------------------------------------------------------------
Bug fix (reported): Case Studies carousel progress track
-------------------------------------------------------------------------- */
/* .case-one .owl-dots (the light track) and .owl-dot (the dark green active
segment) were built with two uncoordinated `position:relative; top:…`
offsets — the dot's `top:-11px` only exists to cancel out inline-block's
baseline alignment, which varies by browser/font metrics. Flexbox removes
the baseline dependency so the segment can't drift off the track's line. */
.case-one .owl-dots {
display: flex;
align-items: center;
justify-content: center;
}
.case-one .owl-dots .owl-dot {
top: 0;
}
/* --------------------------------------------------------------------------
Hero (slider-two) — floating stat cards fill the empty right-side space
-------------------------------------------------------------------------- */
/* .slider-two_image-layer is a full-bleed background image
(images/main-slider/banner-1/2/3.png) that doesn't exist on disk (404),
so the hero's right half renders as blank white. Rather than depend on
photography that isn't there, surface real figures already stated in the
page copy (see .counter-two further down: 2000 / 30+ / 40+ / 50+). Only
shown on wide desktop viewports — there's no spare room for it below that,
and the rest of the hero is unaffected either way since this is an
absolutely positioned sibling of the carousel, not part of its layout. */
.slider-two_stats {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
pointer-events: none;
}
.slider-two_stats-card {
position: absolute;
display: flex;
align-items: center;
gap: 14px;
max-width: 240px;
padding: 16px 22px 16px 16px;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow-lg);
opacity: 0;
animation: nt-stats-fade-in 700ms var(--nt-ease) forwards, nt-float 6s ease-in-out infinite;
}
.slider-two_stats-card-one {
top: 13%;
right: 10%;
animation-delay: 300ms, 300ms;
}
.slider-two_stats-card-two {
top: 43%;
right: 21%;
animation-delay: 550ms, 550ms;
}
.slider-two_stats-card-three {
top: 71%;
right: 9%;
animation-delay: 800ms, 800ms;
}
.slider-two_stats-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 50%;
color: var(--main-color);
background-color: rgba(var(--main-color-rgb), 0.1);
}
.slider-two_stats-icon svg {
width: 22px;
height: 22px;
}
.slider-two_stats-text {
display: flex;
flex-direction: column;
font-family: var(--font-family-Inter);
font-size: 13px;
line-height: 1.45;
color: var(--nt-ink-muted);
white-space: nowrap;
}
.slider-two_stats-text strong {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: #0b1210;
}
@keyframes nt-stats-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes nt-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Hide below 1200px — matches the breakpoint responsive.css already uses
for this tier elsewhere. Below it there isn't reliable clearance between
the heading text and the cards. */
@media (max-width: 1199px) {
.slider-two_stats {
display: none;
}
}
/* --------------------------------------------------------------------------
Case Studies cards — rounded corners + hover shadow only
-------------------------------------------------------------------------- */
.case-block_inner {
border-radius: var(--nt-radius-lg);
overflow: hidden;
transition: box-shadow 300ms var(--nt-ease);
}
.case-block_inner:hover {
box-shadow: 0 16px 36px -4px rgba(var(--main-color-rgb), 0.22);
}
/* Project-detail image galleries (.case-one.project-gallery): future photos
dropped in won't all share the current image's 4576x2576 ratio, so force
every slide to the same crop instead of letting each slide's height
follow its own image -- keeps the carousel from jumping in height as it
cycles and keeps every slide visually consistent regardless of the
source photo's native size. Scoped to .project-gallery only, so the
homepage's Our Case Studies carousel (same base classes) is untouched. */
.project-gallery .case-block_image img {
aspect-ratio: 16 / 9;
}
/* Address -> light pill badge. Icon re-centered with transform instead of a
fixed `top` offset, so it stays aligned regardless of the pill's height. */
.case-block_location {
display: inline-block;
padding: 6px 16px 6px 32px;
border-radius: var(--nt-radius-pill);
background-color: rgba(var(--main-color-rgb), 0.08);
font-size: 14px;
}
.case-block_location:before {
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
}
/* --------------------------------------------------------------------------
Page Title banner — shared hero used by services.html and every other
interior page (about/contact/project/project-detail-*). Kept restrained:
a richer duotone wash instead of a flat single-color overlay, and a fixed
contrast bug (see below), not a redesign.
-------------------------------------------------------------------------- */
.page-title {
padding: 240px 0 110px;
}
.page-title:before {
opacity: 0.84;
background: linear-gradient(160deg, var(--main-color) 0%, #04140c 100%);
}
.page-title h2 {
font-family: var(--font-family-Inter);
font-weight: 800;
letter-spacing: -0.02em;
}
.page-title .bread-crumb li {
font-family: var(--font-family-Inter);
opacity: 0.8;
}
/* Original hover color was var(--main-color) — the same green as the
overlay itself, so a hovered breadcrumb link nearly disappeared against
its own background. Hover to white instead for real contrast. */
.page-title .bread-crumb li a:hover {
color: #ffffff;
opacity: 1;
}
/* --------------------------------------------------------------------------
Services grid (service-two) — rounded corners + hover shadow, same
restrained treatment as the Case Studies cards. The existing reveal
animation (icon+title ribbon -> full description on hover) is untouched.
-------------------------------------------------------------------------- */
.service-block_two-inner {
/* border-radius: var(--nt-radius-lg); */
overflow: hidden;
box-shadow: var(--nt-shadow-sm);
transition: transform 350ms var(--nt-ease), box-shadow 350ms var(--nt-ease);
}
.service-block_two-inner:hover {
transform: translateY(-6px);
box-shadow: 0 16px 36px -4px rgba(var(--main-color-rgb), 0.22);
}
.service-block_two-icon {
border-width: 2px;
box-shadow: var(--nt-shadow-sm);
}
/* Resting ribbon and hover overlay were both using the broken flat
"gradient" described above — swap in the real one. */
.service-block_two-overlay:before,
.service-block_two-overlay-two:before {
background: var(--nt-gradient-brand);
}
/* --------------------------------------------------------------------------
Projects grid (project.html) — same restrained treatment: rounded
corners + soft brand-tinted shadow on hover. The MixItUp filter/sort
behavior and the existing content-slide-out / overlay-reveal hover
animation are untouched.
-------------------------------------------------------------------------- */
.project_one-inner {
/* border-radius: var(--nt-radius-lg); */
overflow: hidden;
transition: box-shadow 300ms var(--nt-ease), border-color 300ms ease;
}
.project_one-inner:hover {
box-shadow: 0 16px 36px -4px rgba(var(--main-color-rgb), 0.22);
}
/* Resting ribbon (was flat var(--main-color)) and the hover overlay (was
the same broken flat "gradient" as the service cards) both get the real
brand gradient. */
.project_one-content:before {
background: var(--nt-gradient-brand);
}
.project_one-overlay:before {
background: var(--nt-gradient-brand);
}
/* --------------------------------------------------------------------------
SEO: heading-tag fixes
-------------------------------------------------------------------------- */
/* global.css sizes headings purely by tag name (h1=72px/700, h2=45px/600,
h3=36px/600...), so retagging an element for correct SEO structure (see
the corresponding HTML changes) needs its old tag's sizing replicated
here to avoid a visual jump. */
/* Homepage hero: only the first carousel slide keeps a real ; slides
2-3 are now
(identical look, avoids 3x
duplicate
on one page from having all 3 slides in the DOM at once). */
.slider-two_heading {
font-size: var(--font-72);
line-height: 80px;
}
/* Interior page banners (about/services/project/contact): .page-title now
uses instead of , since every page needs exactly one real
and these pages had none. */
.page-title h1 {
font-size: var(--font-45);
line-height: 55px;
font-weight: 800;
color: var(--white-color);
text-transform: capitalize;
font-family: var(--font-family-Inter);
letter-spacing: -0.02em;
}
/* Project-detail pages: the specific project title (was a generic in
.lower-content) becomes the page's instead — it's unique and
keyword-rich per page, unlike the page-title banner text ("Project
Detail"), which is identical across all 8 pages and deliberately stays
an rather than being promoted. */
.projects-detail .lower-content h1 {
position: relative;
display: block;
font-size: var(--font-36);
line-height: 1.3em;
font-weight: 700;
margin-bottom: var(--margin-bottom-15);
}
/* Homepage "Why choose Us" tabs (Mission / Awards / Tech Partners): justify
the body copy so both edges align, matching the clean rectangular image
panel beside it. */
.choose-one_text {
text-align: justify;
}
/* Homepage "About" intro paragraph — same justified treatment. */
.about-two_text, .sec-title_text {
text-align: justify;
}
/* .case-one's base 110px top padding (style.css) is sized for sitting
right after the hero on the homepage; on project-detail pages it follows
the Projects Detail section directly, so the gap reads as too much
empty space. */
.project-gallery {
padding-top: 40px;
}
/* Long "Category" values in the project-detail info list (e.g. "Integrated
Command and Control Center") wrap to 2 lines at style.css's default
18px -- shrink just this value so it fits on one line like the shorter
ones (Customer, Start Date, End Date) instead. */
.projects-detail .info-column .list li span.value-inline {
font-size: 15px;
white-space: nowrap;
}
/* Project-detail hero image — rounded corners, matching the rounded
treatment used everywhere else on the site (case/service/project cards). */
.projects-detail .image-column .image {
overflow: hidden;
border-radius: 10px;
}