:root {
    --wave1: #d7eef4;
	--wave2: #a9d3e1;
	--wave3: #76b8d2;
	--wave4: #4380ac;
	--wave5: #225d96;
	--wave6: #0e4a7e;	
}
.bg-wave1{background-color:var(--wave1);}
.bg-wave6{background-color:var(--wave6);color:#fff;}
.card-footer {
    background-color: rgba(0, 0, 0, .1);
    border-top: 1px solid rgba(0, 0, 0, .075);
}
.trclass-yellow{background:#ffe9a7;}
.trclass-red{background:#ffc3c8;}
.trclass-blue{background:#ddeeff;}
.trclass-gray{background:#efefef;}


html, body {height: 10vh !important;margin: 0;padding: 0;}
body {background: linear-gradient(25deg, #76d2bd, #225d96);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;}
.transparent-wrap {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(8px);
padding: 10px;
max-width: 500px;
height: 100%;
margin: 0 auto;
position: relative;
z-index: 10; 
}
.transparent-wrap-lg {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(8px);
padding: 20px;
max-width: 1600px;
margin: 0 auto;
position: relative;
z-index: 10; 
}
.transparent-wrap-login {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(8px);
padding: 20px;
max-width: 500px;
margin: 0 auto;
position: relative;
z-index: 10; 
}
.inner-wrap {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
@media (min-width: 768px) {
body {
padding: 10px 0;
}
.desktop-buttons {
position: absolute;
transform: translateY(-50%);
width: 7px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
z-index: 1;        
}
.desktop-button-left {
left: calc(50% - 257px);
top: 200px;
border-top-left-radius: 3px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 3px;
}
.desktop-button-right {
right: calc(50% - 257px);
top: 200px;
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 0px;
}
.desktop-button-right-second {
right: calc(50% - 257px);
top: 260px;
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 0px;
}
}
@media (max-width: 767px) {
body {
padding: 0;
}
.transparent-wrap {
background: rgba(255, 255, 255, 0.06);
border-radius: 0;
border: none;
}
.inner-wrap {
background: transparent;
border: none;
border-radius: 0;
}
.desktop-buttons {
display: none;
}
}
/*waves animation by Valentin Zaraf (valentin@zaraf.com)*/
.waves {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-repeat: repeat-x;
background-size: contain;
animation: moveWave infinite linear;
}

.wave-1 {
height: 50px;
background-image: url('/assets/abex/images/wave1.png');
animation: moveWave 37s linear infinite;
z-index: 6;
}
.wave-2 {
height: 75px;
background-image: url('/assets/abex/images/wave2.png');
animation: moveWave 21s linear infinite;
z-index: 5;
}
.wave-3 {
height: 104.5px;
background-image: url('/assets/abex/images/wave3.png');
animation: moveWave 58s linear infinite;
z-index: 4;
}
.wave-4 {
height: 143.5px;
background-image: url('/assets/abex/images/wave4.png');
animation: moveWave 42s linear infinite;
z-index: 3;
}
.wave-5 {
height: 171.5px;
background-image: url('/assets/abex/images/wave5.png');
animation: moveWave 27s linear infinite;
z-index: 2;
}
.wave-6 {
height: 181.5px;
background-image: url('/assets/abex/images/wave6.png');
animation: moveWave 51s linear infinite;
z-index: 1;
}
@keyframes moveWave {
0% { background-position: 0 0; }
100% { background-position: -500px 0; }
}

.logo {
    width: 130px;
    height: 130px;
    margin: 30px auto;
    font-size: 80px;
    line-height: 130px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden; /* Ensure the icon stays inside the container during animation */
}

.logo i {
    opacity: 0; /* Start with the icon invisible */
    transform: translateY(-50px); /* Start from the top */
    animation: fadeInUp 2s ease-out forwards; /* Apply the animation */
}

@keyframes fadeInUp {
    0% {
        opacity: 0; /* Start invisible */
        transform: translateY(-50px); /* Start from 50px above */
    }
    100% {
        opacity: 1; /* End fully visible */
        transform: translateY(0); /* End at the normal position */
    }
}
.button-animate {
    opacity: 0; /* Start with the buttons invisible */
    transform: translateX(-50px); /* Start the buttons off the left */
    animation: fadeInFromLeft 0.8s ease-out forwards; /* Apply the animation */
}

@keyframes fadeInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px); /* Start from the left */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

.square-icon {
  position: relative;
}
.square-icon::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: white; /* same as your page bg */
  border: 2px solid black; /* outline of the inner square */
  border-radius: 15%; /* roundness */
}

/* Animation overlay */
#square-animation {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
}

.animation-square {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  animation: riseSquare 0.6s ease-out forwards, growSquare 0.4s ease-out forwards 0.6s;
  transform-origin: top center; /* grow downward from top edge */
}

/* Rise from bottom to 10px from top */
@keyframes riseSquare {
  0%   { transform: translateY(100vh); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(10px); opacity: 1; }
}

/* Grow after reaching the top */
@keyframes growSquare {
  0%   { width: 30px; height: 30px; }
  100% { width: 500px; height: 290px; }
}
#website{display:none;}
.nav-pills .nav-link{color:#fff;}
.nav-pills .nav-link:not(.active):hover{color:#d7eef4;}