/*!
 * Custom Style : PARKING+ EV CHARGING OPERATOR
 * Website : www.parkingplus.xyz
 * Copyright 2022-2024 Parking+ EV Charging Operator
*/

body {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400; color: #666666; font-size: 12pt;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {color: #000000; font-weight: 700;}
h1 {font-size: 22pt;}
h2 {font-size: 16pt;}
h3 {font-size: 14pt;}
h4 {font-size: 14pt; font-weight: 500;}

header { background-color: #356f42; min-height: 70px; position: relative; z-index: 999;}
header.inside_head {min-height: 450px;}
.container {max-width: 1200px;}
a {color: #117e11; text-decoration: none;}
a:hover, a:focus { cursor: hand; color: #37ca37; text-decoration: none; }
a:focus {outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}

/* SOCIAL MEDIA FLOATING ============*/
.social-floating {
  position: fixed; z-index: 999;
  top: 45%; right: 0px;
  padding: 10px 15px 10px 8px;
  background-color: #fcfcfc;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  box-shadow: -6px 1px 26px -9px rgba(0,0,0,0.55);
  -webkit-box-shadow: -6px 1px 26px -9px rgba(0,0,0,0.55);
  -moz-box-shadow: -6px 1px 26px -9px rgba(0,0,0,0.55);
}
.social-floating a {display: block; padding: 5px 0px;}
.social-floating a > img {width: 26px;}

/* NAVIGATION MENU ================ */
.inside_navigation {background-color: #356f42; position: fixed; width: 100%;}
#parkingplus-navbar .ms-auto {margin-right: 6%}
.navbar-expand-lg {padding-bottom: 0px;}
#parkingplus-navbar {padding-top: 25px;}
.navbar-brand {max-width: 15%;}
.navbar-brand img {width: 120%;}
.nav-link {color: #ffffff;} /* activ used this also*/
.nav-item {padding: 0px 10px;}
a.nav-link {color: #ffffff; font-size: 12pt; border-bottom: 8px solid #356f42;}
a.nav-link:hover {color: #ffffff;border-bottom: 8px solid #FFFFFF;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: #ffffff;border-bottom: 8px solid #FFFFFF;}
/* dropdown */
.dropdown-menu {background-color: #ffffff; border-radius: 0px; border: none;
box-shadow: 0px 18px 9px -16px rgba(0,0,0,0.43);
-webkit-box-shadow: 0px 18px 9px -16px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 18px 9px -16px rgba(0,0,0,0.43);}
.navbar-expand-lg .navbar-nav .dropdown-menu {margin-left: 10px;}
.navbar-toggler {background-color: #fefefe; }
.dropdown-toggle::after {display: none;} /* icon dropdown */
/* hover drop on*/
  .navbar .nav-item .dropdown-menu{ display: none; }
  .navbar .nav-item:hover .nav-link{}
  .navbar .nav-item:hover .dropdown-menu{ display: block; }
  .navbar .nav-item .dropdown-menu{ margin-top:0; margin-left: 0px;}
  .dropdown-menu.show {left: 10px;}
  .dropdown-menu li {border-bottom: 1px dotted #d5d5d5;}
  .dropdown-menu li:last-child {border-bottom: none;}

/*LANGUAGE ===================*/
.language {position: absolute; top: 0px; right: 0;}
.language > .holders { background-color : #1d4125; border-radius: 20px; color: #a9dfb5;  padding: 5px 10px; margin-right: 10px; margin-top: 5px; font-size: 10pt;}
.language > .holders a {margin-left: 5px;}

/*BANNER*/
.carousel-inner {position: relative;}
.cta-banners {position: absolute; display: block; height: 100%; background: transparent; width: 100%; z-index: 5;}
.cta-banners h1 {position: absolute; top: 43%; left: 15%;}
.cta-banners img {max-width: 120px;}
.cta-banners a.be-mitra {position: absolute; bottom: 23%; left: 15%;}
.cta-banners a.sosmed1, .cta-banners a.sosmed2 {position: absolute; bottom: 15%; left: 15%;}
.cta-banners a.sosmed2 {left: 24%;}
.cta-banners a:hover {animation: heartBeat; animation-duration: 1.5s;}


.banner {color: #000000; text-shadow: 0 2px 18px #FFFFFF, 0 2px 10px #FFFFFF;}
.banner .carousel-inner .carousel-item {z-index: 9;}
.banner .carousel-caption {bottom: 10rem;}
.banner .carousel-caption {color: #222222;}
.banner .carousel-control-next, .banner .carousel-control-prev {z-index: 99;}
.banner h1 {font-size: 24pt; margin-bottom: 0px;}
.banner h2 {font-size: 30pt; margin-top: 0px; letter-spacing: 0px;}
.banner p {background-color: rgba(255, 255, 255, 0.8); 
  padding: 10px; border-radius: 12px;
  font-size: 14pt; max-width: 800px; min-height: 70px;
  font-weight: 400;
  text-shadow: 1px 1px 21px rgba(255,255,255,1);}
a.be-mitra {background-color: none; text-shadow: none; background-color: #356f42 !important; color: #ffffff; padding: 5px 18px; border: 1px solid #356f42; border-radius: 20px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10pt;}
a.be-mitra:hover {text-shadow: none; background-color: #ffffff !important; border: 1px solid #bee0c5; color:#356f42; font-weight: 700;}
.video-container {position: relative; display: block; height: 650px;}
video { position: absolute; width: 100%; height: 100%;  object-fit: cover; }

.banner-inside {
  position: absolute; 
  display: block; 
  top: 0px; width: 100%; 
  min-height: 500px; background-color: #356f42; border-bottom: 60px solid /*#024627*/ #FAF1E6;
  background-size:cover; background-repeat:no-repeat; background-position-x: center; }
.banner-inside-gradient {
  position: absolute;
  top: 0px; width: 100%; height: 100%;
  background: rgb(53,111,66);
  background: -moz-linear-gradient(180deg, rgba(53,111,66,1) 22%, rgba(53,111,66,0.9) 36%, rgba(53,111,66,0.8) 47%, rgba(53,111,66,0.7) 56%, rgba(53,111,66,0.55) 74%, rgba(53,111,66,0.5) 100%);
  background: -webkit-linear-gradient(180deg, rgba(53,111,66,1) 22%, rgba(53,111,66,0.9) 36%, rgba(53,111,66,0.8) 47%, rgba(53,111,66,0.7) 56%, rgba(53,111,66,0.55) 74%, rgba(53,111,66,0.5) 100%);
  background: linear-gradient(180deg, rgba(53,111,66,1) 22%, rgba(53,111,66,0.9) 36%, rgba(53,111,66,0.8) 47%, rgba(53,111,66,0.7) 56%, rgba(53,111,66,0.55) 74%, rgba(53,111,66,0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#356f42",endColorstr="#356f42",GradientType=1);
}
.banner-inside h1 {position: absolute; bottom: -30px; font-size: 64pt; color: #FAF1E6; font-weight: 800;}
.banner-inside .breadcrumbs { position: absolute; color: #024627; font-weight: 500; bottom:-42px; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.2em;}
.banner-inside .breadcrumbs a {color:#024627; text-decoration: none; padding-left: 5px;}
.banner-inside .breadcrumbs a:hover {color:#024627; animation: bounce; animation-duration: 0.5s;}

/*========== S E C T I O N S ==============*/

section.contents {padding-top: 80px; padding-bottom: 80px;}
.mydevider {display: block; width: 80%; border-width: thin; border: 1px solid #e2e2e2; margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom: 80px;}
/* ==== home 1 ====*/ 
.home_1 > .container > .row:nth-child(1) {text-align: center;}
.home_1 h1 {font-size: 22pt; color: #356f42;} 
.home_1 h2 {font-size: 16pt; color: #356f42;}
.home_1 h4 {margin-top: 40px;}
table.spklu_equip {margin-top: 10px;}
.spklu_equip td img {float: right; padding-right: 5px;}
.spklu_equip td {padding-bottom: 10px; vertical-align: middle;}
.fa-regular {padding-right: 10px;}

.box-holder {position: relative; margin-top: -20px; width: 100%; height: 100%; font-size: 10pt;}
.box-holder h3 {font-size: 12pt; margin-bottom: 0px;}
.box-holder .box1, .box-holder .box2, .box-holder .box3 {
  position: relative; border: 8px solid #f3f3f3;
  color: #333333; line-height: 13pt;
  display: block; background-color: #ebeaea; padding: 20px 20px 20px 110px;
  max-width: 94%; border-radius: 90px;
  margin-bottom: 20px;
}
.box-holder img {display: inline-block; max-width: 84px;
  border: 7px solid #ffffff; 
  float: left; position: absolute; top: 14%; left: 20px;
  border-radius: 50px; padding: 10px; background: #ffffff;
  box-shadow: 0px -1px 11px -4px rgba(0,0,0,0.58);
-webkit-box-shadow: 0px -1px 11px -4px rgba(0,0,0,0.58);
-moz-box-shadow: 0px -1px 11px -4px rgba(0,0,0,0.58);
}

/* ==== home 2 ====*/ 
.home_2 {background-color: #f6f5f5; position: relative;}
#solusi-kemitraan {scroll-margin-top:80px;}
.home_2 .img_sides {position: absolute; width: 35%; height:100%; top:0; right:0; }
.icon_mitra_holder { width: 22%; display: inline-block; font-size: 8pt; text-transform: uppercase; 
  text-align: center; margin-top: 40px; font-weight: 500; }
.icon_mitra_holder img {max-width: 44%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 5px;}
.icon_mitra_holder a {color: #222222; letter-spacing: 0.05em;}
.icon_mitra_holder a:hover, .icon_mitra_holder a:focus {color:  #117e11;}
.icon_mitra_holder a img:hover, .icon_mitra_holder a img:focus {
  animation: shakeY; animation-duration: 2s; }
.program-kemitraan-front h3 {margin-top: 40px; margin-bottom: 0px;}
.program-kemitraan-front .icon_mitra_holder {margin-top: 20px; margin-bottom: 20px;}
/* ==== home 3 ====*/ 
.home_3 .sub_sections {position: relative;  overflow-x: hidden; background-color: #f6f6f6; margin-top: 60px; margin-bottom: 60px; padding-top: 60px; padding-bottom: 60px;}
.home_3 .row:nth-child(2) .col-12:last-child {padding-left: 60px; padding-top: 40px;}
.home_3 h1 {text-align: center; margin-bottom: 60px;}
.home_3 .bars {display: block; width: 40px; height: 8px; background: #c5c5c5;}
.unduh_tags {display: block; text-align: center; width: 100%;}
.unduh_tags a img {max-width: 150px; padding: 5px;}
.unduh_tags a img:hover, .unduh_tags a img:focus {
  animation: tada; animation-duration: 2s; }
table.icon_home3 td {vertical-align: top; padding-top: 20px; text-align: justify;}
table.icon_home3 tr td:first-child {padding-right: 10px;}
table.icon_home3 h3 {margin-bottom: 0px; font-weight: 500;}
.sub_sections .img_sides {position: absolute; width: 45%; height:100%; top:0; right:0; background-repeat: no-repeat; background-size: cover; }
.home_3 .sub_container {padding: 60px 0px;}
.home_3 .sub_container .row .col-12:nth-child(2) {position: relative;}
.home_3 .sub_container .row .col-12:nth-child(2) img {position: absolute; width: 120%; top: -40px;} 
.home_3 .sub_container .row .col-12:nth-child(3) {text-align: right;} 

/*=== FOOTER  == */
footer.contents {padding-top: 80px; padding-bottom: 0px;}
.home_4 {background-image: url('../images/img_bg_footer.jpg'); background-size: cover; background-repeat: no-repeat;}
.home_4 .container:nth-child(1) {padding-bottom: 60px; border-bottom: 1px solid #5e7f61;}
.home_4 .container:nth-child(2) {color: #FFFFFF; padding-top: 60px; text-align: justify; font-size: 11pt;}
.home_4 .container:nth-child(2) p {max-width: 92%;}
.home_4 h1, .home_4 h2, .home_4 h3 {color: #ffffff; min-height: 54px;}
.home_4 h1 {text-align: center;} .home_4 h2 {font-weight: 500; font-size: 14pt;}
.home_4 .ig_front {text-align: center;}
.home_4 .ig_front a {color: #ffffff; font-style: italic; margin-top: 40px;}
.home_4 .ig_front a:hover, .home_4 .ig_front a:focus {color: #ffc61a; }
.home_4 .ig_front img {max-width: 24px;}
.es-widget a {z-index: 0 !important;}
/* colom 1 */
.logotext {min-height: 60px;}
.logotext h2 {position: relative; min-height: 0px; margin-bottom: 0px; padding-bottom: 0px;}
.logotext > span {display: block; margin-top: -3px; font-weight: 400;  font-size: 9pt; letter-spacing: 0.1em;}
.logotext h2 span {position: absolute;top: -2px; left: 83px; font-weight: 600;}
/* colom 2 & 3 */
.home_4 ul {padding-left: 0px}
.home_4 ul li {list-style-type: none; padding-bottom: 5px;}
.home_4 ul li .fa-solid {padding-right: 4px;}
.home_4 ul.links {padding-left: 18px;}
.home_4 ul.links li {list-style-type: circle;}
.home_4 ul.links li:hover {animation: pulse; animation-duration: 0.5s;}
.home_4 ul.links li a{color: #ffffff;}
.home_4 ul.links li a:hover, .home_4 ul.links li a:focus {color: #ffea00;}
/* colom 4 */
.foot_qr_code {display: block; width: 100%; margin-top:10px; }
.foot_qr_code a {display: inline-block; font-size: 8pt; letter-spacing: 0.1em; max-width: 41%; margin-right: 15.5px; text-align: center; color: #ffffff;}
.foot_qr_code a:hover {animation: pulse; animation-duration: 0.5s;}
.foot_qr_code img {width: 100%;}
.foot_apps_link {display: block; width: 100%; margin-top:10px; }
.foot_apps_link a {display: inline-block; font-size: 8pt; letter-spacing: 0.1em; max-width: 40%;margin-right: 20px; text-align: center; color: #ffffff;}
.foot_apps_link a:hover {animation: pulse; animation-duration: 0.5s;}
.foot_apps_link img {width: 100%;}
.qr_code_modal .modal-body {position: relative;z-index: 9999; background-color: #fefefe; color: #000000; text-align: center; padding-bottom: 50px;}
.qr_code_modal img { margin-bottom:10px; }
.qr_code_modal a {position: absolute; width: 80px; left: 42%; padding: 10px 10px 5px; bottom: 0px; background: #0d4908; color: #ffffff; font-size: 10pt;  border-top-left-radius:20px; border-top-right-radius:20px; }
/* end footer */
.end-footer {background-color: #152f1f; color:#ffffff; text-align:center; letter-spacing:0.5em; font-size:10pt; padding: 30px; margin-top:60px; }

/*==== CONTENT MITRA KEMITRAAN ==== */
.modal-mitra {}
.modal-mitra > .container > .row > .col-12 {padding: 30px 30px 50px;}
.modal-mitra > .container > .row > .col-12:first-child {position: relative; background: #105b21; color: #ffffff; text-align: center; font-size: 12pt;}
.modal-mitra h1 {font-weight: 400; color: #ffffff; font-size: 10pt; text-transform: uppercase; margin-top: 40px; text-align: center; margin-bottom: 0px;}
.modal-mitra h3 {font-weight: 500; color: #103e21; margin-bottom: 20px; font-size: 10pt;}
.modal-mitra b {font-size: 10pt; padding: 6px 14px; color: #ffffff; font-weight: 400; text-align: center; margin-top: 10px; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid #a2b9a5; border-radius: 18px;}
.modal-mitra span {font-weight: 300;}
.modal-mitra p {font-size: 12pt; padding: 30px;} 
.modal-mitra .logo-modal {position: absolute; text-align: center; 
  width: 60px; height: 60px; padding-top: 10px; bottom: 50px; left: 45%; border: 1px solid transparent; border-radius: 90px;
  box-shadow: 2px 17px 38px -17px rgba(0,0,0,0.59);
-webkit-box-shadow: 2px 17px 38px -17px rgba(0,0,0,0.59);
-moz-box-shadow: 2px 17px 38px -17px rgba(0,0,0,0.59);
}
.modal-mitra .logo-modal img {max-width: 40px;}
.modal-mitra img.mitra-icon {display: block; max-width: 100px; margin: 30px auto 0px auto;}
.footer_modal {position: absolute; bottom: 20px; width: 90%;}
.kemitraan_info .accordion-button::after {
  background-image: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f29c"; }
.kemitraan_info .accordion-button:not(.collapsed)::after {text-rendering: auto;
  background-image: none;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: ""; }
.kemitraan_info .accordion-button {padding: 10px;}
/* == form == */
.form-mitra form {font-size: 10pt;}
.form-mitra h1 {font-size: 20pt; color: #177639; margin-top: 0px; margin-bottom: 20px;}
.form-captcha {width: 52%; display: inline-block; margin-right: 10px;}
img.captcha_images {width: 40%; display: inline-block;}
button.mitrabtn {background: #103e21; border: 1px solid #a0a0a0; color: #ffffff;}
button.mitrabtn:hover {background: #272727; border: 1px solid #272727; color: #ffffff; }
.mitra-pick>.form-control-plaintext:focus, .mitra-pick>.form-control-plaintext:not(:placeholder-shown), .mitra-pick>.form-control:focus, .mitra-pick>.form-control:not(:placeholder-shown) {
  padding-top: 11px;
}
.mitra-pick > span {display: block; font-weight: 600; padding-top: 10px; letter-spacing: 0.02em;}
/*#program-mitra2 .img-holders {padding-bottom: 20px; display: block; width: 100%;}*/
#program-mitra2 .img-holders img {display: inline-block; max-width: 24%;}


/* ==== INSIDE PAGE ==== */
.insides_page { position:relative; padding-top: 80px; text-align: justify;}
.insides_page h2 {font-size: 11pt; color: #484848; font-weight: 500; text-transform: uppercase;}
.insides_page h3 {font-size: 18pt; color: #1e1e1e;}
.insides_page > .container > row > .col-md-6 {position: relative;}
.insides_page .left-apps-sticky {position: fixed; top:120px;}
.insides_page .sticky-top {top:140px;}
/* == Page Aplikasi == */
.tutorial-applikasi {text-align: left;}
.insides_page #left-apps {max-width: 90%; text-align: left;}
.insides_page #left-apps img {margin-bottom: 20px; max-width: 90%;}
.insides_page #left-apps h3 {font-size: 18pt;}
.insides_page #left-apps ol {padding-left: 0px; font-size: 10pt; margin: 20px 0px 20px}
.insides_page #left-apps ol li {display: inline-block;}
.insides_page #left-apps ol li::after {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f061";
    padding-left: 5px; padding-right: 5px;
  }
.insides_page #left-apps ol li a {padding: 5px 10px; margin-right: 5px; border: 1px solid #ebebeb; border-radius: 6px;}
.insides_page #left-apps ol li:last-child::after {display: none; }
.tutorial-applikasi #step-1, .tutorial-applikasi #step-2, .tutorial-applikasi #step-3, .tutorial-applikasi #step-4 {
  scroll-margin-top:120px;
  padding-top: 20px; padding-bottom: 20px;}
.tutorial-applikasi #step-1 {padding-top: 0px; border-top: none;}
.tutorial-applikasi .apk-tutor a {font-size: 14pt; padding: 5px; margin-right: 20px;}
#app-langkah1 .modal-body, #app-langkah2 .modal-body, #app-langkah3 .modal-body, #app-langkah4 .modal-body  {text-align: justify;}

/* == Page Product == */

.product-pages {padding-top: 40px;}
.product-pages .col-md-6 {padding: 40px;}
#product-menu {padding: 20px 0px; width: 100%;}
#product-menu a {padding: 5px 10px; margin-right: 20px; color: #FFFFFF; border: 1px solid #939393; background-color: #939393;}
#small-medium, #fast-charger, #ultra-charger, #bus-charger {scroll-margin-top:140px;}
.product-menu-fixed {position: fixed; top: 80px; background-color: #FFFFFF; z-index: 99;
box-shadow: 2px 0px 21px -10px rgba(0,0,0,0.58);
-webkit-box-shadow: 2px 0px 21px -10px rgba(0,0,0,0.58);
-moz-box-shadow: 2px 0px 21px -10px rgba(0,0,0,0.58);}
.product-pages .carousel-control-next, .product-pages .carousel-control-prev {width: 12%;}
.product-pages .carousel-control-prev {left:-70px;}
.product-pages .carousel-control-next {right:-70px;}
.product-pages .carousel-control-next-icon {background-image:url('../images/arrow-right-svgrepo.svg'); 
    color: #000000;}
.product-pages .carousel-control-prev-icon {background-image:url('../images/arrow-left-svgrepo.svg'); 
    color: #000000;}
.product-pages .bordering {padding: 40px; border-radius: 20px; border: 1px solid #bdbdbd;}
.product-pages h4 {display: inline-block; vertical-align: top; margin-right: 20px;}
.product-pages img {display: block; margin: auto;}
.product-pages ul {list-style-type: none; padding-left: 0px; display: inline-block;}
.product-pages ul li::before { display: inline-block; text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f00c";
    padding-left: 5px; padding-right: 5px; }
.product-pages ul li:last-child::before {content:none;}
.product-pages ul li:last-child {padding-top: 10px; padding-left: 5px;}
/* .product-pages ul li:last-child a::before {  display: inline-block; text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f138"; padding-right: 5px;} */

/* Product Details */
.product-detail .bordering {padding: 40px; border-radius: 20px; border: 1px solid #bdbdbd;}
.product-detail .nav-item {padding-left: 0px;}
.product-detail h3 {font-size: 30pt; font-weight: 300; color: #444444; padding-top: 0px;}
.product-detail h4 {font-size: 20pt; font-weight: 300; color: #444444; margin-top: 40px;}
.product-detail .nav-tabs .nav-link {color: #999999;}
.product-detail .tab-pane {padding-top: 20px;}
.product-detail ul.mylist {list-style-type: none; padding-left: 0px; display: inline-block;}
.product-detail ul.mylist li::before { display: inline-block; text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f00c";
    padding-left: 5px; padding-right: 5px; }
.product-detail  .nav-tabs .nav-item.show .nav-link, .product-detail .nav-tabs .nav-link.active {
  font-weight: 600;
}
table.product-table tr td:first-child { width: 30%; font-weight: 500;}
table.product-table span {display: block; font-size: 9pt; color: #888888; letter-spacing: 0.1em; font-style: italic;}

.product-links a {display: inline-block; margin-right: 50px;}
.product-pages a.info_prod::before {display: inline-block; text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f138"; padding-right: 5px;}
.product-links img {display: initial; width: 100px;}
.product-detail .product-links {margin-bottom: 20px;}

/* == PAGE KEMITRAAN & INVESTOR == */
.page_kemitraan img {padding: 0px 0px 0px 40px;}
.page_investor img {padding: 0px 0px 0px 40px;}
.page_kemitraan ol.icon-mitra {padding-left: 18px; margin-top: -10px;}
.page_kemitraan ol.icon-mitra li a {
  font-size: 14pt; color: #79bc1a; }
#program-mitra1 img, #program-mitra2 img {margin-bottom: 30px;}

/* == PAGE HIRING == */

.page_hiring img {padding: 0px 0px 0px 40px;}
.page_hiring .card {position: relative; margin-bottom: 40px;}
.page_hiring ul {padding-left: 18px;}
.page_hiring a {position: absolute; color: #ffffff; border-radius: 20px; top:20px; right: 20px; padding:5px 14px; background-color:#bfbfbf; }
.page_hiring a:hover {background-color: #333333; color: #ffffff;}
.karir-popup h1 {margin-bottom: 20px;}
.karir-popup ul {text-align: left; margin-top: 40px;}

/* == PAGE FAQ == */

.faq_page .container {max-width: 800px;}
.faq_page h2, .faq_page h3 {text-align: center;}
.faq_page .accordion {margin-top: 40px;}
.faq_page .accordion > h2 {padding: 20px; border-bottom: 1px solid #ebebeb; font-size: 16pt; margin-bottom: 0px;}
.faq_page .accordion-button:not(.collapsed) h4 {font-size: 12pt; color: #FFFFFF; margin-bottom: 0px;}
.accordion-button { background-color: #FFFFFF; color: #356f42;}
.accordion-button:hover {background: #f1f1f1;}
.accordion-button:not(.collapsed) {background-color: #356f42;}

/* == parking services == */
section.parking-services {
  max-width: 92%; margin-left: auto; margin-right: auto; margin-bottom: 100px;
  padding: 60px 0px; border: 20px solid #efefef; border-radius: 40px; 
  text-align: center;
}
section.parking-services a {color: #389c07; text-decoration: none; padding:10px 10px; border: 1px solid #d6d6d6; border-radius: 20px;}
section.parking-services a:hover {background-color:#389c07; color:#ffffff; }
section.parking-services .container {padding: 0px 30px;}
section.parking-services h1 {color: #4c4c4c;}
section.parking-services h2 {color: #4c4c4c;font-size: 15pt;}
section.parking-services h3 {color: #4c4c4c; padding: 40px 0px 0px; text-transform: uppercase;}
section.parking-services span {display: block; margin: auto; max-width: 70%; padding: 20px 0px}
section.parking-services .col-md-4 {padding: 0px 40px;}
section.parking-services img {max-width: 70%; display: block; margin-left: auto; margin-right: auto;}

/*===== PARKING SERVICE PAGE ==== */
section.parking_service_in {padding-top: 120px; padding-bottom: 120px;}
section.parking-service_in span {max-width: 70% !important; margin: auto !important;}
.content_paring_cr .col-md-3 {text-align: center; padding: 30px 20px;}
.content_paring_cr h2 {font-size: 14pt;}
.p_benfits {padding: 15px; border: 10px solid #efefef; border-radius: 15px; margin-top: 20px; text-align: left;}
.p_benfits img {max-width: 20px;}
.p_benfits ul {padding-left: 15px;}
.sub_content_park {margin-top: 0px;} 
.sub_content_park h1 {font-size: 20pt;}
.sub_content_park span {padding: 0px 50px !important;}

.parking_bisnis {background-color: #efefef; text-align: center;}
.parking_bisnis .col-md-3 {padding:30px 20px;}
.parking_bisnis img {max-width: 30%; margin:20px auto 20px;}

.cta_parking_service ul {padding-left: 0px; list-style-type: none;}
.cta_parking_service ul li {font-size: 12pt; padding: 4px 0px;}
.cta_parking_service ul li::before {
  display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f00c";
    padding-left: 5px; padding-right: 5px;
    font-weight: 800; color: #000000;
}
.cta_parking_service a {padding: 4px 8px; background-color: #2a8b10; color: #ffffff; border-radius: 8px; margin-right: 5px;}

/* OTHERS */
a.close-mymod {position: absolute; z-index: 999; font-size: 20pt; right: 0px; top: 0px; background: #FFFFFF; padding: 0px 10px;}
a.close-mymod:hover {color: #45ff64;}
.kemitraan_info {margin-bottom: 20px;}
.kemitraan_info .accordion-button:not(.collapsed) {color: #FFFFFF;}

/* RESPONSIVE ============================== */

@media screen and (max-width: 995px) {
  header {min-height: 80px;}
  .language {right: 100px; top: 23px;}
  .home_3 .row:nth-child(2) .col-12:last-child {padding-left: 20px;}
}
@media screen and (max-width: 760px) {
  header {min-height: 80px;}
  section.contents {padding-top: 60px; padding-bottom: 60px;}
  .navbar {padding: 13px 0px;}
  #navbarSupportedContent {padding-top: 0px;}
  .nav-item {padding: 0px;}
  .navbar-brand {max-width: 30%; margin-top: 10px;}
  .language {right: 80px; top: 20px;}
  .home_2 {padding-bottom: 0px !important;}
  .home_2 .img_sides {position: relative; width: 100%; height:500px; top:40px; right:0; margin-left: 0px; background-position: bottom; }
  .home_3 .sub_sections {margin-bottom: 0px; padding-bottom: 0px;}
  .sub_sections .img_sides { position:relative; left: -20px; top: 40px; width: 100%; min-width: 110%; min-height: 300px;}
  .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: #ffffff;border-bottom: 1px solid #069458;}
  .icon_mitra_holder {margin-top: auto; width: 30%; margin-bottom: 20px; }
  .home_3 h1 {margin-bottom: 40px;}
  .home_3 .row:nth-child(2) .col-12:last-child {padding-left: auto;}
  .home_3 .sub_container {padding: 40px 15px 0px; }
  .home_3 .sub_container .row .col-12:nth-child(2) {position: relative;}
  .home_3 .sub_container .row .col-12:nth-child(2) img {position: relative; display: block; margin: 30px auto 30px auto;width: 90%; top: 0px;} 
  .home_3 .sub_container .row .col-12:nth-child(3) {text-align: left;} 
  .home_4 h2 {min-height: 30px;}
  .home_4 .container:nth-child(2) .row .col-12:last-child {text-align: center;}
  .home_4 .container:nth-child(2) .row .col-12:last-child h2{text-align: center; margin-bottom: 0px; margin-top: 40px;}
  .end-footer {padding: 30px 0px 60px; }
  .carousel-caption {left: 8%;}
  .cta-banners h1 {position: absolute; top: 30%; left: 8%;}
  .cta-banners img {max-width: 120px;}
  .cta-banners a.be-mitra {position: absolute; bottom: 23%; left: 8%;}
  .cta-banners a.sosmed1, .cta-banners a.sosmed2 {position: absolute; bottom: 15%; left: 8%;}
  .cta-banners a.sosmed2 {left: 40%; }
  #program-mitra2 .img-holders img {max-width: 23%; padding: 0px; margin-bottom: 0px;}
  .parking_bisnis img {max-width: 40%;}

  /* SOCIAL MEDIA FLOATING ============*/

  .social-floating {
    position: fixed; z-index: 9999;
    top: auto; right: auto;
    bottom: 0px; left: 31%;
    padding: 5px 10px 5px;
    background-color: #e1e1e1;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 16px;
    box-shadow: 2px -4px 19px -8px rgba(0,0,0,0.75);
-webkit-box-shadow: 2px -4px 19px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 2px -4px 19px -8px rgba(0,0,0,0.75);
  }
  .social-floating a {display: inline-block; padding: 0px 5px;}
  .social-floating a > img {width: 24px; height: auto;}
  .social-floating a:hover {animation: bounce; animation-duration: 1s;}
  header.inside_head {min-height: 350px;}
  .banner-inside {min-height: 350px;}
  .banner-inside h1 {position: absolute; bottom: -20px; font-size: 40pt; font-weight: 700; text-transform: uppercase;}
  .modal-mitra .logo-modal {bottom: 20px;}
  .insides_page .sticky-top {position: relative; top:0px;}
  .insides_page #left-apps {max-width: 100%;}
  #product-menu a {padding: 4px 6px; font-size: 9pt; margin-right: 0px;}
  /*.product-pages .carousel-control-next, .product-pages .carousel-control-prev {width: }*/
  .page_kemitraan img { border-radius: 20px; padding-top: 40px;} 
}
@media screen and (max-width: 500px) {
  .navbar-brand {max-width:35%; margin-top: 0px;}
  .language > .holders {margin-right: 0px;}
  .language {right: 80px; top: 18px;}
  .cta-banners h1 {position: absolute; top: 38%; left: 8%;}
  .banner h1 {font-size: 14pt; margin-bottom: 0px;}
  .banner h2 {font-size: 20pt; margin-top: 0px;}
  .banner p {max-width: 100%; line-height: 23px;}
  .home_1 h1 {font-size: 18pt;}
  .home_1 h2 {font-size: 12pt;}
  header.inside_head {min-height: 350px;}
  .banner-inside {min-height: 350px;}
  .banner-inside h1 {position: absolute; bottom: -12px; font-size: 30pt; font-weight: 700; line-height: 38px;}

}
@media screen and (max-width: 400px) {
  .language {right: 70px; top: 18px;}
  .social-floating {left: 25%;}
}

/*== carosel ==*/

/*ANIMATION NOTES ================================
Refference https://animate.style
.on-element {
  animation: bounce;
  animation-duration: 2s;
}
css shadow generator : https://cssgenerator.org/box-shadow-css-generator.html
*/