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: 110px;
}

.header-container{
    color: #fff;
}

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

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

.card{
  border: 0;
}

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

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

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

#education-program{
    width: 200px;
    height: 100%;
}

.breadcrumbs {
  color: #4c4c4c;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  display: inline-block;
  font-size: 0.9rem;
  text-decoration: none;
}

#education-program .card{
    background: none !important;
    --bs-card-bg: none !important;
}

#education-program .card-header{
    font-weight: 600;
    font-size: 1.05rem !important;
    text-align: center;
}

#education-program .card-body{
    padding: 0 0;
    height: 80%;
}

#education-program .buttons{
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

#education-program .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: start;
    width: 130px;
    height: 80px;
    margin: 2% 1%;
    border-radius: 30px;
    background-color: #0e4d4b;
}

#education-program .btn2{
    width: 120px;
    margin: 20px 2px;
}

#education-program .small{
    font-size: .85rem;
}

#education-program .x-small{
    font-size: .75rem;
}

#education-program .green{
    background-color: #57b0a3 !important;
}

#education-program .blue{
    background-color: #6ea6e7 !important;
}

#education-program .orange{
    background-color: #ef965a !important;
}

#education-program .yellow{
    background-color: #dbcd6a !important;
}

#educationProgramModal .green{
    background-color: #78bfb5 !important;
}

#educationProgramModal .blue{
    background-color: #8bb7eb !important;
}

#educationProgramModal .orange{
    background-color: #f2ab7a !important;
}

#educationProgramModal .yellow{
    background-color: #e2d787 !important;
}

#educationProgramModal a{
    color: #000;
    text-decoration: none;
}

#educationProgramModal a:hover,
#educationProgramModal li:hover{
    text-decoration: underline;
    cursor: pointer;
}

#educationProgramModal li{
    padding: 3px 2px;
    margin: 3px 0;
}

#educationProgramModal #table-container {
    width: 800px;
}

#educationProgramModal #table-container table {
    width: 750px;
}

#educationProgramModal #table-container td {
    padding: 2px 4px;
    text-align: end;
}

/* 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%);
}