/* ========================================
   JUPITER CONSTRUCTION BRAND SYSTEM
======================================== */

:root {
  --jupiter-primary: #0B3D91;        /* Deep Trust Blue */
  --jupiter-secondary: #1E5AA8;      /* Mid Blue */
  --jupiter-accent: #F57C00;         /* Construction Orange */
  --jupiter-light-bg: #f4f8fc;       /* Soft Section Background */
  --jupiter-dark: #0B1F3B;           /* Dark Section */
  --jupiter-text: #2b2b2b;
}

/* ========================================
   GLOBAL TEXT
======================================== */

body {
  color: var(--jupiter-text);
}

h1, h2, h3, h4, h5 {
  color: var(--jupiter-primary);
  font-weight: 700;
}

/* ========================================
   BUTTONS (More Colorful but Controlled)
======================================== */

.btn-primary {
  background-color: var(--jupiter-accent);
  border-color: var(--jupiter-accent);
  color: #ffffff;
  font-weight: 600;
}

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

.btn-secondary {
  background-color: var(--jupiter-primary);
  border-color: var(--jupiter-primary);
}

/* ========================================
   SECTIONS
======================================== */

.section-light {
  background-color: var(--jupiter-light-bg);
}

.section-dark {
  background: linear-gradient(
    135deg,
    var(--jupiter-primary),
    var(--jupiter-dark)
  );
  color: #ffffff;
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: #ffffff;
}

/* ========================================
   ICON COLOR (Big Visual Impact)
======================================== */

.feature-icon,
.service-icon,
.icon {
  color: var(--jupiter-accent);
  font-size: 2rem;
}

/* ========================================
   CARDS (Modern Depth)
======================================== */

.card,
.service-item,
.feature-item {
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.card:hover,
.service-item:hover {
  transform: translateY(-6px);
}

/* ========================================
   NAVBAR
======================================== */

.navbar {
  background-color: #ffffff;
}

.navbar-brand {
  font-weight: 700;
  color: var(--jupiter-primary) !important;
}

.nav-link {
  color: var(--jupiter-primary) !important;
  font-weight: 500;
}

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

/* ========================================
   FOOTER
======================================== */

footer {
  background-color: var(--jupiter-dark);
  color: #ffffff;
}

footer a {
  color: var(--jupiter-accent);
}