/* OilExecGrow Custom Colors */
:root {
  --primary-color: #1A2942;
  --accent-color: #FF6B35;
  --background-light: #F5F6F8;
  --text-dark: #2D3748;
  --text-light: #FFFFFF;
}

/* Base styles */
body {
  background-color: var(--background-light);
  color: var(--text-dark);
}

/* Navigation */
.nav, .nav-container {
  background-color: var(--primary-color) !important;
}

.nav-link, .nav-link-on-inverse {
  color: var(--text-light) !important;
}

.nav-link:hover, .nav-link-on-inverse:hover {
  color: var(--accent-color) !important;
}

/* Buttons */
.button, .w-button {
  background-color: var(--accent-color) !important;
  color: var(--text-light) !important;
  transition: all 0.3s ease !important;
}

.button:hover, .w-button:hover {
  background-color: #E85A24 !important;
  transform: translateY(-2px);
}

/* Headers */
h1, h2, h3 {
  color: var(--primary-color);
}

.about-header, .contact-header {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.about-header h1, .contact-header h1,
.about-header .subheading, .contact-header .subheading {
  color: var(--text-light);
}

/* Content sections */
.expertise-area, .approach-point, .commitment-point {
  background-color: var(--text-light);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.expertise-area:hover, .approach-point:hover, .commitment-point:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Contact elements */
.contact-method {
  border-left: 3px solid var(--accent-color);
}

.form-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.1);
}

.emergency-contact {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.emergency-phone {
  color: var(--accent-color);
}

/* Footer */
.footer {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.footer-links a {
  color: var(--text-light);
}

.footer-links a:hover {
  color: var(--accent-color);
}

/* Mobile menu */
@media screen and (max-width: 991px) {
  .nav-menu {
    background-color: var(--primary-color);
  }
  
  .nav-menu-list-item:hover {
    background-color: rgba(255,255,255,0.1);
  }

  /* Burger menu icon color */
  .icon-on-inverse svg {
    stroke: var(--text-light);
  }
  
  .icon-on-inverse line {
    stroke: var(--text-light);
  }
}