@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");



:root {

  --roads: #303036;

  --gardens: #058e3f;

  --background: #d9d9d9;

  --secondary: #324fe2;

  --text-dark: #000000;

  --text-light: #e6e2e2;

  --yellow: rgb(255, 217, 0);

}



* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  outline: none;

  border: none;

}



body {

  font-family: "Bebas Neue", sans-serif !important;

  color: var(--text-dark);

  background: var(--roads);

  background: linear-gradient(

    0deg,

    rgba(48, 48, 54, 0.2) 0%,

    rgba(255, 255, 255, 1) 100%

  );

  position: relative;

  margin: 0;

}



body::before {

  content: "";

  position: fixed;

  top: 0;

  left: 0;

  width: 300px;

  height: 100vh;

  pointer-events: none;

  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

  z-index: 9999999;

}



body::after {

  content: "";

  position: fixed;

  top: 0;

  right: 0;

  width: 300px;

  height: 100vh;

  pointer-events: none;

  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

  z-index: 9999999;

}



a,

a:visited,

a:hover,

a:active {

  color: inherit;

}



@media (max-width: 992px) {

  body::before,

  body::after {

    width: 150px;

  }



  body::before {

    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));

  }



  body::after {

    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));

  }

}



/* BACKGROUND */

.bg-container {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: -1;



  background-image: url("src/cesty/background.jpg");

  background-repeat: repeat;

  background-size: 500px;

  background-position: top left;

}



/* NAVBAR */

.container-fluid {

  padding: 0;

  margin: 0;

  display: flex;

  background-color: var(--yellow);

}



.navbar {

  padding: 0 !important;

  /* height: 100%; */

  width: 100%;

  font-size: 2vw;

  position: fixed;

  z-index: 99999999;

  display: block;



  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.47);

  -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.47);

  -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.47);

}



.navbar-nav {

  margin-left: 4vw;

  color: var(--text-light) !important;

}



.container-fluid img {

  height: 5vw;

  margin-left: 1vw;

}



.navbar-min {

  transition: all 0.3s ease;

}



.navbar-min .navbar-brand {

  /* display: none; */

  font-size: 2vw;

}



/* .navbar-brand:hover {

  color: white;

} */



.navbar-min img {

  display: none;

  height: 3vw;

}



.navbar-min .navbar-nav {

  margin: auto;

}



.navbar-min .dropdown-menu {

  background-color: #f8f9fa;

  border: 1px solid color-mix(in srgb, #000000, transparent 80%);

  padding: 0;

  margin: 0;

  border-top: none;

  border-radius: 0 0 5px 5px;

}



.navbar-toggler {

  margin-right: 20px;

}



.navbar-brand {

  font-size: 4vw;

  margin-left: 20px;

}



.nav-item {

  align-items: center;

  padding: 5px;

}



.navbar-links {

  display: flex;

  flex-direction: column;

  justify-content: center;

  margin-right: 5rem;

}



.navbar-links a {

  font-size: 1.2vw;

}



.nav-item a {

  padding-left: 10px;

}



.nav-link {

  height: 4vw;

  font-size: 2vw;

  display: flex;

  justify-content: center;

  align-items: center;

  color: var(--text-dark) !important;

}



.dropdown-menu {

  background-color: color-mix(in srgb, #f8f9fa, transparent 20%);

  border: none;

  padding-top: 2rem;

}



.dropdown-item {

  font-size: 2vw;

}



.dropdown-item:hover {

  background-color: color-mix(in srgb, #f8f9fa, transparent 30%);

}



/* RESPONSIVITA NA MOBILY */

@media screen and (max-width: 992px) {

  .navbar {

    height: 100%;

    font-size: 4vw;

  }

  .navbar-brand {

    font-size: 6vw !important;

  }

  .navbar-toggler {

    margin-top: 5px;

    margin-bottom: 5px;

    margin: 1vw;

    margin-left: auto;

    color: var(--text-light);

  }

  .nav-link {

    height: 100%;

    font-size: 4vw;

    background-color: color-mix(in srgb, var(--yellow), black 2%);

  }

  .nav-item {

    padding: 0;

    margin: 0;

  }

  .navbar-nav {

    gap: 0px;

    padding: 0;

    margin: 0;

  }

  .navbar-links {

    background-color: var(--roads);

    color: var(--text-light);

    width: 100%;

    padding: 2rem;

    gap: 1rem;

  }

  .navbar-links a {

    font-size: 3.5vw;

  }

  .dropdown-item {

    font-size: 4vw;

    text-align: center;

  }

  .container-fluid {

    display: block;

  }

  .container-fluid img {

    height: 8vw;

    margin-right: 2vw;

  }

  .navbar {

    height: auto;

  }

  .carousel-text {

    padding: 8vw 8vw !important;

  }



  .carousel-text h5 {

    font-size: 12vw !important;

  }

  .carousel-text cite {

    font-size: 4vw !important;

    text-align: center;

  }

}



/* CAROUSEL */

.carousel {

  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.6);

  -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.6);

  -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.6);



  position: relative;

  padding-top: 4vw;

}



