body {
  background: linear-gradient(135deg, #0a1a2f, #112240);
  color: #fff; /* ensures text is visible */
  font-family: "Poppins", sans-serif;
}

/* Navbar Padding */
.navbar {
  padding-top: 1rem !important; /* Top padding */
  padding-bottom: 1rem !important; /* Bottom padding */
  padding-left: 2rem !important; /* Left padding */
  padding-right: 2rem !important; /* Right padding */
}

.accent-btn {
  background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
  color: #0a1a2f;
  font-weight: bold;
  border-radius: 40px;
  padding: 12px 28px;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.7);
  transition: all 0.3s ease-in-out;
  letter-spacing: 0.5px;
}

.accent-btn:hover {
  background: #fff;
  color: #000;
  box-shadow: 0 0 20px rgba(192, 192, 192, 1), 0 0 30px rgba(192, 192, 192, 0.8);
  transform: scale(1.05);
}

#counters {
  background: linear-gradient(135deg, #0a1a2f, #102544);
}

#counters h2 {
  font-size: 3rem;
  font-weight: bold;
}

#counters p {
  margin-top: 10px;
  font-size: 1.1rem;
  color: #c0c0c0;
}

.career-card {
  background: rgba(17, 34, 64, 0.7); /* dark navy glass effect */
  border: 1px solid rgba(192, 192, 192, 0.15);
  transition: 0.3s ease;
}

.career-card:hover {
  transform: translateY(-5px);
  border-color: #c0c0c0;
}

.career-form {
  background: rgba(17, 34, 64, 0.9); /* navy with transparency */
  border: 1px solid rgba(192, 192, 192, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.career-form .form-control {
  background: rgba(10, 26, 47, 0.8);
  border: 1px solid rgba(192, 192, 192, 0.3);
  color: #fff;
}

.career-form .form-control:focus {
  border-color: #c0c0c0;
  box-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}

.career-form textarea {
  resize: none;
}

/* Input & textarea background for dark theme */
form .form-control {
  background: rgba(17, 34, 64, 0.8); /* dark navy glass */
  border: 1px solid rgba(192, 192, 192, 0.2);
  color: #fff;
  padding: 12px 15px;
  border-radius: 8px;
  transition: 0.3s ease;
}

/* Placeholder color */
form .form-control::placeholder {
  color: #aaa;
}

/* On focus */
form .form-control:focus {
  background: rgba(17, 34, 64, 0.95);
  border-color: #c0c0c0; /* glowing silver */
  box-shadow: 0 0 8px rgba(192, 192, 192, 0.6);
  color: #fff;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  width: 55px;
  height: 55px;
  bottom: 20px;
  left: 20px;
  background: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Go-to-Top Button */
#goTopBtn {
  position: fixed;
  bottom: 90px; /* push it above chatbot */
  right: 20px;
  z-index: 998;
  background: #c0c0c0;
  color: #0a1a2f;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: 0.3s ease;
}
#goTopBtn:hover {
  background: #fff;
  color: #000;
  transform: scale(1.1);
}

/* Chatbot Floating Button */
.chatbot-float {
  position: fixed;
  bottom: 20px; /* chatbot stays at the bottom */
  right: 20px;
  width: 55px;
  height: 55px;
  background: #c0c0c0;
  color: #0a1a2f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: 0.3s ease;
}
.chatbot-float:hover {
  background: #fff;
  color: #000;
  transform: scale(1.1);
}

/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  background: linear-gradient(135deg, #0a1a2f, #112240);
  overflow: hidden;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 26, 47, 0.7);
  z-index: 1;
}
.hero .container {
  position: relative;
  z-index: 2;
}

/* Particle canvas */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Trusted By Section */
.grayscale {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s;
}
.grayscale:hover {
  filter: none;
  opacity: 1;
}

/* Navbar custom theme */
.custom-navbar {
  background: linear-gradient(90deg, #0a192f, #112240); /* Navy gradient */
}

/* Nav links */
.custom-navbar .nav-link {
  color: #d1d5db; /* light silver-gray */
  font-weight: 500;
  padding: 0.7rem 1rem;
  transition: color 0.3s ease, text-shadow 0.3s ease, border-bottom 0.3s ease;
}

.custom-navbar .nav-link:hover {
  color: #f1f1f1; /* brighter silver */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* glowing effect */
  border-bottom: 2px solid #c0c0c0;
}

.custom-navbar .nav-link.active {
  color: #ffffff; /* pure white */
  text-shadow: 0 0 10px rgba(192, 192, 192, 0.9);
}

/* Contact Button */
.custom-navbar .btn-accent {
  background-color: #c0c0c0; /* silver */
  color: #0a192f;
  font-weight: 600;
  transition: 0.3s ease;
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.6);
}

