body {
  background: url('../images/background.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed; /* keeps it static */
}

.alert-danger{
  background-color: #FF7A7A;
  color: #fff;
}

.top-heading,
.btn-explore{
  text-decoration: none;
  color: #fff;
}

.logo-top{
  max-height: 35px;
}

.logo-main{
  max-height: 80px;
}

.header-container{
    color: #fff;
}

.main-container {
  background: rgba(255, 255, 255, 0.8); /* semi-transparent */
}

.card-kpi {
  color: #fff;
  border: none;
  height: 120px;
  box-sizing: border-box;
}

.card{
  border: 0;
}

.menu-card{
  color: #fff;
  padding: 8%;
  padding-left: 3%;
  margin: 2%;
  margin-left: 0;
  text-decoration: none;
  font-weight: 800;
}

.menu-card:first-child {
  margin-top: 0;
}

.research-btn {
  color: #fff;
  border: none;
  height: 60px;
  box-sizing: border-box;
  cursor: pointer;
}

.breadcrumbs {
  color: #4c4c4c;
  padding: 3px;
  padding-left: 6px;
  padding-right: 6px;
  background-color: #F9F9F9;
  border-radius: 8px;
  display: inline-block;
  font-size: 0.9rem;
  text-decoration: none;
}


/* Red border for selected card */
.card-kpi.selected {
  outline: 4px solid #FF7F7F; /* thin red border */
  outline-offset: -4px;
  box-sizing: border-box; /* ensures border doesn’t change card size */
}

/* Blue Gradient */
.bg-gradient-blue {
  background: linear-gradient(to bottom, #4a90e2, #50a0f0);
}
.bg-gradient-blue:hover {
  background: linear-gradient(to bottom, #357acb, #3c8be0);
}
.bg-gradient-blue.selected {
  background: linear-gradient(to bottom, #1f4f91, #2769b7);
}

/* Green Gradient */
.bg-gradient-green {
  background: linear-gradient(to bottom, #49B79A, #53D1B1);
}
.bg-gradient-green:hover {
  background: linear-gradient(to bottom, #3C967C, #48B598);
}
.bg-gradient-green.selected {
  background: linear-gradient(to bottom, #1f7f74, #2e9d8c);
}

/* Red Gradient */
.bg-gradient-red {
  background: linear-gradient(to bottom, #8e0e00 0%, #e52d27 100%);
}
.bg-gradient-red:hover {
  background: linear-gradient(to bottom, #5c0800 0%, #b2221c 100%);
}
.bg-gradient-red.selected {
  background: linear-gradient(to bottom, #2d0300 0%, #700d12 100%);
}

/* Purple Gradient */
.bg-gradient-purple {
  background: linear-gradient(to bottom, #7b5de6, #9a7df0);
}
.bg-gradient-purple:hover {
  background: linear-gradient(to bottom, #5f44c9, #7a63da);
}
.bg-gradient-purple.selected {
  background: linear-gradient(to bottom, #3d2d88, #5643a8);
}

/* Orange Gradient */
.bg-gradient-orange {
  background: linear-gradient(to bottom, #e65c00 0%, #f9d423 100%);
}
.bg-gradient-orange:hover {
  background: linear-gradient(to bottom, #b44900 0%, #c7b218 100%);
}
.bg-gradient-orange.selected {
  background: linear-gradient(to bottom, #732b00 0%, #8c8400 100%);
}

/* Teal Gradient */
.bg-gradient-teal {
  background: linear-gradient(to bottom, #004d40 0%, #26a69a 100%);
}
.bg-gradient-teal:hover {
  background: linear-gradient(to bottom, #00332d 0%, #1b7e7a 100%);
}
.bg-gradient-teal.selected {
  background: linear-gradient(to bottom, #001a15 0%, #0e4d4b 100%);
}