/*  25.11.2024  */ 
/*  CSS Validne  */ 

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome';
@import 'https://fonts.googleapis.com/css?family=Raleway:100,600';
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300';
@import 'http://fonts.cdnfonts.com/css/hiskyflipper';

/*  Stranka ponuka plynuly presun z horneho menu  */ 
html {
	scroll-behavior: smooth;
}

/*  PISMO  */ 
h1 {
	text-align: center;
}

h2 {
	text-align: center;
	color: black;
}

h3 {
	text-align: center;
	color: black;
}

h4 {
	text-align: center;
	color: black;
}

.footer-bottom h4 {
	color: white;
}

p {
	text-align: center;
	color: black;
}

blockquote { 
  display: block;
 	margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

mark { 
  background-color: orange;
  color: black;
}

aside {
  float: right;
  font-style: italic;
  background-color: lightgray;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 768px) {
  aside {
  float: none; 
  width: 90%; 
  margin: 20px auto; 
  }
}

@media (max-width: 480px) {
  aside {
  width: 100%; 
  font-size: 0.9em; 
  padding: 15px; 
  }
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white; 
  padding: 20px; 
}

/*  header - preklik na index  */
header .logo {
  width: 170px; 
  margin-bottom: 1px; 
}

header .logo1 {
  width: 170px; 
  margin-bottom: 1px; 
  filter: invert(1);
}

header p {
  color: white;
}

header h2 {
 	color: white;
}

.header-secondstyle {
  position: relative;
  overflow: hidden;
}

/*  video na pozadí  */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  z-index: -1; 
}

.header-content {
  position: relative;
  z-index: 1; 
  color: white; 
}

/*  Aby nebol viditelny spodny "scrollbar" + farba pozadia  */ 
body {
  overflow-x: hidden; 
  background: #ebeef1;
}

/*  NAVIGACIA  */ 
.navigacia {
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
  overflow: hidden;
  border-style: outset;
  border: 4px solid black;
  border-radius: 14px;
  box-shadow: 0px 0px 10px white;
  text-align: center;
  padding: 10px;
  width: 100%; 
  margin: 0 auto; 
}

.navigacia a {
  text-align: center;
  padding: 10px 20px; 
  font-size: 14px;
  color: black;
  background: orange;
  font-family: 'HISKYFLIPPERHIBOLD', sans-serif;
  font-weight: normal;
  flex: 1; 
  min-width: 100px; 
  box-sizing: border-box; 
}

/* navigacia - responzivita pre mobily */
@media (max-width: 600px) {
    .navigacia {
        flex-direction: column; 
    }

    .navigacia a {
        width: 100%; 
        padding: 2px; 
    }
}

/*  navigacia aby ostala na popredi, pred vsetkym ostatnym */
.sticky {
  position: -webkit-sticky; 
  position: sticky;
  top: 0.1%;
  background-color: orange; 
  z-index: 1; 
}

