.main-content {
      padding: 50px;
    }
    
  .map-toggle-button {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  
  /* Flexbox za vertikalno centriranje sadržaja */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Ključne postavke za okomiti tekst */
  writing-mode: vertical-lr;
  text-orientation: mixed;
  
  background-color: #3498DB;
  color: white;
  border: none;
  padding: 10px 12px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
  z-index: 999;
   width: 40px;
  height: 200px;
}

.map-toggle-button:hover {
  background-color: #2980B9;
}
   .mapamodal {
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
      overflow: hidden;
      
      /* Početno stanje za animaciju (izvan ekrana s desne strane) */
      visibility: hidden;
      opacity: 0;
      transform: translateX(100%);
      transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
    }
    
    /* Krajnje stanje kada se modal otvara (na ekranu) */
    .mapamodal.show {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  
    .mapamodal-content {
      position: relative;
      width: 90%;
      height: 90%;
      margin:5%;
      overflow: hidden;
    }


.close-button {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: #333; 
font-size: 15px;
font-weight: bold;
cursor: pointer;
z-index: 10000;
text-shadow: 0 0 5px rgba(0,0,0,0.5); 
background-color: #ccc;
width: 90%; 
height: 20px; 
display: flex;
align-items: center;
justify-content: center;
line-height: 0; 
border: 2px solid white;
}
.close-button:hover,
.close-button:focus {
color: #ddd;
border-color: #eee;
}

    .mapamodal-content iframe {
      width: 100%;
      height: 100%;
      border: none;
      overflow: hidden;
    }