.carousel-text {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: rgba(0, 0, 0, 0.5);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 1vw;

  color: var(--text-light);

  z-index: 9999999;

  border-radius: 10px;

  padding: 2vw 4vw;

}



.carousel-text cite {

  font-size: 2vw;

}



.carousel-text h5 {

  font-size: 6vw;

}



.carousel-inner {

  height: 80vh;

  overflow: hidden;

}



.carousel-item {

  height: 100%;

}



.carousel-img {

  height: 100%;

  object-fit: cover;

}



/* SLUZBY */

.card-section {

  width: 100%;

  display: flex;

  justify-content: center;

}



.card-wrapper {

  width: 80%;

  display: flex;

  flex-direction: column;

  /* grid-template-columns: 1fr 1fr; */

  align-items: center;

  margin: 4rem 0rem;

  gap: 3rem;

  margin-left: auto;

  margin-right: auto;

}

.card-container {

  width: 70%;

  display: flex;

  flex-direction: column;

  background-color: var(--yellow);

  overflow: hidden;

  transition: all 0.5s ease;

  box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.75);

  -webkit-box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.75);

  -moz-box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.75);

}

.card-main {

  display: flex;

  justify-content: start;

}

.card-more {

  width: 100%;

  display: flex;

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  visibility: hidden;

  flex-direction: column;

  gap: 1rem;

  background-color: var(--background);



  transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease,

    padding 0.4s ease;

}



.card-more.open {

  max-height: 2000px;

  opacity: 1;

  visibility: visible;

  padding: 4rem;

}



.card-more-title {

  font-size: 1.3vw;

  text-decoration: underline;

}

.card-more-text {

  font-size: 1vw;

}

.card-more-video {

  display: flex;

  justify-content: center;

}

.card-more-video iframe {

  width: 100%;

  height: 600px;

}

.card-more-images {

  display: flex;

  justify-content: space-between;

  width: 100%;

}

.card-more-images img {

  width: 33%;

  object-fit: cover;

}

.card-more-images img.left {

  object-position: left;

}

.card-more-images img.right {

  object-position: right;

}

.card-direction-left {

  flex-direction: row;

  align-self: flex-start;

}

.card-direction-right {

  justify-content: end;

  flex-direction: row-reverse;

  align-self: flex-end;

}

/* .card-direction-right > .card-info {

    align-items: end;

}

.card-direction-right > .card-info > .card-desc {

    text-align: end;

} */

.card-img {

  min-width: 30%;

  max-width: 30%;

  object-fit: cover;

  display: block;

}

.card-info {

  display: flex;

  flex-direction: column;

  align-items: start;

  margin: 3rem;

}

.card-title {

  font-size: 2vw;

  margin-bottom: 2rem;

}

.card-desc {

  font-size: 1vw;

  transition: max-height 0.4s ease-in-out, opacity 0.3s ease;

}

.card-button {

  margin-top: 1rem;

  padding: 0.5rem 1.5rem;

  background-color: var(--roads);

  color: white;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  font-size: 1.5vw;

  transition: background-color 0.3s ease, transform 0.2s ease;

  align-self: center;

}

.card-button:hover {

  background-color: color-mix(in srgb, var(--roads), black 20%);

  transform: translateY(-2px);

}

.card-button:active {

  transform: translateY(0);

}

