:root {
 --primary: #2F71F0;
 --secondary: #f18b2c;
 --dark: #212D5B
}


body {
 font-family: "Instrument Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: "Inter", sans-serif;
 letter-spacing: -7%;
}

nav.navbar {
 background-color: var(--primary);
 transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;

 a.nav-link {
  font-weight: 600;
 }

 a.nav-link {
  color: white !important;
 }


 &.navbar-stick {
  background-color: #fff;
 }
}

.btn {
 height: 48px;
 transition: all 0.1s ease-in-out;
 -webkit-transition: all 0.1s ease-in-out;
 -moz-transition: all 0.1s ease-in-out;
 -ms-transition: all 0.1s ease-in-out;
 -o-transition: all 0.1s ease-in-out;

 border-radius: 99px;
 -webkit-border-radius: 99px;
 -moz-border-radius: 99px;
 -ms-border-radius: 99px;
 -o-border-radius: 99px;
}

.btn-dark {
 background-color: var(--dark);
 color: white;
 font-weight: 600;
}



.bg-gradient-primary {
 background: linear-gradient(135deg, #2F71F0 0%, #3072F0 100%);
}


h1.title {
 font-size: 52px;
 color: white;

 .highlight {
  background-image: url('../img/element.svg');
  background-size: contain;
  background-repeat: no-repeat;
 }
}

/* Kompetensi */
.kompetensi {
 .item {

  i {
   font-size: 32px;
   color: var(--primary);
  }

  .title {
   font-size: 18px;
   font-weight: 600;
   color: var(--dark);
  }
 }
}

/* Pedoman */
.pedoman {
 background: linear-gradient(180deg, #5270A110, #5270A100);
 border-radius: 0 56px 0 0;
 -webkit-border-radius: 0 56px 0 0;
 -moz-border-radius: 0 56px 0 0;
 -ms-border-radius: 0 56px 0 0;
 -o-border-radius: 0 56px 0 0;

 .list-doc {


  .item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 16px 0;

   a {
    color: var(--dark);
    text-decoration: underline;
   }


   &:not(:last-child) {
    border-bottom: 1px solid #00000020;
   }
  }
 }
}