/* warna untuk website */
/* biru : 006b93
abu-abu : 414042
biru tua : 00334b
*/

.bg-birmud {
  background-color: #006b93!important;
}

.bg-transparan {
  background-color: transparent!important;
}

.bg-birtu{
  background-color: #00334b!important;
}

.bg-abu{
  background-color: #414042!important;
}

.btn-birmud{
  background-color: #006b93!important;
  color:white;
}

.btn-birmud:hover{
  background-color: white!important;
  color:#006b93;
}

.btn-btt{
  background-color: #006b93!important;
  color:white;
  border-color: #ffffff;
  border: 2px solid;
}

.btn-btt:hover{
  background-color: white!important;
  color:#006b93;
  border-color: #006b93;
  border: 2px solid;
}

.beranda-kontak p{
  font-weight: bolder;
  color: #ff4c00;
}

.dropdown-item:hover{
background-color: #006b93;
color: #ffffff;
}

/* Why Choose Us */
.wcs-pdc .item img {
  display: inline-block;
  color: #ff4c00;
  font-size: 60px;
  margin-bottom: 25px;
}

.yellow .wcs-pdc .item img {
  color: #febc35;
}

.wcs-pdc .item h4 {
  position: relative;
  z-index: 1;
  line-height: 60px;
  font-weight: 700;
}

.wcs-pdc .item h4 span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 90px;
  z-index: -1;
  color: #eef1f6;
  opacity: 0.5;
  font-weight: 900;
}

.wcs-pdc .item {
  border: 1px solid #e7e7e7;
  padding: 67px 50px;
  background: #ffffff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 400px;
}

.wcs-pdc .item img {
  height: 70px;
}

.wcs-pdc .item p {
  margin: 0;
}

.work-process-area.inc-img .wcs-pdc .item h4 {
  line-height: 1.2;
}

.work-process-area.inc-img .wcs-pdc .item img {
  margin-bottom: 40px;
}

/* Animation */
.wcs-pdc .item::before, 
.wcs-pdc .item::after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #ff4c00;
}

.yellow .wcs-pdc .item::before, 
.yellow .wcs-pdc .item::after {
  background: #febc35;
}

.wcs-pdc .item .item-inner::before, 
.wcs-pdc .item .item-inner::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: #ff4c00;
}

.yellow .wcs-pdc .item .item-inner::before, 
.yellow .wcs-pdc .item .item-inner::after {
  background: #febc35;
}

.wcs-pdc .item:hover::before, 
.wcs-pdc .item:hover::after {
  width: 100%;
}

.wcs-pdc .item:hover .item-inner::before, 
.wcs-pdc .item:hover .item-inner::after {
  height: 100%;
}
/*----- button 1 -----*/
.wcs-pdc .item::before, 
.wcs-pdc .item::after {
  transition-delay: 0.2s;
}

.wcs-pdc .item .item-inner::before, 
.wcs-pdc .item .item-inner::after {
  transition-delay: 0s;
}

.wcs-pdc .item::before {
  right: 0;
  top: 0;
}

.wcs-pdc .item::after {
  left: 0;
  bottom: 0;
}

.wcs-pdc .item .item-inner::before {
  left: 0;
  top: 0;
}

.wcs-pdc .item .item-inner::after {
  right: 0;
  bottom: 0;
}

.wcs-pdc .item:hover::before, 
.wcs-pdc .item:hover::after {
  transition-delay: 0s;
}

.wcs-pdc .item:hover .item-inner::before, 
.wcs-pdc .item:hover .item-inner::after {
  transition-delay: 0.2s;
}