/*  VIDEO NA POZADI */
.videopozadie {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(rgba(16,6,0,0.5),rgba(16,6,0,0.5));  /* rgba(12,3,51,0.3 rgba(16,6,0,0.5) rgba(255,162,14,0.55 */ 
	position: relative;
	padding: 0 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.content1 {
	text-align: center;
}

.content1 h2 {
	font-size: 10vw;
	color: #fff;
	font-weight: normal;
	transition: 0.8s;
	font-family: 'HISKYFLIPPERHIBOLD', sans-serif;
	font-weight: normal;
}

.content1 h2:hover {
	-webkit-text-stroke: 2px #fff;
	color: transparent;
}

.content1 a {
	text-decoration: none;
	display: inline-block;
	color: #fff;
	font-size: 2vw;
	border: 2px solid #fff;
	padding: 1.5vw 7vw;
	border-radius: 50px;
	margin-top: 20px;
	box-shadow: 0px 0px 10px white;
}

.video {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 100%; 
	height: auto; 
	min-height: 100%; 
	object-fit: cover; 
}

/*  DOKUMENTY  */
.dokumenty {
	text-align: center;
	margin-top: 50px;
}

.dokumenty a {
	color: inherit;
	opacity: 0.8;
	text-decoration: none; 
}

.btn {
	border: 1.6px solid black;
	background: none;
	padding: 12px 20px;
	font-size: 24px;
	cursor: pointer;
	margin: 10px;
	transition: 0.9s;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 8px black; 
}

.btn1, .btn2 {
	color: black;
}

.btn3, .btn4 {
	color: black;
}

.btn1:hover, .btn2:hover {
	color: white;
}

.btn3:hover, .btn4:hover {
	color: black;
}

.btn::before {
  content: "";
 	position: absolute;
  left: 0;
  width: 100%;
  height: 0%;
  background: black;
  z-index: -1;
  transition: 0.8s;
}

.btn1::before,.btn3::before {
  top: 0;
  border-radius: 0 0 10% 10%;
}

.btn2::before,.btn4::before {
  bottom: 0;
  border-radius: 10% 10% 0 0;
}

.btn3::before,.btn4::before {
 	height: 200%;
}

.btn1:hover::before,.btn2:hover::before {
  height: 200%;
}

.btn3:hover::before,.btn4:hover::before{
  height: 0%;
}

/*  PATICKA  */
footer {
	background: #111;
	height: auto;
	width: 100vw;
	font-family: "Open Sans";
	padding-top: 30px;
	color: #fff;
}

.footer-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.footer-content h3 {
	font-size: 3rem;
	font-weight: 400;
	text-transform: capitalize;
	line-height: 7rem;
	color: white;
	font-family: 'HISKYFLIPPERHIBOLD', sans-serif;
	font-weight: normal; 
}

.footer-content p {
	max-width: 500px;
	margin: 10px auto;
	line-height: 28px;
	font-size: 14px;
	color: white;
}

.footer-bottom {
	background: #000;
	width: 100vw;
	padding: 7px 0;
	text-align: center;
}

.footer-bottom p {
	font-size: 14px;
	word-spacing: 2px;
	text-transform: capitalize;
	color: white;
}

.footer-content ul {
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.6;
	margin-top: 0;
}

.footer-content ul li a {
	color: inherit;
	opacity: 0.8;
	text-align: center;
}

.footer-content ul li {
	display: inline-block;
	padding: 0 25px;
}

/*  VLASTNY SCROLLBAR  */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: black;
}

::-webkit-scrollbar-thumb {
	background: orange;
	border-radius: 90px;
}

::-webkit-scrollbar-thumb:hover {
	background: orange;
}

/*  VYBER LOKALITY  */
.gallery {
	margin: 10px auto;
	text-align: center;
	margin: 10px auto; 
  text-align: center;
  max-width: 1200px; 
  padding: 0 5%; 
}

.gallery h3 {
  font-size: 1.5rem; 
  margin-bottom: 20px; 
}

.gallery img {
	width: 100%; 
  max-width: 270px; 
  padding: 5px;
  transition: transform 0.5s; 
  border: 5px solid black;
  box-shadow: 0px 0px 20px black;  
}

.gallery img:hover {
	transform: scale(1.04)
}

@media (max-width: 768px) {
    .gallery h3 {
        font-size: 1.2rem; 
    }
}

@media (max-width: 480px) {
    .gallery h3 {
        font-size: 1rem; 
    }
}

/* TABULKA V SEKCII REBRICEK */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 18px;
  text-align: left;
}

th, td {
  padding: 12px;
  border: 1px solid #ddd;
}

th {
  background-color: orange;
  color: black;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

.flag {
  width: 24px;
  height: 16px;
  margin-right: 10px;
  vertical-align: middle;
}

.logo {
  width: 40px;
  height: auto;
  margin-right: 10px;
  vertical-align: middle;
}

.container4 {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: flex-start; 
  padding: 20px; 
  gap: 20px; 
}

/*  TOP FIRMY - INFORMACIE O FIRMACH */
.card {
  position: relative;
  width: 100%; 
  max-width: 350px; 
  height: 380px;
  border-radius: 20px;
  transition: 0.5s;
  margin: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.card:hover {
  transform: scale(1.05); 
}

.card .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.card .circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr);
  clip-path: circle(150px at center);
  transition: 1.1s;
}

.card:hover .circle:before {
  clip-path: circle(500px at center);
}

.card .circle .boss {
  position: relative;
  width: 200px;
  transition: 0.3s;
}

.card:hover .circle .boss {
  transform: scale(0);
}

.content {
  position: relative;
  width: 100%; 
  padding: 20px;
  opacity: 0;
  transition: 0.5s;
  visibility: hidden;
}

.card:hover .content {
  opacity: 1;
  visibility: visible;
}

.content h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5em; 
}

