/* Scoped navbar styles: change text color and show underline on hover/active */
.navbar-nav .nav-link {
  text-decoration: none;
  transition: color 0.18s ease;
  padding: 0; /* remove padding so active link is not boxed */
  margin: 0 0.5rem; /* small horizontal spacing between items */
  font-weight: 600; /* make nav texts bold */
  background: transparent !important;
  border: none !important;
  position: relative;
  color: inherit;
}

/* Pseudo-element for hover underline */
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: -4px;
  height: 3px; /* thicker underline */
  width: 60%; /* initial width when expanded */
  background: #1e90ff;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1);
  border-radius: 2px;
  opacity: 0;
}

.navbar-nav .nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* Active: color but no underline */
.navbar-nav .nav-link.active {
  color: #1e90ff !important; /* ocean / dodger blue */
  font-weight: 700;
}

/* Make link text change color on hover/focus to match underline */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #1e90ff !important;
}

/* Ensure dropdown parent links get the same underline hover effect as normal links */
.navbar-nav .nav-item.dropdown .nav-link {
  /* keep same positioning as other nav-link rules */
  position: relative;
}
.navbar-nav .nav-item.dropdown .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: -4px;
  height: 3px;
  width: 60%;
  background: #1e90ff;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1);
  border-radius: 2px;
  opacity: 0;
}
.navbar-nav .nav-item.dropdown .nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
.navbar-nav .nav-item.dropdown .nav-link:hover,
.navbar-nav .nav-item.dropdown .nav-link:focus {
  color: #1e90ff !important;
}

/* Style dropdown menu items to match top-level nav link hover/active behavior */
.navbar-nav .dropdown-menu .dropdown-item {
  position: relative;
  color: inherit; /* inherit base color */
  transition: color 0.18s ease;
}
.navbar-nav .dropdown-menu .dropdown-item::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: 6px; /* sits slightly above the bottom of the item */
  height: 3px;
  width: 60%;
  background: #1e90ff;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), opacity 0.12s ease;
  border-radius: 2px;
  opacity: 0;
}
.navbar-nav .dropdown-menu .dropdown-item:hover::after,
.navbar-nav .dropdown-menu .dropdown-item:focus::after,
.navbar-nav .dropdown-menu .dropdown-item.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown-menu .dropdown-item.active {
  color: #1e90ff !important;
}

/* Prevent Bootstrap from filling active dropdown items with a solid background
   that contrasts with the navbar; keep background transparent and rely on
   color/underline for the active visual cue. Scoped to navbar dropdowns only. */
.navbar-nav .dropdown-menu .dropdown-item.active,
.navbar-nav .dropdown-menu .dropdown-item:active,
.navbar-nav .dropdown-menu .dropdown-item.show {
  background-color: transparent !important;
  background-image: none !important;
  color: #1e90ff !important; /* preserve color cue */
}

/* Ensure dropdown items have adequate bottom padding so the underline is visible */
.navbar-nav .dropdown-menu .dropdown-item {
  padding-bottom: 0.65rem;
}


/* Ensure small screens still have spaced links */
@media (max-width: 576px) {
  .navbar-nav .nav-link {
    display: block;
    padding: 0.5rem 0;
    margin: 0;
  }
}

