@font-face{
    font-family: cusFonts;
    src: url('../assets/fonts/Alatsi-Regular.ttf');
}

body{
    margin: 0;
    padding: 0;
    font-family: 'cusFonts';
}

.horizontal_line div {
    background-color: gray;
    margin: 10px 0;
    height: 1px;
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 1s;
}

.typcn--location {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.657 5.304c-3.124-3.073-8.189-3.073-11.313 0a7.78 7.78 0 0 0 0 11.13L12 21.999l5.657-5.565a7.78 7.78 0 0 0 0-11.13M12 13.499c-.668 0-1.295-.26-1.768-.732a2.503 2.503 0 0 1 0-3.536c.472-.472 1.1-.732 1.768-.732s1.296.26 1.768.732a2.503 2.503 0 0 1 0 3.536c-.472.472-1.1.732-1.768.732'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.ion--mail {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M424 80H88a56.06 56.06 0 0 0-56 56v240a56.06 56.06 0 0 0 56 56h336a56.06 56.06 0 0 0 56-56V136a56.06 56.06 0 0 0-56-56m-14.18 92.63l-144 112a16 16 0 0 1-19.64 0l-144-112a16 16 0 1 1 19.64-25.26L256 251.73l134.18-104.36a16 16 0 0 1 19.64 25.26'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.eva--arrow-back-outline {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 11H7.14l3.63-4.36a1 1 0 1 0-1.54-1.28l-5 6a1.19 1.19 0 0 0-.09.15c0 .05 0 .08-.07.13A1 1 0 0 0 4 12a1 1 0 0 0 .07.36c0 .05 0 .08.07.13a1.19 1.19 0 0 0 .09.15l5 6A1 1 0 0 0 10 19a1 1 0 0 0 .64-.23a1 1 0 0 0 .13-1.41L7.14 13H19a1 1 0 0 0 0-2'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.css1{
    width: 100%;
    height: 100vh;
    background-image: url("../assets/bg1.png");
    background-size: 100% 100vh;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.linkBox{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #00000017;
    padding: 30px 0;
    border-radius: 30px;
    border: 1px solid #00000014;
    opacity: 0;
    animation: fadeIn 1s forwards;
    text-decoration: none;
}

.linkBox:nth-child(1){
    animation-delay: 0.5s;
}

.linkBox:nth-child(2){
    animation-delay: 1s;
}

@keyframes fadeIn{
    from{
        opacity: 0;
        filter: grayscale(1);
    }
    to{
        opacity: 1;
        filter: grayscale(0);
    }
}

.linkBox img{
    width: 100px;
}

.srys1{
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('../assets/bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.srysLogo{
    width: 72%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #2e3391;
    margin-top: 20%;
    animation: fadeIn 1s forwards;
}

.srysLogo img{
    width: 105px;
}

.srysLinks{
    margin-top: 6%;
    width: 72%;
}

.srysLink{
    margin: 10px 0;
    display: flex;
    align-items: self-start;
    gap: 10px;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.srysLink:nth-child(1){
    animation-delay: 0.5s;
}

.srysLink:nth-child(3){
    animation-delay: 1.5s;
}

.srysLink span{
    width: 10%;
    font-size: 20px;
    color: #8D0202;
}

.srysLink a{
    margin: 0;
    width: 90%;
    font-size: 15px;
    text-decoration: none;
    color: black;
}

.backbtn{
    font-size: 15px;
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: black;
}