/* Basic page setup */
html, body {
  height: 100%; /* Ensure body takes up full height */
  margin: 0;    /* Remove default margin */
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  padding: 10px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Header shadow */
}

.header-container {
  display: flex;
  align-items: center;
}

.header-logo {
  height: 50px;
}

body {
  padding-top: 80px; /* Increased padding to accommodate fixed header */
  display: flex;
  flex-direction: column;
  min-height: 100%; /* Make body take full height */
}
.card-title {
  color: black; 
}

.cards-container {
  width: 50%;
  margin: 0 auto;
  flex-grow: 1; /* Allow cards container to grow and push footer to bottom */
}

/* Footer styles */
footer {
  background-color: #343a40;
  color: white;
  text-align: center;
  padding: 1px 0;
  margin-top: auto; /* Push footer to the bottom */
}

/* Calculators*/
/* Loan EMI Button style*/
.btn-outline-primary {
    border: none !important;
  }
  
  .btn-outline-primary.active {
    background-color: #1e73be !important;
    transition: background-color 0.3s ease !important;
  }
  
  button:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  
  #calculate_emi_btn:hover {
    background-color: #0a4685;
    transition: background-color 0.3s ease;
  }
  
  /* Center positioning for the calculators*/
  #loan .calculator-box, #fd .calculator-box, #rd .calculator-box {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* full width buttons on mobile */
  @media (max-width: 768px) {
    .d-flex.flex-column button {
      width: 100%;
    }
  }
  /* EMI table responsive and scrollable*/
  .table-responsive {
    max-height: 400px;
    overflow-y: auto;
  }
  .table th, .table td {
    text-align: left;
    vertical-align: middle;
  }