/* Tentang */
.visimisi .card-header {
  background: linear-gradient(45deg, #00334b 50%, #006b93 100%);
  color: #fff;
  position: absolute;
  top: -25px;
  left: 0;
  width: 220px;
  height: 50px;
  border: 2px solid linear-gradient(45deg, #00334b 50%, #006b93 100%);
  border-radius: 0px 0px 10px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.visimisi .card-body{
  padding: 45px 20px 20px;
  min-height: 190px;
}

/* gak kepake */
.buld_spec-navs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #f1f1f1;
  margin-top: 30px;
  margin-bottom: 0;
}

.buld_spec-navs li {
  line-height: 1em;
}

.buld_spec-navs li a {
  color: #81868a;
  font-size: 18px;
  font-weight: 500;
  display: block;
  padding: 30.5px 50px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: relative;
}

.buld_spec-navs li a::before {
  content: "";
  width: 35px;
  height: 10px;
  background-color: #01796f;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%) scaleY(0);
  transform: translateX(-50%) scaleY(0);
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.buld_spec-navs li a:hover,
.buld_spec-navs li a.active {
  background-color: #01796f;
  color: #fff;
}

.buld_spec-navs li a:hover:before,
.buld_spec-navs li a.active:before {
  -webkit-transform: translateX(-50%) scaleY(1);
  transform: translateX(-50%) scaleY(1);
}

.buld_spec-content {
  border-style: solid;
  border-width: 2px;
  border-color: #f1f1f1;
  padding: 50px;
}

.buld_spec-content .course-details__meta-icon {
  width: 30px;
  height: 30px;
}

.buld_spec-content .course-details__meta-icon i {
  font-size: 12px;
}

.buld_spec-content .course-details__meta-icon:before {
  border-width: 1px;
}

.buld_spec-content .course-details__meta-icon.video-icon {
  background-color: #01796f;
}

.buld_spec-content .course-details__meta-icon.video-icon:before {
  border-color: #01796f;
}

.buld_spec-content .course-details__meta-icon.file-icon {
  background-color: #f16101;
}

.buld_spec-content .course-details__meta-icon.file-icon:before {
  border-color: #f16101;
}

.buld_spec-content .course-details__meta-icon.quiz-icon {
  background-color: #d23f3f;
}

.buld_spec-content .course-details__meta-icon.quiz-icon:before {
  border-color: #d23f3f;
}

.buld_spec-text {
  margin: 0;
  font-size: 16px;
  line-height: 34px;
  font-weight: 500;
  color: #81868a;
}

.buld_spec-title {
  font-size: 20px;
  color: #012237;
  font-weight: 600;
  margin: 0;
}
/* gak kepake sampe sini */

/* building specification */
.nav-buildspec {
border: 1px solid transparent;
background-color: #f1f1f1;
color: #ffffff!important;
padding: 0;
}

.nav-buildspec button{
color: #00334b;
font-weight: bolder;
font-size: 20px;
}

.nav-buildspec button:hover{
color: #ff4c00;
}

.nav-buildspec .nav-link{
border: 0px solid transparent;
}

.nav-buildspec .nav-link.active{
background-color: #00334b;
color: #ffffff;
/* border: 0px solid transparent; */
margin: 0;
}

.tab-buildspec{
border-left: 2px solid #f1f1f1;
border-right: 2px solid #f1f1f1;
border-bottom: 2px solid #f1f1f1;
padding: 20px 10px 10px;
min-height: 390px;
}

.tab-buildspec p {
font-weight: bold;
font-size: 20px;
color: #ff4c00;
}

.table>:not(caption)>*>*{
border-bottom :1px solid #00334b!important;
border-bottom-width: 0px;
}

.table.busp>:not(caption)>*>*{
border-bottom :0px solid #00334b!important;
border-bottom-width: 0px;
}

.buildspec-header {
  background: url(../img/beranda-iondc/bg-beranda-rack.png) center center no-repeat;
  background-size: cover;
  padding: 7rem 0px;
}

.buildspec-header .breadcrumb-item+.breadcrumb-item::before {
  color: var(--light);
}

.buildspec-header .breadcrumb-item,
.buildspec-header .breadcrumb-item a {
  font-size: 18px;
  color: var(--light);
}

.buildspec-header h1 {
color: #006b93;
}

.gallery-tentang h1 {
color: #006b93;
margin-bottom: 50px;
font-size: 2.7rem;
}

/* Service PDC */
.service-pdc .item img {
display: inline-block;
color: #ff4c00;
font-size: 60px;
margin-bottom: 25px;
}

.yellow .service-pdc .item img {
color: #febc35;
}

.service-pdc .item h4 {
position: relative;
z-index: 1;
top:-45px;
background-color: #ff4c00;
color: #ffffff;
width: 200px;
padding: 10px 0px;
border: 1px solid #ff4c00;
border-radius: 5px;
}

.service-pdc .item h4 span {
position: absolute;
left: 0;
top: 0;
font-size: 90px;
z-index: -1;
color: #eef1f6;
opacity: 0.5;
font-weight: 900;
}

.service-pdc .item {
border: 1px solid #e7e7e7;
padding: 20px 30px;
background: #ffffff;
position: relative;
z-index: 1;
min-height: 345px;
}

.service-pdc .item img {
height: 70px;
}

.service-pdc .item p {
margin: 0;
text-align: justify;
}

.work-process-area.inc-img .service-pdc .item h4 {
line-height: 1.2;
}

.work-process-area.inc-img .service-pdc .item img {
margin-bottom: 40px;
}

/* Animation */
.service-pdc .item::before, 
.service-pdc .item::after {
content: "";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #ff4c00;
}

.yellow .service-pdc .item::before, 
.yellow .service-pdc .item::after {
background: #febc35;
}

.service-pdc .item .item-inner::before, 
.service-pdc .item .item-inner::after {
content: "";
width: 2px;
height: 0;
position: absolute;
transition: all 0.2s linear;
background: #ff4c00;
}

.yellow .service-pdc .item .item-inner::before, 
.yellow .service-pdc .item .item-inner::after {
background: #febc35;
}

.service-pdc .item:hover::before, 
.service-pdc .item:hover::after {
width: 100%;
}

.service-pdc .item:hover .item-inner::before, 
.service-pdc .item:hover .item-inner::after {
height: 100%;
}
/*----- button 1 -----*/
.service-pdc .item::before, 
.service-pdc .item::after {
transition-delay: 0.2s;
}

.service-pdc .item .item-inner::before, 
.service-pdc .item .item-inner::after {
transition-delay: 0s;
}

.service-pdc .item::before {
right: 0;
top: 0;
}

.service-pdc .item::after {
left: 0;
bottom: 0;
}

.service-pdc .item .item-inner::before {
left: 0;
top: 0;
}

.service-pdc .item .item-inner::after {
right: 0;
bottom: 0;
}

.service-pdc .item:hover::before, 
.service-pdc .item:hover::after {
transition-delay: 0s;
}

.service-pdc .item:hover .item-inner::before, 
.service-pdc .item:hover .item-inner::after {
transition-delay: 0.2s;
}

/*** Call To Action ***/
.cta-pdc {
position: relative;
background: #ffffff;
margin-bottom: -3rem;
}

.cta-pdc .row {
box-shadow: 0 0 45px rgb(0 0 0 / 30%);
}

.cta-pdc .border {
border-color: rgba(255, 255, 255, .1) !important;
}

/* .btn-cta {
padding: 10px 40px;
background-color: #00334b;
color: #ffffff;
border: 2px solid #00334b;
border-radius: 8px;
font-weight: bold;
font-size: 1rem;
}  */

/* .btn-cta:hover {
padding: 10px 40px;
background-color: #ff4c00;
color: #ffffff;
border: 2px solid #ff4c00;
border-radius: 8px;
font-weight: bold;
font-size: 1rem;
} */

.btn-cta {
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
background: #006b93;
font-family: "Montserrat", sans-serif;
box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
cursor: pointer;
border: none;
height: 40px;
/* width: 300px; */
font-weight: bold;
color: #ffffff;
}

.btn-cta:after {
content: " ";
width: 0%;
height: 100%;
background: #ff4c00;
position: absolute;
transition: all 0.4s ease-in-out;
right: 0;
}

.btn-cta:hover::after {
right: auto;
left: 0;
width: 100%;
}

.btn-cta span {
text-align: center;
text-decoration: none;
width: 100%;
/* padding: 10px 40px; */
color: #ffffff;
font-size: 1rem;
font-weight: 700;
/* letter-spacing: 0.3em; */
z-index: 20;
transition: all 0.3s ease-in-out;
}

.btn-cta:hover span {
color: #ffffff;
animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
0% {
  transform: scale(1);
}

50% {
  transform: scale(0.95);
}

100% {
  transform: scale(1);
}
}

/*colocation price*/
.card-coprice {
  box-shadow:0px 0px 19px 4px;
  border-radius: 20px;
  /*width: 20rem!important;*/
  margin-left: 20px;
  margin-right: 20px;
}

.card-coprice .card-header {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  border-bottom: 3px dashed #006b93;
}

.card-coprice .card-header .card-title {
  color: white;
  background-color: #006b93;
  border-radius: 30px;
  text-align: center;
  width: 200px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.card-coprice .card-header .card-text {
  color: #ff4c00;
  font-size: 1.3rem;
  font-weight: 600;
}

.card-coprice .card-body {
  min-height: 340px;
}

.card-coprice .card-body .list-group-item {
  color:#414042;
  font-size: 1rem;
}

.card-coprice .card-footer {
  background-color:transparent;
  border-top:3px dashed #006b93;
}

.card-coprice .card-footer  h3{
  text-align:center;
  margin-top: 10px;
  margin-bottom: -20px;
}

.card-coprice .card-footer  span{
  color: #ff4c00;
  font-size:1rem;
}

.card-coprice .card-footer a{
  position: relative;
  z-index: 1;
  bottom: -30px;
  right: -67px;
  width: 200px;
  text-align: center;
  padding: 10px 0px;
  border-radius: 5px;
}

.note-coprice .card {
  border-radius: 10px!important;
}

.snk-coprice {
  background-color:#006b93;
  border-radius: 10px 10px 0 0!important;
}

.snk-coprice h5 {
  color: #ffffff;
  font-size: 1.2rem;
}

.card-ribbon {
position: absolute;
overflow: hidden;
top: -10px;
left: -10px;
width: 114px;
height: 112px;
span {
    position: absolute;
    display: block;
    width: 160px;
    padding: 10px 0;
    background-color: #ff4c00;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    left: -35px;
    top: 25px;
    transform: rotate(-45deg);
}
&::before,
&::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #ff4c00;
    border-top-color: transparent;
    border-left-color: transparent;
}
&::before {
    top: 0;
    right: 0; 
}
&::after {
    bottom: 0;
    left: 0;
}
}

.card:hover {
transform: scale(1.1);
}

.mb-5 {
margin-bottom: 4rem!important
}

@media screen and (max-width: 1400px) {
  .card-coprice .card-footer a{
      bottom: -30px;
      right: -40px;
      width: 200px;
  }
}

.iondc-header {
height: 100vh;
min-height: 500px;
background-image: url('../img/beranda-iondc/header.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.iondc-header h1 {
color: #ffffff;
}

.tntg-iondc {
background-image: url('../img/beranda-iondc/bg-beranda-rack.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.tntg-iondc h1{
color: #006c93;
}

.sertifikat-dc {
background-color: #006b93;
}

.sertifikat-dc h1 {
color: #ffffff;
}

.sertifikat-dc p {
color: #c2c2c2;
font-size: 1.2rem;
}

.tentang-iondc .tntg-logo {
display: flex;
justify-content: center;
align-items: center;
}

.tentang-iondc .tntg-logo img{
width: 450px;
/* height: 160px; */
}

.tentang-iondc .tntg-deskripsi {
/* text-align: justify; */
}

.tentang-iondc .tntg-deskripsi h1{
font-weight: 900!important;
/* font-size: 3.4rem; */
color: #006b93;
}

.tentang-iondc .tntg-deskripsi p{
font-weight: 500;
font-size: 1.2rem;
color: #3f3f3f;
}

.vimis-iondc {
padding: 70px 0;
background: linear-gradient(to right, rgb(0 107 147 / 66%) 10%, rgb(255 255 255 / 89%) 20%), url(../img/laman/bg-vimis.jpg) center center no-repeat;
/* background-image: url('../img/laman/bg-vimis.jpg'); */
background-size: cover;
/* background-position: center;
background-repeat: no-repeat; */
}

.vimis-iondc .gmbr-vimis{
width: 600px;
border-radius: 20px;
}

.vimis-iondc .gmbr-vimis img{
border-radius: 20px;
}

.vimis-iondc  h1.title-vimis{
/* font-size: 4rem; */
color: #006b93;
}

.vimis-iondc p.deskripsi-vimis{
font-weight: 500;
font-size: 1.2rem;
color: #3f3f3f;
}

.spekdc-iondc {
padding: 50px 0;
}

.spekdc-iondc h1 {
font-size: 3.4rem;
color: #006b93;
}

.spekbul-iondc{
display: flex;
flex-direction: row-reverse;
min-height: 800px;
align-items: center;
}

.spekbul-iondc .gmbr-spekbul{
display: flex;
align-items: center;
justify-content: center;
}

.spekbul-iondc img{
width: 500px;
border-radius: 20px;
}

.deskripsi-spekbul .accordion-header button {
border-bottom: 2px solid #006b93;
font-size: 24px;
color: #006b93;
}

.deskripsi-spekbul .accordion-button::after {
font-weight: bold;
}

.spek-bangunan p {
font-size: 1.3rem;
color: #ff4c00;
font-weight: 500;
}

.spek-bangunan .deskripsi-spekbang{
font-size: 1.2rem;
color: #000000;
}

.spek-dc1 p{
font-size: 1.3rem;
color: #ff4c00;
font-weight: 900;
}

.spek-dc1 .deskripsi-dc1{
font-size: 1.2rem;
color: #000000;
}

.spek-dc2 p{
font-size: 1.3rem;
color: #ff4c00;
font-weight: 900;
}

.spek-dc2 .deskripsi-dc1{
font-size: 1.2rem;
color: #000000;
}

.layanan-iondc {
background-color: #000000;
}

.layanan-header {
background: url(../img/layanan-iondc/header-services.jpg) center center no-repeat;
  background-size: cover;
}

.layanan-header h1 {
color: #006b93;
}

.collocation-dc h1{
color: #006b93;
font-size: 3.5rem;
}

.collocation-dc p{
color: #ffffff;
font-size: 1.2rem;
}

.collocation-list .item img {
display: inline-block;
color: #ff4c00;
font-size: 60px;
margin-bottom: 25px;
}

.yellow .collocation-list .item img {
color: #febc35;
}

.collocation-list .item h4 {
position: relative;
z-index: 1;
background-color: #006b93;
color: #ffffff;
width: 200px;
padding: 10px 0px;
border-radius: 0px 0px 25px 0px;
top: -4px;
text-align: center;
}

.collocation-list .item h4 span {
position: absolute;
left: 0;
top: 0;
font-size: 90px;
z-index: -1;
color: #eef1f6;
opacity: 0.5;
font-weight: 900;
}

.collocation-list .item {
padding: 5px 0px;
background: #1f1f1f;
position: relative;
z-index: 1;
/* min-height: 345px; */
}

.collocation-list .item img {
height: 70px;
}

.collocation-list .item p {
margin: 0;
text-align: justify;
padding: 5px 10px;
color: #ffffff;
}

.work-process-area.inc-img .collocation-list .item h4 {
line-height: 1.2;
}

.work-process-area.inc-img .collocation-list .item img {
margin-bottom: 40px;
}

/* Animation */
.collocation-list .item::before, 
.collocation-list .item::after {
content: "";
width: 0;
height: 3px;
position: absolute;
transition: all 0.2s linear;
background: #006b93;
}

.yellow .collocation-list .item::before, 
.yellow .collocation-list .item::after {
background: #febc35;
}

.collocation-list .item .item-inner::before, 
.collocation-list .item .item-inner::after {
content: "";
width: 3px;
height: 0;
position: absolute;
transition: all 0.2s linear;
background: #006b93;
}

.yellow .collocation-list .item .item-inner::before, 
.yellow .collocation-list .item .item-inner::after {
background: #febc35;
}

.collocation-list .item:hover::before, 
.collocation-list .item:hover::after {
width: 100%;
}

.collocation-list .item:hover .item-inner::before, 
.collocation-list .item:hover .item-inner::after {
height: 100%;
}
/*----- button 1 -----*/
.collocation-list .item::before, 
.collocation-list .item::after {
transition-delay: 0.2s;
}

.collocation-list .item .item-inner::before, 
.collocation-list .item .item-inner::after {
transition-delay: 0s;
}

.collocation-list .item::before {
right: 0;
top: 0;
}

.collocation-list .item::after {
left: 0;
bottom: 0;
}

.collocation-list .item .item-inner::before {
left: 0;
top: 0;
}

.collocation-list .item .item-inner::after {
right: 0;
bottom: 0;
}

.collocation-list .item:hover::before, 
.collocation-list .item:hover::after {
transition-delay: 0s;
}

.collocation-list .item:hover .item-inner::before, 
.collocation-list .item:hover .item-inner::after {
transition-delay: 0.2s;
}

.image-layanan img:hover {
border-radius: 30px;
box-shadow: 0 0 10px 2px #616161;
transform: scale(1.01);
}

.title-layanan h3 {
color: #ffffff;
font-weight: bold;
margin-top: 20px;
}

.deskripsi-layanan p {
color: #ffffff;
}

/* google translate */
#language-switcher .flag{
  width:40px; height:auto; cursor:pointer; opacity:.8;
  transition:transform .2s, opacity .2s;
}
#language-switcher .flag:hover,
#language-switcher .flag.active{ opacity:1; transform:scale(1.05) }

/* Sembunyikan UI default widget */
.goog-logo-link, .goog-te-gadget span { display:none !important; }
.goog-te-gadget { font-size:0 !important; }

/* Sembunyikan bar/balloon notifikasi */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame { display:none !important; }
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip { display:none !important; }
.goog-text-highlight { background:none !important; box-shadow:none !important; }

/* Pulihkan offset yang kadang disuntik widget */
html, body { top:0 !important; margin-top:0 !important; position:static !important; }

/* Kita pakai bendera, bukan dropdown bawaan */
#google_translate_element{ display:none !important; }

/* halaman spesifikasi */
.colo-paket .title-colo-paket {
  font-weight: bold;
  text-align: center;
}

.colo-paket .deskripsi-colo-paket {
  text-align: center;
}

.spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.colo-paket .row-spec-list {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.spec-list .item-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #ddd;
}

.spec-list .item-row span:first-child {
    font-weight: 600;
}

.spec-list .item-row span:last-child {
    text-align: right;
    color: #333;
}

.spesifikasi-teknis-section {
    background-color: #f8fbff;
}

.spesifikasi-teknis-title {
    font-size: 32px;
    font-weight: 700;
    color: #113b71;
}

.spesifikasi-teknis-subtitle {
    font-size: 15px;
    color: #6f7d95;
}

/* row utama supaya kolom tengah (timeline) setinggi pasangan card */
.spesifikasi-teknis-main-row {
    align-items: stretch;
}

/* ===== CARD BESAR KIRI & KANAN ===== */

.spesifikasi-teknis-card-2 {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e1e7f0;
    border-radius: 6px;
    padding: 32px 32px;
    box-shadow: 0 12px 30px rgba(17, 59, 113, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    margin-bottom: 24px;
}

.spesifikasi-teknis-card-2:last-child {
    margin-bottom: 0;
}

.spesifikasi-teknis-card-2:hover {
    box-shadow: 0 18px 45px rgba(17, 59, 113, 0.09);
    transform: translateY(-3px);
}

.spesifikasi-teknis-card-2-title {
    font-size: 26px;
    font-weight: 700;
    color: #113b71;
    margin-bottom: 20px;
    min-height: 65px;
}

.spesifikasi-teknis-list {
    margin: 0;
    padding: 0;
}

.spesifikasi-teknis-item {
    margin-bottom: 10px;
}

.spesifikasi-teknis-item-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0a4f9c;
}

.spesifikasi-teknis-item-text {
    margin: 0;
    font-size: 14px;
    color: #5f6c80;
}

.spesifikasi-teknis-image {
    max-height: 350px;
    object-fit: contain;
}

/* ===== TIMELINE TENGAH + 1 LINGKARAN LOGO ===== */

.spesifikasi-teknis-timeline {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;       /* lingkaran di tengah vertikal */
    justify-content: center;
}

.spesifikasi-teknis-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: #0a4f9c;
    opacity: 0.90;
}

.spesifikasi-teknis-center-circle {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: #0a4f9c;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 20px 6px rgba(89, 60, 255, 0.90);
}

.spesifikasi-teknis-center-inner {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spesifikasi-teknis-logo {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.row-spesifikasi-left {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}

.spesifikasi-teknis-section .spesifikasi-baris-1 {
  min-height: 335px;
}

.spesifikasi-teknis-section .spesifikasi-baris-2 {
  min-height: 366px;
}

.spesifikasi-teknis-section .spesifikasi-baris-3 {
  min-height: 473px;
}

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

@media (max-width: 991.98px) {
    .spesifikasi-teknis-timeline {
        display: none;
    }

    /* di mobile garis penghubung dimatikan supaya tidak berantakan */
    .spesifikasi-teknis-left::after,
    .spesifikasi-teknis-right::after {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .spesifikasi-teknis-card-2 {
        padding: 24px 20px;
    }

    .spesifikasi-teknis-card-2-title {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .spesifikasi-teknis-image {
        margin-top: 16px;
        max-height: 180px;
    }
}

/* tentang baru */
.ourgrup-pdc {
  padding: 50px 0px;
}

.ourgrup-pdc h1 {
  color: #006b93;
}

.ourgrup-pdc .logo-partner {
    max-height: 100px; 
    width: auto;
    display: block;
}

.our-achievement-pdc {
    position: relative;
    background-image: url('../img/bg-parallax-achievement.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
    padding: 110px 0px;
}

.our-achievement-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.our-achievement-pdc .container {
    position: relative;
    z-index: 2;
}

.achievement-item {
    color: #444444;
}

.achievement-number {
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    color: #006b93; 
}

.achievement-unit {
    font-size: 24px;
}

.achievement-label {
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: 8px;
    color: #000000;
}

.achievement-desc {
    margin: 0;
    font-size: 14px;
}

.achievement-tier-logo {
    max-height: 80px;
    width: auto;
}

@media (max-width: 767.98px) {
    .achievement-number {
        font-size: 32px;
    }

    .achievement-desc {
        font-size: 13px;
    }
}

/* building spesification */
.building-spec {
    position: relative;
    background-image: url("{{ asset('/assets/img/bg/bg-datacenter-blur.jpg') }}");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-top: 0; 
}

.building-spec .glass-box {
     max-width: 1000px;          
    margin: 0 auto 24px;        
    border-radius: 24px;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.building-spec-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #f16122; 
}

.building-spec-table {
    font-size: 14px;
    color: #333333;
}

.building-spec-table .spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #1d3e5a;
}

.building-spec-table .spec-row:last-child {
    border-bottom: 1px solid #1d3e5a;
}

.building-spec-table .spec-label {
    font-weight: 600;
}

.building-spec-table .spec-value {
    font-weight: 400;
    text-align: right;
}

.building-spec-img-wrap {
    overflow: hidden;
    border-radius: 16px;
}

.building-spec-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.02);
    transition: transform 0.5s ease;
}

.building-spec-img-wrap img:hover {
    transform: scale(1.06);
}

@media (max-width: 991.98px) {
    .building-spec .glass-box {
        padding: 18px 16px;
    }

    .building-spec-title {
        font-size: 18px;
    }

    .building-spec-table {
        font-size: 13px;
    }
}