:root { --font-body: 'Poppins', "Open Sans", Helvetica, Arial, sans-serif; --font-heading: 'Poppins', "Open Sans", Helvetica, Arial, sans-serif; }
html { font-size: 16px; }
body { font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #1b2a3a; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.1px; margin-top: 26px; color: #19496d; }
h1 { font-size: 36px; line-height: 1.25; }
h2 { font-size: 28px; line-height: 1.3; }
h3 { font-size: 22px; line-height: 1.35; }
h4 { font-size: 18px; line-height: 1.4; }
h5 { font-size: 16px; line-height: 1.45; }
h6 { font-size: 14px; line-height: 1.5; }
a, a:visited {
	color: #f35f37;
	text-decoration: none;
}
a:hover, a:focus {
	color: #f35f37;
	text-decoration: none;
}
p { font-size: 16px; }
blockquote {
	font-style: italic;
	font-family: Georgia, serif;
	color: #999;
	margin: 30px 0;
}
label {
	color: #777;
}

/* Hero text */
.herotxt {
    background: linear-gradient(135deg, #ff6a56 0%, #f35f37 45%, #0686b3 100%);
    color: #fff;
    box-shadow: inset 0 -4px 10px rgba(0,0,0,.12);
    position: relative;
}
.herotxt::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: radial-gradient(80% 140% at 50% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.herotxt p {
    font-size: 16px; /* smaller paragraph size for compact banner */
    margin-bottom: 0;
}
.herotxt span {
    display: block;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    margin-bottom: 8px;
}
.herotxt .btn-download {
    text-align: center;
}
.herotxt .btn-download a {
    display: inline-block;
    background: transparent;
    font-size: 16px; /* slightly smaller button */
    padding: 8px 18px;
    text-decoration: none;
    color: #fff;
    margin-top: 6px;
}
/* Ensure custom hero button uses brand styling (no yellow) */
.herotxt .btn-download a.btn-u { color: #0686b3; background: #fff; }
/* Reduce vertical spacing for the intro banner */
.herotxt .sectionBox {
  padding-top: 18px;
  padding-bottom: 20px;
}

/* Improved CTA button style for hero band */
.btn-u {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: #0686b3 !important;
  font-weight: 700;
  border: 1px solid rgba(6,134,179,.35);
  border-radius: 999px;
  padding: 10px 22px;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  transition: all .18s ease;
}
.btn-u i { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#0686b3; color:#fff; margin-right:10px; box-shadow: 0 2px 8px rgba(6,134,179,.35); }
.btn-u:hover, .btn-u:focus { background: linear-gradient(180deg, #f35f37 0%, #ff6a56 100%); color: #fff !important; border-color: transparent; box-shadow: 0 10px 22px rgba(0,0,0,.20); }
.btn-u:hover i { background:#ffffff; color:#f35f37; }
.btn-u-lg { padding: 12px 26px; }
.herotxt strong { color: #0686b3; }

/* Navbar/header */
/* cleaned: initial navbar/dropdown rules removed (duplicated later) */

/* Import a modern, professional nav font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Navbar font styling: Poppins with sensible weights and spacing */
.navbar,
.navbar .navbar-brand,
.navbar .nav > li > a {
  font-family: 'Poppins', "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 500;           /* default nav link weight */
  letter-spacing: 0.2px;      /* subtle tracking for readability */
  text-rendering: optimizeLegibility;
}

/* Slightly stronger brand styling */
.navbar .navbar-brand {
  font-weight: 700;
  font-size: 20px; /* adjust if logo/brand gets too big */
}

/* Keep dropdowns consistent */
.navbar-nav .dropdown-menu,
.navbar-nav .dropdown-menu > li > a {
  font-family: 'Poppins', "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

/* Headroom / transitions */
.headroom {
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

/* Buttons */
.btn, .btn-action, .btn-primary {
	color: #3A3A3A !important;
	background: #85E556;
	border: none;
}
.btn:hover, .btn:focus {
	color: #3A3A3A !important;
	background: #2ED037;
}
.btn-primary {
	background: #FF6A56; /* refined primary override */
	color: #fff;
}

/* Header / hero (#head) */
#head {
	background: #181015 url(../images/bg_header.jpg) no-repeat center center;
	background-size: cover;
	min-height: 520px;
	text-align: center;
	padding-top: 240px;
	color: white;
	font-family: "Open Sans", Helvetica, Arial;
	font-weight: 300;
}
#head.secondary {
	min-height: 100px;
	padding-top: 0;
	height: 100px;
}
#head .lead {
	font-family: "Open Sans", Helvetica, Arial;
	font-size: 44px;
	margin-bottom: 6px;
	color: white;
	line-height: 1.15em;
}
#head .tagline {
	color: rgba(255,255,255,0.75);
	margin-bottom: 25px;
}
#head .tagline a {
	color: #fff;
}
#head .btn {
    margin-bottom: 10px;
}

/* Hero carousel controls: center vertically and ensure visible icons */
.has-carousel .carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;            /* smaller hit area */
  color: #ffffff;         /* pure white icons */
  background: transparent;
  opacity: 0.95;          /* slightly stronger for visibility */
  text-shadow: none;      /* keep icon crisp */
  z-index: 10;
}
.has-carousel .carousel-control:hover,
.has-carousel .carousel-control:focus {
  opacity: 1;
}
.has-carousel .carousel-control .fa {
  font-size: 18px;        /* smaller icon size */
  line-height: 1;
  color: #ffffff;         /* ensure icon itself is white */
}
@media (max-width: 768px) {
  .has-carousel .carousel-control { width: 32px; }
}

/* Default button styling in header */
#head .btn-default {
	background: transparent;
	color: rgba(255,255,255,.5);
	text-shadow: none;
	-webkit-box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
	-moz-box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
	box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
}
#head .btn-default:hover, #head .btn-default:focus {
	color: rgba(255,255,255,.8);
	-webkit-box-shadow: inset 0 0 0 3px rgba(255,255,255,.8);
	-moz-box-shadow: inset 0 0 0 3px rgba(255,255,255,.8);
	box-shadow: inset 0 0 0 3px rgba(255,255,255,.8);
}
#head .btn-default:active, #head .btn-default.active {
	color: #fff;
	-webkit-box-shadow: inset 0 0 0 3px #fff;
	-moz-box-shadow: inset 0 0 0 3px #fff;
	box-shadow: inset 0 0 0 3px #fff;
}

/* Panels */
.panel {
	margin-bottom: 0;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.panel-body {
	padding: 0;
}

/* Layout helpers */
.sectionBox {
	padding-top: 35px;
	padding-bottom: 40px;
}
.slideUp {
	top: -100px;
}
.serviceslist .btn {
	padding: 10px 38px;
	font-weight: bold;
	border: 0 none;
	border-radius: 3px;
	width: 100%;
}

/* Highlights */
.highlight {
	margin-top: 40px;
	border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.highlight:first-child {
	border-left: none;
}
.h-caption {
	text-align: center;
}
.h-caption i, .h-caption .fa {
	display: block;
	font-size: 46px;
	color: #fff;
	margin-right: 9px;
}
.h-caption h4 {
	color: #000;
	font-size: 22px;
	font-weight: normal;
	text-align: left;
	padding-bottom: 15px;
}

/* Thumbnails / jumbotron */
.thumbnail {
	display: block;
	padding: 0;
	border-radius: 0;
}
.jumbotron {
	background: #fff;
}
.jumbotron p {
	font-size: 16px;
	color: #555;
	padding: 0;
}

/* Breadcrumb / page titles */
.page-title {
	margin-top: 20px;
	font-weight: 300;
	color: #f35f37;
}
.text-muted {
	color: #888;
}
.breadcrumb {
	background: none;
	padding: 0;
	margin: 30px 0 0 0;
}

/* Helpers */
.container-full {
	margin: 0 auto;
	width: 100%;
}
.top-space { margin-top: 35px; }
.top-margin { margin-top: 20px; }
img { max-width: 100%; }
img.pull-right { margin-left: 10px; }
img.pull-left { margin-right: 10px; }

#map { width: 100%; height: 280px; }

/* Sidebar */
.sidebar {
	padding-top: 36px;
	padding-bottom: 30px;
}
.sidebar .panel { margin-bottom: 20px; }

/* Blockquote boxes */
.glyphicon-lg { font-size: 3em; }
.blockquote-box { margin-bottom: 25px; }
.blockquote-box .square {
	min-height: 50px;
	width: 92px;
	margin-right: 22px;
	text-align: center !important;
	background-color: #FFFFFF;
	padding: 20px 0;
	border: 1px solid #e6e6e6;
}
.blockquote-box.blockquote-primary .square { color: #f35f37; }
.blockquote-box.blockquote-success .square { color: #f35f37; }
.blockquote-box.blockquote-info .square { color: #f35f37; }
.blockquote-box.blockquote-warning .square { color: #f35f37; }
.blockquote-box.blockquote-danger .square { color: #f35f37; }

/* Footer */
.footer1 {
	background: #737373;
	padding: 30px 0 0 0;
	font-size: 12px;
	color: #999;
}
.footer1 a { color: #ccc; }
.footer1 a:hover { color: #fff; }
.footer1 .panel { margin-bottom: 30px; }
.footer1 .panel-title {
	font-size: 17px;
	font-weight: bold;
	color: #fff;
	margin: 0 0 20px;
}
.footer1 .entry-meta {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin: 0 0 35px 0;
	padding: 2px 0;
	color: #888888;
	font-size: 0.75rem;
}
.footer1 .entry-meta a { color: #333333; }
.footer1 p { font-size: 14px; color: #ececec; }

.footer2 {
	background: #000;
	padding: 15px 0;
	color: #777;
	font-size: 13px;
}
.footer2 a { color: #aaa; padding: 0 10px; }
.footer2 a:hover { color: #fff; }
.footer2 p { margin: 0; color: #cfe0ea; font-size: 14px; }

/* Carousel / quotes */
#quote-carousel {
	padding: 0 10px 30px 10px;
	margin-top: 30px;
}
#quote-carousel .carousel-control {
	background: none;
	color: #222;
	font-size: 2.3em;
	text-shadow: none;
	margin-top: 30px;
}
#quote-carousel .carousel-control.left { left: -12px; }
#quote-carousel .carousel-control.right { right: -12px !important; }
#quote-carousel .carousel-indicators {
	right: 50%;
	top: auto;
	bottom: 0;
	margin-right: -19px;
}
#quote-carousel .carousel-indicators li { background: #c0c0c0; }
#quote-carousel .carousel-indicators .active { background: #333333; }
#quote-carousel img { width: 250px; height: 100px; }
.item blockquote { border-left: none; margin: 0; }
.item blockquote img { margin-bottom: 10px; }
.item blockquote p:before {
	content: "\f10d";
	font-family: 'Fontawesome';
	float: left;
	margin-right: 10px;
}

/* Contact */
.contact ul { padding: 0; }
.contact ul li { margin-bottom: 10px; list-style: none; color: #ECECEC; }
footer ul li { list-style: none; }

/* Map canvas */
#map-canvas { height: 100%; margin: 0; padding: 0; }

/* Portfolio / isotope */
.isotopeWrapper article { margin-bottom: 30px; }
#portfolio img { width: 100%; }
#portfolio article p { margin-bottom: 1.45em; }
nav#filter { margin-bottom: 1.5em; }
nav#filter li { display: inline-block; margin: 0 0 0 5px; }
nav#filter a {
	padding: 4px 12px;
	line-height: 20px;
	text-decoration: none;
	color: #ABABAB;
	font-size: 18px;
}
nav#filter a.current { background: #fff; color: #f35f37; }

.portfolio-items article img { width: 100%; }
.portfolio-item {
	display: block;
	position: relative;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.portfolio-item img {
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear;
}
.portfolio-item .portfolio-desc {
	opacity: 0;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	color: rgba(220,220,220,1);
}
.portfolio-item:hover .portfolio-desc {
	padding-top: 20%;
	height: 100%;
	transition: all 200ms ease-in-out 0s;
	opacity: 1;
	background: rgba(61,61,61,0.72);
}
.portfolio-item .portfolio-desc .folio-info {
	padding: 30px;
	height: 0;
	opacity: 0;
	position: relative;
}
.portfolio-item:hover .folio-info {
	height: 100%;
	opacity: 1;
	transition: all 500ms ease-in-out 0s;
	top: 5px;
}
.portfolio-item .portfolio-desc .folio-info h5 {
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	font-size: 1.4em;
}
.portfolio-item .portfolio-desc .folio-info p { color: #ffffff; font-size: 12px; }

/* Contact details */
.contact-details {
    padding: 20px;
    background: #fff;
    border: none;
    position: relative;
}

/* Contact form: use margins instead of <br> for compact spacing */
.contact-form .form-control { margin-bottom: 10px; }
.contact-form textarea.form-control { min-height: 140px; }

/* Brand color tokens for Octagon Software Solutions */
:root {
  --brand-orange: #f35f37;
  --brand-lightblue: #0686b3;
  --brand-darkblue: #283e56;
}

/* --- Brand overrides --- */
a, a:visited { color: var(--brand-orange); }
a:hover, a:focus { color: var(--brand-lightblue); text-decoration: none; }

/* cleaned: brand-darkblue navbar block removed to avoid conflicts with transparent overlay */

/* Hero / header banner */
.header-banner {
  background: linear-gradient(135deg, var(--brand-darkblue) 0%, var(--brand-lightblue) 100%);
  color: #ffffff;
}

/* Ensure #head (the hero) uses the background image (placed after the gradient rule so it wins) */
#head.hero,
#head {
  background: #181015 url(../images/bg_header.jpg) no-repeat center center !important;
  background-size: cover !important;
}

/* Remove header image on secondary pages like About (overridden by page-specific classes when needed) */
#head.secondary { background: none !important; background-color: transparent !important; min-height: 0; height: auto; padding-top: 0; }

/* Services page: background image and spacing so heading is not cut */
#head.secondary.services-header {
  background: url(../images/img7.png) no-repeat center center !important;
  background-size: cover !important;
  min-height: 140px;
  padding-top: 80px; /* tighter space below fixed navbar */
}

/* Contact page: use img7.png as the hero background */
#head.secondary.contact-header {
  background: url(../images/img7.png) no-repeat center center !important;
  background-size: cover !important;
  min-height: 140px;
  padding-top: 80px; /* consistent spacing under fixed navbar */
}

/* Contact hero container/title: center text and match About sizing */
#head.secondary.contact-header .contact-hero { padding: 8px 0 12px; text-align: center; }
#head.secondary.contact-header .section-title { margin: 0; color: #ffffff; font-size: 32px; }

/* Services hero container/title: keep heading snug in the hero */
#head.secondary.services-header .services-hero { padding: 8px 0 12px; }
#head.secondary.services-header .section-title { margin: 0; color: #ffffff; }

/* About page: background image and spacing similar to Services */
#head.secondary.about-header {
  background: url(../images/img5.jpg) no-repeat center center !important;
  background-size: cover !important;
  min-height: 140px; /* reduce hero height further */
  padding-top: 80px; /* tighten space below fixed navbar */
}

/* About hero container: override legacy large paddings */
#head.secondary.about-header .about-hero {
  padding: 8px 0 12px; /* keep heading snug in the hero */
}

/* About hero title: remove default margins and ensure good contrast */
#head.secondary.about-header .section-title {
  margin: 0;
  color: #ffffff;
  font-size: 32px; /* match Services hero title size */
}

/* Primary button */
.btn-primary, button.btn-primary {
  background: var(--brand-orange);
  border-color: var(--brand-darkblue);
  color: #fff;
}
.btn-primary:hover, button.btn-primary:hover {
  background: var(--brand-lightblue);
  border-color: var(--brand-darkblue);
  color: #fff;
}

/* Headings and accents */
h1, h2, h3 { color: #19496d; }
.section-title { color: var(--brand-darkblue); }
.feature-icon, .icon { color: var(--brand-orange); }

/* Footer */
.footer, .site-footer { background: var(--brand-darkblue); color: #ffffff; }
.footer a, .site-footer a { color: var(--brand-lightblue); }
.footer a:hover, .site-footer a:hover { color: var(--brand-orange); }

/* Card/panel borders */
.panel, .card { border-color: rgba(40,62,86,0.08); }

/* Small helpers */
.badge-primary { background: var(--brand-orange); color: #fff; }

/* cleaned: legacy restore navbar/dropdown block removed to avoid conflicts */

/* Hero (#head) dark overlay so background image shows as in screenshot */
#head {
  position: relative; /* ensure pseudo-element positioning */
  /* keep existing background-image set earlier in file */
}
#head::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(15,22,30,0.55); /* dark overlay — tweak opacity as needed */
  z-index: 1;
}

/* Ensure hero content sits above overlay */
#head .lead,
#head .tagline,
#head .btn,
#head .herotxt,
#head .container {
  position: relative;
  z-index: 2;
}

/* When the carousel is used in the hero, remove the static background and overlay */
#head.has-carousel { background: none !important; min-height: 0; padding-top: 0; }
#head.has-carousel::after { display: none; }

/* If .header-banner gradient is still applied, prefer #head image + overlay
   NOTE: changed to target only .header-banner so .hero (used by #head) keeps its background image */
.header-banner {
  /* don't force a full gradient over .header-banner; keep these rules lightweight */
  background-image: none;
}

/* Small safeguard: prefer original accent for inline anchors used in template */
a, a:visited { color: #f35f37 !important; }
a:hover, a:focus { color: #f35f37 !important; }

/* Navbar/header improvements: typography, spacing, hover/active and sticky look */
.navbar {
  padding: 6px 16px !important; /* tighter top/bottom space in the bar */
  transition: background-color 220ms ease, box-shadow 220ms ease, padding 220ms ease;
}

/* Brand */
.navbar .navbar-brand {
  font-family: 'Poppins', "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.4px;
  color: #fff !important;
}

/* Nav links */
.navbar .nav > li > a {
  font-family: 'Poppins', "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px; /* slightly smaller text for compact navbar */
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 8px 14px !important; /* tighter vertical padding for smaller height */
  border-bottom: 3px solid transparent; /* underline accent on hover/active */
  border-radius: 4px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

/* Spacing between items */
.navbar-nav>li {
  margin-right: 16px;
}

/* Hover: subtle background + orange underline */
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  color: #fff !important;
  background: rgba(255,255,255,0.06);
  border-bottom-color: var(--brand-orange);
}

/* Active: visible orange underline, no heavy full-bg */
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > li.active > a,
.navbar .navbar-nav > li:hover > a {
  color: #fff !important;
  background: transparent;
  border-bottom-color: var(--brand-orange) !important;
}

/* On scroll: switch navbar text to black for better contrast on light backgrounds */
.navbar.scrolled .navbar-brand,
.navbar.scrolled .nav > li > a {
  color: #0686b3 !important;
}
.navbar.scrolled .nav > li > a:hover,
.navbar.scrolled .nav > li > a:focus {
  color: #000 !important;
}

/* Compact overrides to counter the theme's large inverse navbar defaults */
.navbar-inverse {
  min-height: 56px !important;
  padding-top: 6px !important;
}
.navbar-inverse .navbar-brand {
  margin: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.navbar-inverse .navbar-brand img {
  max-height: 48px !important;
  height: auto;
  width: auto;
}

/* Dropdown background replaced to match navbar (was bright red previously) */
/* cleaned: duplicate dropdown base removed; consolidated later */

/* Sticky/fixed navbar visual (applies when navbar becomes fixed/affixed) */
.navbar.navbar-fixed-top,
.navbar.sticky,
.navbar.affix {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(15,22,30,0.55);
  backdrop-filter: blur(6px); /* modern look, graceful fallback */
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 9999;
  padding: 8px 20px;
}

/* Reduce brand size a bit when navbar is sticky (if using affix) */
.navbar.affix .navbar-brand,
.navbar.sticky .navbar-brand {
  font-size: 18px;
}

/* Small touch: increase click area on mobile toggles (if present) */
.navbar-toggle, .navbar .navbar-toggle {
  padding: 9px 10px;
}

/* Logo sizing: keep navbar logo compact and header/banner logo constrained & responsive */
.navbar .navbar-brand img,
.navbar-brand img {
  max-height: 60px;       /* small recognizable brand in the navbar */
  width: auto;
  height: auto;
  display: block;
}

/* If you placed the large logo in the hero area use a .logo or .logo-large wrapper */
#head .logo img,
#head .logo-large img,
.header-logo img {
  max-width: 720px;       /* don't exceed this width on large screens */
  max-height: 140px;      /* limit vertical size so it doesn't dominate the header */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;         /* center the logo */
}

/* Tighter sizes on medium / small screens */
@media (max-width: 991px) {
  #head .logo img,
  #head .logo-large img,
  .header-logo img {
    max-width: 520px;
    max-height: 110px;
  }
  .navbar .navbar-brand img {
    max-height: 50px;
  }
}

@media (max-width: 575px) {
  #head .logo img,
  #head .logo-large img,
  .header-logo img {
    max-width: 320px;
    max-height: 72px;
  }
  .navbar .navbar-brand img {
    max-height: 42px;
  }
}

/* If logo still pushes content, reduce #head padding slightly on large logos */
#head.logo-large {
  padding-top: 160px; /* adjust down if needed; keep header readable */
}

/* Fix: prevent global .herotxt orange band from covering the hero background */
#head .herotxt {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0; /* keep hero spacing controlled by #head */
}

/* Ensure hero text is readable over the dark overlay */
#head .herotxt p,
#head .herotxt span {
  color: #ffffff !important;
}

/* Brand accent overrides inside hero title */
#head .herotxt .brand-orange { color: #f35f37 !important; }
#head .herotxt .brand-blue { color: #0686b3 !important; }

/* --- Services page polish --- */
.services-hero { text-align: center; padding: 48px 0 24px; }
.services-hero .section-title { font-size: 32px; margin: 0 0 8px; }
.services-hero .section-subtitle { color: #cfe0ea; font-weight: 400; }

.serviceslist .services-grid { margin-top: 12px; }
.service-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  padding: 18px 16px;
  margin-bottom: 18px; /* tighten vertical spacing between rows */
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 240px; /* equalize card heights to avoid uneven gaps */
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0,0,0,0.14); }
.service-card h4 { margin-top: 10px; margin-bottom: 8px; font-weight: 600; }
.service-card h4 { color: var(--brand-darkblue); font-size: 18px; }
.service-card p { margin-bottom: 0; color: #1b2a3a; font-size: 15px; }

.service-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff6a3d, #ff8f54);
  color: #fff; font-size: 20px;
  transition: transform .25s ease;
}

/* Subtle pop-in when cards reveal on scroll */
.js .service-card.reveal-on-scroll { transform: translateY(16px) scale(0.98); opacity: 0; }
.js .service-card.reveal-on-scroll.in-view { transform: translateY(0) scale(1); opacity: 1; }
.js .service-card.reveal-on-scroll.in-view .service-icon { animation: icon-pop .5s ease .15s both; }

/* Stagger card reveals for a smooth cascade */
.js .services-grid > div:nth-child(1) .service-card.reveal-on-scroll { transition-delay: .05s; }
.js .services-grid > div:nth-child(2) .service-card.reveal-on-scroll { transition-delay: .12s; }
.js .services-grid > div:nth-child(3) .service-card.reveal-on-scroll { transition-delay: .19s; }
.js .services-grid > div:nth-child(4) .service-card.reveal-on-scroll { transition-delay: .26s; }

@keyframes icon-pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Micro interaction on hover */
.service-card:hover .service-icon { transform: scale(1.08); }

@media (max-width: 575px) {
  .service-card { padding: 16px 14px; }
  .services-hero { padding: 36px 0 18px; }
}

/* Style hero CTA buttons differently from orange intro band */
#head .herotxt .btn-download a.btn-primary {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}
#head .herotxt .btn-download a.btn-default {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Hero: improved spacing, typography and centered "lazy" highlights layout */
#head .herotxt {
  background: transparent !important;
  color: #ffffff !important;
  padding: 70px 0 90px;         /* comfortable vertical spacing */
  text-align: center;
  display: block;
  box-sizing: border-box;
  z-index: 2;
}

/* Main hero title */
#head .herotxt span {
  font-size: 44px;
  line-height: 52px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  display: block;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}

/* Keep the hero heading on one line and inline spans */
#head .herotxt h1.lead { white-space: nowrap; }
#head .herotxt h1.lead span { display: inline; margin: 0; }

/* Hero paragraph: constrain width and improve readability */
#head .herotxt p {
  max-width: 980px;
  margin: 0 auto 26px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* unify list item font size within hero carousel */
.herotxt .list-unstyled li,
.herotxt .tech-stack li {
  font-size: 16px;
  line-height: 1.6;
}

/* "Lazy" centered highlights row: flex layout with natural wrapping */
#head .highlight {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
}

/* Each highlight column: balanced width and padding */
#head .highlight .col-sm-4 {
  flex: 1 1 300px;
  max-width: 360px;
  padding: 0 22px;
  box-sizing: border-box;
  min-width: 240px;
  position: relative;
  color: rgba(255,255,255,0.95);
}

/* Remove the left-border that appears on the hero highlights */
#head .highlight {
  border-left: none !important;
}

/* keep the intended separators between highlight columns (applies per-media rule that is already present) */
@media (min-width: 768px) {
  #head .highlight .col-sm-4 + .col-sm-4 {
    border-left: 1px solid rgba(255,255,255,0.12);
    padding-left: 30px;
  }
  /* ensure separators also appear for two-column layouts */
  #head .highlight .col-sm-6 + .col-sm-6 {
    border-left: 1px solid rgba(255,255,255,0.12);
    padding-left: 30px;
  }
}