/* Top info band styling */
.top-info-band {
  background: #1669c7 !important; /* slightly darker ocean blue */
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  font-size: 1rem !important;
}
.top-info-band .container {
  max-width: 1320px;
}
.top-info-band svg {
  /* make icons use the hover/ocean blue color requested */
  fill: #1e90ff;
  color: #1e90ff;
}
.top-info-band a { color: #fff; }
.top-info-band .small { font-size: 0.95rem; }

.top-info-band .left-icons svg {
  fill: #1e90ff;
  color: #1e90ff;
}
.top-info-band .left-info { color: #fff; }
.top-info-band .social-icons { gap: 0.5rem; }
.top-info-band .social-icons a { margin-left: 0.5rem; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#0f4f8a; }
.top-info-band .social-icons svg { fill: #fff; color: #fff; width:14px; height:14px; }

/* Reduce spacing between left-group items so phone is grouped tightly */
.top-info-band .left-group {
  gap: 0.5rem !important; /* override gap-3 from template */
}
.top-info-band .left-group .left-icons {
  margin-left: 0 !important; /* ensure no extra offset */
}
.top-info-band .left-group span { margin: 0; }

@media (max-width: 767px) {
  .top-info-band .container { flex-direction: column; gap: 0.25rem; }
  .top-info-band .d-flex.justify-content-between { flex-direction: column; align-items: flex-start; }
}

/* On small screens hide the social icons and show the More button instead */
@media (max-width: 991px) { /* lg breakpoint and below -> show more */
  .top-info-band .social-icons { display: none !important; }
  .top-info-band .more-btn { display: inline-flex; }
  /* hide the whole top band on smaller screens so navbar area stays compact */
  .top-info-band { display: none !important; }
}

.top-info-band .more-btn {
  display: none; /* hidden on lg+ */
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}
.top-info-band .more-btn svg { fill: #fff; }

/* Mobile more button inside navbar */
.more-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #ffffff, #f1f3f5);
  box-shadow: 0 2px 6px rgba(16,24,40,0.04);
}
.more-mobile svg { fill: #333; }

/* dropdown social svg icons */
.dropdown .social-svg { width: 16px; height: 16px; fill: currentColor; color: inherit; }
.dropdown .dropdown-item.d-flex .social-svg { margin-right: 0.5rem; }

/* Increase navbar height and scale logo */
.navbar {
  min-height: 76px !important;
  position: relative;
  z-index: 1020;
  transition: box-shadow 160ms ease, transform 120ms ease;
}
.navbar-brand img {
  height: 58px !important; /* larger logo */
}

/* Improve look of action-like buttons inside navbar */
.navbar .btn {
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.navbar .btn:active { transform: translateY(1px); }
.navbar .btn-outline-secondary {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}
.navbar .btn-outline-secondary:hover {
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

/* Toggler (hamburger) styling and animated transition to X */
.navbar-toggler {
  width: 46px;
  height: 40px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, #ffffff, #f6f7f9);
  transition: background 160ms ease, box-shadow 160ms ease;
}
.navbar-toggler:hover { box-shadow: 0 8px 20px rgba(16,24,40,0.06); }

/* Replace default icon with custom 3-bar lines using pseudo elements */
.navbar-toggler .navbar-toggler-icon { display:none; }
.navbar-toggler .hamburger {
  position: relative;
  width: 22px;
  height: 14px;
  display: inline-block;
}
.navbar-toggler .hamburger span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
}
.navbar-toggler .hamburger span:nth-child(1){ top: 0; }
.navbar-toggler .hamburger span:nth-child(2){ top: 6px; }
.navbar-toggler .hamburger span:nth-child(3){ bottom: 0; }

/* When .open is present on the toggler, animate to X */
.navbar-toggler.open { background: linear-gradient(180deg, #f1f5f9, #e9eef6); }
.navbar-toggler.open .hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.navbar-toggler.open .hamburger span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.navbar-toggler.open .hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* On large screens the top-info-band is visible; offset navbar so it sticks below that band */
/* When fixed (toggled by JS), make navbar position fixed to the viewport */
.navbar.navbar-fixed {
  position: fixed !important;
  left: 0;
  right: 0;
  width: 100%;
  top: 0; /* snap to very top of the viewport on all screen sizes */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transform: translateZ(0);
}

/* Desktop: open dropdown on hover to improve discoverability (keep tap-to-open for touch devices) */
@media (min-width: 992px) {
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  /* Ensure dropdown menu positions nicely and transitions smoothly */
  .navbar-nav .dropdown-menu {
    transition: opacity 140ms ease, transform 160ms ease;
    transform: translateY(6px);
    opacity: 0;
    visibility: hidden;
    margin-top: 0.25rem;
  }

  /* Show caret indicator and rotate it when open */
  .nav-caret {
    display: inline-block;
    margin-left: 0.35rem;
    transition: transform 180ms ease, opacity 120ms ease;
    font-size: 0.8rem;
    opacity: 0.85;
    pointer-events: none;
  }

  .nav-item.dropdown.show > .nav-link .nav-caret,
  .nav-item.dropdown:hover > .nav-link .nav-caret {
    transform: rotate(-180deg);
  }
}

/* Footer styles: match the top-info-band color and ensure readable white text */
footer.bg-dark {
  background: #1669c7 !important; /* same as .top-info-band */
  color: #ffffff !important;
}
footer.bg-dark h5,
footer.bg-dark h6,
footer.bg-dark p,
footer.bg-dark li,
footer.bg-dark a,
footer.bg-dark .small {
  color: #ffffff !important;
}
footer.bg-dark a { text-decoration: none; }
footer.bg-dark .text-muted { color: rgba(255,255,255,0.9) !important; }
footer.bg-dark hr { border-color: rgba(255,255,255,0.12); }
/* Make subscription input stand out on the colored background */
footer.bg-dark .form-control {
  background: rgba(255,255,255,0.95);
  color: #0b2140;
}
footer.bg-dark .btn-primary {
  background-color: #0b4ea1;
  border-color: #09457f;
}

/* Footer link hover: mirror navbar nav-link underline + color change */
footer.bg-dark a {
  position: relative; /* for pseudo-element */
  transition: color 160ms ease, transform 160ms ease;
  color: #ffffff !important;
}

footer.bg-dark a::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: -4px;
  height: 3px;
  width: 60%;
  background: #1e90ff;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 120ms ease;
  border-radius: 2px;
  opacity: 0;
}

/* apply to block-level footer links so underline sits properly */
/* the ::after pseudo-element is applied directly to footer.bg-dark a above; no empty ruleset needed */

footer.bg-dark a:hover,
footer.bg-dark a:focus {
  color: #1e90ff !important;
}

footer.bg-dark a:hover::after,
footer.bg-dark a:focus::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* Social icons in footer: subtle lift and color change on hover */
footer.bg-dark a svg {
  transition: transform 160ms ease, filter 160ms ease, color 160ms ease;
  display: inline-block;
}
footer.bg-dark a:hover svg,
footer.bg-dark a:focus svg {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 6px 18px rgba(16,24,40,0.06));
  color: #1e90ff; /* for icon color when using currentColor / fill:currentColor */
}

/* Services card hover effect (scoped and subtle) */
/* Services card styles moved to public/assets/css/services.css */

/* Ensure maps and embedded iframes appear above the footer and not hidden by it.
   Give the map a stacking context and add spacing at the bottom of main content
   so the footer doesn't overlap when viewport height is small. */
.map-container,
.map-container iframe {
  /* Default: let map be in normal flow so it doesn't overlap form on small screens */
  position: static;
  z-index: auto;
}

/* On large screens (desktop) ensure the map appears above footer if needed */
@media (min-width: 992px) {
  .map-container,
  .map-container iframe {
    position: relative;
    z-index: 1100; /* higher than navbar (1020) and footer */
  }

  /* Small safety gap at the end of main content on desktop */
  main.flex-grow-1 {
    padding-bottom: 3.5rem; /* adds space so footer doesn't overlap embedded content */
  }
}

/* Extra safety for small and medium viewports where animations or transforms
   may create stacking contexts and cause overlap. Force the map to stay
   in normal flow and ensure the form appears above it if any stacking occurs. */
@media (max-width: 991px) {
  .map-container,
  .map-container iframe {
    position: static !important;
    z-index: auto !important;
    transform: none !important; /* cancel any AOS transforms that might create stacking context */
  }

  .contact-form-card {
    position: relative;
    z-index: 1200; /* ensure form sits above map if overlap happens */
  }
}

/* On small / medium viewports place the form above the map to avoid any
   stacking/animation edge cases where the iframe might sit above the form. */
@media (max-width: 991px) {
  .contact-section .col-lg-7 { order: 1; }
  .contact-section .col-lg-5 { order: 2; }

  /* ensure the stacked map has spacing when it moves below the form */
  .contact-section .col-lg-5 .map-container { margin-top: 1.5rem; }
}

/* Cancel AOS animations/transforms on contact columns at small/medium sizes
   since those transforms can create stacking contexts and cause the iframe
   to render above siblings. We target elements that use data-aos attributes. */
@media (max-width: 991px) {
  .contact-section [data-aos],
  .contact-section [data-aos].aos-init,
  .contact-section [data-aos].aos-animate {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}