@import "reset.css";
@import "common.css";

/*FONT*/

/* poppins-200 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('../fonts/poppins-v20-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v20-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-500 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-600 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-800 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/poppins-v20-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v20-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
    z-index: 1000;
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #3AB83F;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
  }

h1,h2,h3,h4,h5,h6,div,p,span,button,ul,li,nav,section,a {
    font-family: 'Poppins';
}

.f-poppins{
    font-family: 'Poppins';
}

.f-w-700{
    font-weight: 700;
}
/*DOCUMENTATION


=====================*/
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #ffff url("../../assets/images/default/loader.svg") no-repeat center center;
}


/** 
 ---------------------------------------------------------*/
/*MENU*/



.rightSideNav {
  text-transform: uppercase;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: #0067a7;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.rightSideNav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 14px;
    color: white;
    display: block;
    transition: 0.3s;
}

.rightSideNav a:hover {
    color: #f1f1f1;
}

.rightSideNav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .rightSideNav {padding-top: 15px;}
  .rightSideNav a {font-size: 18px;}
}


html, body {
  position:relative;
  overflow-x:hidden;
}

header {
    position: fixed;
    width: 100%;
    z-index: 2;
}

.module-container .module{
    font-size: 20px;
    padding: 5px;
}

.hamburger-menu {
    font-size: 25px !important;
}

.page-title {

    font-family: 'Helvetica';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 43px;

}

.lanjut-button{
    text-align: right !important;
}
.sub-page-title {
    font-family: 'Helvetica';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 23px;
}


/** 
 ---------------------------------------------------------*/
/*HOME*/

p {
    font-size: 16px;
    font-style: 'Helvetica';
}

.f-size-14{
    font-size: 14px;
}
#homebanner {
    min-height: 723px;
}
#homebanner-left {
    min-height: 100vh;
}

#homebanner h1 {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 64px;
line-height: 96px;
margin-bottom: 0;

color: #FFFFFF;
}


#homebanner p {
font-family: Helvetica;
font-size: 18px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: white;
margin-bottom: 44px;

}

.home-icon {
    margin-top: 32px;
    max-height: 40px;
}

.btn-faj-white {
    background: white;
    color: #3AB83F;
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 6px !important;
}

.btn-faj-white:hover, .btn-faj-trans:hover {
    background: #00A758;
    color: white;
}

.btn-faj-trans{
    background: transparent;
    border: 1px solid white;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 10px;
    border-radius: 6px !important;
}

#homebanner-footer h2{
    font-weight: 700;
    font-size: 24px;
}

#homebanner-footer {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.08);
}

.text-faj {
    color: #00A758!important;
}

.text-black {
    color: black !important;
}
/*NAVBAR*/

#main-nav {
    background: white;
}

#logo {
    min-height: 40px;
}


.navbar-brand {
    height: auto;
}

.navbar-default .navbar-nav>li>a {
    font-weight: 500;
    color: black;
}

.btn-faj-green {
    background: #00A758;
    color: white !important;
    padding: 8px 24px;
    font-weight: 600;
    font-size: 18px;
}

.navbar-nav {
    margin-top: 10px;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: black;
    font-weight: 500;
    background-color: transparent;
}

.nav-item .nav-link{
    font-weight: 600;
    font-family: 'Poppins';
}

.nav-link{
    color: black;
}
.active .ac-brdr {
    width: 30px;
    margin: 5px auto;
    border-bottom: 3px solid #00A758;
}
.banner-section{
    padding-top: 180px;
}
.img-banner{
    position: relative;
    min-width: 719px;
    min-height: 820px;
    max-width: 719px;
    max-height: 820px;
    left: 255px;
    top: 100px;
}
.img-banner-mobile{
    position: relative;
    right: -30px;
    top: -35px;
    width: 40%;
    height: 40%;
}

.row-banner{
    margin-top: 85px;
}

.banner-title{
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 96px;
    color:  white;
    margin-top: 202px;
}

.default-title{
    font-size: 24px;
}
.title-desc{
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color:  white;
}
.default-desc{
    font-size: 16px;
}
#home-about{
    font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 42px;
line-height: 51px;
/* or 121% */
margin-top: 100px;

}

.section-title{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 42px;
    line-height: 51px;
    color: #090909;
}

.bg-faj {
    background: #00A758 !important;
}

.faj-card {
    padding: 36px 24px;
    background: #FFFFFF;
    border-radius: 8px;
    min-height: 248px;
}


.faj-card h2 {
    font-weight: 700;
    font-size: 24px;
}


.faj-card .icon {
    max-width: 32px;
    min-width: 24px;
    max-height: 24px;
    min-height: 24px;
}

.statistic-title {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 0;
    text-align: center;
    color: #00A758;
}

.statistic-desc {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    margin-top: 5px;
    text-align: center;
    color: #666666;
}

.bg-shadow {
     box-shadow: 10px 10px 20px 20px rgba(0, 0, 0, 0.08);
}

.blog-card {
    background: #FFFFFF;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 8px 8px 8px 8px;
}

.blog-thumbnail {
     border-radius: 8px 8px 0px 0px;
}

.blog-card-wrap {
    padding: 30px;
}

.blog-card h1 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: #090909;
}

.blog-card p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
}

.blog-btn{
  font-size: 14px;

}
.logo-footer {
    margin-top: 64px;
    max-width: 130px;
}

