/* screen - background-image */

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

.login-container {
    position: relative;
    width: 400px; /* Adjust width as needed */
    padding: 20px;
    border-radius: 28.46px;
    overflow: hidden; /* Prevents animation overflow */
    background: #ffffff; /* White background inside */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Moving animated border */
.login-container::before {
    content: "";
    position: absolute;
    inset: -4px; /* Extends slightly beyond the container */
    border-radius: 28.46px;
    pointer-events: none;
    z-index: -1;
    padding: 4px;

    /* Gradient border animation */
    background: linear-gradient(90deg, rgba(248, 240, 240, 1), rgba(61, 129, 224, 1), rgba(129, 169, 230, 1), rgba(103, 154, 228, 1));
    background-size: 300% 300%;
    animation: animateBorder 4s infinite linear;

    /* Creates a hollow effect */
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: exclude;
}


.background-image {
  align-items: flex-start;
  background-image: url(/img/loginpage/background-image.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100vh;
  position: relative;
}

.background-image .container {
  align-items: flex-end;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: space-between;
  padding: 24px 24px 24px 0px;
  position: relative;
  width: 100%;
  zoom: 0.8;
}

.background-image .text-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 0px 64px;
  position: relative;
  width: 592px;
      padding-bottom: 64px;
}

.background-image .dot-container {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  margin-bottom: -54.00px;
  position: relative;
  transform: rotate(-90deg);
  margin-left: 55px;
}

.background-image .ellipse-64 {
  background-color: #dfeafa;
}

.background-image .ellipse-66 {
  background-color: var(--royal-blue);
}

.background-image .ellipse-65 {
  background-color: #eda145;
}

.background-image .title {
  align-self: stretch;
  color: transparent;
  font-weight: 400;
  line-height: 47.6px;
  position: relative;
}

.background-image .span0 {
  color: #f5f5f5;
  font-weight: 700;
      font-family: 'Montserrat';
}

.background-image .span1 {
  color: var(--white);
 /* font-family: var(--font-family-montserrat-medium);*/
  font-size: var(--font-size-xxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 33.6px;
      font-family: 'Montserrat';
}

.background-image .span2 {
  color: #eda145;
 /* font-family: var(--font-family-montserrat-medium);*/
  font-size: var(--font-size-xxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 33.6px;
      font-family: 'Montserrat';
}

.background-image .login-container {
  -webkit-backdrop-filter: blur(7.5px) brightness(100%);
  align-items: center;
  align-self: stretch;
  backdrop-filter: blur(7.5px) brightness(100%);
  background-color: #0b325180;
  border: none;
  border-radius: 28.46px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px;
  position: relative;
  width: 474px;
}

.background-image .ellipse {
  border-radius: 15px;
  height: 30px;
  position: relative;
  width: 30px;
}