/* ----------------------------- */

#navbar {
  height: 310px;

  width: 100%;
  background-image: url("../img/zaglavlje.webp");
  background-size:auto;
  background-position: top;
}

.logo {
  position: absolute;
  top: 240px;
  left: calc(50% - 175px);
}

.logo img {
  height: 350px;
}


.naslov {
  width: 100%;
  padding: 10px 30px 0 30px; /* Top padding of 20px, left and right padding of 30px */
  box-sizing: border-box;     /* Includes padding in the element's total width */
}

.naslov img {
  display: block;    /* Allows margin auto to center the image */
  margin: 6px auto 0 auto; /* Centers the image and adds top margin */
  width: 100%;       /* Image width scales with its container */
  max-width: 600px;  /* Sets the maximum width of the image */
  height: auto;      /* Maintains the aspect ratio */
}

/* ----------------------------- */


.linkovi-levo {
  position: absolute;
  top: 260px;
  left: calc(50% - 490px);

  /* Ensures the image width doesn't exceed its container */
  width: 500px;
  
   /* Maintains the aspect ratio */
  height: auto;

  /* align items in one line */
  display: flex;
  align-items: center;
}

.linkovi-desno {
  position: absolute;
  top: 260px;
  right: calc(50% - 680px);

  /* Ensures the image width doesn't exceed its container */
  width: 500px;
  
   /* Maintains the aspect ratio */
  height: auto;
}

.linkovi-levo a, .linkovi-desno a, .saznajDrotdown {
  font-size: 22px;
  color: #ffffff;
  text-decoration: none;
  font-weight: medium;
  text-decoration: none;
}


.linkovi-levo a {
  margin-right: 20px;
}

.linkovi-desno a {
  margin-right: 50px;
}

/* mouse over link */
.linkovi-levo a:hover, .linkovi-desno a:hover, .saznajDrotdown  {
  color: #ffcf40;
}


/* For Responsive NavBar */

.menu-show {

  display: none;

  position: absolute;
  top: 420px;
  left: calc(50%);
  translate: -50%;

  font-size: 22px;
  color: #03396c;
  text-decoration: none;
  font-weight: medium;
  text-decoration: none;
}
.menu-show:hover {
  text-decoration: none;
  color: #ffcf40;
}

.dropdown {
  float: left;
  overflow: hidden;
}
iztx-vjmc-witq-unnm
.dropdown {
  font-size: 17px;
  border: none;
  outline: none;
  padding: 1px 1px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #03396c;
  border: 4px solid #ffcf40;
  min-width: 170px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 0px;
  padding-left: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.dropdown:hover .saznajDrotdown {
  color: #ffcf40;
}

.dropdown-content a:hover {
  background-color: #ffcf40;
  color: #03396c;
}


.dropdown:hover .dropdown-content {
  display: block;
}




/* Responsive layout */
@media screen and (max-width: 1024px) {
  #navbar {
    height: 220px;

  }

  .logo img {
    height: 200px;
  }
  .logo {
    position: absolute;
    top: 180px;
    left: calc(50% - 100px);
  }
  
  .menu-show {
    display: block;
  }
  .linkovi-levo, .linkovi-desno {
    display: none;
  }
}