body {
    margin: 0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.top {
    width: 100%;
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(/img/background.jpg) !important;
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-size: auto, auto;
    background-position: 100% 50% !important;
    background-size: cover !important;
}

.image-logo{height: 40%;display: flex;justify-content: center;align-items: center} 

.center{
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: baseline;
    font-weight: 700;
}

.button a{
min-width: 300px;
text-align:center;
margin: 20px 0px !important;
border: 1px solid #f9f9f9;
background-color: transparent;
margin: 0;
padding: 10px;
display: block;
color: #f9f9f9;
font-size: 16px;
font-weight: 600;
border-radius: 5px;
text-decoration:none;
transition: 0.25s;
overflow: hidden;
}
.button a::after {
  position: absolute;
  opacity: 0;
  right: 12px; 
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  transition: transform 0.4s, opacity 0.4s;
}

.button a:hover{
    background-color: #f9f9f9;
     color: #323232;
}
.button a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.button svg {
  display: block;
  margin: 0 auto;
  fill: #f9f9f9;
  transition: 0.25s;
}
.button a:hover svg{fill:#323232;}

.icon{display: block;font-size: 14px;font-style: normal;font-weight: 500;}

.icon svg{
position: absolute;
left: 50%;
transform: translate(80%,0px);
width: 10px;
}