/* headings inside highlight columns */
#head .highlight .col-sm-4 strong,
#head .highlight .col-sm-4 .h-caption h4,
#head .highlight .col-sm-6 strong,
#head .highlight .col-sm-6 .h-caption h4 {
  display: block;
  font-size: 18px;
  color: #f35f37;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* highlight copy */
#head .highlight .col-sm-4 p,
#head .highlight .col-sm-6 p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}

/* Buttons: larger, centered and balanced */
#head .btn-download {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
  z-index: 2;
}
#head .btn-download a {
  padding: 12px 36px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
}
#head .btn-download a.btn-primary {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(243,95,55,0.18);
}
#head .btn-download a.btn-default {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  color: #fff !important;
}

/* Ensure hero pieces sit above overlay */
#head .herotxt *,
#head .highlight,
#head .btn-download { position: relative; z-index: 2; }

.vanta-bg { position: relative; }
.vanta-bg::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(15,21,32,0.72) 0%, rgba(15,21,32,0.80) 40%, rgba(15,21,32,0.92) 78%, rgba(15,21,32,0.98) 100%); z-index: 1; pointer-events: none; }

/* Responsive tweaks */
@media (max-width: 991px) {
  #head .herotxt span { font-size: 36px; line-height: 44px; }
  #head .herotxt p { font-size: 16px; max-width: 720px; }
  #head .btn-download a { padding: 10px 28px; font-size: 15px; }
}
@media (max-width: 575px) {
  #head { padding-top: 120px; padding-bottom: 50px; }
  #head .herotxt span { font-size: 28px; line-height: 36px; }
  #head .herotxt p { font-size: 16px; max-width: 320px; margin-bottom: 18px; }
  #head .highlight { gap: 18px; }
  #head .highlight .col-sm-4 { padding: 0 12px; max-width: 100%; flex: 1 1 100%; border-left: none !important; padding-left: 12px; }
  #head .btn-download { flex-direction: column; gap: 12px; }
  #head .btn-download a { width: 100%; max-width: 320px; }
}

