body {
    font-size: 0.95em;
}

.padding-small {
    padding-top: 5em;
    padding-bottom: 5em;
}

.padding-medium {
    padding-top: 8em;
    padding-bottom: 8em;
}

.padding-large {
    padding-top: 8em;
    padding-bottom: 8em;
}

.padding-side {
    padding-left: 6rem;
    padding-right: 6rem;
}

@media (max-width: 1400px) {
    .padding-side {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (max-width: 1200px) {
    .padding-side {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (max-width: 992px) {
    .padding-side {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (max-width: 768px) {
    .padding-side {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .padding-large {
        padding-top: 15em;
    }
}

@media (max-width: 576px) {
    .padding-side {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .padding-large {
        padding-top: 18em;
    }
}

.margin-small {
    margin-top: 8.125em;
    margin-bottom: 8.125em;
}

.margin-medium {
    margin-top: 10em;
    margin-bottom: 10em;
}

.margin-large {
    margin-top: 12em;
    margin-bottom: 12em;
}

.bg-bar {
    background: rgba(0, 0, 0, 0) url(/img/bg-menu.png) repeat-x scroll 0 0;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.bg-perkakas {
    background: rgba(0, 0, 0, 0) url(/img/perkakas.jpg) no-repeat scroll center
        center;
    background-size: cover;
}

.bg-kompresor {
    background: rgba(0, 0, 0, 0) url(/img/kompresor.jpg) no-repeat scroll center
        center;
    background-size: cover;
}

.bg-cnc {
    background: rgba(0, 0, 0, 0) url(/img/cnc.jpg) no-repeat scroll center
        center;
    background-size: cover;
}

.box-category .box-content {
    height: 178px;
}

.alpha60 {
    opacity: 0.6;
}

.alpha60 .mark { 
    background: rgba(0, 0, 0, 0) url(/img/indigo-arrow.png) no-repeat scroll left
        center;
}

h5.caption {
    border-bottom: 1px dotted #ccc;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.striped {
    background: #fff url("/img/divider.gif") repeat-x scroll left top;
    height: 10px;
    margin: 0 6px;
    padding-bottom: 5px;
    visibility: visible;
    width: auto;
}

.in-grid-title {
    min-height: 52px;
    font-size: .92rem !important;
 }

#pdesc p {
    margin-bottom: 0px !important;
    margin-top: 2px !important;
  }

.bg-bar {
  background-color: #f8f9fa; /* atau warna sesuai tema kamu */
}

.navbar-toggler {
  background-color: transparent;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#topmenu {
    margin-top: -12px;
}
#topmenu a.nav-link {
  color: #000; /* atau warna sesuai tema kamu */
}
#map-container {
            width: 100%;             /* Menggunakan 100% lebar layar/parent */
            height: 500px;           /* PENTING: Tentukan tinggi container, misalnya 500 piksel */
            margin: 20px 0;          /* Opsional: Memberi sedikit ruang di atas/bawah */
        }
        
        /* 2. CSS untuk IFRAME (Peta) */
        #gmap_canvas {
            width: 100%;             /* Menggunakan 100% lebar dari #map-container */
            height: 100%;            /* Menggunakan 100% tinggi dari #map-container */
            border: 0;               /* Menghilangkan border default iframe */
}