/* style.css */

/* Global font & reset */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #f5f8fa;
  color: #343a40;
  margin: 0;
  padding: 0;
}

/* Container form */
.form-container {
  max-width: 480px;
  margin: 60px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 0.75rem; /* rounded-lg */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

/* Headings */
.form-container h2 {
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #1d3557;
}

/* Customize Bootstrap primary color via CSS variable */
:root {
  --bs-primary: #1d3557;      /* dark blue */
  --bs-primary-rgb: 29,53,87;
  --bs-body-bg: #f5f8fa;
}

/* Buttons */
.btn-primary {
  width: 100%;
  padding: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: #16314a;
}

/* Form labels */
.form-label {
  font-weight: 500;
}

/* Input focus style */
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(29, 53, 87, 0.25);
}

/* Link styling */
a {
  color: var(--bs-primary);
}
a:hover {
  color: #16314a;
  text-decoration: none;
}

/* Footer text */
.text-center a {
  font-weight: 500;
}
/* Mobile Responsive */
@media (max-width: 768px) {
  .main-content {
    margin-left: 0 !important;
    padding: 1rem;
  }
  .offcanvas {
      width: 220px !important;
  }
}

/* Desktop */
@media (min-width: 768px) {
  .main-content {
    margin-left: 220px;
    padding: 1.5rem;
  }
}