html { height: 100%; margin: 0;}
body { font-family: Inter, Roboto, sans-serif; margin: 0; padding: 0; color: #333; background: #f5f5f5; height: 100%; margin: 0; display: flex; flex-direction: column;}
header { display: flex; justify-content: space-between; align-items: center; padding: 10px 50px; background: #0b3d91; color: #fff; }
header nav a { margin: 0 10px; color: #fff; text-decoration: none; font-weight: bold; }
header nav a:hover { text-decoration: underline; }
main { padding: 50px; }
.hero {
  position: relative;
  height: 100vh; /* výška na celú obrazovku */
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  overflow: hidden;
  object-fit: cover; /* video vyplní celú sekciu */
  z-index: 0; /* pod textom */
}

.hero-content {
  position: relative;
  z-index: 1; /* text nad videom */
  text-align: center;
  color: #fff;
  padding: 100px 20px;
  background-color: black;
  opacity: 0.7;
  width: 650px;
  margin: 20px auto 20px auto;
}

.content {
  flex: 1; /* Takes up remaining space */
}

.spaced-list li {
  margin-bottom: 10px; /* nastav si väčšiu hodnotu podľa potreby */
}
.blue-bullets li::marker {
  color: #0b3d91;
}

@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.about, .services, .technologies, .contact { margin-top: 50px; }
.tech-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: flex-end;}
.tech-item { width: 150px; text-align: center; transition: transform 0.3s; }
.tech-item img { width: 80px; height: 80px; }
.tech-item:hover { transform: scale(1.1) rotate(5deg); }
form { display: flex; flex-direction: column; max-width: 400px; margin: 0 auto; }
form label { margin-bottom: 15px; }
form input, form textarea { width: 100%; padding: 8px; }
form button { padding: 10px; background: #0b3d91; color: #fff; border: none; cursor: pointer; transition: background 0.3s; }
form button:hover { background: #004080; }
footer { text-align: center; padding: 20px; background: #0b3d91; color: #fff; margin-top: 50px; }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 1s ease-out, transform 1s ease-out; }
.appear { opacity: 1; transform: translateY(0); }
header .logo img {
  width: 150px;   /* nastav šírku loga */
  height: auto;   /* zachová proporcie */
}
.tech-grid img {
  width: 120px;   /* alebo 150px podľa toho, ako veľké chceš */
  height: auto;
  margin: 15px;
  transition: transform 0.3s ease;
}

.tech-grid img:hover {
  transform: scale(1.1);
}