@keyframes headers{
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0);
  }
}

header {
    height:80px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: absolute;
    top: 0%;
    left: 0%;
  }

  .header-left{
    animation:headers 2s;
  }

  .header-right{
    top:0%;
    left:100%;
    animation: oli 4s;
  }


.accessbutton, .menubutton, .paybutton, .exbutton, .inbutton{
  color:#ffffff;
  cursor: pointer;
  display: block;
  transition: transform 0.3s ease;
  font-size: clamp(100%px, 2vw, 150%);
  margin-left:50px;
}

.paybutton:hover{
  transform: scale(1.05);
}
 .menubutton:hover{
  transform: scale(1.05);
}
.accessbutton:hover{
  transform: scale(1.05);
}
.exbutton:hover{
  transform: scale(1.05);
}
.inbutton:hover{
  transform: scale(1.05);
}

.arow:hover{
  cursor: pointer;
}

.paybutton::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background-color: #fff;
  transition: width 0.3s ease;
}

.accessbutton::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background-color: #fff;
  transition: width 0.3s ease;
}

.menubutton::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background-color: #fff;
  transition: width 0.3s ease;
}

.exbutton::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background-color: #fff;
  transition: width 0.3s ease;
}

.inbutton::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background-color: #fff;
  transition: width 0.3s ease;
}

.paybutton:hover::after {
  width: 100%;
}

.accessbutton:hover::after {
  width: 100%;
}

.menubutton:hover::after {
  width: 100%;
}

.exbutton:hover::after {
  width: 100%;
}

.inbutton:hover::after {
  width: 100%;
}



  .header-right2{
    display:none;
  }
  
  .toplogo {
      height: 70px;
      float:left;
    }
    
    .toptitle { 
      display: inline;
      margin-left: 10px;
      height:80px;
    }
    .toptitle2 { 
      display:none;
    }

    .headerbutton{
    padding: 10px 20px;
    width:200px;
    border-radius: 20px;
    margin-left: 10px;
  }

  .headerbutton:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }












@media (max-width: 768px) {

  header {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
  }

  .header-left, .header-right, .toptitle {
    display:none;
  }

  .header-right2{
    display:inline-block;
    width:100%;
    align-items: center;
  }

  .toptitle2 {
    align-items:center;
    display: inline;
    width:100%;
  }
}