.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f6f9;
  background-image: url("cib-loader-bg.jpg");
  background-size: cover;
  background-position-x: center;
  background-position-y: top;
}

.loader-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  z-index: 9999;
}

.cib-loader-box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 8px 32px rgba(138, 21, 56, 0.12), 0px 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.stack-child {
  position: absolute;
}

.rotating-bg {
  width: 66px;
  height: 66px;
  border-radius: 50%;

  background: conic-gradient(from 0deg,
      rgba(138, 21, 56, 0.00) 0deg,
      rgba(138, 21, 56, 0.08) 60deg,
      rgba(138, 21, 56, 0.25) 120deg,
      rgba(138, 21, 56, 0.58) 180deg,
      rgba(138, 21, 56, 0.88) 240deg,
      rgba(138, 21, 56, 0.55) 300deg,
      rgba(138, 21, 56, 0.00) 360deg);

  animation: spin 1.4s linear infinite;

  -webkit-mask: radial-gradient(farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 5px));

  mask: radial-gradient(farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 5px));
}

.animated-logo-container {
  width: 56px;
  height: 56px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-icon {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: breathe 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite alternate;
}

.logo-icon svg {
  width: 100%;
  height: 100%;
  fill: #8a1538;
  /* CBQ Maroon */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes breathe {
  from {
    transform: scale(0.75);
  }

  to {
    transform: scale(1.05);
  }
}