/* Global Styles */
:root {
  --color-dark: #031d42; /* deep blue for backgrounds */
  --color-primary: #c9a15d; /* gold accent */
  --color-light: #ffffff;
  --color-text: #0f293e;
  --color-muted: #697386;
  --max-width: 1120px;
  /* Secondary accent colour for subtle highlights */
  --color-accent-secondary: #6e8dc1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--color-text);
  line-height: 1.6;
  background-color: #f8f9fb;
}

/* Global heading styles for consistent typography */
h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.2rem;
}
h3 {
  font-size: 1.6rem;
}
p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--color-text);
}

/* Section spacing for improved rhythm */
section {
  padding: 5rem 0;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header & Navigation */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: var(--color-dark);
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.logo {
  display: flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.2rem;
}

.logo-icon {
  background-color: var(--color-primary);
  color: var(--color-dark);
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 6px;
  font-weight: bold;
  font-size: 1rem;
}

.logo-text {
  color: var(--color-light);
}

/* Logo image styling: maintain consistent height and crisp appearance on scroll */
.logo-img {
  height: 40px; /* slightly smaller height for a refined appearance */
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Smooth transitions for navigation links */
.nav a {
  transition: color 0.3s ease;
}

.nav a:hover {
  color: var(--color-primary);
}

/* Give the final navigation item (CTA) a little breathing room */
.nav ul li:last-child a {
  margin-left: 1rem;
  padding: 8px 16px;
}

/* Subtle hover effects for cards and sections */
.stats-grid .stat-card,
.process-grid .process-card,
.testimonials-slider .testimonial,
.articles-grid article,
.portfolio-grid .case-study {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-grid .stat-card:hover,
.process-grid .process-card:hover,
.testimonials-slider .testimonial:hover,
.articles-grid article:hover,
.portfolio-grid .case-study:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 1.2rem; /* moderate gap between links to keep navigation compact */
  flex-wrap: wrap; /* allow links to wrap on smaller screens or when space is tight */
  justify-content: flex-end; /* push nav links to the right */
}

.nav a {
  color: var(--color-light);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: var(--color-primary);
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  border: none;
  transition: background-color 0.2s ease;
}

.primary-btn {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

.primary-btn:hover {
  background-color: #b88a49;
}

.secondary-btn {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.secondary-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  color: var(--color-light);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Fade-in animation classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Section */

/* Base hero styling; fallback dark background */
.hero {
  background: var(--color-dark);
  color: var(--color-light);
  padding: 80px 0 100px;
  text-align: center;
  position: relative;
}

/* Special hero variant with background image and subtle zoom animation.  
   Apply this class in HTML to enable the animated photo background on the  
   landing page while retaining the same spacing and typography. */
.hero.hero-image {
  background-image: linear-gradient(rgba(3, 29, 66, 0.7), rgba(3, 29, 66, 0.8)), url('../hero-photo.png');
  background-size: cover;
  background-position: center;
  animation: zoom-bg 30s ease-in-out infinite alternate;
}

@keyframes zoom-bg {
  from {
    background-size: 100%;
  }
  to {
    background-size: 110%;
  }
}

.hero-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-content p {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: var(--color-muted);
}

/* Ensure page hero text remains legible on dark backgrounds */
.page-hero h1,
.page-hero p {
  color: var(--color-light);
}

/* Icon Benefits Section */
.icon-section {
  background-color: #f1f4fa;
  padding: 4rem 0;
}
.icon-section .container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.icon-card {
  flex: 1 1 30%;
  background-color: var(--color-light);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.icon-card img {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}
.icon-card h3 {
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: var(--color-dark);
}
.icon-card p {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.5;
}
.icon-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Why Section */
.why {
  padding: 80px 0;
  text-align: center;
}

.why h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}

.section-intro {
  max-width: 700px;
  margin: 0 auto 2rem;
  color: var(--color-muted);
  font-size: 1rem;
}

.stats-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.stat-item {
  background-color: var(--color-light);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: 250px;
}

.stat-number {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  color: var(--color-primary);
}

.stat-text {
  margin-top: 0.5rem;
  color: var(--color-dark);
  font-size: 1rem;
}

/* Process Section */
.process {
  background-color: #f2f5fa;
  padding: 80px 0;
  text-align: center;
}

.process h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  color: var(--color-dark);
  margin-bottom: 2rem;
}

.process-steps {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.step {
  background-color: var(--color-light);
  padding: 1.5rem;
  border-radius: 8px;
  flex: 1;
  min-width: 220px;
  max-width: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.step-number {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0 auto 0.5rem;
}

.step h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}

.step p {
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* Testimonials Section */
.testimonials {
  padding: 80px 0;
  background-color: var(--color-light);
  text-align: center;
}

.testimonials h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--color-dark);
}

.testimonial-slider {
  position: relative;
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}

.testimonial {
  display: none;
  transition: opacity 0.3s ease;
}

.testimonial.active {
  display: block;
}

.testimonial p {
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.testimonial .author {
  color: var(--color-primary);
  font-weight: 600;
}

.testimonial-controls {
  margin-top: 1rem;
}

.control-btn {
  background: none;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.control-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

/* FAQ Section */
.faq {
  padding: 80px 0;
  background-color: #f2f5fa;
}

.faq h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  text-align: center;
}

.faq-item {
  max-width: 700px;
  margin: 0.5rem auto;
  border-bottom: 1px solid #dce1ea;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
}

.faq-question i {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: none;
  padding-bottom: 1rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-question i {
  transform: rotate(180deg);
}

/* CTA Banner */
.cta-banner {
  background-color: var(--color-dark);
  color: var(--color-light);
  text-align: center;
  padding: 80px 0;
}

.cta-banner h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.cta-banner p {
  margin-bottom: 1.5rem;
  color: var(--color-muted);
  font-size: 1rem;
}

/* Footer */
.footer {
  background-color: var(--color-dark);
  color: var(--color-muted);
  padding: 40px 0 20px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.footer-brand {
  max-width: 300px;
}

.footer-brand .logo {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

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

.footer-social a {
  color: var(--color-muted);
  font-size: 1.2rem;
  margin-right: 0.5rem;
  transition: color 0.2s ease;
}

.footer-social a:hover {
  color: var(--color-primary);
}

.copyright {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
  color: var(--color-muted);
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .nav ul {
    gap: 1rem;
  }
  .process-steps {
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .nav ul {
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-dark);
    position: absolute;
    top: 70px;
    right: 0;
    width: 200px;
    padding: 1rem;
    display: none;
  }
  .nav ul.show {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
  .nav ul li {
    width: 100%;
  }
  .nav ul li a {
    display: block;
    width: 100%;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .stat-item {
    width: 100%;
    max-width: none;
  }
  .process-steps {
    flex-direction: column;
    align-items: center;
  }
  .step {
    max-width: none;
    width: 100%;
  }
}

/* Chat widget styles */
.chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.3s ease;
}
.chat-button:hover {
  transform: scale(1.05);
}

.chat-box {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 300px;
  max-height: 400px;
  background-color: var(--color-light);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
.chat-box.active {
  display: flex;
}
.chat-box-header {
  background-color: var(--color-dark);
  color: var(--color-light);
  padding: 0.75rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.chat-box-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.chat-box-input {
  display: flex;
  border-top: 1px solid #e0e0e0;
}
.chat-box-input input {
  flex: 1;
  padding: 0.6rem;
  border: none;
  font-size: 0.9rem;
  outline: none;
}
.chat-box-input button {
  padding: 0.6rem 1rem;
  background-color: var(--color-primary);
  color: var(--color-dark);
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.chat-box-input button:hover {
  background-color: #b88a49;
}
.message {
  max-width: 80%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.3;
}
.message.from-user {
  align-self: flex-end;
  background-color: var(--color-primary);
  color: var(--color-dark);
  border-bottom-right-radius: 0;
}
.message.from-us {
  align-self: flex-start;
  background-color: #f1f4fa;
  color: var(--color-dark);
  border-bottom-left-radius: 0;
}

/* === Dominion patch (2025-09): brand fixes === */
:root{ --gold:#D4AF37; }
/* Hero headline set to white */
.hero .hero-content h1{ color:#ffffff !important; }
/* Ensure hero paragraph readable on photo */
.hero .hero-content p{ color:#e7eef9 !important; }
/* Footer tagline gold */
.footer .footer-brand p{ color:#D4AF37 !important; }
/* Copyright white */
.copyright, .copyright p{ color:#ffffff !important; }