.custom-navbar .btn-accent:hover {
  background-color: #e0e0e0;
  color: #0a192f;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
}

/* Mobile toggle button */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Hero Section with background image + gradient */
.hero {
  min-height: 100vh;
  background: linear-gradient(
      180deg,
      rgba(10, 25, 47, 0.9),
      rgba(17, 34, 64, 0.95)
    ),
    url("https://images.unsplash.com/photo-1526378722484-cc6c2f5d6f7f?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

/* Silver glowing text */
.glow-silver {
  color: #e0e0e0;
  text-shadow: 0 0 10px rgba(192, 192, 192, 0.8),
    0 0 20px rgba(192, 192, 192, 0.6);
}

/* Silver button reused */
.hero .btn-accent {
  background-color: #c0c0c0;
  color: #0a192f;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.6);
  transition: all 0.3s ease;
}

.hero .btn-accent:hover {
  background-color: #e0e0e0;
  color: #0a192f;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}

/* About Section */
.about {
  background: linear-gradient(180deg, #112240, #0a192f);
}

.about h2 {
  font-size: 2.5rem;
}

.about-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(192, 192, 192, 0.2);
  transition: 0.3s ease;
}

.about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
}

/* Logo Styling */
.company-logo {
  height: 50px;
  transition: all 0.3s ease-in-out;
  filter: drop-shadow(0 0 5px rgba(192, 192, 192, 0.6));
}

.company-logo:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 15px rgba(192, 192, 192, 0.9));
}

/* Accent Button (Hero + Navbar) */
.accent-btn {
  background: #ffcc00; /* Accent yellow */
  color: #0a192f;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 30px;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.7);
  transition: all 0.3s ease-in-out;
}

.accent-btn:hover {
  background: #ffd633;
  color: #0a192f;
  box-shadow: 0 0 20px rgba(255, 204, 0, 1);
  transform: translateY(-3px);
}

/* Services Section */
.services {
  background: linear-gradient(180deg, #0a192f, #112240);
}

.services h2 {
  font-size: 2.5rem;
}

.service-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(192, 192, 192, 0.2);
  transition: 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
}

.bg-navy {
  background: #0a1a2f;
}

.list-group-item {
  background: transparent;
  color: #ccc;
  border: none;
}
.list-group-item:hover,
.list-group-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Base background */
.pro-bg {
  background-color: #0a1a2f; /* deep navy blue */
  color: #fff; /* keep text readable */
}

/* Product cards */
.product-card {
  background: #142d4c; /* lighter navy blue */
  border: 1px solid rgba(192, 192, 192, 0.15);
  border-radius: 15px;
  transition: 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: #c0c0c0;
  box-shadow: 0 6px 18px rgba(192, 192, 192, 0.25);
}

.glow-silver {
  color: #c0c0c0;
  text-shadow: 0 0 8px rgba(192, 192, 192, 0.6);
}

.text-accent {
  color: #c0c0c0;
  font-weight: 600;
}

.accent-btn {
  background: #c0c0c0;
  color: #0a1a2f;
  font-weight: bold;
  border-radius: 30px;
  transition: all 0.3s;
}
.accent-btn:hover {
  background: #fff;
  color: #000;
}

/* === Contact Page Styling === */
.product-card {
  background: rgba(20, 45, 76, 0.8);
  border: 1px solid rgba(192, 192, 192, 0.1);
  transition: 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: #c0c0c0;
}

/* Input + Textarea fields */
.form-control {
  border: 1px solid rgba(192, 192, 192, 0.3);
  padding: 12px 15px;
  border-radius: 8px;
}
.form-control:focus {
  border-color: #c0c0c0;
  box-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
  background: rgba(20, 45, 76, 0.9);
  color: #fff;
}

/* Placeholder text */
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Accent button (same as hero/cta) */
.accent-btn {
  background: #c0c0c0;
  color: #0a1a2f;
  font-weight: bold;
  border-radius: 30px;
  padding: 10px 25px;
  transition: all 0.3s ease;
}
.accent-btn:hover {
  background: #fff;
  color: #000;
}

/* Glow silver text */
.text-accent,
.glow-silver {
  color: #c0c0c0 !important;
  text-shadow: 0 0 8px rgba(192, 192, 192, 0.6);
}

/* Map rounded edges */
iframe {
  border-radius: 12px;
}

footer h5,
footer h6 {
  margin-bottom: 15px;
}

footer a:hover {
  color: #c0c0c0 !important;
  text-shadow: 0 0 6px rgba(192, 192, 192, 0.5);
}