@import url('https://fonts.cdnfonts.com/css/azonix');
  @import url('https://fonts.cdnfonts.com/css/avenir');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* border: 1px solid white; */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  animation: spin 2s linear infinite;
}

.glr {
    transition: opacity 0.2s ease-out, filter 0.2s ease-out;
  }
  
  .next-trigger img {
    transition: transform 0.2s ease-out;
  }
.hero{
    height: 100vh;
    background-image: url("./img/Vue3.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
.Azonix{
    font-family: 'Azonix', sans-serif;
}

.Avenir{
    font-family: 'Avenir', sans-serif;
}

.transition300{
    transition: all 300ms;
}

.bntanm::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background-color: #fff;
    transition: all 500ms;
    border-radius: 999px;
    opacity: .4;
}

.bntanm:hover::before{
    scale: 1.3;
}

.opening{
    animation-name: welcome;
    animation-duration: 2s;
}

@keyframes welcome {
    from {height: 100vh}
    to {height: 100px;}
}


.videoup{
    animation-name: vdoup;
    animation-duration: 2s;    
}
@keyframes vdoup {
    from {top: -300px; opacity: 0;}
    to {top: 5%; opacity: 1}
}

.section-container
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.section
{
    width: 1060px;
}

.g0 {
    transition: all .8s ease-in-out; /* This will create a fade effect */
    opacity: 0; /* Start with the image transparent */
    filter: blur(5px);
}

/* Add a class for when the image is active/visible */
.active-image {
    opacity: 1; /* Fully visible */
    filter: blur(0px);
  }



  


  
#appimg {
transition: all 0.3s ease-in-out;
}



.slide-in-next,
.slide-out-next{
transform: translateY(170%);
/* filter: blur(300px); */
}

.slide-out-prev,
.slide-in-prev {
    transform: translateY(170%);
    /* filter: blur(300px); */
}


.footer{
    background-image: url("./img/foo.jpeg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}