*{
    margin:0;
    padding:0;
    font-family: 'Lexend', sans-serif;
}


.nav-link{
    color:#000 !important;
}

.header_section {
  background-color: #f8f9fa; /* svetla pozadina do kosine */}

/* ====== DESKTOP ====== */
.header_section .logo-part {
  background-color: #f8f9fa; /* svetlo */
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}

.header_section .menu-part {
  background-color: #0d6efd; /* tamno */
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

.header_section .logo-part a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

.header_section .myGreen {
  color: #198754; /* bootstrap green */
}

/* ====== MOBILNI ====== */
@media (max-width: 991px) {
  .header_section .logo-part,
  .header_section .menu-part {
    clip-path: none;       /* uklanja kosinu */
    width: 100%;           /* zauzima punu širinu */
    text-align: center;    /* centrira tekst */
  }

  /* centriraj sve unutar .container-fluid */
  .header_section .container-fluid {
    flex-direction: column;
    align-items: center;
  }

  /* logo centriran */
  .header_section .logo-part a {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
  }

  /* hamburger dugme centrirano i zeleno */
  .header_section .navbar-toggler {
    margin: 10px auto;
    background-color: rgb(20,138,67) !important;
    border: none;
  }

  /* centriran meni */
  .header_section .navbar-collapse {
    text-align: center;
  }

  .header_section .navbar-nav {
    margin: 0 auto;
  }
}

.myGreen{
    color:rgb(20,138,67);
}

.myYellow{
    color:rgb(229,221,51) !important;
}

#myPic{
    transition:all 0.45s ease-in-out;
    width:45vh;
}

#myPic:hover{
    transform: scale(1.075);
}




#centriranTextDoMd{
    text-align: left;
}

#centrirajBlokove{
    justify-content:space-between;
}

@media(max-width:991px){
    #centriranTextDoMd{
        text-align: justify;
    }

    #centrirajBlokove{
        justify-content:center;
    }

}

#carousel1{
    width:85%;
}

@media(max-width:576px){
    #carousel1{
        width:100%;
    }
    #mojaSlikaBlok{
        width:85% !important;
    }
}

#toggleBtn{
    text-underline-offset:0.4vh;
}

#playSound{
    cursor: pointer;
    transition:all 0.35s ease-in-out;
}

#playSound:hover{
    color:rgb(20,138,67);
}

.blagoUvelicanje{
    transition:all 0.35 ease-in-out !important;
}

.blagoUvelicanje:hover{
    transform: scale(1.15) !important;
}

.carousel-indicators button{
    background-color: #000 !important;
    width: 1.7vh !important; /*mozda u pixele, pogledati*/
    height: 1.7vh !important;
}

.carousel-indicators .active{
    background-color: rgb(20,138,67) !important;
}


.btn-floating{
    transition: all 0.3s ease-in-out !important;
}

.btn-floating:hover{
    background-color: rgb(229,221,51) !important;
    color: #000 !important; 
    border-color: rgb(229,221,51) !important; 
}

.carousel i{
    transition:all 0.35s ease-in-out;
}

.carousel i:hover{
    transform: scale(1.15);
    color:rgb(20,138,67) !important;
}

#kontaktNav li a{
    color: #000;
    transition:all 0.35s ease-in-out;
}

#kontaktNav li a:hover{
    color:rgb(20,138,67);
}


#centriranTextDoMd a{
    color:rgb(20,138,67);
}

footer{
    background-color: #000;
}  

.zoom-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 15, 0.95);
    justify-content: center;
    align-items: center;
  }

  
  
  .zoom-modal img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    transition: transform 0.35s ease-in-out;
}
@media screen and (orientation: landscape) {
    .zoom-modal img {
        max-width: 100vw; /* Popuni širinu ekrana */
        max-height: 100vh; /* Popuni visinu ekrana */
    }
}
  
  /* Dugme za zatvaranje */
  .close-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #ffffff;
    border: none;
    padding: 10px 16px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 2001;
  }
  


