@font-face {
    font-family: MavenPro;
    src: url("../fonts/MavenPro-Regular.ttf");
}
@font-face {
    font-family: LindenHill;
    src: url("../fonts/LindenHill.otf");
}

body{
    font-family: MavenPro;
    color: #717171;
}
.navbar{
    height: 75px;
}
.nav-link {
    padding: 0.5rem 2.5rem !important;
    font-size: 1.1rem;
    color: #065e84 !important;
    font-weight: 600;
}
.navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
}
.slider {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.slider .gallery-top {
    background: #111;
}
.slider .swiper-container {
    width: 100%;
    height: calc(100vw * 9 / 16);
    display: flex;
    flex-wrap: wrap;
}
.slider .swiper-container .swiper-slide video {
    min-width: 100%;
    min-height: 101%;
    position: absolute;
    object-fit: contain;
    opacity: 0.7;
}
#carouselSlide{
    margin-top: 70px;
}
.about h1{
    font-family: LindenHill;
    color: #9c9c9c;
}
.heading{
    font-family: MavenPro;
    color: #065e84 !important;
}
.heading-achive{
    font-family: LindenHill;
    color: #9c9c9c;
}
.services h2{
    font-family: LindenHill;
    color: #9c9c9c;
}
.img-logo{
    width: 200px;
}
.heading-achive{
    padding: 15px 30px;
    color: #9c9c9c;
}
.img-achievement{
    width: 100px;
    padding: 3px;
}
.image-achievement{
    width: 200px;
    padding: 3px;
}
.about-achive{
    background: #f0f0f0;
}
.img-about-achievement{
    width: 175px;
    padding: 3px;
}
.achievement{
    background: #f0f0f0;
    padding-bottom: 50px;
}
.achievement p{
    margin: 20px 0 0;
    font-size: 1.075rem;
    color: #adb5bd;
    text-align: center;
}
.no-border{
    border: none;
}
.services{
    background: #f0f0f0;
}
.service-container {
    position: relative;
    width: 100%;
}
.service-container img{
    border-radius: 12px;
}  
.image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #00000070;
    border-radius: 15px;
}
.service-container:hover .overlay {
    opacity: 1;
}
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    font-family: 'LindenHill';
    font-weight: 500;
    font-size: 1.75rem;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    text-decoration: none;
}
.text:hover{
    text-decoration: none;
    color: #fff;
}
.bg-grey{
    background: #f0f0f0;
    border-radius: 1rem;    
}
.portof-card{
    padding: 70px;
}
.portof h3{
    padding: 10px 70px;
    font-size: 1.5rem;
    font-family: 'LindenHill';
    color: #adb5bd;
}
.image-portof{
    width:100px;
    height:100px;
}
.rkm .card{
    border-radius: 1.25rem;
}
.rkm .card-body{
    min-height: 333px;
}
.btn-rkm{
    border-radius: 0.65rem;
    background-color: #ccc;
    border-color: #ccc;
    font-size: 1.25rem;
}
.icon{
    display: block;
    background: url('../../img/favicon.png');
    background-size: cover;
    height: 25px;
    width: 25px;
}
.rkm-image img{
	width: 100%;
}
.slick-prev {
    left: -50px !important;
}
.slick-prev:before, .slick-next:before{
    color: #111 !important;
}
.testimoni .card{
    background: #f0f0f0;
}
.img-testimoni{
    margin-top: -35px;
}
.slick-list {
    min-height: 360px;
}
.slick-track{
    top: 30px !important;
}
.bg-form{
    margin-top: 35px;
    padding: 35px;
    background: #f0f0f0;
}
.bg-contact{
    margin-top: 35px;
    padding: 130px 45px;
    min-height: 423px;
    background-image: url("bg-daun.jpg");
}
.form-control{
    padding: 0 5px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #adb5bd;
    border-radius: 0;
}
.f-big{
    font-size: 1.25rem;
    font-weight: 700;
}
textarea {
    resize: none;
  }
.form-control:focus{
    padding: 0 5px;
    border: none;
    border-bottom: 1px solid #495057;
    border-radius: 0;
    box-shadow: none;
    outline: 0 none;
    background: #f0f0f0;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
    padding: 0 5px;
    border: none;
    border-bottom: 1px solid #495057;
    border-radius: 0;
    box-shadow: none;
    outline: 0 none;
    background: #f0f0f0;
}

