@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Shavian&family=Noto+Sans+Sundanese:wght@400..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.noto-sans-shavian-regular {
    font-family: "Noto Sans Sundanese", sans-serif;
    font-family: "Noto Sans Shavian", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-family: "Raleway", sans-serif;

}

* {
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
    color: white;
}

.hero {
    background-color: #1F2937;
    height: 100vh;
    min-height: 650px !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    background-image: url(../media/bg.png);
}

.logo {
    height: 50vh;
    width: 100vw;
    min-height: 325px;
    display: flex;
    justify-content: center;
    margin-top: 60px;
    align-items: end;
}

.logo>img {
    height: 100%;
    transition: ease-out 0.6s;
    transform: scale(0.1);

}

.anim-1{
    transform: scale(1) !important;
}

h1 {
    font-family: "Noto Sans Shavian", sans-serif;
    color: white;
    font-size: 70px;
    transform: translateY(-10px);
    font-weight: 600;
    text-align: center;
}

.hero>p {
    font-family: "Raleway", sans-serif;
    color: white;
    transform: translateY(-8px);
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 10px;
}

.btn-hero {
    width: 350px;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.hero-btn-1 {
    width: 146px;
    padding: 7px 0px;
    background-color: #0137fb;
}

.hero-btn-2 {
    width: 146px;
    padding: 7px 0px;
    background-color: #b20000;

}

button {
    border: none;
    border-radius: 40px;
    font-family: "Raleway", sans-serif;
    color: white;
    font-size: 21px;
    font-weight: 600;
    border: solid white 5px;
    transition: linear 100ms;
}

button:hover {
    border-color: black;
    color: black;
    cursor: pointer;
}

.hero-btn-2:hover {
    border-color: black;
    color: black;
    cursor: pointer;
}

.about{
    height: 90vh;
    min-height: 580px;
    background-color: #111827;
    display: flex;
    justify-content: center;
    align-content: center;
    /* background-image: url(../media/bg.png); */

}

.about-section-1 > img{
    width: 300px; 
}
h2{
    font-family: "Noto Sans Shavian", sans-serif;
    font-family: "Raleway", sans-serif;
    color: white;
    font-size: 65px;
    font-weight: 700;
    text-align: center;
}
.about-section{
    width: 45%;
}
.about-section-1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about-section-2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Raleway", sans-serif;
}
.about-section-2 >p{
    margin: 0px 20px;
    text-align: center;
    font-size: 26px;

}
.about-anotation{
    color: #b20000;
    font-weight: 600;
}
.portal{
    background-color: #1F2937;
    height: 100vh;
    min-height: 650px;
    padding-top: 50px;
    background-image: url(../media/bg.png);
    overflow: hidden;


}
.portal-header > img{
    width: 130px;
}
.portal-header{
    display: flex;
    align-items: center;
    justify-content: center;
}
h3{
    font-size: 70px;
    font-family: "Raleway", sans-serif;
    margin-left: 20px;
}
.portals{
    margin-top: 80px;
    display: flex;
    justify-content: center;
}
.portals > a > img{
    height: 360px;
    margin: 0px 45px;
    cursor: pointer;
    border-radius: 10px;
}
.portals >a > img:hover{
    box-shadow: 20px 20px 20px black;
}

.vision{
    height: 125vh;
    min-height: 950px;
    background-color: #111827;
    display: flex;
    flex-direction: column;
    padding-top: 50px;
}
.vision-header{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}
.vision-header > img{
    width: 130px;
}
h4{
    font-size: 70px;
    font-family: "Raleway", sans-serif;
    margin: 0px 15px;
}

.vision-content{
    display: flex;
    margin-top: 55px;
    justify-content: center;
    align-items: center;
    
}
.vision-content > img{
    height: 530px;
    margin-left: 70px;
    margin-right: 20px;

}
.vision-content > p{
    font-size: 25px;
    font-family: "Raleway", sans-serif;
    text-align: center;
    width: 80vw;
    margin-left: 30px;
}
/* SCROLLER TEST */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

.wrapper {
  width: 100%;
  max-width: 1536px;
  margin-inline: auto;
  position: relative;
  min-height: 300px;
  margin-top: 5rem;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
  padding:50px 0px 20px 0px;
  
  background: rgb(17,24,32);
background: linear-gradient(0deg, rgba(17,24,32,1) 42%, rgba(31,41,55,1) 58%);
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

.item {
  width: 200px;
  height: 200px;
  /* background-color: red; */
  background-color: #111827;
  border-radius: 6px;
  position: absolute;
  left: max(calc(200px * 8), 100%);
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item > img{
    height: 140px;
    width: 140px;
    margin-bottom: 8px;
}
.item > p{
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.item1 {
  animation-delay: calc(30s / 8 * (8 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 8 * (8 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 8 * (8 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 8 * (8 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 8 * (8 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 8 * (8 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 8 * (8 - 7) * -1);
}

.item8 {
  animation-delay: calc(30s / 8 * (8 - 8) * -1);
}
h5{
    font-size: 50px;
    font-family: "Raleway", sans-serif;
    margin: 40px 15px;
    text-align: center;
    /* align-self: self-start; */
}
.credits{
    height: 100vh;
    min-height: 520px;
    background-color: #1F2937;
    display: flex;
    flex-direction: column;
    background-image: url(../media/bg.png)
}

.footer{
    height: 50vh;
    min-height: 600px;
    /* background-color: #470000; */
    background-color: #1F2937;
    background-image: url(../media/bg.png);
    /* position: relative; */
    /* bottom: 30px; */
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    overflow: hidden;
}
.footer-band{
    height: 70vh;
    /* min-height: 976px; */
    background-color: #111827;
    border-radius: 30px;
    position: relative;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-item{
    height: 80%;
    width: 40%;
    background-color: #1f2937; 
    border-radius: 10px;
    margin: 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-mid > img{
    height: 170px;
    margin-bottom: 10px;
}
h6{
    font-size: 40px;
    font-family: "Raleway", sans-serif;
    text-align: center;

}
.footer-mid > p{
    font-family: "Raleway", sans-serif;
    font-size: 20px;
    margin-top: 5px;
}
.social > img{
    height: 40px;
    margin-right: 4px;
    border-radius: 12px;
}
.social{
    display: flex;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}
.social-4{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.social-1 > img, .social-3 > img{
    border-radius: 12px;
}
.social > p{
    font-size: 20px;
    transition: 100ms ease-in;
}
.social > p > a{
    text-decoration: none;
    transition: 100ms ease-in;
    
}
.social-1 > p:hover, .social-3 > p:hover{
    transform: scale(1.16);
    margin-left: 15px;
}
.social-2 > p:hover{
    transform: scale(1.16);
    margin-left: 15px;
}
.social-4 > p:hover{
    transform: scale(1.16);
    margin-left: 15px;
}
.social-1 > p > a:hover, .social-3 > p > a:hover{
    color: #b50060;
    font-weight: 800;
}
.social-2 > p > a:hover{
    color: #420000;
    font-weight: 800;

}
.social-4 > p > a:hover{
    color: #000000;
    font-weight: 800;

}

#preloader{
    background: #111827 url(../media/screen-loader.gif) no-repeat center center;
    background-size: 100%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
}