/* =====================
   COLOR THEME
===================== */
:root{
  --dark-blue:#003366;
  --primary-blue:#2179C4;
  --deep-blue:#062C5E;
}

/* =====================
   GLOBAL
===================== */
body {
  font-family: "Segoe UI", sans-serif;
  color: #1f2d3d;
  padding-top: 80px;
  background: #fff;
}

/* =====================
   NAVBAR HEIGHT & LOOK
===================== */
.navbar{
  min-height: 90px;                 /* height increase */
  padding-top: 16px;
  padding-bottom: 16px;
}

.navbar-brand{
  font-size: 1.6rem;                /* bigger brand text */
  font-weight: 700;
  letter-spacing: 0.5px;
}

.nav-link{
  font-size: 1.05rem;               /* slightly bigger links */
  padding: 10px 18px !important;    /* more clickable area */
}

/* Mobile navbar spacing */
@media (max-width: 991px){
  .navbar{
    min-height: auto;
    padding: 14px 0;
  }

  .nav-link{
    padding: 12px 16px !important;
  }
}


/* =====================
   HERO SECTION
===================== */
.hero-section {
  background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
  padding: 90px 0;
  color: #fff;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
}

.hero-text {
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: #e6f1ff;
}

.hero-img {
  max-height: 420px;
}

/* =====================
   SECTIONS
===================== */
.section {
  padding: 70px 0;
}

.section-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--dark-blue);
}

/* =====================
   FEATURE CARDS
===================== */
.feature-card {
  padding: 22px;
  height: 100%;
  border: none;
  background: #fff;
  border-top: 4px solid var(--primary-blue);
  box-shadow: 0 10px 25px rgba(6,44,94,0.15);
}

.feature-card p {
  color: var(--deep-blue);
  font-weight: 500;
}

/* =====================
   FEATURES LIST
===================== */
.feature-list {
  max-width: 800px;
  margin: auto;
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: 12px 0;
  border-bottom: 1px solid #d6e6f7;
  color: var(--deep-blue);
}

/* =====================
   IMAGES (SCREEN & RESULT)
===================== */
.screen-img {
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.35s ease;
  box-shadow: 0 12px 30px rgba(6,44,94,0.25);
}

.screen-img:hover {
  transform: scale(1.08);
  box-shadow: 0 28px 55px rgba(6,44,94,0.35);
}

/* =====================
   TABLE
===================== */
.table th {
  background: var(--dark-blue);
  color: #fff;
  width: 40%;
}

.table td {
  background: #f3f8ff;
}

/* =====================
   FOOTER
===================== */
.footer-section {
  background: var(--deep-blue);
  color: #dce9ff;
  padding: 55px 0 25px;
}

.footer-section h5,
.footer-section h6 {
  font-weight: 600;
  color: #fff;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #cfe5ff;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* =====================
   SIMPLE FOOTER (fallback)
===================== */
.footer {
  background: var(--dark-blue);
  color: #fff;
  padding: 20px;
  text-align: center;
}