@media screen and (max-width: 992px) {

  .card-title {

    font-size: 6vw;

    text-align: center;

  }

  .card-desc {

    text-align: center !important;

    font-size: 4vw;

    overflow: hidden;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    line-clamp: 3;

    max-height: 3.6em;

    line-height: 1.2em;

  }

  .card-info {

    align-items: center !important;

    position: relative;

  }

  .card-container {

    border-radius: 0;

    width: 100%;

  }

  .card-img {

    display: none;

  }

  .card-button {

    font-size: 4vw;

  }

  .card-more-title {

    font-size: 6vw;

  }

  .card-more-text {

    font-size: 4vw;

  }

  .card-more.open {

    padding: 2rem;

  }

  .card-more li {

    margin: 1rem 0;

  }

  .card-more-images {

    flex-direction: column;

    align-items: center;

    gap: 1rem;

  }

  .card-more-images img {

    width: 100%;

    height: 40vw;

    object-fit: cover;

  }

  .card-more-video iframe {

    width: 100%;

    height: auto;

  }

}



/* KONTAKT */

.contact-section {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.contact-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 5rem;

  width: 80%;

}



.contact-contacts {

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 5rem;

}



.contact-cooperation {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 100%;

  font-size: 2vw;

  color: var(--text-light);

}



.contact-cooperation p {

  text-align: center;

}



.contact-container {

  display: flex;

  background-color: var(--yellow);

  overflow: hidden;

  border-radius: 20px;

  transition: all 0.3s ease;

  box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.75);

  -webkit-box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.75);

  -moz-box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.75);

}



.contact-container:hover {

  transform: scale(1.02);

}



.contact-img {

  object-fit: cover;

  width: 30%;

}



.contact-info {

  display: flex;

  flex-direction: column;

  margin: 2rem;

}



.contact-title {

  font-size: 3vw;

}



.contact-subtitle {

  font-size: 2.5vw;

  color: color-mix(in srgb, var(--roads), transparent 50%);

  line-height: 0.8rem;

  margin-bottom: 4rem;

}



.contact-text {

  display: flex;

  gap: 1rem;

  font-size: 1.5vw;

  line-height: 1.6rem;

}



.contact-form-wrapper {

  width: 100%;

  height: 100%;

  grid-column: 1 / -1;



  display: flex;

  align-items: center;

  flex-direction: column;

}



.contact-form-wrapper button {

  background-color: var(--yellow);

  color: var(--text-dark);

  padding: 2rem 4rem;

  font-size: 2vw;

  border-radius: 5px;

}



.contact-row {

  font-size: 1.5vw;

  display: flex;

  align-items: center;

  gap: 1rem;

}



.contact-row > a {

  font-size: 0.8vw;

}



.form-content {

  max-height: 0;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  width: 100%;

  gap: 2rem;



  transition: max-height 0.5s ease;

  font-size: 2vw;

  margin: 4rem 0;

}



.form-content.active {

  max-height: 2000px;

}



.form-content input,

.form-content textarea {

  border-radius: 5px;

  padding: 0 1rem;

  position: relative;

}



.form-content div {

  display: flex;

  justify-content: space-between;

  margin-top: 3vw;

}



.input-box {

  width: 100%;

}



.form-content div .input-box input {

  width: 100%;

}



.form-content div .input-box {

  width: 48%;

}



.form-content div {

  display: flex;

  justify-content: space-between;

}



.form-content .input-box input {

  width: 100%;

}



.form-content #subject {

  width: 100%;

}



.form-content #message {

  width: 100%;

  resize: none;

}



.form-content label {

  position: absolute;

  color: var(--yellow);

  top: -3vw;

  left: 0;

}



.input-box {

  position: relative;

}



#form-warning {

  color: red;

  font-size: 2vw;

}



.contact-missing-img {

  width: 30%;

  height: 100%;

  background-color: black;

  display: flex;

  align-items: center;

  justify-content: center;

}



.contact-missing-img > span {

  font-size: 4vw;

  color: var(--text-light) !important;

}



.contact-no-image {

  background-color: var(--yellow) !important;

}



/* #form-warning::before {

  content: "*";

} */