/* Read More button used under About Us: white background, black text, hover -> brand orange */
.btn.btn-readmore {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  padding: 10px 22px !important;
  font-weight: 600;
  border-radius: 4px;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.btn.btn-readmore:hover,
.btn.btn-readmore:focus,
.btn.btn-readmore:active {
  background: var(--brand-orange) !important;
  color: #fff !important;
  border-color: var(--brand-orange) !important;
  box-shadow: 0 8px 20px rgba(243,95,55,0.18);
  transform: translateY(-1px);
}

/* Lazy populate animation for hero highlights */
@keyframes highlightFadeIn {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
#head .highlight .highlight-populate {
  opacity: 0;
  animation: highlightFadeIn 0.7s cubic-bezier(.33,.99,.48,1) forwards;
}
#head .highlight .highlight-populate:nth-child(1) { animation-delay: 0.1s; }
#head .highlight .highlight-populate:nth-child(2) { animation-delay: 0.35s; }
#head .highlight .highlight-populate:nth-child(3) { animation-delay: 0.6s; }

/* --- Hero Carousel Styles --- */
#heroCarousel { position: relative; }
#heroCarousel .item { height: 520px; }
#heroCarousel .item img,
#heroCarousel .item video {
  width: 100%;
  height: 520px;
  object-fit: cover;
  filter: brightness(68%);
}
#heroCarousel .carousel-background-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 520px;
  object-fit: cover;
  filter: brightness(68%);
  z-index: 0;
}
#heroCarousel .carousel-inner { position: relative; z-index: 1; }
#heroCarousel .carousel-indicators { z-index: 2; }
#heroCarousel .carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  left: 0; right: 0;
  text-align: center;
  padding: 16px 20px;
  background: rgba(15,22,30,0.48);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
