/* --- Global Overflow Fix --- */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Reset basic margins */

body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Clean, solid background Hero Container */

.hero-section {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  background-color: #56656c;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Content Container */

.hero-content {
  text-align: center;
  padding: 20px;
}

/* The Logo Animation Setup */

.animated-logo {
  max-width: 100%;
  max-height: 45vh;
  height: auto;
  opacity: 0;
  animation: elegantSpinIn 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* The Keyframes defining the movement */

@keyframes elegantSpinIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-720deg);
  }
  100% {
    opacity: 1;
    transform: scale(1.15) rotate(0deg);
  }
}

/* --- Corporate Navbar --- */

.corporate-navbar {
  background-color: #0a0a0a;
  border-bottom: 3px solid #c8a61c;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Menu Layout */

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 80px;
  gap: 40px;
}

/* Individual Links */

.nav-link {
  color: #c8a61c;
  text-decoration: none;
  font-family: 'Arial', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: color 0.3s ease;
  position: relative;
}

/* Hover Effect - Text turns white */

.nav-link:hover {
  color: #ffffff;
}

/* Hover Effect - Elegant animated gold underline */

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -6px;
  left: 50%;
  background-color: #c8a61c;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

/* Responsive adjustments for tablets and smaller screens */

@media (max-width: 900px) {
  .nav-menu {
    flex-direction: column;
    height: auto;
    padding: 20px 0;
    gap: 20px;
  }
}

/* --- Corporate Mobile Slide-Out Menu --- */

.corporate-mobile-nav {
  background-color: #0a0a0a;
  border-bottom: 2px solid #c8a61c;
  padding: 10px 20px;
}

.text-gold {
  color: #c8a61c !important;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0;
}

.corporate-mobile-nav .navbar-toggler {
  border: 1px solid #c8a61c;
  border-radius: 4px;
}

.corporate-mobile-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28200, 166, 28, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.corporate-offcanvas {
  background-color: #0a0a0a;
  border-left: 3px solid #c8a61c;
}

/* --- New Menu Header Styling --- */

.custom-menu-header {
  background-color: #56656c;
  border-bottom: 3px solid #c8a61c;
  position: relative;
  justify-content: center;
  padding: 40px 20px;
}

.menu-logo-wrapper {
  width: 85%;
  text-align: center;
}

.custom-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
}

/* Menu Logo Animation */

.menu-animated-logo {
  max-width: 100%;
  height: auto;
  opacity: 0;
}

/* We create a separate class for the animation so JavaScript can toggle it */

