/* GLOBAL STYLES
-------------------------------------------------- */
:root {
  --primary-color: #176fc1;
  --bs-primary-button-hover-color: #ed1c24;
  --button-text-size: 14px;
  --success-color: #02a04e;
  --bs-danger: #ed1c24;
}
/* Padding below the footer and lighter body text */
body {
  padding-top: 3rem;
  color: #5a5a5a;
}
a {
  color: var(--primary-color); /* Use the CSS variable for link color */
}
.smaller{
  font-size:11px;
}
.h-60 {
  height: 60%;
}
@media (min-width: 768px) and (max-width: 981px) {
  .h-60 {
    height: 50%;
  }
}
@media (min-width: 981px) and (max-width: 1021px) {
  .h-60 {
    height: 55%;
  }
}
.btn-danger {
  background-color: #ed1c24;
  border-color: #ed1c24;
}
.btn-success {
  background-color: #02a04e;
  border-color: #02a04e;
}
.bg-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
}
.text-success {
  color: var(--success-color) !important;
}
.bg-grey {
  background-color: #d9dbdb;
}
.bg-violet {
  background-color: #544b62;
}
.border-violet {
  border-color: #544b62!important;
}
.border-red {
  border-color: #ed1c24!important;
}
.page-link {
  color: var(--primary-color);
}
.page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* FONTS & TEXT
-------------------------------------------------- */
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Regular.woff2") format("woff2"),
    url("../fonts/PTSans-Regular.woff") format("woff");
  font-style: normal; /* Regular font style */
  font-weight: normal; /* Regular font weight */
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Italic.woff2") format("woff2"),
    url("../fonts/PTSans-Italic.woff") format("woff");
  font-style: italic; /* Regular font style */
  font-weight: normal; /* Regular font weight */
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-Bold.woff2") format("woff2"),
    url("../fonts/PTSans-Bold.woff") format("woff");
  font-style: normal; /* Regular font style */
  font-weight: bold; /* Regular font weight */
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/PTSans-BoldItalic.woff2") format("woff2"),
    url("../fonts/PTSans-BoldItalic.woff") format("woff");
  font-style: italic; /* Regular font style */
  font-weight: bold; /* Regular font weight */
}
body {
  font-family: "PT Sans", sans-serif;
  font-style: normal; /* Regular font style */
  font-weight: normal; /* Regular font weight */
}
.text-primary {
  color: var(--primary-color)!important;
}
.dense {
  font-size: 15px;
}
.fresh {
  font-size: 14px;
}
/* HEADER
-------------------------------------------------- */
.hina-navbar {
  padding: 0.75rem 0;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}
.hina-navbar::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  content: "";
}
.navbar-brand {
  background: url("../images/HINA-color-logo.svg") 0 0 no-repeat scroll;
  background-size: auto;
  background-size: contain;
  width: 162.483px;
  height: 34.3px;
  text-indent: -9999px;
  text-decoration: none;
  border: none;
  position: relative;
  display: inline-block;
}
.nav-item {
  font-size: 14px;
}
.navbar-nav .nav-item a.nav-link {
  position: relative;
}

.navbar-nav .nav-item a.nav-link:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: var(--primary-color);
  z-index: 2;
  display: block;
  transition: height 0.3s ease;
  opacity: 0;
}
.second-navbar .navbar-nav .nav-item a.nav-link:after {
  background-color: #ed1c24;
}

.navbar-nav .nav-item a.nav-link:hover:after,
.navbar-nav .nav-item a.nav-link.active:after {
  height: 3px;
  opacity: 1;
}
.dropdown .nav-link.fw-bold {
  font-size: 14px;
}
/* TICKER
-------------------------------------------------- */
.wrapper {
  max-width: 99%;
  overflow: hidden;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 35s linear infinite;
}

.marquee p::before {
  content: "\00B7"; /* Unicode for middle dot */
  margin-right: 1.3em; /* Adjust the spacing between the dot and the text */
}

