@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  --clr-primary: #553cd3;
  --clr-secondary: #070a19;
  --clr-bg-dark: #1c2a3b;
  --clr-card-bg: #22273B;
  --clr-card-dark: #151A27;
  --clr-accent: #d5c2ba;
  --clr-highlight: #553cd3;
  --clr-footer: #070a19;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--clr-secondary);
  color: #fff;
  margin: 0;
}

.hero-gradient {
  background: linear-gradient(135deg, #6e4eff 0%, #553cd3 80%);
}

section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.avatar-stack {
  border: 2px solid #fff;
}

.avatar-stack:not(:first-child) {
  margin-left: -15px;
}

nav .a {
  font-size: .9rem !important;
}
@media (max-width: 991px) {
  .hero-gradient .display-4 {
    font-size: 2.2rem;
  }
}
@media (max-width: 767px) {
  .hero-gradient .display-4 {
    font-size: 1.7rem;
  }
  header .container,
  footer .container {
    gap: 0.75rem!important;
  }
  .hero-gradient,
  section {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }
  #features .row.g-4 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .about .row,
  .about .col-md-4,
  .about .col-md-8 {
    text-align: center;
  }
  .py-5 {
    padding-top: 2.2rem!important;
    padding-bottom: 2.2rem!important;
  }
  #demo img,
  #hero img {
    max-width: 100%;
    height: auto!important;
  }
}
.card-img-top {
  object-fit: cover;
}
img.rounded-circle {
  object-fit: cover;
}
#demo .rounded-3 {
  object-fit: cover;
  min-height: 120px;
}
footer {
  font-size: 0.99rem;
}
footer ul {
  padding-left: 0;
}
footer .list-unstyled li + li {
  margin-top: 0.35rem;
}
footer .fw-semibold {
  font-weight: 600;
}
blockquote {
  font-style: italic;
  border-left: 4px solid var(--clr-primary);
  background: #181d2b!important;
}
.btn-outline-light {
  border-width: 1.5px;
}
.btn-outline-primary {
  border-width: 1.5px;
}
@media (max-width: 576px) {
  .footer .row > [class^="col"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
}

/* Gradient backgrounds for pricing cards */
.bg-gradient-primary {
  background: linear-gradient(45deg, #4b6cb7, #182848);
}
.bg-gradient-info {
  background: linear-gradient(45deg, #6dd5ed, #2193b0);
}
.bg-gradient-dark {
  background: linear-gradient(45deg, #343a40, #121416);
}

/* Pricing card styling */
.pricing-card {
  transition: all 0.3s ease;
  border-radius: 15px;
  overflow: hidden;
}
.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.pricing-card .card-header {
  border-bottom: none;
}
.pricing-card .btn {
  transition: all 0.3s ease;
}
.pricing-card .btn:hover {
  transform: scale(1.05);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .pricing-card {
      margin-bottom: 20px;
  }
  #pricingCards {
      flex-direction: column;
      align-items: center;
  }
}
/* Demo Form Styling */
.demo-form {
  max-width: 600px;
  margin: 0 auto;
}

.input-wrapper {
  position: relative;
}

.form-control {
  transition: all 0.3s ease;
}

.form-control:focus {
  background-color: #e0f7fa;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
  border-color: #007bff !important;
}

.input-icon {
  transition: all 0.3s ease;
}

.form-control:focus + .input-icon {
  color: #0056b3;
}

.btn-gradient-primary {
  background: linear-gradient(45deg, #4b6cb7, #182848);
  color: white;
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
}

.btn-gradient-primary:hover {
  background: linear-gradient(45deg, #182848, #4b6cb7);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}
.btn-gradient-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .demo-form {
      flex-direction: column;
      gap: 15px;
  }

  .btn-gradient-primary {
      width: 100%;
      justify-content: center;
  }
}