.spin-trigger {
  animation: menuSpinIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes menuSpinIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* --- Mobile Links --- */

.mobile-nav-list {
  gap: 15px;
  margin-top: 10px;
}

.slide-link {
  color: #c8a61c !important;
  font-family: 'Arial', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 15px !important;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.slide-link:hover, .slide-link:focus {
  color: #ffffff !important;
  background-color: rgba(200, 166, 28, 0.1);
  padding-left: 25px !important;
}

/* --- Vision & Values Section --- */

.vision-values-section {
  background-color: #0a0a0a;
  padding: 80px 0;
}

.text-gold {
  color: #c8a61c !important;
}

.section-title {
  font-family: 'Arial', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 2px;
}

/* Subtle styling for the placeholder area you requested */

.border-top-gold {
  border-top: 1px dashed rgba(200, 166, 28, 0.4);
}

/* Value Items Styling & Hover Effect */

.value-item {
  background-color: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

/* Forces the icons to be a consistent width so the text lines up perfectly */

.value-icon {
  width: 60px;
  text-align: center;
}

/* When the user mouses over a value, it highlights the left edge gold and bumps it right slightly */

.value-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #c8a61c;
  transform: translateX(10px);
}

/* --- Corporate Main Content Styles --- */

/* Background Color Classes */

.bg-white {
  background-color: #ffffff;
}

.bg-light-grey {
  background-color: #f9fafb;
}

.bg-slate {
  background-color: #2c363b;
}

/* Typography Variables */

.text-gold {
  color: #c8a61c !important;
}

.text-slate {
  color: #2c363b !important;
}

.section-heading {
  font-family: 'Arial', sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* Specifically enlarging the main intro heading */

.content-band:first-child .section-heading {
  font-size: 3rem;
}

/* Image Formatting */

.hero-style-image {
  width: 100%;
  max-width: 1024px;
  height: auto;
  border: 4px solid #ffffff;
  outline: 1px solid #e5e7eb;
}

.content-image-border {
  border: 3px solid #c8a61c;
}

/* Solution Cards */

.solution-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.border-top-gold {
  border-top: 4px solid #c8a61c !important;
}

/* Subtle hover effect for the text cards so it feels interactive */

.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* --- Corporate Footer Styles --- */

.corporate-footer {
  background-color: #0a0a0a;
  border-top: 1px solid #2c363b;
}

/* Softens the copyright text so it doesn't distract from main content */

.corporate-footer .text-muted {
  color: #889297 !important;
}

/* Link Styling */

.footer-link {
  color: #889297;
  text-decoration: none;
  font-family: 'Arial', sans-serif;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

/* Gold hover effect */

.footer-link:hover {
  color: #c8a61c;
  text-decoration: none;
}

/* --- Services Page Styles --- */

.service-card {
  background-color: rgba(255, 255, 255, 0.03);
  border-top: 4px solid #c8a61c;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.service-card:hover {
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* Breadcrumb Link Hover */

.breadcrumb-item a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* --- Corporate FAQ Accordion --- */

.corporate-faq-item {
  background-color: #1a1f22 !important;
  border: none !important;
  border-left: 4px solid #c8a61c !important;
  border-radius: 4px !important;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.corporate-faq-btn {
  background-color: #2c363b !important;
  color: #c8a61c !important;
  font-weight: 700 !important;
  font-size: 1.1rem;
  padding: 1.5rem;
  box-shadow: none !important;
}

/* Turns the Bootstrap dropdown arrow gold */

.corporate-faq-btn::after {
  filter: invert(74%) sepia(49%) saturate(601%) hue-rotate(5deg) brightness(96%) contrast(88%);
}

.corporate-faq-body {
  background-color: #1a1f22 !important;
  color: #ebebeb !important;
  opacity: 0.9;
  line-height: 1.8;
  padding: 0 1.5rem 1.5rem 1.5rem;
}

/* --- About Us Page Styles --- */

.about-intro-box {
  background-color: rgba(255, 255, 255, 0.03);
  border-left: 4px solid #c8a61c;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.value-card {
  background-color: #1a1f22;
  border-top: 4px solid #c8a61c;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}

.breadcrumb-link {
  color: #889297;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-link:hover {
  color: #c8a61c;
}

/* --- Horizontal Hero Styles --- */

.hero-horizontal {
  background-color: #56656c;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #c8a61c;
}

.hero-side-logo {
  max-height: 240px;
  width: auto;
  filter: drop-shadow(0px 8px 12px rgba(0,0,0,0.3));
  margin-top: 10px;
}

/* --- THE DESKTOP NUDGE (This was missing!) --- */

@media (min-width: 768px) {
  .desktop-nudge-left {
    transform: translateX(-50px);
  }
}

/* --- Mobile Responsiveness --- */

@media (max-width: 767px) {
  .hero-side-logo {
    max-height: 200px;
    margin-top: 0;
    margin-bottom: 1.5rem;
  }
}

/* --- Contact Cards Base --- */

.contact-card {
  background-color: #1a1f22;
  border-top: 4px solid #c8a61c;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}

/* --- Contact Icons --- */

.contact-icon {
  color: #ffffff;
  width: 25px;
  text-align: center;
  font-size: 1.1rem;
}

/* --- Phone & Email Links --- */

.contact-link {
  color: var(--bs-link-color) !important;
  font-weight: bold;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: #c8a61c !important;
}

/* --- Mobile Sticky Call Bar --- */

.mobile-call-bar {
  background-color: #c8a61c;
  color: #0a0a0a !important;
  border-radius: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  z-index: 1050;
  box-shadow: 0px -4px 10px rgba(0,0,0,0.25);
}

.mobile-call-bar:active {
  background-color: #dfb920;
}

/* Prevent the sticky bar from hiding the footer on mobile */

@media (max-width: 767px) {
  footer {
    padding-bottom: 90px !important;
  }
}

/* --- Hero Title Responsiveness --- */

.hero-title {
  letter-spacing: 1.5px;
  font-size: 2.5rem;
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }
}

/* --- Leadership Profile Images --- */

.leadership-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center top;
  border: 3px solid #c8a61c;
}