@font-face{
    font-family: 'B Traffic';
    src: url(../fonts/B\ Traffic.ttf);
}
a{
    color: unset;
}
.s1{
    background-image: url(../img/bg-1.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-clip: content-box;
    position: relative;
    z-index: 0;
    height: 100vh;
    padding: 0%;
    font-family: 'B Traffic';
}
.s1-dark{
    background-color: rgba(0, 0, 0, 0.65);
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
}
.s1-top{
    position: relative;
    z-index: 2;
    height: 50vh;
    width: 100%;
}
.s1-bottom-container{
    z-index: 2;
    position: relative;
    height: 50vh;
}
.s1-div-row{
    direction: rtl;
    height: 33%;
    font-size: 1em
}
.s1-bottom-div-card{
    direction: rtl;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: relative;
    border-radius: 1rem;
    border: 1px #ffffff40 solid;
    background-color: rgb(0 0 0 / 54%);
    transition: background-color ease 500ms;
}
.s1-bottom-div-card:hover{
    background-color: rgba(255, 255, 255, 0.125);
    transition: all ease 500ms;
}
.s1-bottom-div-card a:hover{
    column-gap: 0.6rem !important;
    transition: all ease 1000ms;
}
.s1-bottom-div-card a:hover > i{
    transform: rotateY(360deg);
    font-size: 1.3em;
    -webkit-transform: rotateY(360deg);
    transition: all ease 1000ms;
}
.s1-bottom-div-card a:hover > span{
    font-size: 1.1em;
    transition: all ease 1000ms;
}
.s1-bottom-div-card a:hover > span::after{
    content: "";
    width: -webkit-fill-available;
    width: -moz-available;
    height: 1px;
    background-color: rgb(255, 255, 255);
    display: inline-block;
}
.card-a{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
    transition: all linear 500ms;
}
.card-i{
    transition: all ease-in-out 500ms;
}
.card-span{
    transition: all ease-in 500ms;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fa-hand-holding-medical{color: lightgreen;}
.fa-users-gear{color: #ff5252;}
.fa-people-carry-box{color: gold;}
.fa-gavel{color: sienna;}
.fa-scroll{color: white;}
.fa-link{color: deepskyblue;}
.fa-photo-film{color: #aa7bff;}
.fa-memo-circle-info{color: #75dfff;}
.fa-phone-flip{color: mediumspringgreen;}
.fa-person-booth{color: #6c7cff;}