/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

main > .container {
  padding: 85px 10px 0;
}

main> .container-login {
  padding: 185px 10px 0;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none; /* Initially hide the button */
z-index: 1000;
cursor: pointer;
}

.btn.back-to-top {
border: 2px solid white;
border-radius: 50%;
}

#back-to-top:hover {
background-color: #007bff; /* Change the background color on hover */
}

/* Invert the image when the dark theme is active */
[data-bs-theme='dark'] .invert-on-dark {
  filter: invert(0);
}

/* Invert the image when the light theme is active */
[data-bs-theme='light'] .invert-on-dark {
  filter: invert(1); /* Revert back to the original colors */
}

/* Initially hide both images */
.logo-image {
  display: none;
  
}

/* Show light logo when light theme is active */
[data-bs-theme='auto'] .light-mode {
  display: block;
}

[data-bs-theme='light'] .light-mode {
  display: block;
}

/* Show dark logo when dark theme is active */
[data-bs-theme='dark'] .dark-mode {
  display: block;
}

/*shadow-box custom*/
.box-shadow{
	-webkit-box-shadow: 0 1px 1px rgba(72,78,85,.6);
	box-shadow: 0 1px 1px rgba(72,78,85,.6);
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

.box-shadow:hover{
	-webkit-box-shadow: 0 20px 40px rgba(72,78,85,.6);
	box-shadow: 0 20px 40px rgba(72,78,85,.6);
	-webkit-transform: translateY(-15px);
	-moz-transform: translateY(-15px);
	-ms-transform: translateY(-15px);
	-o-transform: translateY(-15px);
	transform: translateY(-15px);
}

/*shine-box custom*/
.box-shine {
  position: relative;
  overflow: hidden;
}

.box-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.5s ease;
  transform: skewX(-30deg);
}

.box-shine:hover::before {
  left: 240px;
  transform: translateX(100%);
}

.block-stripes {
  background-image: repeating-linear-gradient(-55deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.1) 5px, rgba(0, 0, 0, 0.1) 10px);
}

.body-gold {
  background: 
    repeating-linear-gradient(30deg, #fff2 0 10%, #fff0 0 24%),
    repeating-linear-gradient(-23deg, #fff2 0 4%, #fff0 0 14%)
    rgb(247, 240, 200) !important;
}

.text-center.fs-2.mt-3.mb-3.border.border-dark.shadow-sm.rounded:hover {
  animation: shine-border 0.5s forwards;
}

@keyframes shine-border {
  0% {
      border-color: #000;
  }
  50% {
      border-color: #fff;
  }
  100% {
      border-color: #000;
  }
}
/* ////////////////////////////////////// */ 

html {
    height:100%;
  }
  
  body {
    margin:0;
  }
  
  .bg {
    animation:slide 13s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, rgb(200, 224, 188) 50%, rgb(143, 199, 236) 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  }
  
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:24s;
  }
  
  .bg3 {
    animation-duration:25s;
  }
  
  .content {
    background-color:rgba(255,255,255,.8);
    border-radius:.25em;
    box-shadow:0 0 .25em rgba(0,0,0,.25);
    box-sizing:border-box;
    left:50%;
    padding:10vmin;
    position:fixed;
    text-align:center;
    top:50%;
    transform:translate(-50%, -50%);
  }
  
  h1 {
    font-family:monospace;
  }
  
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }

 /* /////////////////////////////////////// */