/* ===== Global Styles ===== */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #f8f9fa; /* light neutral background */
  color: #1c1c1c; /* charcoal text */
  
}

/* ===== Navbar ===== */
.navbar {
  background-color: #1c1c1c; /* charcoal black */
  position: sticky;
  top: 0;
  z-index: 1020; /* ensures it stays above other elements */
}
.navbar-brand {
  font-weight: 700;
  letter-spacing: 1px;
  color: #00d4ff !important; /* aqua cyan brand */
}
.nav-link {
  color: #f8f9fa !important; /* light text */
  transition: color 0.3s ease;
}
.nav-link:hover {
  color: #00d4ff !important; /* aqua hover */
}

/* ===== Hero Section ===== */
.bg-dark.text-secondary {
  background: linear-gradient(135deg, #1c1c1c, #6c757d); /* charcoal to cool gray */
  color: #f8f9fa;
}
.bg-dark.text-secondary h1 {
  font-size: 3rem;
  font-weight: 700;
}
.bg-dark.text-secondary p {
  font-size: 1.25rem;
  margin-bottom: 20px;
}
.bg-dark.text-secondary .btn {
  font-size: 1.2rem;
  padding: 10px 30px;
  border-radius: 30px;
  background-color: #00d4ff;
  color: #1c1c1c;
  border: none;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.bg-dark.text-secondary .btn:hover {
  transform: scale(1.05);
  background-color: #6c757d;
  color: #f8f9fa;
}

/* ===== Features Section ===== */
#features .card {
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#features .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ===== Pricing Section ===== */
#pricing .card {
  border-radius: 10px;
  transition: transform 0.3s ease;
}
#pricing .card:hover {
  transform: scale(1.05);
}
#pricing .btn {
  background-color: #00d4ff;
  border: none;
  color: #1c1c1c;
}
#pricing .btn:hover {
  background-color: #6c757d;
  color: #f8f9fa;
}

/* ===== Testimonials ===== */
#testimonials blockquote {
  font-style: italic;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#testimonials blockquote:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/*===== Call-to-Action Banner =====*/
#cta {
  background: linear-gradient(135deg, #1c1c1c, #6c757d); /* charcoal to cool gray */
}
#cta .btn {
  font-size: 1.2rem;
  padding: 10px 30px;
  border-radius: 30px;
  background-color: #00d4ff;
  color: #1c1c1c;
  border: none;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
#cta .btn:hover {
  transform: scale(1.05);
  background-color: #6c757d;
  color: #f8f9fa;
}

/* ===== Footer ===== */
footer {
  background-color: #1c1c1c; /* ensure dark background */
  color: #f8f9fa;           /* light text */
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;         /* space above footer */
}
footer a {
  color: #00d4ff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
.social-icon i {
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon:hover i {
  transform: scale(1.3) rotate(5deg); /* pop + slight tilt */
  color: #0dcaf0; /* Bootstrap cyan accent */
}
/* ===== Login/Sign Up Page ===== */
#login-page {
  background: linear-gradient(135deg, #1c1c1c, #6c757d); /* charcoal to cool gray */
  
}

.card {
    background-color: #1c1c1c;
    color: #f8f9fa;
  border-radius: 12px;
   box-shadow: 0 0 25px rgba(13, 202, 240, 0.4); /* cyan glow */
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 0 35px rgba(13, 202, 240, 0.7); /* intensified glow on hover */
}
.btn-primary {
  background: #00d4ff;
  border: none;
  color: #1c1c1c;
}
.btn-primary:hover {
  background: #6c757d;
  color: #f8f9fa;
}
.text-center a {
  color: #00d4ff;
  text-decoration: none;
}