/* --- Custom Branding & Styling --- */

:root {
  /* Using a professional blue that matches the logo's feel */
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-dark-rgb: 33, 37, 41;
}

body {
  /* Use Inter font for a modern, clean look */
  font-family: 'Inter', sans-serif;
}

/* --- Navbar --- */
.navbar {
  /* Add transition for the shadow effect */
  transition: box-shadow 0.3s ease-in-out;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
}

/* Removed .navbar-brand .slogan rule as the SVG now contains the slogan */

/* --- Hero Section --- */
.hero {
  padding-top: 120px; /* Offset for fixed-top navbar */
  padding-bottom: 60px;
  /* Dark gradient for a sophisticated look */
  background: linear-gradient(
    to right,
    rgba(var(--bs-dark-rgb), 0.95),
    rgba(var(--bs-dark-rgb), 0.85)
  );
  /*url('https://placehold.co/1920x1080/454545/999999?text=Modern+Office')
      center center / cover no-repeat; */
  color: white;
}

.hero h1 {
  font-weight: 700;
  font-size: 3rem;
}

/* --- Sections --- */
section {
  /* Add padding to all sections to avoid being hidden by the fixed navbar */
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Feature Icons */
.feature-icon {
  font-size: 3rem;
  color: var(--bs-primary);
}

/* "Why" Section - highlighting the problem */
.problem-list {
  list-style-type: none;
  padding-left: 0;
}
.problem-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.problem-list li::before {
  content: '\F622'; /* Bootstrap Icon: x-circle-fill */
  font-family: 'bootstrap-icons' !important;
  color: var(--bs-danger);
  position: absolute;
  left: 0;
  top: 2px;
}

/* "Solution" list */
.solution-list {
  list-style-type: none;
  padding-left: 0;
}
.solution-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.solution-list li::before {
  content: '\F26A'; /* Bootstrap Icon: check-circle-fill */
  font-family: 'bootstrap-icons' !important;
  color: var(--bs-success);
  position: absolute;
  left: 0;
  top: 2px;
}

/* --- Call to Action (Hardware) --- */
.cta-section {
  background-color: var(--bs-primary);
}
.cta-section h2 {
  font-weight: 700;
}

/* --- Footer --- */
footer {
  border-top: 1px solid #343a40;
}
footer .footer-brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
  text-decoration: none;
}