/*@font-face {
    font-family: "OpenSans";
    src: url('../vendor/fonts/Open_Sans/static/OpenSans-Bold.ttf');
    font-style: bold;
    font-weight: 700;
    }
@font-face {
    font-family: "OpenSans";
    src: url('../vendor/fonts/Open_Sans/static/OpenSans-ExtraBold.ttf');
    font-style: bold;
    font-weight: 800;
     }
@font-face {
    font-family: "OpenSans";
    src: url('../vendor/fonts/Open_Sans/static/OpenSans-Medium.ttf');
    font-style: normal;
    }

@font-face {
  font-family: "OpenSans";
  src: url('../vendor/fonts/Open_Sans/static/OpenSans-Regular.ttf');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Lato";
  src: url('../vendor/fonts/Lato/Lato-Regular.ttf');
  font-style: normal;
  font-weight: 400;
}
@font-face {
    font-family: "Mont";
    src: url('../vendor/fonts/Montserrat/Montserrat-Regular.ttf');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Mont";
    src: url('../vendor/fonts/Montserrat/Montserrat-Bold.ttf');
    font-style: bold;
    font-weight: 700;
}*/

 
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
  .dropdown-menu::-webkit-scrollbar {
    width: 0px; /* Lebar scrollbar */
}
.bg-hlf-breadcrumb{
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    padding-left:15px;
}
/* .dropdown-menu{
    max-height:380px;
    overflow-y:auto;
} */

.dropdown-menu::-webkit-scrollbar-track {
    background: #eee; /* Warna latar track scrollbar */
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #eee; /* Warna thumb scrollbar */
    border-radius: 3px; /* Membuat sudut thumb menjadi melingkar */
    border: 1px solid #eee; /* Memberikan border pada thumb */
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: #eee; /* Warna thumb saat di-hover */
}


.arrow-icon-slide:after {
    content: "\203A";
    font-size: 30px;
    position: absolute;
    top: -15px;
    left:95px;
    

}
.navbar-side {
    top:70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 10px 20px;
  position: fixed;
  width: 100%;
 
  z-index: 1000;
  color:black;
}
section:first-of-type {
    /*padding-top: 70px; */
}

.img-qr{
    width:146px;
   
}
.hr-width{
    width:90%;
}
.icon-youtube{
    width:100px;
}

/*lucky draw*/
ul.lucky-list  li::marker{
  color:#910B03!important;
}
.img-search{
    width:20px;
    height:20px;
}
.lucky-list{
  padding-left:1rem;
}
.lucky-list li{
  padding-bottom:20px
}
.table-lucky th{
  width:50%;
  margin: auto;
}
.table-lucky, th, td{
  border:2px solid #fffefe;
  
}
.table-lucky td{
  background-color: #F5F5F5;
}
.table-lucky{
  width:80%;
  font-family: 'Open Sans', sans-serif !important;
}
.img-lucky{
  width:100%
}

.bold-6{
  font-weight: 600;
}
.lucky-section{
  font-family:'Lato'!important
}
/* lucky draw*/


.active-nav{
    color:#910B03!important;
    font-weight:800!important;
}
a.btn-login:hover{
    font-weight:800!important;
    color:#910B03!important;
}


/* share button*/
.hover-button {
  margin-left: 20px;
  position: relative;
  padding: 5px 15px;
  font-size: 16px;
  border: none;
  color: rgba(121, 121, 121, 0.855);
  cursor: pointer;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  display: flex;
}
.socmed-list-img {
    width: 17px;
    height: 17px;
}
.hover-button:hover .socmed-list{
  display: block;
}
.hover-button:not(:hover) .socmed-list{
  display: none;
}
.hover-button:hover .share-box{
  display:none
}
.hover-button .share-box{
    display:block;
}
.nav-third{
  position: relative;
  padding-right:30px!important
}
.rotate::after {
  transform: rotate(90deg);
  top:6px!important;
  
}
.nav-third::after{
  content: '\276F';
  position: absolute;
 padding-left: 10px;
 top:12px;
 transition: transform 0.1s ease;  
  font-size: 0.7rem;
}


.menu-third.active::after {
  transform: rotate(90deg);
 
}
.menu-third.active{
  /*padding-right: 545px;*/
  color: #A16305 !important;
}
.nav-third.rotate{
  color: #A16305 !important;
  font-weight:700;
}

.menu-third.hidden {
  /*display: none;*/
}

.menu-item:last-child::after {
  content: '';
}
.menu-fourth{
  /*padding-right:228px*/
}
.menu-fourth li:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: 0;
    top: 8px;
}

.menu-fourth li {
    position: relative;
    padding: 0 15px;
}


