.btn-info {
  background: #00a3dd;
}

.btn-info:hover {
  background: #003549;
}

.btn-outline-info {
  border: 1px solid #00a3dd !important; /* Match content box border thickness */
  color: #00a3dd;
  border-radius: 0.5rem !important; /* Match content box border radius */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; /* Match content box shadow */
  transition: all 0.15s ease-in-out;
}

.btn-outline-info:hover {
  background: #00a3dd;
  border-color: #00a3dd !important;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important; /* Match content box hover */
}

/* Minimal custom utilities */
.text-brand {
  color: #00a3dd !important;
}

/* Modern border styling */
.border {
  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Content sections styling */
.content-section .border {
  transition: box-shadow 0.15s ease-in-out;
}

.content-section .border:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

.fs-38 {
  font-size: 38px !important;
}

/* Mobile responsive font size */
@media (max-width: 767px) {
  .fs-38 {
    font-size: 24px !important;
  }
}

.w-300 {
  width: 300px !important;
}

/* Mobile responsive button width */
@media (max-width: 767px) {
  .w-300 {
    width: 100% !important;
    max-width: 280px;
  }
}

/* Footer styles - full width corner to corner with container-aligned content */
.footer-sticky {
  margin-top: auto;
  width: 100vw; /* Full viewport width */
  margin-left: calc(-50vw + 50%); /* Center and extend to edges */
  margin-bottom: 0;
  background: #6c757d; /* Consistent background */
  padding: 2rem 0; /* Vertical padding for breathing room */
}

/* Footer content container - align with main content */
.footer-sticky .container {
  max-width: 1320px; /* Match Bootstrap container */
  margin: 0 auto;
  padding: 0 15px;
}

/* Footer border styling - clean and minimal */
.footer-sticky .row {
  border: none !important; /* Remove accent line for cleaner look */
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
  padding-top: 0; /* Remove extra padding since no border */
}

/* Modern typography for footer */
.footer-sticky h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

.footer-sticky p {
  color: #e9ecef !important;
  line-height: 1.6 !important;
}

.footer-sticky .small {
  color: #ced4da !important;
  line-height: 1.5 !important;
}

.footer-sticky a {
  color: #ffffff !important;
  text-decoration: underline !important;
  transition: color 0.3s ease;
}

.footer-sticky a:hover {
  color: #00a3dd !important;
}

/* Ensure consistent container width across all sections */
.container {
  padding-left: 15px;
  padding-right: 15px;
}

html, body {
  padding: 0;
  margin: 0;
  min-height: 100vh; /* Ensure full viewport height */
}

/* Page layout wrapper for proper footer positioning */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content should take available space */
.content-wrapper {
  flex: 1;
  margin-bottom: 2rem; /* Add space between content and footer */
}

/* Content spacing */
.content-section {
  margin-bottom: 2rem;
}

.content-section:last-of-type {
  margin-bottom: 0; /* Remove bottom margin from last content section */
}

/* Mobile responsive spacing */
@media (max-width: 767px) {
  .content-section {
    margin-bottom: 1.5rem;
  }
  
  .content-section:last-of-type {
    margin-bottom: 0; /* Remove bottom margin from last content section on mobile too */
  }
}

/* Mobile responsive footer adjustments */
@media (max-width: 767px) {
  .footer-sticky .row {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  .footer-sticky .col-md-3,
  .footer-sticky .col-md-9 {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  .footer-sticky .small {
    font-size: 0.75rem !important;
  }
  
  /* Add extra spacing for login cards on mobile */
  .content-section .border {
    margin-bottom: 1rem;
  }
}