#heroCarousel .carousel-control .glyphicon { color: #ffffff; }
/* Ensure controls sit above caption and keep compact width */
#heroCarousel .carousel-control {
  z-index: 30;          /* above caption overlay */
  width: 38px;          /* compact click target */
}

/* Fade transition between carousel slides */
.carousel.carousel-fade .item { opacity: 0; transition: opacity .8s ease-in-out; }
.carousel.carousel-fade .item.active { opacity: 1; }
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right { left: 0; opacity: 0; z-index: 2; }
.carousel.carousel-fade .next.left,
.carousel.carousel-fade .prev.right { opacity: 1; }
.carousel.carousel-fade .carousel-control { z-index: 3; }

/* Centered, minimal dot indicators */
#heroCarousel .carousel-indicators {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  margin: 0;
}
#heroCarousel .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.65);
  background: transparent;
  margin: 0 6px;
}
#heroCarousel .carousel-indicators .active {
  background: #ffffff;
  border-color: #ffffff;
}

/* Controls: subtle, centered arrows without gray squares */
#heroCarousel .left.carousel-control,
#heroCarousel .right.carousel-control {
  background: none;
  box-shadow: none;
  opacity: .75;
}
#heroCarousel .left.carousel-control:hover,
#heroCarousel .right.carousel-control:hover { opacity: 1; }
#heroCarousel .carousel-control .fa {
  font-size: 18px;      /* match smaller icon size */
  color: #ffffff;
}
#heroCarousel .carousel-control .glyphicon {
  font-size: 24px;
  line-height: 520px; /* vertically center on slide height */
}

