@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

.navbar-brand img {
  height: 40px;
}
a.nav-link {
  font-family: Roboto;
  font-weight: 700;
}
.navbar-light .navbar-nav .nav-link {
  color: #000;
}

.text-black{
  color: #000 !important;
}


.lds-facebook {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #fff;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  }
  .lds-facebook div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
  }
  .lds-facebook div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
  }
  .lds-facebook div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
  }
  @keyframes lds-facebook {
    0% {
      top: 8px;
      height: 64px;
    }
    50%, 100% {
      top: 24px;
      height: 32px;
    }
  }


  .lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  


.owl-carousel .owl-item img.driver-photo{
    z-index:99999;
    margin-left:37%;
    width:100px;
    height:100px;
    z-index:999;
    border-radius:50%;
    background:#000;
    margin-top: 20px;
}

.car-about {
    height: 225px;
}

.btn-bottom-blue {
    outline: 0;
    border-radius: 0;
    font-weight: 700;
    border-bottom: 2px solid #00469F;
}

img.driver-photo {
    height: 250px;
}

.text-thin {
    font-weight: 300!important;
}

.static-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

a.btn-key {
  font-family: Roboto;
  font-weight: 700;
  color: #000;
  border-radius: 20px;
  border-color: #00469F;
}

a.btn-key img.img-key {
    height: 30px;
}

.disable-pointer {
    pointer-events: none;
}


.text-blue {
  color: #00469F;
}

.logo-msi {
    height: 80px;
}



@media (min-width: 768px) {
.banner-top-register {
  background-image: url("../images/registration/registration.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 90vh;
  padding-top: 120px;
}

.banner-top-about {
  background-image: url("../images/about/about.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 90vh;
  padding-top: 120px;
}

.banner-top-service {
  background-image: url("../images/service/service.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 90vh;
  padding-top: 120px;
}

}

@media (max-width: 767px) {
  .banner-top-register {
  background: url("../images/registration/registration.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
  padding-top: 120px;
}

.banner-top-about {
  background: url("../images/about/about.jpg") no-repeat  15% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
  padding-top: 120px;
}

.banner-top-service {
  background: url("../images/service/service.jpg") no-repeat  15% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
  padding-top: 120px;
}

}



.banner-top {
  background-image: url("../images/top-page/banner.jpg");
  background-repeat: no-repeat;
  background-size: auto;
  height: 90vh;
  padding-top: 120px;
}


.banner-top2 {
    height: 90vh;
  }
.banner-top img.car {
  margin-left: -40%;
  padding-top: 30px;
  height: 500px;
}
.banner-top h1 {
  font-family: Roboto;
  font-weight: 700;
  font-size: 3em;
}
.banner-top p {
  font-family: Roboto;
}

/* layanan */

.layanan {
  font-family: Roboto;
  font-weight: 700;
}
.layanan .btn-primary {
  font-family: Roboto;
  font-weight: 700;
  color: #fff;
  background-color: #00469F !important;
  border-color: #00469F !important;
  width: 130px;
  border-radius: 0px !important;
}

.layanan .btn-secondary {
  font-family: Roboto;
  font-weight: 700;
  color: #fff;
  background-color: #d39e00 !important;
  border-color: #d39e00 !important;
  width: 230px;
  border-radius: 0px !important;
}

.form-register{
  background-color: #d39e00 !important;
  margin-bottom: -50px;
  font-family: Roboto;
}

.btn-register {
    width: 200px;
    font-weight: 700;
}

/* kenapa */

.kenapa {
  font-family: Roboto;
  font-weight: 700;
}


.testi-driver-item{
    border-radius: 10px;
    background-color: #ddd;
    padding: 10px;
}

.col-carousel {
	margin: 70px 0;
}

/* owl nav */
.owl-prev span, .owl-next span {
	color: #00469F;
}



.owl-prev, .owl-next {
	position: absolute;
	top: 0;
	height: 100%;
}

.owl-prev {
	left: -33px;
}

.owl-next {
	right: -33px;
}

.bg-blue{
    background: #00469F;
}

.ptb-70 {
    padding: 70px 0;
}

.copyright-area{
    font-family: Roboto;
}
ul.footer{
    display: flex;
    list-style-type: none;
    padding-left: 0px !important;
    font-family: Roboto;
    margin-top: 30px;

}
ul.footer li a {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    margin-right: 20px;
    transition: all 0.3s ease 0s;
    text-align: left;
    font-family: Roboto;
    font-weight: 700;
}


img.img-responsive.logo_footer {
  height: 80px;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #FFF !important;
    color: #FFF;
    text-decoration: none;
}

.owl-next:focus, .owl-prev:focus {outline: none;}


button.owl-prev:hover{
    background: #FFF !important;
    outline: none;
}

button.owl-prev:focus{
    background: #FFF !important;
    outline: none;
}

button.owl-next:hover{
    background: #FFF !important;
    outline: none;
}

button.owl-next:focus{
    background: #FFF !important;
    outline: none;
}