@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/build/webfonts/poppins-v23-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/build/webfonts/poppins-v23-latin-regular.woff2")
    format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/build/webfonts/poppins-v23-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/build/webfonts/poppins-v23-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/build/webfonts/poppins-v23-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/build/webfonts/poppins-v23-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/build/webfonts/poppins-v23-latin-900.woff2") format("woff2");
}
.fonts-not-loaded body {
  font-family: system-ui, sans-serif;
}
.fonts-loaded body {
  font-family: "Poppins", sans-serif;
}

/* Back to top button - critical UI element */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000; /* Ensure it stays above all content */
  opacity: 0.6 !important;
  -webkit-transition: opacity 0.3s ease, transform 0.3s ease !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

#back-to-top:hover {
  opacity: 1 !important;
}
.cbp-color,
.project-card h3,
.project-card .project-title {
  color: #0a3a6a; /* Tailwind blue-900 */
}
.cbp-title {
  margin-bottom: 1rem; /* mb-4 */
  font-size: 2rem; /* text-4xl (36px) */
  font-weight: 800;
  text-align: center; /* font-extrabold */ /* or your preferred heading color */
}

@media (min-width: 1030px) {
  .cbp-title {
    font-size: 3rem; /* md:text-5xl (48px) */
  }
}

.cbp-head {
  margin-bottom: 1rem; /* mb-4 */
  font-size: 1.875rem; /* text-3xl (30px) */
  font-weight: 800; /* font-extrabold */
  text-align: center; /* text-center */ /* or your preferred color */
}
.cbp-head.text-left,
.cbp-text.text-left {
  text-align: left;
}
@media (min-width: 1050px) {
  .cbp-head {
    font-size: 2.25rem; /* md:text-4xl (36px) */
  }
}

.cbp-text {
  max-width: 48rem; /* max-w-3xl (1050px) */
  margin-left: auto; /* mx-auto */
  margin-right: auto;
  font-size: 1.25rem; /* text-xl (20px) */
  color: #1f2937; /* text-gray-800 */
}
.cbp-text p + p {
  margin-top: 1rem;
}
.cbp-text.text-gray {
  color: #374151 !important; /* Tailwind text-gray-700 */
}
.cbp-text.text-blue {
  color: #2563eb !important; /* Tailwind blue-600 */
}
/* Font weight classes */
.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

/* Font size classes with stable metrics */
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

img {
  /* KEEP AS IS */
  height: auto;
  max-width: 100%;
}
/* Hero image container styles moved to home.min.css */
/* Ensure images don't cause layout shifts */

/* Container styles are provided by Tailwind */

/* Critical background gradient - used across all pages */
.background-gradient {
  background: linear-gradient(to bottom, #d4e7fa 0%, #afd4fa 50%, #7bb6f7 100%);
  position: relative;
}

/* Mobile hero content padding moved to home.min.css */
/* --- End essential.css --- */

/* --- Begin Global CSS from home.css --- */
/* Define reusable color variables */
:root {
  --primary-color: #0059b3;
  --primary-darker: #3b82f6; /* Changed to lighter blue-500 for better visibility */
  --primary-lighter: #00a8e8; /* Added for progress bar gradient */
  --text-dark: #333;
  --bg-light-gray: #f8f9fa;
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: var(--primary-color);

  --gradient-overlay: rgba(0, 0, 0, 0.3);

  /* Header-specific CSS Variables */
  --header-bg: rgba(255, 255, 255, 0.98);
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);
}

/* Font loading state styles */
.fonts-not-loaded {
  /* Apply fallback fonts when custom fonts haven't loaded yet */
  font-family: Arial, sans-serif;
  /* Prevents layout shift by matching font metrics */
  letter-spacing: -0.01em;
}

.fonts-loaded {
  /* Apply custom fonts when loaded */
  font-family: "Poppins", sans-serif;
  /* Gradually transition to loaded fonts */
  -webkit-transition: font-family 0.1s ease-out, letter-spacing 0.1s ease-out;
  transition: font-family 0.1s ease-out, letter-spacing 0.1s ease-out;
}

/* Base heading styles - low specificity */
:where(h1) {
  margin-block: 0.67em;
  font-size: 4em;
}

/* Direct targeting for h1 in sectioning elements to avoid browser warnings */
article h1,
section h1,
nav h1,
aside h1 {
  font-size: 4em; /* Same size as your :where(h1) */
}