.nav-loans{
    /*padding-right:305px;*/
}
.sub-loans{
    /*padding-right:313px!important;*/
}
 .video-placeholder {
      position: relative;
      height: 352px;
      background: url('../img/overview/hlf-thumbnail-1.png') no-repeat center center;
      background-size: cover;
      cursor: pointer;
    }
    .video-placeholder-2 {
      position: relative;
      height: 352px;
      background: url('../img/overview/hlf-thumbnail-3.png') no-repeat center center;
      background-size: cover;
      cursor: pointer;
    }
        .video-placeholder-3 {
      position: relative;
      height: 352px;
      background: url('../img/overview/hlf-thumbnail-3.png') no-repeat center center;
      background-size: cover;
      cursor: pointer;
    }
     .video-placeholder-4 {
      position: relative;
      height: 352px;
      background: url('../img/overview/hlf-thumbnail-2.png') no-repeat center center;
      background-size: cover;
      cursor: pointer;
    }
     
.icon-finger{
    width:30px;
    height:auto;
}
.dropdown-item {
  color: black;
}
.dropdown .dropdown-menu-desktop {
  display: none;
  border: none;
  /*background: #212529;*/
}
.alphabet{
    list-style-type:lower-alpha;
}
.accordion-item{
    border:none;
}
.dropdown:hover>.dropdown-menu-desktop, 
.dropend:hover>.dropdown-menu-desktop {
  display: block;
  margin-top: .1em;
  margin-left: .1em;
}

.nav-share{
    cursor:pointer;
}
.modal-share-button {
  margin-top: 10px;
  position: absolute;
--bs-modal-zindex: 1055;
--bs-modal-width: 500px;
--bs-modal-padding: 1rem;
--bs-modal-margin: 0.5rem;
--bs-modal-color: ;
--bs-modal-bg: var(--bs-body-bg);
--bs-modal-border-color: var(--bs-border-color-translucent);
--bs-modal-border-width: var(--bs-border-width);
--bs-modal-box-shadow: var(--bs-box-shadow-sm);
--bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
--bs-modal-header-padding-x: 1rem;
--bs-modal-header-padding-y: 1rem;
--bs-modal-header-padding: 1rem 1rem;
  min-height: 200px;
  top: auto;
  right: 0;
  left: auto;
  z-index: var(--bs-modal-zindex);
  min-width: 315px; 
}

.decimal{
    list-style-type:decimal;
}
  
.modal-header-share .btn-close{
  font-size:10px;
  font-weight:700;
}
.font-share-button{
  margin-top: 5px;
  font-size:12px;
}
.modal-share-shadow{
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
  border-radius:10px;
}

.text-slide-left{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
}
.w-60{
  width: 60%;
}
.w-lg-30{
    width: 30%;
}.w-lg-20{
    width: 30%;
}
@media screen and (min-width:1280px) {
    .w-60{
      width: 70%;
    }
}
.top-header .top-header-links a, .bottom-header a, .nav-bar-sectional li.menu-list-item>a, .top-header .input-group input, .nav-bar-sectional .dropdown-menu a, .sidebar__link_title, .sidebar__link_subtitle, .c-menu__items a, .sidebar__title{
    font-weight:800;
}
@media screen and (min-width:769px) {
    .mt-faq{
    margin-top:250px;
}
.breadcumb-faq{
    top:190px;
    z-index:0!important;
}
    .hero-banner{
        margin-top:180px;
    }
    #hd{
     position:fixed!important;   
     top:0;
    }
    .img-qr{
         margin-right:60px;
    }
    .w-lg-50{
    width:35%;
}
    .img-faq{
        width:240px;
    }
.pb-lg-6{
  padding-bottom:5rem
}
.pt-lg-6{
  padding-top: 5rem;
}
  .dropend:hover>.dropdown-menu-desktop {
    position: absolute;
    top: 0;
    left: 100%;
  }
  .dropend .dropdown-toggle {
    margin-left: .5em;
  }
}


    tr.bg-red{
    background-color:#910B03!important;
    color:white;
    padding:20px
}
th{
    padding:20px;
}
td{
    padding:20px;
}
tr.bg-grey{
   background-color: #D9D9D9;
   color:#2A2A2A;
   padding:20px
}
 .faq-page {
  height: 1400px; /* Tinggi kontainer untuk scroll */   
}
.nav-link{
    font-size:15px!important;
}
.lato{
    font-family:'Lato';
}
.OpenSans{
    font-family:'Open-Sans';
}
.accordion-body{
  font-size:15px!important;   
}

.dropdown:hover>.dropdown-menu-desktop, .dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
  pointer-events: none;
}

.dropdown-item:hover {
  border-left: 5px solid #910B03!important;
  height: 100%; /* Adjust the height as needed */
  font-weight: 800;
  
}

.dropdown-item:active{
  background-color:white;
}
.accordion-button:active{
  border:none!important;
}
 .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
  border-color: transparent;
}
.dropdown-item{
    font-weight:700!important;
}
.dropdown-toggle:hover{
    /*font-weight:800;*/
}
.nav-item:hover{
    color: #aa6305 !important;
}
.nav-link:hover {
    font-weight: 500;
    color: #aa6305 !important;
}