@media screen and (max-width: 992px) {

  .contact-wrapper {

    gap: 5rem;

    display: flex;

    flex-direction: column;

    width: 80%;

    margin-top: 2rem;

  }

  .contact-container {

    flex-direction: column;

  }

  .contact-img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    object-position: center;

  }

  .contact-cooperation {

    font-size: 6vw;

  }

  .contact-title {

    font-size: 9vw;

  }

  .contact-subtitle {

    font-size: 8vw;

  }

  .contact-text {

    font-size: 6vw;

  }

  #form-expand {

    font-size: 6vw;

  }

  .form-content div {

    display: flex;

    flex-direction: column;

    gap: 2rem;

  }

  .form-content div .input-box {

    width: 100%;

  }

  .form-content label {

    top: -5vw;

    font-size: 4vw;

  }

  .form-content input,

  .form-content textarea {

    border-radius: 5px;

    padding: 0 1rem;

    position: relative;

    font-size: 8vw;

  }

  .form-content button {

    font-size: 5vw;

  }

  .form-content .input-box textarea {

    font-size: 5vw;

  }

  #form-warning {

    font-size: 4vw;

  }

  .contact-row > a {

    font-size: 3vw;

  }

  .contact-missing-img {

    width: 100%;

    height: 300px;

    background-color: black;

    display: flex;

    align-items: center;

    justify-content: center;

  }



  .contact-missing-img > span {

    font-size: 16vw;

    color: var(--text-light) !important;

  }

}



/* GALERY */

.galery-section {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.galery-wrapper {

  width: 80%;

  display: flex;

  justify-content: center;

  background-color: var(--yellow);

}



.galery-selection {

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: 40%;

}



.galery-selection button {

  width: 100%;

  height: 20%;

  background-color: var(--yellow);

  font-size: 2vw;

  color: var(--text-dark);

}



.galery-selection button:hover {

  background-color: var(--roads) !important;

  color: var(--yellow) !important;

}



.selected {

  background-color: var(--roads) !important;

  color: var(--yellow) !important;

}



.galery-carousel {

  width: 100%;

}



.galery-hidden {

  display: none;

}



.carousel-container {

  position: relative;

  width: 100%;

  aspect-ratio: 16/9;

  overflow: hidden;

}



.carousel-track img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transition: opacity 0.6s ease;

}



.carousel-track img.active {

  opacity: 1;

  z-index: 9999;

}



.carousel-btn {

  position: absolute;

  height: 100%;

  top: 50%;

  transform: translateY(-50%);

  /* background: rgba(0, 0, 0, 0.5); */

  font-size: 4vw;

  color: var(--yellow);

  background-color: transparent;

  border: none;

  padding: 10px 20px;

  cursor: pointer;

  z-index: 10;

  z-index: 99999;

}



.carousel-btn.prev {

  left: 10px;

}



.carousel-btn.next {

  right: 10px;

}



/* RESPONSIVITA NA MOBILY */

@media screen and (max-width: 992px) {

  .galery-wrapper {

    width: 90%;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: var(--yellow);

  }

  .galery-selection {

    width: 100%;

  }

  .galery-selection button {

    font-size: 8vw;

  }



  .carousel-btn {

    /* background: rgba(0, 0, 0, 0.5); */

    font-size: 8vw !important;

  }

  .carousel-container {

    height: 100%;

  }

  .galery-carousel {

    height: 500px;

  }

}



/* FOOTER */

footer {

  display: flex;

  justify-content: space-around;

  align-items: center;

  padding: 2rem 0;

  height: 2vw;

  width: 100%;

  background-color: var(--roads);

  color: var(--text-light);

}



.footer-social {

  display: flex;

  gap: 20px;

}



/* GENERAL */

.section-title {

  width: 100%;

  text-align: center;

  font-size: 5vw;

  margin: 8rem 0;

  color: var(--text-light);

}



.popup-wrapper {

  width: 100vw;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 999999999;

  position: fixed;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

}



.popup-wrapper img {

  max-height: 98vh;

}



#loader {

  width: 100vw;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: var(--roads);

  transition: height 0.2s ease;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999999;

}



.img-top {

  object-position: top;

}



.img-center {

  object-position: center;

}



.img-bottom {

  object-position: bottom;

}



.ico {

  display: flex;

  gap: 4rem;

  font-size: 1.8rem;

}



@media screen and (max-width: 992px) {

  .section-title {

    font-size: 12vw;

    margin: 2rem 0;

  }

  .ico {

    font-size: 0.8rem;

    gap: 1rem;

  }

}