body.no-scroll {
  overflow: hidden; /* Disable scrolling */
}

body {
  
    font-family: Arial, sans-serif;
    
}

.title{
  font-weight: bold;
}
.title span{
  font-size: 38px;
  font-family:'Courier New', Courier, monospace;
}

.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
display: none;
}

.popup-content {
background: white;
padding: 20px;
border-radius: 8px;
width: 700px;
text-align: start;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
}
ul {
list-style-type: disc !important; /* Prikaz točke */
padding-left: 20px !important; /* Prostor za točke */
}
li {
margin-bottom: 5px !important; /* Razmak između stavki */
}
/* Containers */
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.child {
width: calc(33.33% - 10px); /* Default: Three items per row */
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}

/* Navbar styles */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: whute;
color: white;
}

.navbar .logo {
font-size: 20px;
font-weight: bold;
}

.hamburger{
display: none;
}

.menu{
  display: flex;
  gap: 5px;
}
.menu_option{
  border-radius: 5px;
}

.map iframe {
  border: none;
  width: 100% !important;
  height: 300px;
  border-radius: 10px;
}
/* Underline border */
.underline-border {
  display: inline-block;
  border-bottom: 3px solid orange; /* Orange line */
  padding-bottom: 2px; /* Space between text and line */
}
.footer{
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: white;
}
.footer .headline{
  display: flex;
  width: 100%;
  height: 30px;
  justify-content: start;
  align-items: center;
  padding: 5px;
}
.footer h1{
  color: white;
}
.footer .info{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.footer .info .inline-container{
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
}
.footer .social-media{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.footer .powered{
  display: flex;
  justify-content: space-between;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  color: darkorange;
  border-top: 1px solid white;
}
.footer .powered span{
  color: white;
}

  /* ================Responsive adjustments for mobile 600px============================ */
@media (max-width: 600px) {
  /* Popup */
    .popup-content {
      width: 95%; /* Make the popup smaller for narrow screens */
      font-size: 14px; /* Adjust font size for readability */
    }

    .close {
      font-size: 18px; /* Scale down close button */
    }
   
/* Hamburger Icon Default Styles */
.hamburger {
  display: flex;
  cursor: pointer;
  width: 30px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 15;
  position: relative;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: lightgreen;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* X Icon Transformation */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 10px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0; /* Hide the middle line */
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -10px);
}
  .menu {
      display: flex;
      gap: 5px;
      display: none; /* Hide menu by default */
      flex-direction: column;
      position: absolute;
      top: 60px;
      right: 0;
      background-color: white;
      width: 100%;
      padding: 5px;
      height: 100%;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
      text-align: center;

  }
  
  .menu.active {
      display: flex; /* Show menu when active */
      z-index: 9999;
  }

  .menu a {
      padding: 10px;
      border-bottom: 1px solid #555;
  }

  .menu a:last-child {
      border-bottom: none;
  }
  /* Child */
.child {
  width: calc(50% - 10px); /* Two items per row on smaller screens */
}
  /* Map Section */
  .map {
    margin: 20px 0;
    text-align: center;
}
}
  


/* Responsive adjustments for mobile 400px */
@media (max-width: 400px) {
  .child {
      width: 100%; /* One item per row on very small screens */
  }
}