.rkm-text{
    padding: 100px 30px;
}
.btn-cta{
    padding: 12px 40px;
    font-family: 'LindenHill';
    font-size: 1.35rem;
    letter-spacing: 2px;
    color: #717171;
    border-radius: 1rem;
    background: #fff;
    border: solid 3px #690304;
}
.btn-cta:hover{
    background: #fff !important;
    border: solid 3px #690304 !important;
    color: #690304 !important;
}
.pagging{
    margin-top: 20px;
    margin-bottom: 40px;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #731314;
    border-color: #731314;
}
.page-link, .page-link a {
    color: #731314;
}
.page-link a:hover {
    text-decoration: none;
}
.map, .footer-contact{
    padding: 50px 0;
}
.footer-contact h2{
    font-family: LindenHill;
}
.footer-icon{
    padding: 0 10px;
    text-decoration: none;
    color: #333;
}
.copyright{
    background-color: #fff;
}
.copyright p{
    padding: 15px 0 0 0;
    font-size: 0.8rem;
}
.kotakmedia{
    color:#9c9c9c;
}
.kotakmedia:hover{
    text-decoration: none;
    color:#9c9c9c;
}
.spacing-head{
    margin-top: 84px;
}
  
/* The subnavigation menu */
.subnav {
    overflow: hidden;
}
/* Subnav button */
.subnav .subnavbtn {
    margin: 0;
    padding: 0.5rem 2.5rem !important;
    border: none;
    outline: none;
    background-color: inherit;
    font-size: 1.1rem;
    color: #111 !important;
    font-weight: 600;
    
}
  
/* Style the subnav content - positioned absolute */
.subnav-content {
    position: absolute;
    padding: 15px 50px;
    left: 0;
    bottom: -50px;
    background-color: #8d0002;
    width: 100%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
}
.active{
    opacity: 1;
    visibility: visible;
}
/* Style the subnav links */
.subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
}  
/* Add a grey background color on hover */
.subnav-content a:hover {
    color: #000000;
    font-weight: 600;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 999999;
}
  
.sidenav a {
    padding: 15px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
  
.sidenav a:hover {
    color: #f1f1f1;
}
  
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
/* Dropdown Button */
.dropbtn {   
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
} 
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
  
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    margin-left: 25px;
    background-color: #101010;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
/* Links inside the dropdown */
.dropdown-content a {
    display: block;
    font-size: 0.85rem !important;
    color: #fff;    
    text-decoration: none;
}
  
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
  
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.rkm-content .slick-next {
    right: 5px !important;
}
.rkm-content .slick-prev {
    left: 5px !important;
}
.rkm-content .slick-prev:before, .slick-next:before {
    color: #3c3c3c !important;
}

/* Responsive CSS */
@media screen and (max-width: 480px) {
    .navbar {
        height: 60px;
        padding: 0px 20px;
    }
    .navbar-toggler{
        font-size: 0.75rem;
    }
    .subnav-content{
        top: 154px;
        position: absolute;
        padding: 15px 50px;
        left: 0;
        bottom: auto;
    }
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
    .img-logo {
        width: 115px;
    }
    .about h1{
        font-size: 1.75rem;
    }
    .img-achievement {
        width: 50px;
    }
    .img-about-achievement {
        width: 125px;
    }
    .heading-achive {
        padding: 10px 15px;
        font-size: 1rem;
    }
    .services h2 {        
        font-size: 1.75rem;
    }
    .overlay {
        opacity: 1;
    }
    .map, .footer-contact {
        padding: 20px 0;
    }
    .footer-contact h2 {
        font-family: LindenHill;
        font-size: 1.75rem;
    }
    .rkm-content .slick-list{
        min-height: 200px;
    }
    .rkm-content .slick-next {
        right: 5px !important;
    }
    .rkm-content .slick-prev {
        left: 5px !important;
    }
    .rkm-content .slick-prev:before, .slick-next:before {
        color: #3c3c3c !important
    }
    .rkm-text {
        padding: 0px 20px;
    }
}