@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

body {
   font-family: "Roboto", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   font-variation-settings:
    "wdth" 100;
   font-size: 14px;
}

a { transition: 0.3s; }

.alert { border: 0px; }

.border { border-color: #edf5ff !important; }

.btn { border: 0px; border-radius: 70px; padding: 18px 36px; }
.btn-primary { border: 0px; background-color: #e000cf; color: #e6cbfd; font-size: 14px; }
.btn-primary:hover { background-color: #ab01be; color: #ffffff; }

.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-28 { font-size: 28px; }

.text-primary { color: #b700c2 !important; }

/*header.header {
   background-image: linear-gradient(rgba(219, 0, 205, 0.5), rgba(219, 0, 205, 0.3)), url("/assets/img/item-2.jpg");
   background-position: center;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}*/

header.header .navbar {
   margin: 0px;
   padding: 14px 0px;
   background-color: #edf5ff;
}

header.header .navbar a.navbar-brand {
   font-family: "Righteous", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #de00ce;
   font-size: 28px;
}

header.header .navbar ul.navbar-nav {
   padding: 0px 0px 0px 0px;
}

header.header .navbar ul.navbar-nav li.nav-item {
   padding-left: 36px;
}

header.header .navbar ul.navbar-nav li.nav-item a.nav-link {
   padding: 14px 0px;
   position: relative;
   color: #9191a2;
}

header.header .navbar ul.navbar-nav li.nav-item a.nav-link::before {
   content: '';
   position: absolute;
   width: 45px;
   height: 4px;
   border-radius: 0px;
   background-color: #b301c0;
   bottom: 0;
   left: 0;
   transform-origin: left;
   transform: scaleX(0);
   transition: transform .3s ease-in-out;
}

header.header .navbar ul.navbar-nav li.nav-item a.nav-link:hover {
   color: #b301c0;
}

header.header .navbar ul.navbar-nav li.nav-item a.nav-link:hover::before {
   transform-origin: left;
   transform: scaleX(1);
}

header.header .navbar .btn {
   padding: 14px 36px;
   border: 0px;
   font-size: 14px;
}

header.header .navbar .btn-primary {
   background-color: #e000ce;
}

header.header .navbar .btn-primary:hover {
   background-color: #ab01be;
}

.frontpage {
   margin: 0px;
   padding: 0px;
}

.frontpage .heroes {
   margin: 0px;
   padding: 189px 0px;
   background-image: linear-gradient(rgba(18, 17, 74, 0.8), rgba(18, 74, 74, 0.8)), url("assets/img/item-1.jpeg");
   background-position: center;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.frontpage .heroes .card {
   margin: 0px auto;
   padding: 0px;
   max-width: 950px;
   border: 0px;
   background-color: transparent;
}

.frontpage .heroes .card .card-header {
   font-size: 25px;
   color: #e000ce;
   background-color: transparent;
   border: 0px;
}

.frontpage .heroes .card .card-body {
   font-size: 25px;
   color: #ffffff;
   border: 0px;
}

.frontpage .heroes .card .card-footer {
   border: 0px;
   background-color: transparent;
}

.frontpage .countdown {
   margin: -80px 0px 0px;
   padding: 0px;
   color: #ffffff;
}

.frontpage .countdown .count {
   margin: 0px;
   padding: 30px 30px;
   background-color: #b700c2;
   border-radius: 9px;
}

.frontpage .check {
   margin: 90px 0px;
}

.frontpage .events {
   margin: 0px;
   padding: 45px 0px;
   background-color: #edf5ff;
}

.frontpage .events .card {
   border: 0px;
   background-color: transparent;
}

.frontpage .events .card .card-header {
   border: 0px;
   background-color: transparent;
}

.frontpage .events .card .card-body {
   margin: 0px;
   padding: 0px;
}

.frontpage .events .card .card-body .categories {
   margin: 0px;
   padding: 0px;
   font-size: 18px;
}

.frontpage .events .card .card-body .users {
   margin: 0px;
   padding: 0px;
}

.frontpage .events .card .card-body .borders {
   margin: 0px;
   padding: 27px;
   border: #dee6ef 3px solid;
   border-radius: 5px;
}

.frontpage .events .card .card-body p {
   text-align: justify;
}

.contact {
   margin: 0px;
   padding: 0px;
   position: relative;
}

.contact .contact-card {
   margin: 0px;
   padding: 60px 30px;
   border-radius: 9px;
   background-color: #b700c2;
   color: #ffffff;
}

.visitor {
   margin: 0px;
   padding: 0px;
   background-color: #ffffff;
}

.visitor .card {
   border: 0px;
}

.visitor .card .card-header {
   border: 0px;
   background-color: transparent;
}

.visitor .card .card-body {
   margin: 0px;
   padding: 0px;
}

.components {
   margin: 0px;
   padding: 0px;
}

.components .header {
   margin: 0px;
   padding: 120px 0px;
   background-image: linear-gradient(rgba(18, 17, 74, 0.8), rgba(18, 74, 74, 0.8)), url("assets/img/item-3.jpg");
   background-position: center;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.components .content .error {
   padding: 45px 0px;
   color: #12114a;
}

.components .content .about p {
   text-align: justify;
   line-height: 27px;
}

.components .content .check-biodata {
   margin: 0px auto;
   padding: 90px 0px;
   max-width: 450px !important;
}

.components .content .check-biodata .card {
   border: 0px;
   margin: 0px;
   padding: 0px;
}

.components .content .check-biodata .card .card-body {
   margin: 0px;
   padding: 18px 0px;
}

.components .content .login form {
   margin: 90px auto;
   padding: 0px;
   max-width: 450px !important;
}

.components .content .members {
   margin: 0px;
   padding: 0px;
}

.components .content .members .card {
   border: #edf5ff solid 1px;
}

.components .content .members .card .card-header {
   padding: 14px 14px;
   background-color: #edf5ff;
   border: 0px;
}

.components .content .members .card ul.list-group li.list-group-item {
   padding: 14px 14px;
   border: 0px;
}

.components .content .members .card ul.list-group li.list-group-item a {
   text-decoration: none;
   color: #515151;
}

.components .content .members .card ul.list-group li.list-group-item a:hover {
   color: #d300ca;
}

.components .content .members .frontpage {
   margin: 0px;
   padding: 0px;
}

.components .content .members .frontpage a {
   text-decoration: none;
}

.components .content .members .frontpage a:hover {
   color: #d300ca;
}

.maps {
   margin: -90px 0px 0px;
   padding: 270px 0px;
   background-image: linear-gradient(rgba(18, 17, 74, 0.1), rgba(18, 74, 74, 0.1)), url("assets/img/map.png");
   background-position: center;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

footer.footer {
   background-color: #12114a;
   font-family: "IBM Plex Sans Condensed", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 13px;
   color: #9191a2;
}

footer.footer a {
   text-decoration: none;
   color: #ffffff;
}

footer.footer a:hover {
   color: #d300ca;
}

@media only screen and (max-width: 600px) {
   header.header .navbar ul.navbar-nav {
      padding: 0px;
   }

   header.header .navbar ul.navbar-nav li.nav-item {
      padding-left: 0px;
   }

   .frontpage .countdown { margin: 0px; background: #b700c2; }
   .frontpage .countdown .fs-28 { font-size: 17px; }
}