@font-face {
  font-family: "Boston trafic";
  src: url('../font/boston.ttf');
  src: url('../font/boston.eot?#iefix') format('embedded-opentype'),
  url('../font/boston.woff') format('woff'),
  url('../font/boston.ttf') format('truetype'),
  url('../font/boston.svg') format('svg');
}

body{
  background-image: linear-gradient(to bottom, #00ccff, #0000ff);
  background-attachment: fixed;
}

/* navbar */

.navbar-custom .navbar-toggler:hover,
.navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-toggler:target,
.navbar-custom .navbar-toggler,
.navbar-toggler-icon,
.navbar-custom .navbar-toggler-icon:hover{
  color: white;
}

.navbar-toggler-icon {
  color: #fff;
}

.navbar-custom .navbar-nav > li > a {
  color: #fff;
}

.navbar-custom .navbar-nav > .active > a {
  color: #fff;
  background-color: transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
  text-decoration: none;
  background-color: #151515;
  color: #fff;
  border-radius: 10px;
  border: 2px solid #fff;
}

.navbar-custom .dropdown-menu {
  background-color: rgba(0,0,0,.5);
  color: #fff;
}

.navbar-custom .dropdown-item{
  color: #fff;
}

.navbar-custom .dropdown-item:hover{
  background-color: #001780;
}

.navbar-custom .navbar-brand {
  color: #FFF;
  font-family: Times New Roman;
  font-size: 1em;
}

.navbar-custom .navbar-toggle {
  background-color: #fff;
}
.navbar-custom .icon-bar {
  background-color: #001780;
}

.navbar-custom .btn {
  color: white;
}

.navbar-nav .nav-item a.nav-link {
  color: #fff;
}

.navbar-custom svg{
  width: 20px;
  margin-left: 10px;
}

/* end navbar */


/* jumbotron */

.jumbotron {
  background-image: url('../image/bg1.jpg');
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-position: center;
}

.jumbotron .jumbotron-logo{
  content: '';
  background-image: url('../image/logo1.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 15rem;
  height: 15rem;
  transition: 1s;
  animation: fade 3s linear forwards;
  animation-delay: 2s;
  opacity: 0;
}

.jumbotron-logo:hover {
  width: 17rem;
}

.jumbotron .container {
  z-index: 1;
}

.jumbotron p {
  font-family: Boston trafic;
  box-shadow: 5px 5px 5px #000;
}

.jumbotron .container h1 {
  color: white;
  font-weight: 1000;
  align-content: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  font-size: 1.5em;
  animation: fade 3s linear forwards;
  animation-delay: 2.2s;
  opacity: 0;
  text-shadow: 5px 5px 5px #000;
}

.jumbotron h1 svg{
  width: 10%;
  text-shadow: 5px 5px 5px #000;
}

.jumbotron::after {
  content: '';
  background-color: rgba(0, 0, 0, 0.7);
  background-position: 100px 100px;
  background-size: cover;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  top: 55px;
}

.jumbotron .btn:hover{
  background-image: linear-gradient(to right, #000000, #00ff00);
}

.jumbotron .btn{
  background-color: transparent;
  border: 2px solid white;
  border-radius: 20px;
  width: 200px;
  transition: 1s;
  animation: fade 3s linear forwards;
  animation-delay: 2.4s;
  opacity: 0;
}

@keyframes fade{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}


.jumbotron h1{
  font-family: Boston Trafic, Sans-Serif;
}

.jumbotron-1{
  align-self: center;
}

/* end jumbotron */

/* about */

.about{
  background-image: linear-gradient(to bottom, #000, #00aa00, #000);
  color: white;
  font-family: Times New Roman,Times, serif;
}

.about img{
  width: 70%;
  transition: .5s;
}

.about h2{
  text-shadow: 5px 5px 5px #000;
}

.about p{
  text-align: justify;
  color: white;
  word-spacing: .2px;
}

/* end about */

/* container-2 */

.about-2{
  background-image: url('../image/bg2.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: white;
  position: relative;
}

.about-2 .card-course{
  background-color: rgba(0,0,0,.5);
  border: 2px solid white;
  border-radius: 20px;
  z-index: 2;
  height: 250px;
  transition: .5s;
  box-shadow: 5px 5px 5px #000;
}

.card-course:hover{
  background-color: rgba(0,0,0,.8);
}

.about-2 .card-logo {
  background-size: cover;
  width: 10rem;
  height: 10rem;
  content: '';
  transition: 1s;
}

.about-2 .card-logo-1{
  background-image: url('../image/course1.png');
}

.about-2 .card-logo-2{
  background-image: url('../image/course2.png');
}

.about-2 .card-logo-3{
  background-image: url('../image/course3.png');
}

.about-2 .card-course:hover .card-logo{
  transform: rotatey(180deg);
}

.about-2 h2{
  z-index: 2;
  color: white;
  text-shadow: 5px 5px 5px #000;
}

.about-2 .card-course p{
  cursor: pointer;
  z-index: 2;
  font-size: 1.25em;
  font-family: Times New Roman, Times, Sans-Serif;
}


/* end container-2 */

/* what we do */

.card-wwd{
  display: flex;
  flex-direction: row;
  background-color: rgba(0,0,0,.5);
  border: 2px solid white;
  z-index: 2;
  min-height: 120px;
  transition: 1s;
  box-shadow: 5px 5px 5px #000;
}

.card-wwd:hover{
  background-color: rgba(0,0,0,.8);
}

.card-wwd p{
  align-self: center;
  font-size: 1.2em;
  font-family: Times New Roman,Times, Sans-Serif;
}

.card-wwd h2{
  text-shadow: 5px 5px 5px #000;
}

.card-wwd-image{
  content: '';
  width: 7rem;
  height: 7rem;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 1s;
  margin: 20px;
}

.card-wwd-image-1{
  background-image: url('../image/hacking.png');
}

.card-wwd-image-2{
  background-image: url('../image/security.png');
}

.card-wwd-image-3{
  background-image: url('../image/networking.png');
}

.card-wwd-image-4{
  background-image: url('../image/programing.png');
}

.card-wwd-image-5{
  background-image: url('../image/development.png');
}

.card-wwd-image-6{
  background-image: url('../image/design.png');
}

.card-wwd:hover .card-wwd-image{
  transform: rotatey(180deg);
}

/* end what we do */

/* services */
.card-ser{
  background-color: rgba(0,0,0,.5);
  border: 2px solid #fff;
  z-index: 2;
  transition: .5s;
  box-shadow: 5px 5px 5px #000;
}

.card-ser h2{
  text-shadow: 5px 5px 5px #000;
}

.card-ser-image{
  content: '';
  width: 7rem;
  height: 7rem;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 1s;
}

.card-ser:hover{
  background-color: rgba(0,0,0,.8);
}

.card-ser:hover .card-ser-image{
  transform: rotateY(180deg);
  height: 8rem;
  width: 8rem;
}

.card-ser-image-1{
  background-image: url('../image/pentesting.png');
}

.card-ser-image-2{
  background-image: url('../image/bug bounty.png');
}

.card-ser-image-3{
  background-image: url('../image/web developer.png');
}

.card-ser p{
  font-size: 1.2em;
  font-family: Times New Roman,Times, Sans-Serif;
}
/* end services */

/* quotes */

.container-quotes{
  background-color: #000;
  background-image: linear-gradient(to bottom, #000, #343434);
}

.container-quotes p{
  font-size: 2em;
  font-family: Times New Roman,Times, serif;
}

/* end quotes */

/* team */
.container-team{
  background-image: url('../image/bg3.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

/* .container-team:after{
  content: '';
  background-color: rgba(0, 0, 0, 0.4);
  background-position: 100px 100px;
  background-size: cover;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: 2;
} */

.container-team h2{
  z-index: 2;
}

.member-item li {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 10px;
  float: center;
  margin: auto;
  position: relative;
  right: 20px;
  box-shadow: 5px 5px 5px #000;
}

.member-item{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  z-index: 5;
}

/* .portfolio-item li,
.portfolio-item li a img,
.portfolio-item li span {
} */

.member-item li span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:  100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 100%;
  color: #fff;
  font-size: 2em;
  opacity: 0;
  transform: scale(0) rotate(0);
  transition: .5s;
}

.member-item li a {
  z-index: 5;
}

.member-item li img{
  z-index: 5;
}

.member-item li a:hover span {
  opacity: 1;
  transform: scale(1);
}

.clear {
  clear: both;
}


/* overlay */
.overlay {
  width: 0;
  height: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  z-index: 9999;
  transition: .8s;
  text-align: center;
  padding: 100px 0;
}

li ul a span{
  color: #FFFFFF;
}

.onimg{
  width: 100%;
  height: 100%;
}

.overlay:target {
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .7);
}

.overlay img {
  box-shadow: 2px 2px 7px rgba(0, 0, 0, .5);
  margin: auto;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 5px 5px 5px #000;
}

.overlay:target img {
  animation: zoomDanFade 1s;
}

.overlay .close {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -20px;
  color: white;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  line-height: 14px;
  padding: 5px;
  opacity: 0;
}

.overlay:target .close {
  animation: slideDownFade .5s .5s forwards;
}

.overlay .prev, .next {
  text-decoration: none;
  color: #00ccff;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 10px;
}

.overlay .prev-next{
}

.overlay .prev{
  left: 100;
}

.overlay .next{
  right: 100;
}

.overlay:target .next,  .overlay:target .prev{
  animation: fade-in .5s .5s forwards;
}

.overlay a svg{
  width: 50px;
  height: 50px;
  transition: .5s;
}

.overlay a svg:hover{
  color: #0000ff;
}

@keyframes zoomDanFade {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideDownFade {
  0% {
    opacity: 0;
    margin-top: -20px;
  }

  100% {
    opacity: 1;
    margin-top: 0;
  }
}


/* end team */

/* partner */
.container-partner{
  background-image: url('../image/bg4.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
}

.container-partner h2{
  z-index: 2;
}

.container-partner .card{
  z-index: 2;
  background-color: rgba(0,0,0,.5);
  border: 2px solid #00ccff;
  transition: 1s;
  box-shadow: 5px 5px 5px #000;
  border-radius: 10px;
}

.container-partner .card:hover{
  background-color: rgba(0,0,0,.75);
}

.container-partner .card .card-img-partner{
  content: '';
  width: 7rem;
  height: 7rem;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 1s;
}

.container-partner .card:hover .card-img-partner{
  transform: scale(1.25);
}

.container-partner .card .card-img-partner-1{
  background-image: url('../image/partner/jcs.png');
}

.container-partner .card .card-img-partner-2{
  background-image: url('../image/partner/jx.png');
}

.container-partner .card .card-img-partner-3{
  background-image: url('../image/partner/phl.png');
}

.container-partner .card .card-img-partner-4{
  background-image: url('../image/partner/ztc.png');
}

.container-partner .card .card-body p{
  font-size: 1em;
  font-family: Times New Roman, Times, serif;
}

/* end partner */

/* contact */
.contact{
  background-image: linear-gradient(to bottom, #000, #00aa00, #000);
}

.contact .form-contact{
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 10px;
}

.contact button{
  border-color: #fff;
}
/* end contact */

/* footer */
footer{
  background-color: #000675;
}

footer p.copy{
  color: white;
  font-family: Times New Roman, Times, serif;
}

footer img{
  width: 300px;
}

footer p{
  color: white;
}

footer li{
  list-style: none;
}

footer li a{
  color: white;
  outline: none;
  text-decoration: none;
}
/* end footer */

/* scroll top */

#myBtn {
  display: none;
  position: fixed; 
  bottom: 30px; 
  right: 30px; 
  z-index: 99;
  border: none;
  outline: none; 
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  font-size: 18px; 
}

#myBtn svg{
  width: 40px;
  height: 40px;
}

#myBtn svg:hover {
  color: #00aaff; 
}

/* end scroll top */

/* preload */
.putar{
	width: 100px;
	height: 100px;
	border:4px solid #f3f3f3;
	border-top:5px solid #3498db;
	border-radius: 100%;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin:auto;
	animation: putar 2s infinite linear;
}
 
@keyframes putar{
	from{
		transform:
		rotate(0deg);
	}to{
		transform: rotate(360deg);
	}
}
 
#overlay{
	height: 100%;
	width: 100%;
	background: #010101;
	position: fixed;
	left: 0;
	top: 0;
	animation: hilang 5s linear forwards;
	animation-delay: 4s;
	z-index: 1002;
}

@keyframes hilang{
  0%, 90%{
    z-index: 1002;
  }
  100%{
    z-index: -1;
    display: none;
  }
}
/* end preload */