.about-navigation{
   display: block; 
   margin-top: -70px;
   position: relative;
   z-index: 9;
 }
#about-menu{
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0 ; 
   border-top: 1px solid rgba(255, 255, 255, 0.5);
   justify-content: space-between;
 }
 #about-menu li {
   padding:0;
   border-top: 2px solid transparent;
 }
 #about-menu li a{
   color: #fff;
   padding:19px 15px;
 }
 #about-menu .current-menu-item, #about-menu li:hover{
   border-top: 2px solid var(--main-color);
   
 }
 #about-menu .current-menu-item a,  #about-menu li:hover a{
   color: var(--main-color);
   text-decoration: none;
 }
.director-item {
  margin-bottom: 30px;
 }
.director-item .bod-name{
  font-size: 20px;
  color: #9B9B9D;
  font-weight: 600;
  text-align:center;
  padding: 10px 0 0;
}
.director-item  .bod-position{
  font-size: 14px;
  color: #717274;
  text-align: center;
}
.director-item  .bod-biography{
  font-size: 13px;
  padding-top: 10px;
  line-height:25px;
}
.director-item .bod-img-container{
  min-height: 450px; 

}
.director-item .bod-img-container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.bod-img-container{
  border-radius: 10px;
  overflow: hidden;
}
.comissioner-item > .inner-container, .director-item > .inner-container{
  border-radius: 10px;
  box-shadow: 0px 4px 50px 0px rgba(183, 183, 183, 0.25);
  position: relative;
  padding:20px 20px 70px;
  cursor: pointer;
  height: auto;
}
.comissioner-item > .inner-container:after, .director-item > .inner-container:after{
  content: '';
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  background: url(../img/icon/icon-arrow-down.svg) no-repeat;
  left: 50%;
  margin-left: -12px;
  bottom: 15px;
}
.comissioner-item .bod-name{
  font-size: 28px;
 color: #9B9B9D;
 text-align: center;
 font-weight: 600;
 padding: 10px 0 0;
}
.bod-position{
  color: #9B9B9D;
  font-size: 16px;
  text-align: center;
}
.comissioner-item .inner-container .bod-biography{
  display: none;
}
.comissioner-item .inner-container.active .bod-biography{
  display: block;
  padding-top: 10px;
}
.comissioner-item .inner-container.active  .bod-name{
  color:var(--main-color)
}
.comissioner-item > .inner-container.active:after{
  display: none;
  transform: rotate(180deg);
}
.about-navigation button{
  display: none;
}
.modal-biography-container .modal-content{
  background: url(../img/modal-background.svg) no-repeat right bottom #fff;
  background-size: 20%;
  padding:  70px;
  line-height: 32px;
}
.modal-biography-container .modal-dialog{
    margin: 150px auto 0;
    max-width: 800px;
}
.modal-biography-container  .modal-header, .modal-biography-container  .modal-footer{
  border: 0;
}
.modal-biography-container  .modal-header{
  flex-flow: column;
  padding: 0;
  margin-bottom: 20px;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 10px;

}
.modal-body{
  padding: 0;
 
}
.comissioner-item.active .bod-name, .director-item.active .bod-name{
  color:var(--main-color);
}
.modal-biography-container h4.modal-title {
  color: var(--main-color);
  font-size: 30px;
}
.modal-biography-container .bod-position{
  color: #717274;
  font-size: 14px;
}
.brand-dna-container .uagb-tabs__panel {
  position: relative;
}
.brand-dna-container .uagb-tab {
  border: 0 !important;
  position: relative; 
}
.brand-dna-container .uagb-tab a{
  display: block;
  z-index: 1;
  position: relative; 
  margin-right: 25px !important; 
  text-transform: uppercase;
  text-align: center; 
  border: 0 !important;
}