.content p {
  color: #fff;
  font-size: 0.9em; 
}

.card .boss_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  height: 200px; 
  transition: 0.4s;
}

.card:hover .boss_img {
  transform: translate(-50%, -50%) scale(1);
}

/*  SIPKA NA KONCI  */
.chodhore {
	width: 50px;
	height: 50px;
	background: white;
	bottom: 45px;
	right: 20px;
	text-decoration: none;
	text-align: center;
	line-height: 50px;
	color: black;
	font-size: 24px;
	position: fixed;
	box-shadow: 0px 0px 8px black;
}

.chodhore:hover {
	background-color: black;
	color: white;
	border: 1px solid white;
}

/* uprava ked chcem dat napr. obrazok na stred/zarovnavanie na stred - centrovanie */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
}

/* na indexe - kde sa co nachadza to okno */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 10px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

/* uprava obsahu, ked sa zobrazi okno */
.modal-content {
  background-color: rgb(0,0,0,0.8) ;
  margin: auto;
  padding: 20px;
  border: 3px solid #888;
  width: 80%;
}

/* uprava X na zatvorenie */
.close {
  color: #ffffff;
  float: right;
  font-size: 48px;
  font-weight: bold;
}

/* animacia X, po prejdeni sa zmeni jeho farba */
.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* stylovanie pisma v okne */
.modal-content p {
  text-align: center;
  color: white;
}

.modal-content h3 {
  text-align: center;
  color: white;
}

/* stylovanie definicneho zoznamu */
dl {
  display: flex;
  flex-direction: column;
  align-items: center;
}

dt {
  font-weight: bold;
  margin: 10px 0;
}

dd {
  margin: 0;
}

/* stylovanie definicneho zoznamu - obrazok (logo firmy) */
dd img {
  max-width: 150px; 
  height: auto;
  margin: 10px 0;
}

/* stylovanie obrazkov, pouzite v definicnom zozname */
ul img {
  max-width: 150px; 
  height: auto;
  margin: 10px 0;
}

/* neusporiadany zoznam - zarovnanie na stred */
ul {
  list-style-type: none; 
  padding: 0; 
  text-align: center; 
}

li {
  margin: 5px 0; 
}

/* usporiadany zoznam - zarovnanie na stred */
ol {
  list-style-type: decimal; 
  padding: 0; 
  text-align: center; 
}

li {
  margin: 5px 0; 
}

/* obrazkova mapa - responzivne */
.map-image {
  display: block; 
  margin: 0 auto; 
  max-width: 100%; 
  height: auto; 
}

/*  KONTAKTNY FORMULAR  */
.contact-section {
  height: auto;
  width: 100%;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
} 

.container2 {
  width: 90%;
  max-width: 870px;
  margin: 0 auto;
  padding: 20px;
  background: #ebeef1;
  border-radius: 20px;
  margin-bottom: 3px;
}

.container2 h3 {
	color: black;
}

.form-group {
  width: 100%;
  margin-top: 20px;
  font-size: 20px;
  background: #ebeef1;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 5px;
  font-size: 18px;
  border: 3px solid rgba(128, 128, 128, 0.199);
  margin-top: 5px;
  background: #ebeef1;
}

textarea {
  resize: none;
}

button[type="submit"] {
  width: 100%;
  border: none;
  outline: none;
  background: #ebeef1;
  padding: 20px;
  font-size: 24px;
  border-radius: 8px;
  color: black;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.5s ease background-color;
  border: 1.6px solid black;
}

button[type="submit"]:hover {
  background-color: black;
  color: white;
}

#status {
  width: 90%;
  max-width: 500px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 8px;
}

#status.success {
  background-color: rgb(211, 250, 153);
  animation: status 4s ease forwards;
}

#status.error {
  background-color: rgb(250, 129, 92);
  color: white;
  animation: status 4s ease forwards;
}

/* sekcia o kontaktoch a pouzitych zdrojoch */
.contact-info, .resources, .universities {
  background-color: #ffffff; 
  border-radius: 8px; 
  padding: 20px; 
  margin: 20px; 
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); 
}

.contact-info h2, .resources h2, .universities h2 {
  margin-top: 20px; 
}