.footer-title {
font-family: 'Helvetica';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 29px;
color: white;
margin-bottom: 0;
}

.footer-desc {
    color: white;
font-family: 'Helvetica';
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 29px;
}

.footer-inline li a {
    color: white;
}

.footer-icon {
    max-height: 49px;
}

.floating {
    position: fixed;
    right: 30px;
    bottom: 50px;
    z-index: 99;
}


/*ABOUT*/


.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background: #fff;
  height: calc((100% - 30px) / 2);
  align-items: center;
}

.about-nilai {
    height:  560px;
    border: 1px solid #00A758;
}

.about-nilai div {
    padding: 32px;
    position: relative;
    bottom: -55%;
    
}


#about-card .faj-card {
  border-top: 3px solid #00A758;
}
#about-card p {
  position: absolute;top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); 
  width: 85%;
}

#about-card {
  margin-top: 30px;
}

.about-nilai-content{
  min-height: 230px;
    max-height: 230px;
}
.about-nilai-content h2 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    color: white;
}

.about-nilai-content h3 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: white;
}

.about-nilai-content p {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: white;
}

/*Layanan*/

#layanan-list .faj-card {
  padding: 0;
 border: 1px solid #C7C7C7;
border-radius: 8px;
}

#layanan-list .wrap {
  padding: 37px;
}

#layanan-list h1 {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #00A758;

}

#layanan-list li {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 27px;
  /* identical to box height, or 150% */
  position: relative;
  color: #000000;
  background:url('../images/default/check-circle-outline.png') no-repeat 0 0;
  padding-left:30px;
  margin-top: 12px;
}

#layanan-list ul {
  padding-left: 0;
  list-style: none;
}

.pt-5{
    padding-top:3rem!important;
}

.tire-img{
    max-width:100%;
    height:auto
}

.history-up{
    position: relative; 
    bottom: -45px;
}

.history-down{
    position: relative; 
    top: -55px;
}
.history-side{
    position: relative; 
    left: -50px;
}

.history-title{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
}

.history-desc-mobile{
    left: -30px;
}

.history-text{
    position: absolute;
    left: 30px;
    width:300px;
    top: 10px;
}
/* .bottom-side-history{
    margin-left: 300px;
} */

.bg-our-value{
    background-image: url('../../assets/images/default/bg-our-value.png');
    background-repeat: no-repeat;
    min-width: 1440px;
    max-width: 1440px;
    min-height: 560px;
    max-height: 560px;
}


.col-value
{
    -webkit-box-flex:0;
    -ms-flex:0 0 20%;
    flex:0 0 20%;
    max-width:20%;
    min-height: 560px;
    max-height: 560px;
    border: 1px solid #00A758;
}

.paginaiton-icon{
    max-height: 36px;
    min-height: 36px;
    max-width: 36px;
    min-width: 36px;
    border-radius: 50%;
}

.pagination-number{
    max-height: 44px;
    min-height: 44px;
    max-width: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    border: 1px solid #00A758;
    align-items: center;
    justify-content: center;
}

.paginations div.active {
    background-color: #00A758;
    color: white;
}

.pagination-number:hover{
    background-color: #00A758;
    color: white;
}


.breadcrumbs {
    border-radius: 0.3rem;
    display: inline-flex;
    overflow: hidden;
    align-items: center;
  }
  
  .breadcrumbs__item {
    background: #fff;
    color: #333;
    outline: none;
    padding: 0px 20px;
    position: relative;
    text-decoration: none;
    transition: background 0.2s linear;
  }
  
  .breadcrumbs__item:hover:after,
  .breadcrumbs__item:hover {
    background: #edf1f5;
  }
  
  .breadcrumbs__item:focus:after,
  .breadcrumbs__item:focus,
  .breadcrumbs__item.is-active:focus {
    background: #323f4a;
    color: #fff;
  }
  
  .breadcrumbs__item:after,
  .breadcrumbs__item:before {
    background: white;
    bottom: 0;
    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
    content: "";
    left: 100%;
    position: absolute;
    top: 0;
    transition: background 0.2s linear;
    width: 1em;
    z-index: 1;
  }
  
  .breadcrumbs__item:before {
    background: #cbd2d9;
    margin-left: 1px;
  }
  
  .breadcrumbs__item:last-child {
    border-right: none;
  }
  
  .breadcrumbs__item.is-active {
    color: #00A758;
  }

  .blog-header{
    margin-top: 50px;
  }

  .blog-title{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 54px;
  }
 

  .meta-desc{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* or 143% */
    color: #888888;
  }

  .blog-content p{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 29px;
    /* or 181% */


    color: #666666;
  }

  .line-separator {
    text-align: center;
 }
 .line-separator {
    overflow: hidden;
    text-align: center;
  }
  
  .line-separator:before,
  .line-separator:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
  }
  
  .line-separator:before {
    right: 0.5em;
    margin-left: -50%;
  }
  
  .line-separator:after {
    left: 0.5em;
    margin-right: -50%;
  }

  .banner-group-button{
    margin-top: 36px;
  }

  .first-section{
    background-image:url('../../assets/images/default/bghome.png'); 
    background-position:center; background-size: cover; 
    background-repeat: no-repeat;
  }

  .text-value {
    position: absolute;
    top: 90%;
    left: 30%;
    transform: translate(-30%, -50%);
  }

  .social-media{
    text-align: right;
  }

  .services-thumbnail{
    width: 168px;
    height: 141px;
  }