/* Mobile Navigation (scoped to small screens) */
@media (max-width: 1023px) {
  /* Mobile Menu Button Animation */
  #menuToggle {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #menuToggle.active {
    transform: rotate(90deg);
  }

  /* Mobile Menu Base State */
  #mobileMenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 40;
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform-origin: top;
    transform-origin: top;
  }

  /* When hidden with Tailwind's hidden class */
  #mobileMenu.hidden {
    display: none;
  }

  /* Default state when not hidden but not showing */
  #mobileMenu:not(.hidden):not(.show) {
    -webkit-transform: scaleY(0) translateY(-10px);
    transform: scaleY(0) translateY(-10px);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }

  /* When showing with animation */
  #mobileMenu.show {
    -webkit-transform: scaleY(1) translateY(0);
    transform: scaleY(1) translateY(0);
    opacity: 1;
    max-height: 600px;
  }

  /* Menu Items Base State */
  #mobileMenu .flex-col a {
    display: block !important;
    font-weight: 500;
    padding: 12px 16px !important;
    margin: 2px 8px;
    border-radius: 8px;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
  }

  /* Menu Items Show State with Staggered Animation */
  #mobileMenu.show .flex-col a {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  /* Staggered delay for each menu item */
  #mobileMenu.show .flex-col a:nth-child(1) {
    transition-delay: 0.1s;
  }
  #mobileMenu.show .flex-col a:nth-child(2) {
    transition-delay: 0.15s;
  }
  #mobileMenu.show .flex-col a:nth-child(3) {
    transition-delay: 0.2s;
  }
  #mobileMenu.show .flex-col a:nth-child(4) {
    transition-delay: 0.25s;
  }
  #mobileMenu.show .flex-col a:nth-child(5) {
    transition-delay: 0.3s;
  }
  #mobileMenu.show .flex-col a:nth-child(6) {
    transition-delay: 0.35s;
  }
  #mobileMenu.show .flex-col a:nth-child(7) {
    transition-delay: 0.4s;
  }
}

