/* basic configuration */
* {
	margin: 0;
	padding: 0;
  }
  
  html {
	scroll-behavior: smooth;
	box-sizing: border-box;
  }
  
  body {
	background-color: #f5F5F5;
	font-family: 'Prompt', sans-serif;
  }

  
  /* navbar */
  nav {
	background-color: #2f66b3;
  }
  
  .nav-link {
	  color: #ffffff;
	  font-size: 13px;
  }

  #navbar-container {
	background-color: #2f66b3;
	background: #2f66b3;
  }

  #navbar-container a {
	color: #ffffff;
  }

  .navbar-toggler:focus,
  .navbar-toggler,
  .navbar-toggler:active,
  .navbar-toggler-icon:focus {
	outline: none;
	border: 0;
	box-shadow: none;
  }
  
  .navbar-toggler span {
	margin: 0;
	padding: 0;
  }
  
  .navbar-toggler {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	position: relative;
	transition: 0.5s ease-in-out;
  }
  
  .toggler-icon {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #000000;
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
  }
  
  .middle-bar {
	margin-top: 0px;
  }
  
  /* when navigation is clicked */
  .navbar-toggler .top-bar {
	margin-top: 0px;
	transform: rotate(135deg);
  }
  
  .navbar-toggler .middle-bar {
	opacity: 0;
	filter: alpha(opacity=0);
  }
  
  .navbar-toggler .bottom-bar {
	margin-top: 0px;
	transform: rotate(-135deg);
  }
  
  /* state when the navbar is collapsed */
  .navbar-toggler.collapsed .top-bar {
	margin-top: -20px;
	transform: rotate(0deg);
  }
  
  .navbar-toggler.collapsed .middle-bar {
	opacity: 1;
	filter: alpha(opacity=100);
  }
  
  .navbar-toggler.collapsed .bottom-bar {
	margin-top: 20px;
	transform: rotate(0deg);
  }

#illus {
	width: 300px;
	display: flex;
	justify-content: center;
	justify-items: center;
}

.card {
	width: 80%;
	margin: auto;
	padding: 15px;
	background-color: #ffffff;
	border-radius: 25px;
	border: 0;
	box-shadow:  13px 13px 34px #d3d3d3,
             -13px -13px 34px #ffffff;
}

#sectionMisi {
	margin-top: 75px;
	background-image: url(asset/Drone.png);
	background-size: 100%;
	background-blend-mode: screen;
	border-radius: 50px;
}

#aboutNepur {
	padding: 5px 15px;
	border: 2px solid #2772DB;
	border-radius: 50px;
	text-decoration: none;
}

#aboutNepur:hover {
	padding: 5px 15px;
	border: 2px solid #2772DB;
	border-radius: 50px;
	text-decoration: none;
	background-color: #f5ebeb;
	color: #2772DB;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

.kuotaJudul {
	text-align: center;
}

#CardKuota {
	width: 100%;
	height: 230px;
	margin: auto;
}

.count
{
  line-height: 100px;
  color: #000000;
  margin-left:30px;
  font-size:25px;
  text-align: center;
  margin: auto;
}

#CounterNumber {
	font-size: 60px;
	margin: auto;
}

#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

.linker
{
  font-size : 20px;
  color: black;
}

.linkAlur img:hover {
	opacity: 80%;
	padding: 5px;
	border: 7px solid #2772DB;
}

#tombolLihatKompKeahlian {
	text-align: center;
	margin-top: 45px;
	margin: auto;
	color: #2772DB;
}

#tombolLihatKompKeahlian a {
	text-decoration: none;
	color: inherit;
}

#Messege {
	width: 100%;
	height: 150px;
	border: 5px solid #2772DB;
	border-radius: 20px;
}

/* From uiverse.io by @adamgiebl */
button {
	font-family: inherit;
	font-size: 20px;
	background: royalblue;
	color: white;
	padding: 0.7em 1em;
	padding-left: 0.9em;
	display: flex;
	align-items: center;
	border: none;
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.2s;
   }
   
   button span {
	display: block;
	margin-left: 0.3em;
	transition: all 0.3s ease-in-out;
   }
   
   button svg {
	display: block;
	transform-origin: center center;
	transition: transform 0.3s ease-in-out;
   }
   
   button:hover .svg-wrapper {
	animation: fly-1 0.6s ease-in-out infinite alternate;
   }
   
   button:hover svg {
	transform: translateX(1.2em) rotate(45deg) scale(1.1);
   }
   
   button:hover span {
	transform: translateX(5em);
   }
   
   button:active {
	transform: scale(0.95);
   }
   
   @keyframes fly-1 {
	from {
	 transform: translateY(0.1em);
	}
   
	to {
	 transform: translateY(-0.1em);
	}
   }
   
#divider {
	margin-top: 225px;
	position: relative;
	z-index: 999;
}

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

#shiva {
	background-color: #a4c4f0;
	color: #ffffff;
	padding: 5px;
	border-radius: 25px;
}

#footer a{
	color: #2772DB;
}

#footer a:hover {
	text-decoration: underline;
}

#footer {
	padding: 75px;
}

#copyright {
	background-color: #7697c7;
}