.video_section {
  width: 100%;
  height: 50vh;
  padding: 0;
  margin: 0;
}
video {
  padding: 0;
  margin: 0;
  width: 100%;
  aspect-ratio: 16/9;
  height: 95vh;
  z-index: -1;
  position: relative;
  object-fit: cover;
  top: 0;
  left: 0;
}
#home {
  overflow: hidden !important;
  position: relative;
}

p,
a {
  font-family: "Duru Sans", sans-serif;
}
h2,
h3,
h4 {
  font-family: "Trirong", serif;
}
.container section {
  --order: 1;
  width: 90%;
  height: 20rem;
  padding: 1rem;
  margin: 0 auto;
}
.container {
  margin: 0 auto;
  padding-top: 2rem;
}
.naslovna {
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  height: max-content;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.196);
}
.naslov {
  font-family: "Work Sans", sans-serif;
  text-align: center;
  background-color: none;
  z-index: 1;
  position: absolute;
  top: 40%;
  left: 50%;
  color: hsl(130, 40%, 80%);
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 300;
  animation: lights 5s 750ms linear infinite;
}
.gumbi {
  width: 100%;
  z-index: 1;
  position: absolute;
  background-color: transparent;
  top: 70%;
}
.gumb {
  background-color: transparent;
  border: none;
  width: 80%;
  max-width: 15rem;
  height: auto;
  padding: 1rem;
  color: white;
  font-size: larger;
}
#gumb1,
#gumb2 {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #0d7d5f; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
  background: var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  cursor: pointer;
  filter: grayscale(50%);
  transition: 0.3s;
}
#gumb1:hover,
#gumb1:focus,
#gumb2:hover,
#gumb2:focus {
  --_p: 75%;
  filter: grayscale(0%);
}
@keyframes lights {
  0% {
    color: hsl(130, 40%, 80%);
    text-shadow: 0 0 1em hsla(164, 81%, 27%, 0.2),
      0 0 0.125em hsla(163, 100%, 89%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }

  30% {
    color: hsl(139, 80%, 90%);
    text-shadow: 0 0 1em hsla(164, 81%, 27%, 0.5),
      0 0 0.125em hsla(163, 100%, 89%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }

  50% {
    color: hsl(134, 100%, 95%);
    text-shadow: 0 0 1em hsla(164, 81%, 27%, 0.5),
      0 0 0.125em hsla(163, 100%, 89%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }

  70% {
    color: hsl(140, 80%, 90%);
    text-shadow: 0 0 1em hsla(164, 81%, 27%, 0.5),
      0 0 0.125em hsla(163, 100%, 89%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }

  100% {
    color: hsl(141, 39%, 80%);
    text-shadow: 0 0 1em hsla(139, 100%, 27%, 0.2),
      0 0 0.125em hsla(134, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
}
.naslovic {
  font-size: 2rem;
}
.naslov2 {
  width: 50%;
  text-align: center;
  line-height: 2rem;
  border-radius: 5rem;
}
.onama-naslov {
  margin-top: 3rem;
  padding: 1rem;
}
.onama-tekst {
  font-size: 1.5rem;
  margin: 0 auto;
  width: 70%;
}
.onama-gumb {
  margin: 0 auto;
  padding: 1rem;
  margin-top: 12px;
}
#onama_btn {
  font-size: 1rem;
  padding: 1.5rem 2.5rem;
  color: white;
  background-color: #0d7b5d;
  border: none;
  border-radius: 1rem;
  text-decoration: none;
  text-transform: uppercase;
}
#onama_btn:hover,
#onama_btn:focus {
  font-size: 1.5rem;
  background-color: white;
  color: #0d7b5d;
  padding: 1.8rem 2.8rem;
  transition: ease-in;
  transition-duration: 0.5s;
}
#about {
  display: flex;
  color: white;
  justify-content: space-between;
  background-color: #13af66;
  border-radius: 15px;
}
.onama {
  width: 50%;
}
.radione {
  margin: 0 4rem;
}
.radione img {
  cursor: pointer;
  width: 27rem;
}
.radione img {
  --b: 8px; /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #c6ffef;

  padding: calc(var(--b) + var(--g));
  background-image: conic-gradient(
      from 90deg at top var(--b) left var(--b),
      #0000 25%,
      var(--c) 0
    ),
    conic-gradient(
      from -90deg at bottom var(--b) right var(--b),
      #0000 25%,
      var(--c) 0
    );
  background-position: var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: background-position 0.3s var(--_i, 0.3s),
    background-size 0.3s calc(0.3s - var(--_i, 0.3s));
}
.radione img:hover,
.onama:active {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}
.container #products {
  margin-bottom: 2.5rem;
  --order: 2;
  border-radius: 15px;
  height: fit-content;
  background-color: #c6ffef;
}
.pu_naslov {
  text-align: center;
  width: 100%;
  flex: 1;
}
.proizvodi_usluge {
  flex: 2;
  width: 100%;
  margin: 0 auto;
  margin-top: 2vh;
  display: flex;
  justify-content: center;
}
.proizvodi {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  width: 50%;
  height: fit-content;
}
.usluge {
  width: 50%;
  height: fit-content;
}
.wrapper {
  padding: 3rem;
  --velicina: 14rem;
  --visina: 17rem;
  height: var(--velicina);
  width: var(--visina);
  position: relative;
  margin: auto;
  margin-top: 3rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.contain {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 90vh;
  perspective-origin: 50%;
}
.proizvodi_usluge_slike {
  width: var(--velicina);
  height: var(--visina);
  position: relative;
  transform-style: preserve-3d;
  animation: spin 18s linear infinite;
}
.proizvodi_usluge_slike div {
  width: var(--velicina);
  height: var(--visina);
  position: absolute;
  backface-visibility: hidden;
}
@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}
#rotacija {
  width: var(--velicina);
  height: var(--visina);
}
.front {
  transform: translateZ(calc(var(--velicina) / 2));
}
.right {
  transform: rotateY(-270deg) translateX(calc(var(--velicina) / 2));
  transform-origin: 100% 0;
}
.back {
  transform: translateZ(calc(var(--velicina) / 2 * -1)) rotateY(180deg);
}
.left {
  transform: rotateY(270deg) translateX(calc(var(--velicina) / 2 * -1));
  transform-origin: 0 50%;
}
.prous_tekst {
  border-radius: 25px;
  font-size: 1.5rem;
  height: max-content;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  margin-top: 8rem;
}
.prous_gumb {
  height: 3.5rem;
  text-align: center;
  margin-top: 5rem;
}
.prous_gumb #products_btn {
  text-decoration: none;
  font-size: 1rem;
  padding: 1.5rem 2.5rem;
  color: white;
  text-transform: uppercase;
  border-radius: 1rem;
  background-color: #0d7b5d;
}
#products_btn:hover,
#products_btn:focus {
  font-size: 1.2rem;
  background-color: white;
  color: #0d7b5d;
  border-color: #0d7b5d;
  border-width: 4px;
  padding: 1.8rem 2.8rem;
  transition: ease-in;
  transition-duration: 0.5s;
}
.container:nth-child(2) {
  padding-top: 0;
  margin-top: 0;
}
@keyframes rotation {
  from {
    transform: rotateY(359deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
.container #contact {
  --order: 3;
  width: 90%;
  border-radius: 15px;
  background-color: #13af66;
  color: white;
}
.kontakt_naslov {
  text-align: center;
}

@media screen and (max-width: 1100px) {
  #about {
    flex-direction: column;
    height: max-content;
  }
  .onama {
    flex: 1;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .naslov2 {
    flex: 1;
    width: 100%;
    justify-content: center;
    align-content: center;
  }
  .radione {
    margin: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .proizvodi_usluge {
    flex: 2;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
  .prous_tekst {
    width: 90%;
    font-size: 1.2rem;
    margin-top: 4rem;
  }

  .radione img {
    width: 80%;
    max-width: 27rem;
  }
  .proizvodi {
    display: flex;
    flex-direction: column;

    flex-wrap: wrap;
    flex-grow: 1;
    width: 100%;
    height: fit-content;
  }
  .usluge {
    display: flex;
    flex-direction: column;

    flex-wrap: wrap;
    flex-grow: 1;
    width: 100%;
    height: fit-content;
  }
  .wrapper {
    padding: 3rem;
    --velicina: 7rem;
    --visina: 8rem;
    height: var(--velicina);
    width: var(--visina);
    position: relative;
    margin: auto;
    margin-top: 3rem;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  video {
    aspect-ratio: 4/3;
  }
  .naslov {
    font-size: 2.5rem;
  }
  .gumb {
    width: 80%;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 768px) {
  .naslov {
    font-size: 2rem;
  }
}
@media screen and (max-width: 350px) {
  .naslov {
    font-size: 1.5rem;
  }

  .gumb {
    width: 90%;
    font-size: 0.9rem;
  }

  .wrapper {
    --velicina: 6rem;
    --visina: 7rem;
  }

  .naslovic {
    font-size: 1.5rem;
  }

  p {
    font-size: 1.2rem;
  }
}