/* Smooth transitions for responsive elements */
.responsive-transition {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* Apply smooth transitions to common responsive elements */
.grid,
.flex,
.container,
.service-accordion,
.faq-item-container,
.hero-bg,
.hero-image-container,
[class*="col-"],
[class*="w-"],
[class*="h-"],
[class*="p-"],
[class*="m-"] {
  -webkit-transition: width 0.3s ease, height 0.3s ease, padding 0.3s ease,
    margin 0.3s ease;
  transition: width 0.3s ease, height 0.3s ease, padding 0.3s ease,
    margin 0.3s ease;
}

/* Button styles */
.btn-primary {
  background-color: rgb(37, 99, 235) !important; /* Standard blue-600 */
  color: white !important;
  -webkit-transition: background-color 0.3s ease, transform 0.3s ease; /* Combine transitions */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Combine transitions */
}

.btn-primary:hover {
  background-color: rgb(
    59,
    130,
    246
  ) !important; /* Lighter blue-500 instead of darker blue-700 */
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
/* --- End Global CSS from home.css --- */

/* --- Begin Header CSS from header.css --- */
/* Header Element Styles */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 50;
}

header.scrolled {
  box-shadow: 0 2px 10px var(--shadow-medium);
}

/* Mobile Menu Styles */

/* Navigation Links - Shared Styles */
header nav a {
  position: relative;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}

/* Desktop Navigation - Hover Underline Animation */
@media (min-width: 1024px) {
  header nav a::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color, #1d4ed8), #0066cc);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
  }

  header nav a:hover::after {
    width: 100%;
  }

  header nav a.nav-active::after {
    width: 100%;
    background: var(--primary-color, #1d4ed8);
    box-shadow: 0 0 8px rgba(29, 78, 216, 0.4);
  }

  header nav a.nav-active {
    color: var(--primary-color, #1d4ed8);
    font-weight: 600;
  }
}

/* Mobile Navigation - Active Section Indicator */
@media (max-width: 1023px) {
  #mobileMenu a.nav-active {
    background: linear-gradient(
      90deg,
      rgba(29, 78, 216, 0.15),
      rgba(29, 78, 216, 0.05)
    );
    color: var(--primary-color, #1d4ed8);
    border-left: 4px solid var(--primary-color, #1d4ed8);
    padding-left: 16px;
    font-weight: 600;
    border-radius: 0 8px 8px 0;
    margin-left: 4px;
    box-shadow: inset 0 1px 3px rgba(29, 78, 216, 0.2);
  }

  #mobileMenu a.nav-active:hover {
    background: linear-gradient(
      90deg,
      rgba(29, 78, 216, 0.2),
      rgba(29, 78, 216, 0.08)
    );
  }
}

/* Spacer for fixed header */
.nav-spacer {
  height: 112px; /* Adjust based on your header height */
}

/* Logo container */
header .flex-shrink-0 a,
header .items-center {
  display: flex;
  align-items: center;
}

/* Desktop Navigation */
@media (min-width: 1024px) {
  header nav {
    display: flex;
    gap: 2rem;
  }
}

/* Header Content Container */
header .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop Contact Info */

@media (max-width: 1023px) {
  header .lg\:flex {
    display: none;
  }
}

/* Request a Quote Button */
header .bg-blue-700 {
  background-color: #1d4ed8;
  -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header .bg-blue-700:hover {
  background-color: #1e40af;
}
/* Ensure consistent width for header CTA */
header .header-cta {
  min-width: 11rem; /* ~176px for visual balance */
  text-align: center;
}
/* Glassmorphism style for service cards */
.service-glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(241, 245, 255, 0.85) 100%
  );
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  border-radius: 1.2rem;
  border: 1px solid rgba(200, 200, 200, 0.18);
  -webkit-transition: box-shadow 0.3s, background 0.3s;
  transition: box-shadow 0.3s, background 0.3s;
}

.service-glass:hover {
  background: linear-gradient(
    135deg,
    rgba(250, 250, 250, 0.95) 0%,
    rgba(217, 232, 255, 0.95) 100%
  );
}

@media (min-width: 0px) and (max-width: 1280px) {
  .tablet-logo-adjust {
    margin-left: 0.5rem !important;
  }
  .tablet-phone-adjust {
    margin-right: 0.5rem !important;
  }
  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 1280px) {
  .tablet-logo-adjust,
  .tablet-phone-adjust {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
}
.shadow-card {
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.28),
    0 6px 24px 0 rgba(0, 0, 0, 0.18) !important;
  border-radius: 1rem;
  background: #fff;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  position: relative;
  z-index: 2;
}
.shadow-card:hover {
  box-shadow: 0 24px 64px 0 rgba(31, 38, 135, 0.32),
    0 12px 32px 0 rgba(0, 0, 0, 0.22) !important;
  z-index: 3;
}

/* ============================================
   GLOBAL BUTTON STANDARDIZATION
   ============================================ */

/* Standard button elements */
button.bg-gray-600 {
  background-color: rgb(75, 85, 99) !important; /* Standard gray-600 */
}

button.bg-gray-600:hover {
  background-color: rgb(55, 65, 81) !important; /* Standard gray-700 */
}

/* FAQ specific buttons without affecting navigation */

/* FAQ button look without forcing height (let Tailwind control padding) */
.faq-button {
  background-color: #fff !important;
  color: #0a3a6a !important;
  border: none !important;
  border-radius: 0.375rem !important;
  transition: background-color 0.3s ease !important;
}

/* Ensure FAQ item containers have white backgrounds */
.faq-item-container {
  background-color: white !important;
}

/* Only style toggle buttons as solid gray; keep load-more as link */
button[id^="toggle-"],
button[onclick*="toggle"] {
  background-color: #4b5563 !important;
  color: #fff !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  transition: background-color 0.3s ease !important;
}

/* Load more should be a blue text link */
.load-more-container .load-more-btn {
  background: transparent !important;
  color: #2563eb !important; /* Tailwind blue-600 */
  padding: 0 !important;
  border: none !important;
}
.load-more-container .load-more-btn:hover {
  color: #1e40af !important; /* Tailwind blue-800 */
}

/* Standard blue buttons (excluding navigation) */
button.bg-blue-600:not(.nav-link):not([class*="nav"]) {
  background-color: rgb(37, 99, 235) !important; /* Standard blue-600 */
}

button.bg-blue-600:not(.nav-link):not([class*="nav"]):hover {
  background-color: rgb(
    59,
    130,
    246
  ) !important; /* Lighter blue-500 instead of darker blue-700 */
}

/* Standard blue-700 buttons - lighter hover effect */
.bg-blue-700:hover {
  background-color: rgb(
    37,
    99,
    235
  ) !important; /* Lighter blue-600 instead of darker blue-800 */
}