.soon{
    margin-top: 80vh ;
}

body {
    background-color: #092D38;
    color: #fff;
   }
  
.soon-header{
  position: static !important;
}

  @keyframes fadeIn {
    from {top: 5%; opacity: 0;}
    to {top: 100; opacity: 1;}
    
  }
  
  @-webkit-keyframes fadeIn {
    from {top: 5%; opacity: 0;}
    to {top: 100; opacity: 1;}
    
  }


  
  .wrapper {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    animation: fadeIn 1000ms ease;
    -webkit-animation: fadeIn 1000ms ease;
    text-align: center;
  }
  
  h1 {
    font-size: 2em;
    text-wrap: nowrap;
    line-height: 2;
   }
  @media screen and (max-width:500px) {
    h1 {
        font-size: 1.3em;
         }

           
  .wrapper {
     top: 20%;
 
  }

  .soon{
    margin-top: 50vh ;
}
  }
  
   /* loader */

.wrapper-2{
  position: absolute;
  left: 50% ;
  top: 50% ;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
   text-align: center;
}

@media screen and (min-width:500px) and (max-width:767px) {
  .wrapper-2{
     top: 43%;
  }

}
@media screen and (max-width:500px) {
  .wrapper-2{
     top: 30%;
  }

}

.loader {
    --c1:#ffffff;
    --c2:#b0bafc;
    width: 40px;
    height: 80px;
    border-top: 4px solid var(--c1);
    border-bottom: 4px solid var(--c1);
    background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;
    display: grid;
     overflow: hidden;
    animation: l5-0 2s infinite linear;
    margin: 0 auto;
    margin-top: 150px !important;
    margin-bottom: 100px !important;
  }

  @media screen and (max-width:767px) {
    .loader{
      margin-top: 300px !important;
     }
  
  }
  .loader::before,
  .loader::after {
    content: "";
    grid-area: 1/1;
    width: 75%;
    height: calc(50% - 4px);
    margin: 0 auto;
    border: 4px solid var(--c1);
    border-top: 0;
    box-sizing: content-box;
    border-radius: 0 0 40% 40%;
    -webkit-mask: 
      linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
            mask-composite: exclude;
    background: 
      linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,
      linear-gradient(var(--c2) 0 0) center/0 100%;
    background-repeat: no-repeat;
    animation: inherit;
    animation-name: l5-1;
  }
  .loader::after {
    transform-origin: 50% calc(100% + 2px);
    transform: scaleY(-1);
    --s:3px;
    --d:180deg;
  }
  @keyframes l5-0 {
    80%  {transform: rotate(0)}
    100% {transform: rotate(0.5turn)}
  }
  @keyframes l5-1 {
    10%,70%  {background-size:100% 205%,var(--s,0) 100%}
    70%,100% {background-position: top,center}
  }



.record-box{
  margin-top: 20px ;
  direction: rtl;

}

.record-link-box{
text-align: right;
margin-top: -50px;
 }

.record-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background-color: #8592EA;
  color: #fff;
  border-radius: 5px;
  font-weight: 700;
  padding: 12px 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s;
}

.button__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: #8592EA;
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.record-link:hover {
  background-color: #606aac;
}

.record-link:hover .button__icon-wrapper {
  color: #606aac;
}

.button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.record-link:hover .button__icon-svg:first-child {
  transition: transform .3s ease-in-out;
  transform: translate(150%, -150%);
}

.record-link:hover .button__icon-svg--copy {
  transition: transform .3s ease-in-out .1s;
  transform: translate(0);
}