#highlights h3{
    font-size:30px;
}
#highlights.card-text{
    font-size:15px;
}
.icon-padlock{
    max-width:52px;
    max-height:52px;
}
.icon-phone{
    max-height:57px;
    max-width:57px;
}
.how-it-works h3{
    font-size:30px;
}
.how-it-works.card-text{
    font-size:30px;
}
footer a {
    color:black;
}
.v-container iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000;
  height:351px;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #eee; /* Same color as the dropdown background */
  position: absolute;
  top: -10px; /* Position above the dropdown menu */
  left: 50%;
  transform: translateX(-50%);
}

.dropdown-menu-desktop {
  position: relative;
  padding-top: 15px; /* Adjust padding to make space for the arrow */
}
.pt-7{
    padding-top: 5rem!important;
}
.pb-7{
    padding-bottom: 5rem!important;
}

.slide-two{
    font-size:60px;
    color:white;
    line-height:70px;
}

.card-body{
    padding-left:0;
}
 
.bold{
    font-weight: 800;
}
body{
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}
#overview{
    display:grid;
}

@media (max-width: 1200px) {
    
 .img-slide{
     height:450px!important;
 }   
}

@media (max-width: 768px) {
    .btn.section-details.center-block{
        display:none;
    }
    .bg-hlf-breadcrumb{
        display:none;
    }
    .box-hlf{
        margin-top:35px!important;
    }
    .img-search{
    width:15px;
    height:15px;
}
.btn-share{
    width:15px;
}
    .w-sm-50{
     width:50%;   
    }
    .w-sm-70{
        width:70%;
    }
    .text-slide-left{
        width: 50%;
   
    height: 60%;
    padding-top:80px;
    padding-left:0!important;
    padding-right:0!important; 
    }
    .fs-sm-64{
        font-size:40px!important;
    }
    .ps-sm-4{
        padding-left:40px;
    }
    .pe-sm-4{
        padding-right:40px;
    }
    
    .v-container iframe {
    position: relative;
    padding-bottom: 0;
    height: 350px;
    overflow: hidden;
    width:100%!important; 
    background: #000;
}
    body {
        font-size: 14px;
    }
}

.navbar-nav .nav-link.active{
    color : #910B03!important;
    font-weight: 800;
}

.img-logo{
    max-width:294px;
    width:250px;
}
.btn-colors{
    background-color:  #910B03!important;
    color: white;
}
a.btn-colors:hover{
    background-color:  #910B03!important;
    color: white!important;
}
.padlock{
    margin-top:-5px
}
.search-container {
    display: flex;
    justify-content: center;
}

.search-box {
    position: relative;
    width: 195px;
}

input[type="text"] {
    width: 100%;
    padding: 8px 40px 8px 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 7px;
}

button.search-icon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    border: none;
    color: #ccc;
    /* padding: 2px; */
    cursor: pointer;
    font-size: 17px;
    margin-top: -5px;
}

button.search-icon:hover {
    color: #000;
}
.table-border{
    border-collapse: collapse!important;
}
.table-border td, .table-border th{
    border-bottom: 1px solid #ddd!important;
    border-left: none;
    border-right: none;
    border-top: none;
}

@media only screen and (min-width: 100px) and (max-width: 700px) {
    .accessible br {
        display: none;
    }
}

/*breadcrumb*/
.breadcumb-faq{
    margin-top:0px!important;
}
.bg-hlf-breadcrumb{
    /*background-color: rgb(255 255 255 / 100%);*/
    /*width: 100%;*/
    position: relative;
    z-index: 2;
    height: 46px;
    margin-top: 190px;
 
    
}
@media (max-width: 425px) {
    .bg-hlf-breadcrumb{
        overflow-y: auto;
        top:-95px;
        display: none;
    }
    .hlf-breadcrumb li{
      position: relative;
    }
    .hlf-breadcrumb li:nth-child(2) {
      display: none; 
    }
    .hlf-breadcrumb li:nth-child(3) {
      margin-left: 20px;
    }
    .hlf-breadcrumb li:nth-child(3)::before {
        content: "...";
        width: 20px;
        position: absolute;
        display: inline-block;
        left: -20px;
        top: 0;
    }
}

.hlf-breadcrumb{
    background-color: transparent;
    padding: 0px 0px;
    z-index: 1000;
    position: absolute;  
   
}
.hlf-breadcrumb ol{
  padding: 0;
  margin: 0;
  list-style: none;
}
.hlf-breadcrumb li{
    list-style-type: none;
    display: inline; 
}
.hlf-breadcrumb li a{
    color: #A16305;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    text-decoration: none;
}
.hlf-breadcrumb li a.active{
    color: #2A2A2A;
}
 
.hlf-breadcrumb li::after{
    content: "\00203A";
    font-size: 25px;
    padding: 0 10px;
    color: #A16305;
    top: 2px;
    display: inline;
    position: relative;
}

.hlf-breadcrumb li:last-child::after{
    content: "";
} 
/*end breadcrumb */