/* --- Transparent navbar overlay --- */
.navbar,
.navbar.navbar-inverse,
.navbar.navbar-default {
  background: transparent !important;
  border: none;
  box-shadow: none;
}
.navbar.navbar-fixed-top,
.navbar.sticky,
.navbar.affix {
  background: transparent !important;
}

/* Reverted recent navbar/logo overrides to original stylesheet defaults */

/* --- Scroll Reveal --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* --- About Page Enhancements --- */
/* Removed hero gradient/image block to keep About header clean */
/* Remove background image on About hero */
#head.secondary .about-hero { background: none !important; background-image: none !important; }

/* Removed page-specific and compact navbar overrides to keep navbar consistent across pages */

/* Uniform content typography on About */
.about-page .maincontent p,
.section-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #414b56;
}
.tech-stack {
  column-count: 3;
  column-gap: 28px;
  column-rule: 1px solid rgba(255,255,255,0.18);
  margin: 0;
  padding: 0;
}
.tech-stack li {
  break-inside: avoid;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.92);
}
.tech-section { background: #ffffff; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.tech-section .heading h2 { color: var(--brand-darkblue); font-weight: 700; }
.js .tech-stack li.reveal-on-scroll { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .tech-stack li.reveal-on-scroll.in-view { opacity: 1; transform: translateY(0); }
.tech-stack li.reveal-on-scroll:nth-child(1) { transition-delay: .06s; }
.tech-stack li.reveal-on-scroll:nth-child(2) { transition-delay: .12s; }
.tech-stack li.reveal-on-scroll:nth-child(3) { transition-delay: .18s; }
.tech-stack li.reveal-on-scroll:nth-child(4) { transition-delay: .24s; }
.tech-stack li.reveal-on-scroll:nth-child(5) { transition-delay: .30s; }
.tech-stack li.reveal-on-scroll:nth-child(6) { transition-delay: .36s; }

/* Technologies logos marquee */
.tech-logos { position: relative; overflow: hidden; padding: 6px 0; }
.tech-logos:before, .tech-logos:after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.tech-logos:before { left: 0; background: linear-gradient(to right, #ffffff 55%, rgba(255,255,255,0)); }
.tech-logos:after { right: 0; background: linear-gradient(to left, #ffffff 55%, rgba(255,255,255,0)); }
.tech-logos .marquee-row { position: relative; white-space: nowrap; margin: 16px 0; }
.tech-logos .marquee-track { display: inline-flex; align-items: center; gap: 20px; will-change: transform; animation: marquee-left 38s linear infinite; animation-play-state: paused; }
.tech-logos .marquee-row.reverse .marquee-track { animation-name: marquee-right; animation-duration: 42s; }
.tech-logos.reveal-on-scroll.in-view .marquee-track { animation-play-state: running; }
.tech-logos .marquee-track:hover { animation-play-state: paused; }
.tech-logos .logo-item { width: 72px; height: 72px; border-radius: 12px; background: #ffffff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.tech-logos .logo-item img { max-width: 80%; max-height: 80%; object-fit: contain; display: block; }

@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (max-width: 991px) {
  .tech-logos .logo-item { width: 60px; height: 60px; }
}
@media (max-width: 575px) {
  .tech-logos .logo-item { width: 50px; height: 50px; }
}
/* Technology heading: larger and more prominent for hero */
.herotxt .tech-title {
  display: block;
  font-size: 18px;
  line-height: 1.2;
  color: #f35f37;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  margin-bottom: 10px;
}
.tech-stack li strong {
  color: #0686b3;
  font-weight: 700; 
}
@media (max-width: 991px) { .tech-stack { column-count: 2; } }
@media (max-width: 575px) { .tech-stack { column-count: 1; column-rule: none; } }
.about-page .maincontent .lead {
  font-size: 15px; /* make About lead paragraph uniform with other text */
  line-height: 1.7;
}
#head.secondary .about-hero .hero-kicker {
  display: inline-block;
  background: rgba(255,255,255,0.92);
  color: #0f1520;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 8px 14px;
  border-radius: 20px;
}

/* Card-like sections for readability */
.section-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
}
.section-card h2 {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}
.section-card .lead {
  color: #354052;
}

/* Values grid: clean two-column layout with spacing */
.values-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px 18px;
}
@media (max-width: 767px) {
  .values-grid { grid-template-columns: 1fr; }
}
.values-grid li strong { color: #0f1520; }

/* Highlight hover lift and shadow */
.highlight-populate { transition: transform .25s ease, box-shadow .25s ease; }
.highlight-populate:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
/* =============================
   About Page Enhancements
   ============================= */

/* Hero overlay text on About */
#head.secondary { position: relative; }
#head.secondary .about-hero { padding: 108px 0 60px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
#head.secondary .about-hero-title { font-weight: 700; font-size: 42px; margin: 0; }
#head.secondary .about-hero-subtitle { font-size: 16px; opacity: .95; margin-top: 10px; display: inline-block; background: rgba(0,0,0,.35); color: #fff; padding: 6px 10px; border-radius: 6px; }

/* Remove extended gray/dark overlay under navbar on About */
#head.secondary::before { display: none !important; }

/* Page header and cards */
.maincontent .page-header { border-bottom: none; margin: 0 0 16px; }
.maincontent .page-title { margin-bottom: 6px; }
.section-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.section-card { background: #fff; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.08); padding: 24px; margin-bottom: 24px; }
.lead { font-size: 18px; line-height: 1.7; color: #444; }

/* Values grid */
.values-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; }
.values-grid li { position: relative; background: transparent; border-radius: 8px; padding: 16px 16px 16px 44px; }
.values-grid li::before { content: "\f058"; font-family: FontAwesome; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #ff6a00; opacity: .9; }

@media (max-width: 768px) {
  #head.secondary .about-hero { padding: 92px 16px 40px; }
  #head.secondary .about-hero-title { font-size: 32px; }
}

/* =============================
   Dropdown UX Enhancements
   ============================= */
.navbar-nav .dropdown-menu {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  transform: translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease;
}
.navbar .open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navbar-nav .dropdown-menu > li > a {
  color: #222;
  padding: 10px 14px;
  border-radius: 6px;
}
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
  background: rgba(0,0,0,.06);
  color: var(--brand-orange); /* hover: turn text orange */
}
.navbar .dropdown-toggle .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
  transition: transform .18s ease;
}
.navbar .open > a.dropdown-toggle .caret {
  transform: rotate(180deg);
}
.navbar .dropdown-menu i.fa {
  margin-right: 8px;
  opacity: .9;
  color: var(--brand-orange);
}

/* =============================
   Mega-menu (hover) for navbar
   ============================= */
/* Show dropdowns on hover for pointer/hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav li.dropdown:hover > .dropdown-menu {
    display: block; /* override Bootstrap's display:none */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .navbar-nav li.dropdown:hover > a .caret { transform: rotate(180deg); }
}

/* Arrow pointer above dropdown */
.navbar-nav .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 24px; /* aligns near the triggering item */
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* Mega variant: wide panel with columns */
:root { --nav-height: 64px; }
.dropdown-menu.mega-menu { padding: 16px 18px; }
.dropdown-menu.mega-menu { /* overlay handled by .mega-full */ }
.dropdown-menu.mega-menu::before { display: none; }
/* Keep menu open when hovering the panel itself (for hover-capable devices) */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav li.dropdown:hover > .dropdown-menu,
  .navbar-nav li.dropdown .dropdown-menu:hover {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}
/* cleaned: center alignment removed; using full-width .mega-full overlay */
/* cleaned: width constraints moved to .mega-full */
@media (max-width: 991px) {
  .navbar-nav > li.mega > .dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
  }
  .dropdown-menu.mega-menu {
    position: absolute;
    top: auto;
    width: 100%;
    max-width: 100%;
    min-width: 260px;
  }
}
.navbar .dropdown-menu { z-index: 10001; }
.navbar, .navbar-default { overflow: visible; z-index: 10000; }
.navbar.navbar-fixed-top, .navbar.sticky, .navbar.affix { z-index: 10000; }
/* cleaned: center alignment removed; full-width handled by .mega-full */
.mega-menu .mega-container { list-style: none; padding: 0; margin: 0; }
.mega-menu .mega-grid {
  display: grid;
  grid-template-columns: 320px 1fr 1fr 1fr;
  gap: 24px;
}
.mega-menu .mega-col {}
.mega-menu .mega-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: #f4f4f4;
  margin: 4px 0 8px;
}
.mega-menu .mega-links { list-style: none; padding-left: 0; margin: 0; }
.mega-menu .mega-links li { margin: 8px 0; position: relative; padding-left: 22px; }
.mega-menu .mega-links li::before { content: "\f105"; font-family: FontAwesome; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--brand-orange); opacity: .9; }
.mega-menu .mega-links li:hover::before { color: var(--brand-orange); opacity: 1; }
.mega-menu .mega-links a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: #fff;
}
.mega-baires { background: #fff; color: #222; box-shadow: 0 14px 28px rgba(0,0,0,.18); border-radius: 10px; }
.mega-baires .mega-title { color: #0686b3; }
.mega-baires .mega-links a { color: #0686b3; }
.mega-baires .mega-links a:hover { background: rgba(0,0,0,.06); color: var(--brand-orange); }
.mega-baires .mega-all { color: #111; }
.mega-baires .mega-all:hover { color: var(--brand-orange); }
.mega-baires { width: 100vw; max-width: 100vw; min-width: 100vw; border-radius: 0; }
/* removed .mega-intro content */

.dropdown-menu.mega-menu.mega-full {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-height);
  transform: none;
  width: 100vw;
  max-width: 100vw;
  min-width: 100vw;
  height: auto;
  max-height: calc(100vh - var(--nav-height) - 20px);
  overflow-y: auto;
  padding: 22px 24px 18px;
  border-radius: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 26px 42px rgba(0,0,0,.35);
  backdrop-filter: none;
}
.mega-full .mega-grid { max-width: 1220px; margin: 0 auto; grid-template-columns: 260px 1fr 1fr 1fr; gap: 32px; }
.mega-full .mega-media { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; background: #f2f2f2; padding: 16px; border-radius: 8px; }
.mega-full .mega-media .mega-title { color: #111; }
.mega-full .mega-media .mega-summary { font-size: 14px; color: #333; line-height: 1.6; margin: 4px 0 8px; }
.mega-full .mega-media .mega-logo { width: 100%; height: 180px; object-fit: contain; opacity: .95; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.mega-full .mega-media img, .mega-full .mega-media video { width: 100%; height: 180px; object-fit: contain; }
.mega-full .mega-title { font-size: 18px; color: #19496d; letter-spacing: .4px; margin-bottom: 10px; font-weight: 600; }
.mega-full .mega-links a { padding: 10px 12px; font-size: 15px; color: #19496d; }
.mega-full .mega-links a:hover { background: rgba(0,0,0,.06); color: var(--brand-orange); }
.mega-menu .mega-links a:hover { background: rgba(0,0,0,.06); color: var(--brand-orange); }
.mega-menu .mega-footer { margin-top: 10px; text-align: right; }
.mega-menu .mega-all { color: #111; font-weight: 600; }
.mega-menu .mega-all:hover { color: var(--brand-orange); }

/* --- Final overrides to ensure full-width mega behaves consistently --- */
.navbar .open > .dropdown-menu { display: block !important; opacity: 1 !important; visibility: visible !important; }
.navbar-nav > li.mega > .dropdown-menu { left: 0 !important; right: 0 !important; transform: none !important; }
/* cleaned: fixed overlay applied via .mega-full only */

/* Responsive: stack columns and let width auto on small screens */
@media (max-width: 991px) {
  .dropdown-menu.mega-menu { min-width: 260px; max-width: 100%; }
  .mega-menu .mega-grid { grid-template-columns: 1fr; }
  .mega-full .mega-media { display: none; }
}

body.dropdown-open { overflow: hidden; }
.serviceslist .heading h2 { font-weight: 700; color: var(--brand-darkblue); }