html, body {height: 10vh !important;margin: 0;padding: 0;}
body {background: linear-gradient(25deg, #76d2bd, #225d96);}
.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; 
}
.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: absolute;
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 */
    }
}