/* Custom CSS for changing navbar color on scroll */
.navbar-scrolled {
    background-color: #fff !important;
    transition: background-color 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .navbar-scrolled.navbar-dark .navbar-brand,
  .navbar-scrolled.navbar-dark .navbar-nav .nav-link {
    color: #333 !important;
  }



  /* Admin Dashboard Background Gradient */
.custom-dashboard-bg {
    background: linear-gradient(135deg, #2C0215, #4B052C, #540C47, #4F2F6B);
    background-size: 200% 200%;
    animation: gradientAnimation 10s ease infinite;
}

/* Header Background Gradient */
.custom-header-bg {
    background: linear-gradient(135deg, #2C0215, #4B052C);
    background-size: 200% 200%;
    /* animation: gradientAnimation 10s ease infinite; */
}

/* Sidebar Background Gradient */
.custom-sidebar-bg {
    background: linear-gradient(135deg, #2C0215, #4B052C, #540C47, #4F2F6B);
    background-size: 200% 200%;
    animation: gradientAnimation 10s ease infinite;
}


@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/*  ---------------------- */



  /* Custom CSS for subtle animations */
  .fade-in {
    opacity: 0;
    animation: fadeInAnimation 1s ease forwards;
  }

  @keyframes fadeInAnimation {
    to { opacity: 1; }
  }

  .slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpAnimation 0.8s ease forwards;
  }

  @keyframes slideUpAnimation {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .slide-right {
    transform: translateX(-100%);
    animation: slideRightAnimation 0.5s forwards;
  }

  @keyframes slideRightAnimation {
    to {
      transform: translateX(0);
    }
  }

  .slide-left {
    transform: translateX(100%);
    animation: slideLeftAnimation 0.5s forwards;
  }

  @keyframes slideLeftAnimation {
    to {
      transform: translateX(0);
    }
  }

  .rotate {
    animation: rotateAnimation 0.5s 1s linear;
  }

  @keyframes rotateAnimation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }


  /* Custom CSS for modern effects */
  .myjumbotron {
    /* background: url("../app_images/never-stop-learning-gada593e2b_1280.jpg") center center / cover no-repeat; */
    background:
        linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)
        ),
        url("../app_images/people-g040bfb822_1280.jpg") center center / cover no-repeat;
    /* background-repeat: no-repeat;
    /* background-attachment: fixed; */
    /* background-size: cover;
    background-position:left;  */

    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 200px 0; /* Adjust the padding to fit your content */
  }

  .card-body-darkblue {
    background-color: #1D204B;
  }

  .card-body-purple {
    background-color: #540C47;
  }

  .card-body-lightpink {
    background-color: #dd2160;
  }

  .myjumbotron h1 {
    font-size: 3.5rem;
  }

  .myjumbotron p {
    font-size: 1.25rem;
  }

  .card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
  }

  .card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }




  /* DATA TABLE   Change font color of table headers */
.dataTable thead th {
    color: #e7d7d7; /* Replace with your desired color */
}

/* Change font color of table data cells */
.dataTable tbody td {
    color: #e2ca9e; /* Replace with your desired color */
}

/* Change background color of even rows */
.dataTable tbody tr:nth-child(odd) {
    background-color: rgb(90, 18, 62); /* Replace with your desired color */
}

.dataTable tbody tr:nth-child(even) {
    background-color: #540E49; /* Replace with your desired color */
}


/* Style the search input box */
.dataTables_filter input[type="search"] {
    color: #fffcf7;
}

/* Change the text color of labels in the DataTable */
.dataTables_wrapper label {
    color: #e0acac; /* Replace with your desired text color */
}