/* 

*/

/* ======================================================== */

/* CSS Reset */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;500;600&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/*======== CSS DASAR=========*/
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
}

body,
html {
  display: block;
  font-family: "Outfit";
  font-weight: 100;
  scroll-behavior: smooth;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Outfit";
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0;
}

br {
  display: block;
  content: "";
  margin: 12px 0;
}

::placeholder {
  font-size: 16px;
  font-weight: 300;
  outline: none;
}

/* For mobile phones: */
[class*="col-lg-2"] {
  width: 50%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 25%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-5 {
    width: 41.66%;
  }
  .col-s-6 {
    width: 50%;
  }
  .col-s-7 {
    width: 58.33%;
  }
  .col-s-8 {
    width: 66.66%;
  }
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
}

/* CSS Reset */

/* ======================================================== */

/* Navbar & Offcanvas (navigation bar dan menu) */
.dropdown-header {
  padding: 0, 5rem 1rem;
  background-color: rgb(68, 6, 6);
  color: rgb(128, 128, 128);
  font-size: 0.875rem;
  text-align: center;
}

.dropdown-menu {
  font-weight: 300;
  max-height: 90vh;
  white-space: normal;
  overflow-y: auto;
}

.nav-item {
  padding: 1rem;
}

.offcanvas_size {
  width: 250px !important;
}

/*karousel*/
.carousel-item {
  height: 700px;
}

/* Navbar & Offcanvas */

/* ======================================================== */

/* Custom Button */

/* tombol button -Navy */
.btn-navy {
  color: #ffffff;
  background-color: #060466;
  border-color: #6d1b1b;
}

.btn-navy:hover,
.btn-navy:focus,
.btn-navy:active,
.btn-navy.active,
.open .dropdown-toggle.btn-navy {
  color: #ffffff;
  background-color: #bea40f;
  border-color: #887236;
}

.btn-navy:active,
.btn-navy.active,
.open .dropdown-toggle.btn-navy {
  background-image: none;
}

.btn-navy.disabled,
.btn-navy[disabled],
fieldset[disabled] .btn-navy,
.btn-navy.disabled:hover,
.btn-navy[disabled]:hover,
fieldset[disabled] .btn-navy:hover,
.btn-navy.disabled:focus,
.btn-navy[disabled]:focus,
fieldset[disabled] .btn-navy:focus,
.btn-navy.disabled:active,
.btn-navy[disabled]:active,
fieldset[disabled] .btn-navy:active,
.btn-navy.disabled.active,
.btn-navy[disabled].active,
fieldset[disabled] .btn-navy.active {
  background-color: #368836;
  border-color: #368836;
}

.btn-navy .badge {
  color: #365388;
  background-color: #ffffff;
}

/* Outline Navy */
.btn-outline-navy {
  color: #000000;
  background-color: transparent;
  border-color: #423688;
}

.btn-outline-navy:hover,
.btn-outline-navy:focus,
.btn-outline-navy:active,
.btn-outline-navy.active,
.open .dropdown-toggle.btn-outline-navy {
  color: #fff;
  background-color: #368836;
  border-color: #368836;
}

.btn-outline-navy:active,
.btn-outline-navy.active,
.open .dropdown-toggle.btn-outline-navy {
  background-image: none;
}

.btn-outline-navy.disabled,
.btn-outline-navy[disabled],
fieldset[disabled] .btn-outline-navy,
.btn-outline-navy.disabled:hover,
.btn-outline-navy[disabled]:hover,
fieldset[disabled] .btn-outline-navy:hover,
.btn-outline-navy.disabled:focus,
.btn-outline-navy[disabled]:focus,
fieldset[disabled] .btn-outline-navy:focus,
.btn-outline-navy.disabled:active,
.btn-outline-navy[disabled]:active,
fieldset[disabled] .btn-outline-navy:active,
.btn-outline-navy.disabled.active,
.btn-outline-navy[disabled].active,
fieldset[disabled] .btn-outline-navy.active {
  background-color: #ffffff;
  border-color: #368836;
}

.btn-outline-navy .badge {
  color: #ffffff;
  background-color: #000000;
}

/* Custom Button */

/* ======================================================== */

/* Background & Colors */
.bg-navy {
  background: #0e245f;
}

.text-navy {
  color: #c28d2b;
}

/* Background & Colors */

/* ======================================================== */

/* Paragraph & Text  ( dalam berita dan artikel )*/
.heading_truncate {
  overflow: hidden;
  max-height: 50px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  display: block;
}

.paragraph_truncate {
  overflow: hidden;
  max-height: 6rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  display: block;
  font-size: small;
}

.morenews_truncate {
  overflow: hidden;
  max-height: 3rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  display: block;
}
/*tulisan kecil dalam deskripsi berita*/
.text_small {
  font-size: 12px;
}

.text_justify {
  text-align: justify;
}

.text-center {
  color: #747474;
}

.text-left {
  color: #368836;
}

.text-right {
  color: #0a0a0a;
}

.text-success {
  color: #368836;
}

.struktural img {
  height: 200px;
}

/*menu bar*/
.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #368836;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

/* ===========================
      ====== Medua Query for Search Box ====== 
      =========================== */

@media only screen and (min-width: 150px) and (max-width: 780px) {
  .search {
    width: 95%;
    margin: 0 auto;
  }
}

/* Paragraph & Text */

/* ======================================================== */

/* Footer */
.tnp-nav {
  list-style: none;
  margin-bottom: 3;
  padding-left: 5;
}

.tnp-navitem a {
  color: #ffffff;
  font-weight: 300;
  text-decoration: none;
  margin-bottom: 3;
}
.text-light {
  color: #3d07ff;
}

/* Footer */

/* berita lainnya */
.morenews_sticky {
  position: sticky;
  top: 60px;
  margin-bottom: 1px;
}

/* News */

/* ======================================================== */

/* ETC */
.scroller {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroller::-webkit-scrollbar {
  height: 8px;
  display: none;
}
.scroll {
  flex: 0 0 auto;
  margin: 0.75rem 0 0.75rem 0;
}
/* ETC */

/* Bootstrap Overwrite */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 2rem;
}
.page-link {
  color: #363b88;
}
.active > .page-link,
.page-link.active {
  z-index: 3;
  color: #ffffff;
  background-color: #3b3688;
  border-color: #364288;
}
/* Bootstrap Overwrite */
.profile-perusahaan {
  height: 270px;
  background-image: url("https://tirtalogistic.co.id/admin/upload/background_footer/bg-footer.png");
  background-color: #352f83;
  background-position: center;
  background-size: cover;
  padding-bottom: 4px;
}
.navbar-brand > img {
  width: 5rem;

  padding: 1px;
}
.header-image {
  height: 30rem;
  width: auto;
  padding: 5px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
  display: block;
}

p.berita {
  font-size: 1.2rem;
}

li.berita {
  font-size: 1.2rem;
}
.berita-image {
  height: 30rem;
  width: auto;
  padding: 5px;
  background-repeat: no-repeat;
  background-position: center;
}