body {
  font-family: "DM Sans";
  color: #ffffff !important;
  scroll-behavior: smooth;
  text-wrap: balance;
}

.nav-bg {
  backdrop-filter: blur(5px);
  background-color: rgb(50, 50, 50);
}

.orange-bg {
  background-color: rgba(251, 102, 59, 0.7) !important;
}

.orange {
  color: #fb663b !important;
}

.fixed {
  position: fixed;
  top: 18.5vh;
}

.fixed-bg {
  position: fixed;
  top: -65vh;
}

.marginTop {
  margin-top: 100vh;
}

.stred {
  display: flex;
  align-items: center;
}

.row {
  --bs-gutter-x: 0 !important;
}

a {
  text-decoration: none !important;
  color: #ffffff !important;
}

a:hover {
  color: #fb663b !important;
  transition: 0.5s all;
}

.active {
  color: #fb663b !important;
}

span {
  font-size: 1em;
}

h3 {
  font-size: clamp(1.25rem, 1.8vw, 3.25em);
}

h5 {
  font-size: clamp(1.25rem, 1.5vw, 2.75em);
}

h1{
  font-size: clamp(1.25rem, 2vw, 5em);
}

p, li {
  font-size: clamp(.9rem, 1vw, 2.25em);
}

.navbar {
  height: 15vh;
  height: 15svh;
  padding-top: 2vh;
}

.navbar-brand img {
  height: clamp(1rem, 3vw, 6em);
}

.navbar-brand {
  margin-left: 6%;
}

.container {
  max-width: 90% !important;
}

#responsivemenu a {
  text-decoration: none;
  font-size: clamp(1em, 1.1vw, 2em);
  font-weight: 300;
}

#picture {
  background-image: url(img/mainFrame-min.webp);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: fit-content;
  min-height: 100svh;
  width: 100%;
  border-image: linear-gradient(rgb(0, 0, 0, 0.65), rgb(0, 0, 0, 0.65)) fill 1;
  z-index: 100;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  gap: 2vw;
  margin-top: 7vh;
  margin-bottom: 2vh;
}

.button:hover {
  background-color: transparent !important;
  transition: 0.5s all;
}

.buttons a {
  border: 1px solid white;
  background-color: transparent;
  border-radius: 40px;
  width: clamp(15vw, 30rem, 23vw);
  text-transform: uppercase;
  font-size: clamp(0.65em, 1vw, 3em);
}

.button {
  border: 1px solid #fb663b !important;
  background-color: #fb663b !important;
  border-radius: 40px;
  text-transform: uppercase;
}

#boxes {
  width: 88vw;
  z-index: 105;
}

.box {
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 25px;
  max-width: 32%;
  min-height: 11.5vh;
  z-index: 105;
}

.box h3 a{
  font-size: clamp(0.85em, 1.2vw, 2em);
  margin-left: 0;
  margin-bottom: 0;
  cursor: pointer;
  line-height: 1.5;
}

.box p{
  font-weight: 500 !important;
  margin-left: 3%;
}

.check-box {
  background-color: #fb663b;
  max-height: clamp(1.2em, 4em, 2.75vw);
  max-width: clamp(1.2em, 4em, 2.75vw);
  min-height: clamp(1.2em, 4em, 2.75vw);
  min-width: clamp(1.2em, 4em, 2.75vw);
  border-radius: 50%;
}

.fa-check {
  height: clamp(0.8em, 1.75vw, 2.5em);
}

#content {
  color: black;
  scroll-margin: 32vh;
}

#content .button {
  font-size: clamp(.85em, .8vw, 2em);
}

#content h3, h5 {
  padding: 0.5em 0;
}

#content h1 {
  padding: 1.5em;
}

#img1, #img4{
  object-position: center top;
}

#img3, #img6{
  object-position: center bottom;
}

footer {
  background: radial-gradient(ellipse at -100% 100%, black, #c0c0c0);
  max-width: 100%;
}

footer .contacts span {
  background-color: #fb663b;
  border-radius: 50%;
  padding: 6px;
  margin-right: 5px;
  font-weight: 100 !important;
}

footer #adresa span {
  font-size: clamp(0.85rem, 1.2vw, 3em);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.icon {
  width: 25px;
}

footer .contacts {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

footer h4 {
  font-size: clamp(0.85rem, 1.2vw, 3em);
}

footer div {
  font-size: clamp(0.72rem, 1vw, 2em);
}

footer iframe {
  max-height: 20svh;
  width: 100%;
  border-radius: 16px;
}

footer .hodiny div {
  line-height: 1.6;
}

footer a {
  font-size: clamp(0.72rem, 1vw, 2em);
}

@media (min-width: 3000px) {
  .navbar-brand {
    width: 30vw !important;
  }

  .buttons a {
    width: clamp(10vw, 60rem, 40vw);
    padding: 3rem !important;
  }

  .icon {
    width: 35px;
  }

  iframe {
    width: 50vw;
  }
}

@media (min-width: 2000px) {
  .buttons a {
    width: clamp(10vw, 40rem, 40vw);
    padding: 2rem !important;
  }

  .icon {
    width: 35px;
  }
}

@media (max-width: 767px) {
  .nav-item a {
    margin-left: 7%;
    color: rgb(255, 255, 255) !important;
    font-weight: 600 !important;
  }

  #responsivemenu {
    background-color: rgb(50, 50, 50);
    backdrop-filter: blur(5px);
    padding: 2vh 0;
  }

  #responsivemenu a {
    font-size: 1em;
  }
}

@media (max-width: 576px) {
  #boxes {
    flex-direction: column !important;
    gap: 1.5vw;
  }

  .box {
    height: 10vh !important;
    max-width: 95% !important;
    display: flex;
    align-items: center;
    margin-top: 2vw;
  }

  .disappear {
    display: none;
  }

  .buttons a {
    width: 50vw;
    padding: 1.2rem !important;
  }

  .box {
    min-height: 0;
  }
}

@media (max-height: 700px) {
  .disappear {
    display: none;
  }

  .box {
    height: 10vh !important;
    display: flex;
    align-items: center;
  }
}