.brand-dna-container .uagb-tab a:before {
  content: '';
  position: absolute;
  top: 0;
  width: 77px; 
  z-index: -1;
  background-color: #E1E1E1;
  transform: skew(60deg);
  left: auto;
  bottom: 0;
  right: -38px;
}
.brand-dna-container .uagb-tab a{
  background-color: #E1E1E1;
  line-height: normal;
  border: 0 !important;
  padding: 9px 15px !important;
  border-top-left-radius: 5px;
}
.brand-dna-container .uagb-tab a:hover, .brand-dna-container .uagb-tab a:hover::before{
  text-decoration: none;
  background: #ccc;
  
}
.brand-dna-container .uagb-tab:hover{
  z-index:100;
}

.brand-dna-container .uagb-tab.uagb-tabs__active{
  z-index: 99;
}
.brand-dna-container .uagb-tab.uagb-tabs__active a,.brand-dna-container .uagb-tabs__active.uagb-tab a:before{
  background: #9B9B9D;
}
.brand-dna-container .uagb-tab.uagb-tabs__active a:focus{
outline: none;
}
.about-keuanggulan p.hide{
  display: none;
}
.about-keuanggulan p.show{
  display: block;
}
a.view-art, a.view-art:focus, a.view-art:visited{
  color: var(--alter-color);
  outline: none;
}
a.view-art:hover{
  color: var(--font-color);
}
.brand-dna-container .uagb-tabs__body-wrap{
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-top-right-radius: 10px !important;
  background: #FFF;
  box-shadow: 0px 136px 150px -27px rgba(0, 0, 0, 0.10); 
}
.milestone-listing-container{
  overflow-x:auto;
  width: 80%;
  margin: 0 auto;
  height: 200px;

}
.milestone-listing-track {
display: block;
background: #00AEEF;
padding:0 10px;
border-radius: 30px;
border: 1px solid #fff;
width: max-content;
}
.milestone-listing-container .milestone-item{
margin-left: 10px;  
display: inline-flex;
width: 170px;
align-items: center;
position: relative;
} 
.yearNumber{
width: 70px;
text-align: center;
color: #fff;
font-size: 14px;
}
.milestonebyyear{
 
position: relative;
padding: 10px 0;
border-right: 1px solid #fff;
height: 40px;
}
.milestone-content:last-child .milestonebyyear{
border: 0;
}
.milestone-info{
position: absolute;
top: 60px;
padding: 10px;
background: #ececec;
border-radius: 5px;
width: 170px;
right: 20px;
height: 100px;
}
.milestone-title{
  font-size: 11px;
  text-align: center;
}
.milestone-item .inner-container {
flex: 0 0 100%;
}
.milestone-content  {
display: inline-block;
}
.hand{
position: absolute;
right: 50px;
}
.hand .dot{
display: flex;
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
align-items: center;
justify-content: center;
position: relative;
z-index: 2; 
}
.hand .line {
height: 90px;
position: absolute;
top: 9px;
width: 1px;
background: #fff;
left: 12px; 
}
.btn-milestone{
display: flex;
justify-content: center;
align-items: center;
}
.btn-milestone  button{
border: 0;
border-radius: 50%;
height: 32px; 
width: 32px; 
padding: 0;
background-color: var(--main-color);
display: flex;
margin: 0 5px;
justify-content: center;
align-items: center;
}
.btn-milestone  button:focus, .btn-milestone  button:focus-visible, .btn-milestone  button:active{
outline: none;
}
.btn-milestone  button:before{
content: '';
display: block;
width: 10px;
height: 10px;
flex: 0 0 10px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
}
.btn-milestone  button.btn-left-milestone:before{
transform: rotate(-45deg);
margin-left: 3px;
}
.btn-milestone  button.btn-right-milestone:before{
transform: rotate(135deg);
margin-right: 3px;
}
.btn-milestone button{
border: 1px solid #fff;
}
.btn-milestone{ 
margin-bottom: 0px;
padding: 20px 0 0;
}
.yearNumber{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.milestone-date{
	font-size: 14px;
	text-align: center;
	font-weight: bold;
  margin-bottom: 5px;
}
.milestone-date > .date{
  display: none;
}
.youtube-video-thumbnail figcaption:before{
	content: '';
	display: block;
	height: 80px;
	flex: 0 0 80px;
	width: 80px;
	background: url(../img/icon/btn-yt-play.svg) no-repeat ;
}
.youtube-video-thumbnail figcaption{
	position: absolute;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	cursor: pointer;
}
.youtube-video-thumbnail:hover  figcaption::before{
	opacity: 0.4;
}
 
.youtube-container img{
	border-radius: 10px; 
}
 
.modal-dialog button.close {
	background: var(--main-color);
	opacity: 1;
	width: 50px;
	font-size: 16px;
	margin-top: -21px;
	padding-bottom: 6px;
	border-radius: 15px;
	margin-right: 20px;
  position: absolute;
  z-index: 99;
  right: 0px;
}
.modal-dialog button.close:active, .modal-dialog button.close:focus{
  outline: none;
}
.modal-dialog button.close span{
	color: #fff !important;
	text-shadow: none !important;
}
#my-modal-video {
  height:730px;
}
 
