@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  background-image: url("../image/watermark.png");
  padding: 25px;
  background-size: 100vh;
  background-repeat: repeat;
}
/* .body-bg {
  background-image: url("../image/watermark.png");
  padding: 25px;
  background-size: 100vh;
  background-repeat: repeat;
} */

.custom-table-width {
  width: 50%;
}

.honorTable::-webkit-scrollbar {
  display: none;
}

.gradient-bg {
  background: linear-gradient(-45deg, #0d2b50, #05101d, #0d2b50);
  background-size: 200% 200%;
  animation: gradientShift 0s ease infinite;
  color: white;
}
.gradient-bg-rev {
  background: linear-gradient(-45deg, #7a0d1e, #2b050b, #7a0d1e);
  background-size: 200% 200%; /* Ensures smooth transition */
  animation: gradientShift 0s ease infinite; /* Adjust the speed as needed */
  color: white; /* Ensures text is visible on the gradient */
}

.gradient-bg:hover {
  color: rgb(241, 218, 4);
}
.gradient-bg-rev:hover {
  color: rgb(241, 218, 4);
}

.navbar {
  background: linear-gradient(-45deg, #7a0d1e, #2b050b, #7a0d1e);
  background-size: 200% 200%; /* Ensures smooth transition */
  animation: gradientShift 0s ease infinite; /* Adjust the speed as needed */
  color: white; /* Ensures text is visible on the gradient */
}

#formContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
  transition: top 0.3s; /* Smooth transition for hiding/showing */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .custom-table-width {
    width: 100%;
  }
}