/*hero banner*/
.hero-banner{
  height: 561px; 
  position: relative;
}

.hero-banner-none{
  height: 40px; 
  position: relative;
}
.hero-banner .bg-hlf-hero{
  height: 561px; 
  min-height: 561px;
  width: 100%; 
  z-index: 0;
  position: absolute; 
  top: 0;
  left: 0;
  overflow: hidden;
}

.hero-banner .bg-hlf-hero img{
  width: 100%; 
  object-fit: cover;
  z-index: 1;
  display: block; 
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 1701px) {
  .hero-banner{
    height: 748px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 748px;
    min-height: 748px;
  }

  .hero-banner .box-hlf{
    height: 748px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
  }
}

@media (min-width: 1441px) and (max-width: 1700px) {
  .hero-banner{
    height: 620px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 620px;
    min-height: 620px;
  }

  .hero-banner .box-hlf{
    height: 620px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .hero-banner{
    height: 561px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 561px;
    min-height: 561px;
  }

  .hero-banner .box-hlf{
    height: 561px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .hero-banner{
      height: 490px;
    }
    .hero-banner .bg-hlf-hero {
      height: 490px;
      min-height: 490px;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {
    .hero-banner{
      height: 430px;
    }
    .hero-banner .bg-hlf-hero {
      height: 430px;
      min-height: 430px;
    }
    .search-box {
        width: 170px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-banner{
    height: 600px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 600px;
    min-height: 600px;
  }

  .hero-banner .box-hlf{
    height: 600px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
  }
}

@media (min-width: 541px) and (max-width: 767px) {
  .hero-banner{
    height: 630px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 630px;
    min-height: 630px;
  }

  .hero-banner .box-hlf{
    height: 630px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
  }
}

@media (min-width: 401px) and (max-width: 540px) {
  .hero-banner{
    height: 680px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 680px;
    min-height: 680px;
  }

  .hero-banner .box-hlf{
    height: 680px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
    padding-top: 40px!important;
    margin-top: 10px;
  }
}

@media (min-width: 321px) and (max-width: 400px) {
  .hero-banner{
    height: 630px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 630px;
    min-height: 630px;
  }

  .hero-banner .box-hlf{
    height: 630px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
    padding-top: 50px!important;
    margin-top: 10px;
  }
}

@media (max-width: 320px) {
  .hero-banner{
    height: 480px;  
  }
  .hero-banner .bg-hlf-hero {
    height: 480px;
    min-height: 480px;
  }

  .hero-banner .box-hlf{
    height: 480px;
  }

  .hero-banner .box-hlf .bg-colors{
    padding-right: 50px;
    margin-top: 30px;
  }
}

.hero-banner .box-hlf {
    position: absolute; 
    text-align: right;
    height: 561px; 
    z-index: 1; 
    width: 100%;
}

.hero-banner .box-hlf .bg-colors{
    transform: translateY(70%);
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .hero-banner .box-hlf .bg-colors{
    transform: translateY(35%);
    padding-right: 80px;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .hero-banner .box-hlf .bg-colors{
    transform: translateY(60%);
    padding-right: 0px;
  }
} 

@media (max-width: 767px) and (min-width: 461px) {
  .hero-banner .box-hlf .bg-colors{
    transform: translateY(45%);
    padding-right: 50px;
  }
}

@media (max-width: 560px) and (min-width: 461px) {
    .box-hlf { 
        margin-top: 0px;
        transform: translateY(10%);
        text-align: right!important; 
    }
}

@media (max-width: 460px) {
    .box-hlf { 
        margin-top: 0px;
        transform: translateY(0);
        text-align: center!important; 
    }  
    .hero-banner .box-hlf {
      background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
      height: 200px;
 
    }
    .hero-banner .box-hlf .bg-colors{
      padding: 15px 10px; 
      transform: translateY(0%);
    }
}
 
.box-hlf h1 {
    font-size: 54px;
    color: #910B03;
    font-weight: bold;
    margin-bottom: 10px;
}
.box-hlf h2 {
    font-size: 30px;
    line-height: 36px;
    color: #910B03;
    font-weight: 400;
    margin-bottom: 10px;
}
.box-hlf p {
    font-size: 1em;
    color: #2A2A2A;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .box-hlf h1 {
        font-size: 40px;
    }
    .box-hlf h2 {
        font-size: 30px;
    }
    .box-hlf p {
        font-size: 15px;
    }
}

.box-hlf .btn-colors {
    background-color: #910B03;
    color: #fff;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
    border-radius: 7px;
    cursor: pointer;
}

.box-hlf .btn-colors:hover {
    background-color: #750802;
}
/* Navbar Tabber */
ul.nav.nav-tabs {
    margin-top: -95px;   
    z-index: 1;   
    margin-bottom: 20px;
    border-bottom: 0px;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: relative;

  }

  @media (min-width: 376px) and (max-width: 540px) {
    ul.nav.nav-tabs {
      margin-top: -60px;
    }
  }

  ul.nav.nav-tabs li.nav-item{
    width: 30%;
  }

    ul.nav-custom li a.nav-link:hover{
        color:#910B03!important;
    }
  

  ul.nav.nav-tabs .nav-link{
    border: 0px;
  }

  ul.nav.nav-tabs li button.nav-link, ul.nav.nav-tabs li a.nav-link{
    width: 100%;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    color: #2A2A2A;
    position: relative;
    margin-bottom:0px!important;
    text-align: center;
  }

  @media (max-width: 768px) {
    ul.nav.nav-tabs li button.nav-link, ul.nav.nav-tabs li a.nav-link {
      font-size: 13px;
    }
  } 
  
  ul.nav.nav-tabs li.nav-item::after{
    content: "";
    display: block;
    width: 4px;
    height: 60%;
    position: absolute; 
    top: 20%;
    border-left: 2px dotted #910B03;
  }

  @media (max-width: 768px) {
    ul.nav.nav-tabs li.nav-item::after {
      height: 80%;
      top: 10%;
    }
  }

  ul.nav.nav-tabs li.nav-item:first-child::after{
    border-left: none;
  }

  
  ul.nav.nav-tabs li button img, ul.nav.nav-tabs li a img {
    display: block;
    margin: 10px auto;
    height: 70px; 
  }

  @media (max-width: 768px) {
    ul.nav.nav-tabs li button img, ul.nav.nav-tabs li a img, ul.nav.nav-tabs li button.nav-link img, ul.nav.nav-tabs li a.nav-link img {
      height: 50px; /* Ukuran icon lebih kecil untuk versi mobile */
    }
  }
  ul.nav.nav-tabs li.nav-item .nav-link.active{
    border-bottom:none!important; /* Adjust the color and width as needed */
  }
  ul.nav.nav-tabs li.nav-item .nav-link.active::after {
    content: "";
    display: block;
    width: 60%;
    border-bottom: 4px solid #222; /* Adjust the color and width as needed */
    margin: 0 auto;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
  ul.nav.nav-tabs li.nav-item .nav-link:hover::after {
    content: "";
    display: block;
    width: 60%;
    border-bottom: 4px solid #910B03; /* Adjust the color and width as needed */
    margin: 0 auto;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }

ul.nav.nav-tabs li.nav-item .nav-link.active:hover::after {
    content: "";
    display: block;
    width: 60%;
    border-bottom: 4px solid #910B03; /* Adjust the color and width as needed */
    margin: 0 auto;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

ul.nav.nav-tabs li button.nav-link:hover img.features-icon,
ul.nav.nav-tabs li button.nav-link.active:hover img.features-icon,
ul.nav.nav-tabs li a.nav-link:hover img.features-icon,
ul.nav.nav-tabs li a.nav-link.active:hover img.features-icon {
  content: url('../img/icon/hlf-tab-features-red.png');
}

ul.nav.nav-tabs li button.nav-link:hover img.safeguard-icon,
ul.nav.nav-tabs li button.nav-link.active:hover img.safeguard-icon,
ul.nav.nav-tabs li a.nav-link:hover img.safeguard-icon,
ul.nav.nav-tabs li a.nav-link.active:hover img.safeguard-icon {
  content: url('../img/icon/hlf-tab-safeguard-red.png');
}

ul.nav.nav-tabs li button.nav-link:hover img.help-support-icon,
ul.nav.nav-tabs li button.nav-link.active:hover img.help-support-icon,
ul.nav.nav-tabs li a.nav-link:hover img.help-support-icon,
ul.nav.nav-tabs li a.nav-link.active:hover img.help-support-icon {
  content: url('../img/icon/hlf-tab-help-support-red.png');
}

ul.nav.nav-tabs li button.nav-link:hover img.features-icon,
ul.nav.nav-tabs li button.nav-link.active:hover img.features-icon,
ul.nav.nav-tabs li a.nav-link:hover img.features-icon,
ul.nav.nav-tabs li a.nav-link.active:hover img.features-icon {
  content: url('../img/icon/hlf-tab-features-red.png');
}
ul.nav.nav-tabs li button.nav-link.active img.features-icon,
ul.nav.nav-tabs li a.nav-link.active img.features-icon {
    content: url('../img/icon/hlf-tab-features-black.png');
}

ul.nav.nav-tabs li button.nav-link:hover img.safeguard-icon, ul.nav.nav-tabs li a.nav-link:hover img.safeguard-icon{
  content: url('../img/icon/hlf-tab-safeguard-red.png');
}
ul.nav.nav-tabs li button.nav-link.active img.safeguard-icon,
ul.nav.nav-tabs li a.nav-link.active img.safeguard-icon {
    content: url('../img/icon/hlf-tab-safeguard-black.png');
}

ul.nav.nav-tabs li button.nav-link:hover img.help-support-icon,
ul.nav.nav-tabs li a.nav-link:hover img.help-support-icon{
  content: url('../img/icon/hlf-tab-help-support-red.png');
}
ul.nav.nav-tabs li button.nav-link.active img.help-support-icon,
ul.nav.nav-tabs li a.nav-link.active img.help-support-icon {
    content: url('../img/icon/hlf-tab-help-support-black.png');
}

 
  
/* end navbar tabber */

  main {
    /*margin-top: 20px;*/
    color: #2A2A2A;
    position: relative;
    height: auto;
  }
  .nav-one{
      padding-bottom: 0;
      margin-bottom:-20px;
  }

  .red,.colors { 
    color: #910B03!important;
  }

  .tab-content{ 
    position: relative;
    font-family: "Lato", sans-serif;
        margin: 90px 0 0 0;
  }

  .tab-content ul{
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
    font-weight: bold;
  }

  .tab-content ul li{
    font-size: 25px;
    line-height: 30px;
    font-family:"Open Sans", sans-serif;
    color: #2A2A2A;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  .mb-90{
      margin-bottom:90px!important;
  }   
  .mb-85{
      margin-bottom:85px!important;
  }   
  .mb-80{
      margin-bottom:80px!important;
  }   
  .mb-70{
      margin-bottom:70px!important;
  }  
  .mb-60{
      margin-bottom:60px!important;
  }  
  .mb-50{
      margin-bottom:50px!important;
  }
  .mb-40{
      margin-bottom:40px!important;
  }
  .mb-35{
      margin-bottom:35px!important;
  }.mb-30{
      margin-bottom:30px!important;
  }
  .mb-20{
      margin-bottom:20px!important;
  }
  .mb-15{
    margin-bottom:15px!important;
  }
  
  .tab-content h3{
    font-size: 30px;
    line-height: 33px;
    color: #2A2A2A;
    font-family: "Lato", sans-serif!important;
    font-weight: 700;

  }

  .tab-content h4{
    font-size: 25px;
    line-height: 30px;
    color: #2A2A2A;
    font-family: "Lato", sans-serif!important;
    font-weight: 700;
  }

  .tab-content p{
    font-family: "Lato", sans-serif!important;
    font-weight: 400;
    line-height: 25px;
    
  }

  .box-1 .col-md-2 img{
    width: 70%;
    height: auto!important;
  }
  .box-2 .col-md-2 img{
    width: 70%;
    height: auto!important;
  }

@media (max-width: 768px) {
  .tab-content{
    margin:0px;
    padding: 0px;
  }

  .tab-content h3{
    font-size: 24px;
    line-height: 28px; 

  }

  .tab-content h4{
    font-size: 20px;
    line-height: 24px; 
  }


  .box-1 .col-md-2 img,
  .box-2 .col-md-2 img {
    width: 70%;
    height: auto!important;
    text-align: center;
    margin:0 auto;
  }

   .mb-60{
      margin-bottom:30px!important;
  } 
}

@media (max-width: 560px) {
  .box-1 .col-md-2 img,
  .box-2 .col-md-2 img {
    width: 100%;
    height: auto!important;
    text-align: center;
    margin:0 auto;
  }
}
.sticky-menu li a{ 
  color: #2A2A2A;
  text-decoration:none ;
}

.sticky-menu{ 
    top: 200px; 
    position: sticky;
    position: -webkit-sticky;
    width: 100%; 
    height: calc(50vh - 150px);
}

@media (max-width: 768px) {
    .icon-phone{
        margin-top:10px;
    }
    .icon-padlock{
        margin-top:10px;
    }

    .sticky-menu {
        padding: 10px 10px;
        display: block;
        height: auto;
        position: fixed !important;
        top: 75px !important;
        background-color: #fff;
        width: 100%;
        z-index: 3;
        left: 0px;
        right: 0px;
        /* box-shadow: 0 1px 5px rgba(0, 0, 0, .2); */
    }

    .sticky-menu ul{
        margin:0px!important;
        padding: 0px!important; 
        position: relative;

    }
    

    .sticky-menu li{
        padding-top: 0px!important;
        font-size: 15px!important;
        margin-bottom: 0px!important;
    }
    
    .sticky-menu li a{
        font-size: 15px!important;
        display: none;
        padding: 0 20px!important;  
    }

    .sticky-menu li a.active{
        display:block;
        font-size: 15px!important; 
        line-height: 20px;
    }

    .sticky-menu li.show a {
        display: block !important; /* Tampilkan semua item saat diklik */
        pointer-events: auto; /* Aktifkan klik saat semua item ditampilkan */
    }

    .sticky-menu.fixed-top {
        position: fixed;
        top: 0;
    }

}
.sticky-menu a.active {
    color: #910B03;
    font-weight: bold;
}
main {
  position: relative;
  z-index: 0; /* Adjust this value as needed to ensure footer does not overlap */
}
/* header */
.bold-8{
    font-weight: 800;
}
.bold-7{
    font-weight: 700;
}
.img-phone{
    width:100%;
}

/* slide */
.img-slide{
  height: 385px;
  object-fit: cover;
  /*object-position: right;*/
}
.carousel{
  order: 2;
}
.carousel-control-next, .carousel-control-prev{
    width:8%
}

.carousel-control-prev{
  left: -70px;
}

.carousel-control-next{
  right: -70px;
}

.carousel-control-next-icon, .carousel-control-prev-icon{
    background-size: 50% 100%!important;
}
.carousel-control-prev-icon {
    background-image: url('../img/icon/previous.png');
}
.carousel-control-next-icon {
    background-image: url('../img/icon/next.png');
}
.carousel-control-prev, .carousel-control-next {
    color: none
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
    z-index: 1;
}
.text-slide p{
    font-family: 'Lato', sans-serif;
}
.slide-right{
    background-color: #F4F4F4;
    /*padding-top: 28px;*/
}
.slide-left{
    padding-top:43px
}
.carousel-item .col-md-6{
    padding-right: 0;
    padding-left: 0;
}

/* slide */

/* section download */
.img-download{
    max-width: 130px;
}
.icon-download{
    max-width:70px;
    max-height: 70px;
}
.icon-money-finger{
    width:70px
}
.download{
  font-family: 'Lato', sans-serif;
 
}
.els-1{
  text-align: right;
}
/* left menu */
.menu-side ul li{
    list-style-type: none;
    font-size: 25px;
    font-weight: 700;
    padding-top: 10px;
}
.menu-side{
    position: -webkit-sticky;
    position: sticky;
    top: 200px;
   
    /*height: calc(100vh - 40px);*/
}
.menu-side a{
  text-decoration: none;
  color: #2A2A2A
}

/* section highlights */
.highlights .card{
  border: none
}
.highlights {
  font-family: 'Lato', sans-serif;
  /*font-size:20px;*/
}
.faq h3{
    font-size:30px!important;
}

.accordion-button{
    padding-left:0;
}
.fs-30{
    font-size:30px!important;
}
.fs-25{
    font-size:25px!important;
}
.fs-50{
    font-size:50px!important;
}
.fs-15{
    font-size:15px;
}
.fs-18{
    font-size:18px;
}
.fs-20{
    font-size:20px
}
.fs-64{
  font-size:64px
}
.fs-48{
  font-size: 48px;
}
.fs-24{
  font-size:24px
}
.fs-40{
  font-size:40px
}

.grey{
  color:#2A2A2A
}
/* section how-it-works */
.how-it-works .card{
  border : none
}

.how-it-works{
  font-family: 'Lato', sans-serif;
}

/* section awards */
.awards{
  top: 100vh;
  position: relative;
  background-color: #F8F8F8;
  font-family: 'Lato', sans-serif;
  z-index: 3;
}

/* faq */


.accordion-button::before {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-right: 10px;
  content: "";
  background-image: url('../img/icon/hlf-icon-faq.png');
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
  
 
}
.accordion-button{
  border-color: white;
}
.accordion-button::after{
  content: none;
}

.accordion-button:not(.collapsed)::before {
  background-image: url('../img/icon/hlf-icon-faq.png');
  transform: rotate(90deg);
}

.accordion-button:not(.collapsed){
  background-color: white;
  border: none;
}

/* faq */

/* footer */

footer ul li{
  list-style-type: none;
  font-size: 15px;
  margin-bottom: 14px;
}

footer ul{
  padding: 0;
}

.icon-socmed{
  max-width: 70px;
  padding-right: 10px;
}

@media (max-width: 480px) {
    .icon-socmed{
      max-width: 60px;
      padding-right: 5px;
    }
}
footer{
  position: relative;
  top: 100vh;
  z-index: 2;
  background-color: #fff;
}
footer a{
  text-decoration: none;
}
.h-50-p{
    height:50px;
}
.bg-gray{
background-color: #F8F8F8;
}
.bg-hlf-gray{
  background-color: #F8F8F8;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  top: 100vh;
  z-index: 2;
}
.bg-hlf-gray a{
  text-decoration: none;
}

.page-1 {
  order: 1;
}

.page-2 {
  order: 2;
}
.page-3{
  order: 3
}
.page-4{
  order:4
}
.hlf-1{
  display: none;
}
.dropdown {
  position: relative;
}
.bg-tf{
    background: rgba(255, 255, 255, 0.9);
}
.dropdown-menu-desktop {
  position: absolute;
  top: 100%;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
.loans-menu{
    left:-50px;
}
.dropdown.show {
  display: block;
}

.dropdown-toggle::after {
  display: none;
}
.nav-desktop{
  display: block;
}
nav.mobile{
  display: none;
}

.dining{
  background-image: url('../img/hlf-dining.jpeg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.dining-page{
  font-family: 'Lato', sans-serif;
}
.colors-black{
  color:#2A2A2A
}
.dining-page ul li::marker{
  color:#910B03!important
}
.dining-page ul li{
  padding-top: 10px;
}
.text-hero-dining{
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 10%;
}
h1.text-hero-dining {
  font-size: 100px;
  color: white;
}
.float-icon img {
    max-width: 55px!important;
}
.float-icon {
     position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1000;
    cursor: pointer;
    /* border: 1px solid black; */
    padding: 10px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    background-color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

}

@media (max-width: 480px) {
    .float-icon {
        top: 35%;
        transform: translateY(-35%);
    }
}
.back-to-top {
  position: fixed;
  bottom: 20px;
        right: 20px;
        display: none;
      
        color: #fff;
        padding: 5px 15px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 1000;
}

.back-to-top.show {
  display: block;
}
footer, .bg-hlf-gray{
  font-family: 'Montserrat', sans-serif;
}
.navbar-nav .nav-secondary.sub-active{
    color: #A16305!important;
    font-weight:800;
}
.nav-link-sub{
  
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.hr-header{
    width:100%;
}
.accordion-body{
    font-size: calc(0.9rem + .1vw);;
}

@media (max-width: 540px) { 
    .v-container iframe { 
    height: 200px; 
    }
}


@media (max-width: 992px) {
      .img-phone{
        width:70%;
    }
     .els-1{
    order: 3;
    text-align: center;
  }
  .els-2{
    order: 1
  }
  .els-3{
    order: 2;
    padding-top: 40px;
  }
/*     .v-container iframe {*/
  
/*    height: 180px;*/
/*    width:390px!important; */
 
/*}*/
    .el-2{
        margin-top:0px!important;
    }
    .carousel-control-prev{
    left: 0;
  }

.carousel-control-next{
  right: 0;
}
  .img-slide{
    height: 430px;
  }
  .search-container{
    display: none;
  }
  .page-1 {
    order: 2;
    padding-top: 30px;
  }
  
  .page-2 {
    order: 1;
    display: grid;
  }
  .page-3{
    order: 3
  }
  .page-4{
    order:4
  }
  .el-1{
    display: none;
  }
 
  .hlf-1{
    display: block;
    padding-bottom: 20px;
    padding-top: 20px;
    /*font-size: 24px;*/
  }
  .text-el-1{
    text-align: left!important;
    padding-top: 40px!important;
  }

  .carousel.ps-4 {
    padding-left: 0!important;
  }
  .carousel.pe-5{
    padding-right: 0!important; 
  }
 
  footer .col-10{
    margin: auto;
  }

  .socmed{
    padding-top: 40px!important;
  }

  .sub-menu{
    display: none!important;
  }
  .sub-menu-2{
    display: none!important
  }

  .search-container{
    display: none;
  }
.navbar-toggler[aria-expanded="true"] + .navbar-collapse .navbar-nav {
    display: flex;
    flex-direction: column;
}
nav.mobile{
  /*display: block;*/
}
.nav-desktop{
  display: none;
}
.dp-2{
  margin-top: -120px;
}
.dropdown-menu-desktop{
  left:10px!important;
  padding-left:20px;
  padding-right:20px;
  padding-bottom: 20px;
  box-shadow: #212529;
  width: 350px;
}
.mn-1{
  list-style-type: none;
  padding-left: 0;
}
/*.accordion-button::after{*/
/*  content: ""!important;*/
/*}*/

.arrow-icon{
  position: absolute;
  top: -15px;
  right: 0;
}
.arrow-icon:after {
 
  content: "\203A";
  font-size: 30px;
 
}
.nav-item{
  position: relative;
}

.icon-download{
  max-width: 50px;
  max-height: 70px;
  margin-top: 10px;
}
.els-2{
  margin: auto;
}
.text-download{
  font-size: 25px;
}
.awards{
  padding-top: 0!important;
  padding-bottom: 0!important;
}
.socmed .text-end{
  text-align: center!important;
}
.award4, .award5{
  padding-top: 20px;
}
.img-logo{
  max-width: 180px;
}
.footer-logo{
  margin: auto;
}

footer ul li{ 
  margin-bottom: 10px;
}

}
.loading-spinner {
  margin: auto;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #910b03;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}



main{
  position: relative;
}
.hero-banner{
    position: fixed;
    z-index: 1;
  top: 2px;
  bottom: 0;
  left: 0;
  right: 0; 
}

@media screen and (max-width: 768px) {
  .hero-banner{
    top: 14vh;
  }
}
 
.hero-banner:before {
  content: '';
  height: 100%;
  width: 100%;
  height: 170vh;
  width: 100vw; 
  position: absolute;                      
}

.hero-banner .box-hlf {
  position: relative;
  z-index: 1;   
  /*-webkit-transition: 1s opacity ease-in-out;*/
}

.body-content {
  position: relative;
  z-index: 1000;
  top: 650px;  
  background-color: #fff; 
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 768px) {

  .sticky-menu-btn {
    position: absolute;
    top: 2px;
    right: 20px; 
    color: #000;
    padding: 5px 15px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
  }

  .sticky-menu-btn i {  
    margin-top: 1px;
    font-size: 24px; 
    cursor: pointer;

  }


  .actives{
    display: block!important;
  }
}