#videoPopup .modal-dialog{
  max-width: 1340px;
    margin-top: 200px;
    padding: 20px;
}
#videoPopup .modal-content{
  line-height: 0;
  border: 0; 
  background: transparent !important;
  position: relative;
}
.milestone-listing-container::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border-radius: 10px;
}
 
.milestone-listing-container::-webkit-scrollbar-track {
  background: transparent; 
} 
.milestone-listing-container::-webkit-scrollbar-thumb {
  background: #D1D1D1; 
  border-radius: 10px;
  width: 5px;
} 
@media (max-width: 1500px){
  #videoPopup .modal-dialog{
    max-width: 1000px;
  }
  #about-menu li a {
    color: #fff;
    padding: 7px 15px;
    text-align: center;
    display: block;
  }
  .director-item .bod-img-container{
    min-height: 290px; 
  
  }
}

@media (max-width: 992px){
  .director-item .bod-img-container{
    min-height: auto;  
  }
 
  .left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .menu-sub-about-menu-container{
    padding: 0 0px ;
  }
  .about-navigation .container{
    padding: 0 42px;
  }
  #about-menu {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden  ;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border: 0;
  }
  #about-menu li{
    white-space: nowrap;
  }
  #about-menu li a{
    display: block;
    color: #000;
  }
  .about-navigation{
    margin-top: 0;
    background: rgba(0,0,0,0.1);
  }
  .about-navigation  button{
    border: 0;
    border-radius: 50%;
    height: 32px; 
    width: 32px; 
    padding: 0;
    background-color: var(--main-color);
    display: flex;
    margin: 0 5px;
    justify-content: center;
    align-items: center;
  }
  .about-navigation  button:before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
  }
  .about-navigation  button.left:before{
    transform: rotate(-45deg);
    margin-left: 3px;
  }
  .about-navigation  button.right:before{
    transform: rotate(135deg);
    margin-right: 3px;
  }
  .about-navigation  button:active, .about-navigation  button:focus-visible, .about-navigation  button:focus{
        outline: none;
  }
  .comissioner-item .bod-name{
    font-size: 22px;
  }
  .director-item > .inner-container, .comissioner-item > .inner-container{
    padding: 15px 15px 50px;
  }
  .modal-biography-container .modal-dialog{
    max-width: 500px;
  }
  .comissioner-item{
    margin-bottom: 30px;
  }
  #my-modal-video {
    min-height:180px;
    height: auto;
  }
}
@media (max-width: 767px) {
  .director-item .bod-name{
    font-size: 18px;
  }
   .type2-header h1.entry-title{
      font-size: 30px;
      font-weight: 600;
    }
    .modal-biography-container .modal-dialog{
      max-width: 80%;
      margin:50px auto 0;
    }
    .modal-biography-container .modal-content{
      padding: 30px;
    }
    .partner-listing-container h2{
      font-size: 20px;
      padding: 10px 20px;
    }
    #my-modal-video {
      min-height:180px;
      height: auto;
    }
    .milestone-listing-container .milestone-item{
      width: 200px;
    }
}