body {
  background-color: #071a1f;
  color: #b8f3ff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar, .footer {
  background-color: #0c2b31;
}

.brand-text {
  color: #00e0ff;
  font-weight: bold;
}

.nav-link {
  color: #b8f3ff;
  transition: color 0.2s ease;
  text-decoration: none;
}

.nav-link:hover {
  color: #00e0ff;
}

.nav-item i {
  color: #8fd7e2;
}

.nav-item:hover i {
  color: #00e0ff;
}

.hero {
  background: linear-gradient(to right, #065963, #031b1e);
  padding: 80px 0;
  text-align: center;
  color: #b8f3ff;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: bold;
}

.hero .highlight {
  color: #00e0ff;
}

.hero p {
  font-size: 1.2rem;
  color: #8fd7e2;
}

.card {
  background-color: #0f2c32;
  border: 1px solid #14434b;
  border-radius: 12px;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 10px #00e0ff44;
}

.section-title {
  color: #00e0ff;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

.why-vardvault {
  padding-top: 30px;
}

.feature-box {
  background: linear-gradient(to bottom right, #111c22, #0c2a30);
  border: 1px solid #1a3d45;
  box-shadow: 0 0 10px #00e0ff22;
  color: #b8f3ff;
}

.icon-bg {
  font-size: 2rem;
  padding: 12px;
  background-color: #00e0ff;
  color: white;
  border-radius: 0.75rem;
  display: inline-block;
}

.icon-cyan {
  font-size: 2rem;
  padding: 12px;
  background-color: #00e0ff;
  color: white;
  border-radius: 0.75rem;
  display: inline-block;
}

.feature-box ul {
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: #b8f3ff;
}
.modal-content {
  background-color: #0f2c32;
  border-radius: 12px;
  box-shadow: 0 0 10px #00e0ff88;
}

.modal-title {
  font-weight: bold;
  color: #ffc107;
}

.modal-body {
  font-size: 1rem;
  color: #b8f3ff;
}


.footer-vardvault {
  background-color: #0c2b31;
  color: #b8f3ff;
}

.footer-vardvault h6 {
  margin-bottom: 1rem;
}

.footer-links li {
  margin-bottom: 0.5rem;
  color: #8fd7e2;
}

.footer-links li i {
  color: #00e0ff;
  margin-right: 5px;
}

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

.footer-links li a:hover {
  color: #00e0ff;
  text-decoration: underline;
}

.footer-vardvault .text-secondary a {
  color: #8fd7e2;
}

.footer-vardvault .text-secondary a:hover {
  color: #00e0ff;
}