.marquee p {
  display: inline-block;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
/* BUTTONS
-------------------------------------------------- */
.btn {
  font-size: var(--button-text-size);
}
.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none !important;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
/* Fallback for browsers that don't support CSS variables */
.btn-primary:hover {
  background-color: var(--bs-primary-button-hover-color);
  border-color: var(--bs-primary-button-hover-color);
}
.btn-circle {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  padding: 0;
  border-radius: 50%;
}

.btn-circle i {
  position: relative;
  top: -1px;
}

.btn-circle-sm {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 0.9rem;
}
/* CAROUSEL
-------------------------------------------------- */

#carouselCaptions .carousel-item {
  height: 87vh;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#carouselCaptions .carousel-item img {
  object-fit: cover;
  object-position: center;
  height: 87vh;
  overflow: hidden;
}
/* Servisi
-------------------------------------------------- */
.accordion-item {
  border: none;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-button {
  color: rgb(90, 90, 90);
  background-color: rgb(248, 249, 250);
  margin-bottom: 20px;
}
.accordion-button:not(.collapsed) {
  color: rgb(90, 90, 90);
  background-color: rgb(248, 249, 250);
  box-shadow: none;
}

/* Portali
------------------------- */
.portali {
  height: 45vh;
}
@media (max-width: 576px) {
  .portali {
    height: 200px;
  }
}
/* O nama
------------------------- */
.onama {
  background-image: url("../images/onama.jpg");
  width: 100%;
  height: 70vh;
  background-size: cover;
  background-position: center;
}
/* Footer
------------------------- */
.footer {
  background-color: var(--primary-color) !important;
}
.footer a {
  font-size: 14px;
  text-decoration: none;
}
.issn {
  font-size: 14px;
}
.f-brand {
  background: url("../images/transparent-logo.svg") top right no-repeat;
  background-size: contain;
  width: 111px;
  height: 50px;
  text-indent: -9999px;
  text-decoration: none;
  border: none;
}
.footer-brand {
  width: 100px;
  height: auto;
}
#btn-back-to-top {
  position: fixed;
  bottom: 15px;
  right: 20px;
  display: none;
  width: 45px; 
  height: 45px;
  border-radius: 50%; 
  background-color: #ed1c24;
  border: none; 
}

/* IMAGES
------------------------- */
.card-img-top {
  width: 100%;
  object-fit: cover;
}
/* CARDS
------------------------- */
.card-link,
.card-link:hover {
  text-decoration: none;
  color: inherit;
}
.card-footer {
  font-size: 11px;
}
.photo-limit {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

/* AUDIO
------------------------- */
.player {
  width: 100%;
  max-width: 288px !important;
}
.rounded-pill {
  font-size: 0.9rem;
}
/* ARTICLE
------------------------- */
.timestamp {
  font-size: 11px;
}
.entry-content p {
  color: #434343!important;
}
/* ARTICLE CAROUSEL
------------------------- */
.carousel-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Adjust the gap value as needed */
}
.carousel-thumbnail {
  position: relative;
  width: auto; /* Adjust the width to maintain aspect ratio */
  height: 62.9px; /* Set a fixed height for all thumbnails */
  cursor: pointer;
}

.carousel-thumbnail img {
  width: 100%;
  height: auto;
}
.article-img {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
}
.modal-img {
  width: 100%;
  object-fit: contain;
  cursor: pointer;
}
.plain {
  text-decoration: none;
  color:inherit;
}
.plain:hover {
  text-decoration: none;
  color:var(--primary-color);
}
.map-polygon {
  fill: #f2f1ee;
  stroke: #bdb9ab;
  pointer-events: visible;
  cursor: pointer;
}
/* MAP
------------------------- */
.map-polygon-group {
   pointer-events: visible;
}

.map-polygon {
   fill: rgb(242, 241, 238);
   stroke: rgb(189, 185, 171);
   pointer-events: visible;
   cursor: pointer;
}

.map-polygon-group:hover .map-polygon, .map-polygon-group.selected .map-polygon {
   fill: rgb(192, 233, 192);
}

.map-text {
   display: none;
   cursor: pointer;
   font-size: 12px;
}

.map-polygon-group:hover .map-text, .map-polygon-group.selected .map-text {
   display: block;
}