@import url("https://use.typekit.net/vml0pfg.css");

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "gotham", sans-serif;
 }

 body,
 html {
     width: 100%;
     min-height: 100%;
     color: white;
     overflow-x: hidden;
 }

 #slika-pozadina {
     display: none;
     position: fixed;
     right: 0;
     bottom: 0;
     min-width: 100%;
     min-height: 100%;
     z-index: -1;
     object-fit: cover;
 }

 .video-pozadina {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100%;
     object-fit: cover;
     z-index: -1;
 }

 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 60px;
     background: rgba(0, 0, 0, 0.3);
 }

 header nav a {
     margin: 0 15px;
     text-decoration: none;
     color: white;
     transition: 0.3s ease;
     position: relative;
 }

 header nav a::after {
     content: "";
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0%;
     height: 2px;
     background-color: white;
     transition: 0.3s ease;
 }

 header nav a:hover::after {
     width: 100%;
 }

 .cjelina {
     padding: 160px 60px;
 }

 .cjelina h1 {
     font-size: 4.5em;
     font-weight: bold;
     font-family: "gotham", sans-serif;
 }

 .cjelina p {
     margin-top: 1em;
     font-size: 1.2em;
     font-style: italic;
 }

 .button {
     display: inline-block;
     margin-top: 2em;
     padding: 18px 36px;
     font-size: 1.2em;
     border: 1px solid white;
     background: transparent;
     color: white;
     cursor: pointer;
     transition: 0.3s;
     font-weight: bold;
     text-decoration: none;
     text-align: center;
 }

 .button:hover {
     background-color: white;
     color: black;
     box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
 }



 .uvod {
     position: absolute;
     line-height: 1.6;
     bottom: 150px;
     right: 60px;
     font-size: 1em;
     background: rgba(0, 0, 0, 0.5);
     padding: 20px;
     width: 700px;
     height: auto;
     gap: 15px;

 }



 .uvod p {
     text-align: justify;
     padding-top: 20px;
 }

 .uvod:hover {
     background-color: rgba(0, 0, 0, 0.2);
     transform: scale(1.02);
     box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
     transition: 0.3s ease;
 }


 .cjelina-ostalo {
     padding: 10px 60px;
 }

 .cjelina-ostalo h1 {
     font-size: 3em;
     max-width: 850px;
     text-align: center;
     margin: 0 auto;
     margin-top: 2em;
 }

 .cjelina-ostalo p {
     margin-top: 1.5em;
     font-size: 1em;
     max-width: 700px;
     font-style: italic;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
 }



 .uvod-metode {
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
     gap: 30px;
     padding: 40px 60px;
     position: relative;
     margin-top: 80px;
 }

 .metoda {
     width: 80%;
     background: rgba(0, 0, 0, 0.5);
     padding: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: justify;
     transition: 0.3s ease;
 }

 .metoda:hover {
     transform: scale(1.03);
     box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
 }

 .metoda p {
     font-size: 1em;
     text-align: center;
     max-width: 250px;
 }

 .metoda h2 {
     font-size: 1.5em;
     text-align: center;
     margin: 1em;
 }

 .metoda img {
     max-width: 200px;
     height: 200px;
     object-fit: cover;
     margin-top: 20px;

 }

 .zakljucak {
     margin: 20px auto 50px auto;
     max-width: 1000px;
     background: rgba(0, 0, 0, 0.5);
     padding: 30px;
     font-size: 1em;
     line-height: 1.6;
     text-align: center;
 }

 .zakljucak:hover {
     transform: scale(1.03);
     box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
 }

 .button-ostalo {
     text-align: center;
     margin: 20px 0 40px 0;
 }

 hr {
     max-width: 300px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 2em;
     color: #ffff;
     height: 1px;
 }

 footer {

     width: 100%;
     text-align: center;
     padding: 300px 0;
     color: white;
     font-size: 0.9em;
  
 }

 footer p {
     margin: 0;
 }


 .footer-ostalo {
     position: relative;
     bottom: 20;
     width: 100%;
     text-align: center;
     padding: 20 0;
     color: white;
     font-size: 0.9em;
     z-index: 10;
 }

 .footer-ostalo p {
     margin: 0;
 }

 @media (min-width: 768px) and (max-width: 1024px) {


     .cjelina {
         padding: 80px 60px;
     }

     .cjelina h1 {
         font-size: 3.5em;
     }

     .cjelina p {
         font-size: 1em;
     }

     .button {
         padding: 15px 33px;
         font-size: 1em;
     }

     .uvod {
         position: relative;
         top: -10px;
         left: 60px;
         font-size: 1em;
         padding: 20px;
         width: 600px;
     }

     .uvod p {
         padding-top: 5px;
     }


     .cjelina-ostalo h1 {
         font-size: 2.5em;
     }

     .cjelina-ostalo p {
         font-size: 1em;
     }

     .uvod-metode {
         gap: 20px;
         flex-wrap: wrap;
     }

     .metoda {
         width: 48%;
     }

     .metoda img {
         max-width: 200px;
         height: 200px;
         margin: 0 auto;
     }

     .zakljucak {
         max-width: 580px;
     }

     hr {
         max-width: 250px;
     }

     footer {
         font-size: 0.8em;
         padding: 15px 0;
     }

     .footer p {
         margin: 0;
     }

 }

 @media (max-width:768px) {

     .video-pozadina {
         display: none;
     }

     #slika-pozadina {
         display: block;
     }

     header {
         flex-direction: column;
         padding: 10px 20px;
     }

     header nav {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
     }

     header nav a {
         font-size: 0.8em;
         margin: 5px 10px;
     }

     .button {
         margin-top: 2em;
         padding: 10px 28px;
         font-size: 0.8em;
     }

     .cjelina {
         padding: 70px 20px 60px;
     }

     .cjelina h1 {
         font-size: 3em;
     }

     .cjelina p,
     .button {
         font-size: 1em;
     }

     .uvod {
         position: static;
         width: 90%;
         margin: 0 auto 90px auto;
         max-height: 50vh;
     }


     .uvod p {
         padding-top: 10px;
         font-size: 0.8em;
     }

     footer {
         font-size: 0.8em;
         padding: 10px 0;
     }

     .cjelina-ostalo h1 {
         font-size: 1.8em;
     }

     .cjelina-ostalo p {
         margin-top: 1.5em;
         font-size: 0.8em;
     }

     .uvod-metode {
         flex-direction: column;
         padding: 20px;
         gap: 20px;
     }

     .metoda {
         width: 100%;
         padding: 15px;
     }

     .metoda p {
         font-size: 0.8em;
     }


     .metoda h2 {
         font-size: 1.2em;
     }

     .metoda img {
         max-width: 200px;
         height: 200px;
         margin: 0 auto;
     }

     .zakljucak {
         max-width: 300px;
     }

     .button-ostalo {
         margin: 20px 0 40px 0;
     }

     hr {
         max-width: 250px;
     }






































     .video-pozadina {
         display: none;
     }

     body {
         background-image: url('slike/slika-pozadina.png');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
     }

     .metoda {
         width: 100%;
     }

     .uvod {
         flex-direction: column;
         width: 90%;
         right: 5%;
         bottom: 30px;
     }

     .uvod img {
         width: 100%;
         height: auto;
     }
 }