.contact-section h2 {
	color: white;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* sekcia "Kde sa co nachadza" + responzivne CSS */
.obsah-webu {
  display: block;
  margin: 20px auto; 
  padding: 10px 20px; 
  width: 50%; 
  max-width: 200px; 
  font-size: 1.2em; 
  color: white; 
  background: linear-gradient(135deg, #FF9900, #333); 
  border: none; 
  border-radius: 8px; 
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); 
  cursor: pointer; 
  transition: background 0.3s, transform 0.2s; 
}

.obsah-webu:hover {
  background: linear-gradient(135deg, #FFA500, #555); 
  transform: translateY(-2px); 
}

.responsive-button:active {
  transform: translateY(2px); 
}

@media (max-width: 768px) {
    .obsah-webu {
        width: 70%;
    }
}

@media (max-width: 480px) {
    .obsah-webu {
        width: 90%;
    }
}

/* CZ/SK Startupy + responzivne */
.startup-lists {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
}

article.slovak-startups, 
article.czech-startups {
  width: 48%; 
}

@media (max-width: 768px) {
    .startup-lists {
      flex-direction: column; 
      align-items: center;
    }

    article.slovak-startups, 
    article.czech-startups {
      width: 100%; 
    }
}

@media (max-width: 480px) {
    .startup-lists h2 {
      font-size: 1.5em; 
    }

    article.slovak-startups ul,
    article.czech-startups dl {
      padding-left: 0; 
    }

    article.czech-startups dd {
      font-size: 0.9em; 
    }

    article.czech-startups dt {
      font-size: 1.1em; 
    }
}

/* Video prehravac + responzivita */
.videocontainer {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: black;
	padding: 20px; 
	box-sizing: border-box;
}

.videocontainer h2 {
	font-size: 5vw; 
	color: white;
	font-family: 'HISKYFLIPPERHIBOLD', sans-serif;
	font-weight: normal; 
	text-align: center;
}

.c-video {
	width: 100%;
	max-width: 1200px;
	position: relative;
	overflow: hidden;
	border-radius: 8px; 
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
}

.video1 {
	width: 100%;
	height: auto; 
	object-fit: cover; 
}

.controls {
	display: flex;
	position: absolute;
	bottom: 0;
	width: 100%;
	flex-wrap: wrap;
	background: rgba(0, 0, 0, 0.7);
	transform: translateY(100%) translateY(-5px);
	transition: all 0.4s;
}

.c-video:hover .controls {
	transform: translateY(0);
}

.buttons {
	padding: 10px;
	display: flex;
	gap: 10px; 
}

.buttons button {
	background: none;
	border: 0;
	outline: 0;
	cursor: pointer;
}

.buttons button:before {
	content: "\f144";
	width: 30px;
	height: 30px;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	font-size: 28px;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

.buttons button.play:before {
	content: "\f144";
}

.buttons button.pause:before {
	content: "\f28b";
}

.orange-bar {
	height: 10px;
	width: 100%;
	background: #000;
	position: relative;
}

.orange-juice {
	height: 100%;
	background-color: orange;
	width: 50%;
}

@media (max-width: 768px) {
	.videocontainer h2 {
		font-size: 6vw; 
	}

	.c-video {
		max-width: 90%; 
	}

	.buttons button:before {
		font-size: 20px; 
		width: 24px;
		height: 24px;
	}

	.controls {
		padding: 5px; 
	}
}

@media (max-width: 480px) {
	.videocontainer h2 {
		font-size: 7vw; 
	}

	.buttons {
		flex-direction: column; 
		align-items: center;
	}

	.buttons button {
		margin-bottom: 5px;
	}
}

/* Audio prehravac + responzivita */
#audio-player {
  width: 100%;
  max-width: 500px;
  background-color: #000000;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 20px auto;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
}

#audio-player:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  #audio-player {
    max-width: 90%; 
    padding: 8px; 
  }

  #audio-player::-webkit-media-controls-panel {
    padding: 5px;
  }

  #audio-player::-webkit-media-controls-play-button {
    width: 30px;
    height: 30px;
  }

  #audio-player::-webkit-media-controls-volume-slider {
    height: 8px;
  }

  #audio-player::-webkit-media-controls-mute-button {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  #audio-player {
    max-width: 100%;  
    padding: 5px;    
  }

  #audio-player::-webkit-media-controls-play-button {
    width: 28px;
    height: 28px;
  }

  #audio-player::-webkit-media-controls-volume-slider {
    height: 6px;
  }

  #audio-player::-webkit-media-controls-mute-button {
    width: 28px;
    height: 28px;
  }
}