@media (max-width: 600px) {
  .button-container {
    grid-template-columns: 1fr;
  }
}

.button-container {
  
  display: grid;
  
  grid-template-columns: repeat(2, 1fr);
  
  gap: 20px;
  
  max-width: 900px;
  
  margin: 0 auto;
  
  padding: 0px 0px 0px 0px;

}
.button-group{
  text-align: center;
}

.btn {
  display: block;
  width: 100%;
  padding: 10px 10px;
  margin-bottom: 16px;
  border: none;
  border-radius: 8px;
  font-size: 25px;
  font-weight: 700;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.btn:hover{
  color: #F1EFEF;
}

.btn-blue {
  background-color: #1E3A8A; /* navy blue */
}
.btn-blue:hover {
  background-color: #2563EB; /* lighter blue */
}

.btn-pink {
  background-color: #DB2777;
}
.btn-pink:hover {
  background-color: #F472B6;
}

.btn-green {
  background-color: #059669;
}
.btn-green:hover {
  background-color: #34D399;
}

.btn-yellow {
  background-color: #F59E0B;
}
.btn-yellow:hover {
  background-color: #FBBF24;
}