body {

  margin: 0;

  font-family: 'Roboto', sans-serif;

  scroll-behavior: smooth;

  background: #f8f9fa;

}

 

.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}

 

.header {

  background: #ffffff;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  position: sticky;

  top: 0;

  z-index: 999;

border-bottom: 2px solid #00CCFF;

}

 

.header-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 0;

}

 

.logo {

  height: 60px;

  width: auto;

}

 

.nav {

  margin-left: auto;

  display: flex;

  gap: 30px;

}

 

.nav a {

  color: #00CCFF;

  font-weight: bold;

  font-size: 18px;

  text-decoration: none;

}

 

.nav a:hover {

  color: #0077C0;

}

 

 

 

 

.nav a.active,

.dropdown-menu a.active {

  background: #E6FAFF;

  color: #003e59;

  border-radius: 6px;

  padding: 6px 12px;

  text-decoration: none;

}

 

.nav a:hover,

.dropdown-menu a:hover {

  background: #d0e8fa;

  border-radius: 6px;

  color: #003e59;

}

 

 

 

 

.dropdown-menu a.active {

  background: #f0f0f0;

}

 

 

 

 

.dropdown {

  position: relative;

}

 

.dropdown-toggle::after {

  content: " ▼";

  font-size: 12px;

}

 

.dropdown-menu {

  display: none;

  position: absolute;

  top: 100%;

  right: 0;

  background: white;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

  padding: 10px 0;

  border-radius: 6px;

  z-index: 1000;

  min-width: 220px;

}

 

.dropdown-menu a {

  display: block;

  padding: 10px 20px;

  color: #00CCFF;

  text-decoration: none;

  font-weight: bold;

  font-size: 16px;

}

 

.dropdown-menu a:hover {

  background: #E6FAFF; /* tvoje světlá modrá */

  color: #003e59;

}

 

.dropdown:hover .dropdown-menu {

  display: block;

}

 

.hero {

  position: relative;

  overflow: hidden;

  width: 100%;

  height: 250px;

  background: transparent;

}



















.hero::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: rgba(0, 176, 240, 0.35); /* průhledná Solex modrá */

  mix-blend-mode: multiply;

  z-index: 2;

}



.hero-images, .hero-slide {

  position: relative;

  z-index: 1;

}



.hero .hero-content,

.hero-logo-text,

.hero-text {

  position: relative;

  z-index: 3;

}

























 

.hero-images {

  position: relative;

  width: 100%;

  height: auto;

}

 

.hero-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  opacity: 0;

  transition: opacity 4s ease-in-out;

}

 

.hero-slide.active {

  position: relative;

  opacity: 1;

}

 

.hero-slide img {

  width: 100%;

  height: auto;

  display: block;

}

 

.hero-logo-text {

  position: absolute;

  top: 20px;

  left: 20px;

  display: flex;

  align-items: center;

  gap: 15px;

  color: white;

  max-width: 400px;

  z-index: 10;

  pointer-events: none;

  user-select: none;

  font-weight: 600;

  font-size: 16px;

  line-height: 1.3;

  text-shadow: 0 0 6px rgba(0,0,0,0.8);

}

 

.hero-logo-wrapper {

  border-radius: 0;

  padding: 0;

  box-shadow: none;

  width: auto;

  height: auto;

  display: flex;

  justify-content: center;

  align-items: center;

}

 

.hero-logo {

  width: 150px;

  height: auto;

  display: block;

  margin: 0 auto;

  object-fit: contain;

}

 

.services {

  position: relative;

  background: transparent;

  z-index: 5;

  padding: 60px 0;

  margin-top: -100px;

}

 

.services-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 40px;

}

 

.circle {

  width: 180px;

  height: 180px;

  background: linear-gradient(145deg, #00CCFF, #4ccdf8);

  color: white;

  font-weight: bold;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  font-size: 18px;

  line-height: 1.4;

  text-decoration: none;

  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.3), 0 6px 15px rgba(0, 0, 0, 0.2);

  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;

  border: none;

  flex-direction: column;

  opacity: 0;

  transform: translateX(-50px);

  animation: slide-in 1.5s ease forwards, float 3s ease-in-out infinite;

  backdrop-filter: blur(2px);

}

 

 

.circle:nth-child(1) {

  animation-delay: 0.2s;

}

.circle:nth-child(2) {

  animation-delay: 0.4s;

}

.circle:nth-child(3) {

  animation-delay: 0.6s;

}

.circle:nth-child(4) {

  animation-delay: 0.8s;

}

 

.circle i {

  font-size: 24px;

  margin-bottom: 2px;

}

 

.circle:hover {

  background: #0077C0;

  transform: scale(1.15);

}

 

@keyframes float {

  0% { transform: translateY(0); }

  50% { transform: translateY(-10px); }

  100% { transform: translateY(0); }

}

 

@keyframes slide-in {

  to {

    opacity: 1;

    transform: translateX(0);

  }

}

 

.sticky-contact-button {

  position: fixed;

  bottom: 20px;

  right: 20px;

  background: #00CCFF;

  color: white;

  padding: 12px 20px;

  border-radius: 30px;

  font-weight: bold;

  font-size: 15px;

  text-decoration: none;

  box-shadow: 0 4px 10px rgba(0,0,0,0.2);

  z-index: 10000;

  display: flex;

  align-items: center;

  gap: 8px;

  transition: background 0.3s ease;

}

 

.sticky-contact-button:hover {

  background: #0077C0;

}

 

.section {

  padding: 60px 20px;

  text-align: center;

  background: #ffffff;

  margin-top: 40px;

}

 

.section h2 {

  color: #003e59;

  font-size: 32px;

  margin-bottom: 20px;

}

 

.service-layout {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 20px;

}

 

.service-text {

  flex: 1 1 40%;

  padding: 10px;

  text-align: left;

}

 

.service-images {

  flex: 1 1 50%;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

  align-items: flex-start;

}

 

.service-images img {

  width: 280px;

  height: auto;

  border-radius: 10px;

  box-shadow: 0 4px 12px rgba(0, 176, 240, 0.25); /* modrý stín */

  cursor: pointer;

  opacity: 0;

  transform: translateX(100px);

  transition: all 0.8s ease-out, box-shadow 0.3s ease, transform 0.3s ease;

}

 

 

.service-images.visible img {

  opacity: 1;

  transform: translateX(0);

}

 

.service-images.visible img:nth-child(1) {

  transition-delay: 0.1s;

}

.service-images.visible img:nth-child(2) {

  transition-delay: 0.3s;

}

.service-images.visible img:nth-child(3) {

  transition-delay: 0.5s;

}

.service-images.visible img:nth-child(4) {

  transition-delay: 0.7s;

}

.back-button {

  display: inline-block;

  margin-top: 30px;

  padding: 12px 30px;

  background: #00CCFF;

  color: white;

  text-decoration: none;

  border-radius: 30px;

  font-weight: bold;

  transition: background 0.3s;

}

 

.back-button:hover {

  background: #0097d8;

}

 

.footer {

  background: #003e59;

  padding: 20px 0;

  text-align: center;

  color: white;

  font-size: 13px;

  border-top: 2px solid #00CCFF;

  letter-spacing: 0.3px;

}

 

 

.hidden {

  display: none !important;

}

 

.blok {

  text-align: justify;

  font-size: 16px;

  margin-bottom: 20px;

}

 

.centered-last {

  text-align: center;

  font-size: 16px;

  margin-top: 30px;

}

 

.highlight-link {

  color: #00CCFF;

  font-weight: bold;

  text-decoration: none;

}

 

.highlight-link:hover {

  text-decoration: underline;

}

 

.kontakt-flex {

  display: flex;

  flex-wrap: wrap;

  gap: 40px;

  justify-content: center;

  align-items: flex-start;

}

 

.kontakt-boxy {

  flex: 0 1 120px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}

 

.kontakt-boxy .box {

  background: white;

  padding: 15px;

  border-radius: 10px;

  text-align: center;

  box-shadow: 0 4px 10px rgba(0, 176, 240, 0.25); /* modrý stín */

  max-width: 260px;

  width: 100%;

  margin: 0 auto;

  transition: box-shadow 0.3s ease, transform 0.3s ease;

}

 

 

.kontakt-boxy .box i {

  font-size: 22px;

  color: #00CCFF;

  margin-bottom: 6px;

}

 

.kontakt-boxy .box h3 {

  font-size: 14px;

  font-weight: bold;

  margin: 6px 0 4px;

}

 

.kontakt-boxy .box .jmeno {

  font-weight: normal;

  font-size: 14px;

  margin: 0;

  white-space: nowrap;

  line-height: 1.2;

}

 

.kontakt-boxy .box p {

  margin: 0;

  font-size: 14px;

}

 

 

 

 

 

/* Styly pro odkaz uvnitř kontakt-boxů (telefon + e-mail) */

.kontakt-boxy .box p a {

  color: #00CCFF;        /* tvoje Solex modrá */

  font-weight: normal;     

  text-decoration: none; /* bez podtržení */

}

 

.kontakt-boxy .box p a:hover {

  color: #00CCFF;        

  text-decoration: underline;

}

 

 

 

 

 

 

 

 

 

 

.kontakt-formular {

  flex: 1 1 350px;

  max-width: 350px;

  min-height: unset;

  height: 340px;

  background: #E6FAFF; /* světle modrá */

  padding: 20px;

  border-radius: 10px;

  color: #003e59; /* tmavě modrý text */

  overflow: visible;

  box-shadow: 0 4px 12px rgba(0, 176, 240, 0.25);

  transition: box-shadow 0.3s ease, transform 0.3s ease;

}

 

 

 

.formular-nadpis {

  font-size: 20px;

  font-weight: bold;

  margin-bottom: 15px;

  display: block;

  text-align: left;

}

 

.kontakt-formular form {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

 

.kontakt-formular input,

.kontakt-formular textarea {

  padding: 10px 15px;

  font-size: 14px;

  border: none;

  border-radius: 5px;

  width: 100%;

  box-sizing: border-box;

}

 

.kontakt-formular textarea {

  min-height: 135px;

  resize: vertical;

}

 

.kontakt-formular button {

  background: #003e59;

  color: white;

  border: none;

  padding: 10px 20px;

  border-radius: 5px;

  font-weight: bold;

  cursor: pointer;

  transition: background 0.3s;

  width: fit-content;

  align-self: center;

  max-width: 200px;

  margin-top: 10px;     /* odsazení shora */

  margin-bottom: 10px;  /* odsazení zdola */

}

s

 

.kontakt-formular button:hover {

  background: #002a3d;

}

 

.lightbox {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(0,0,0,0.8);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

}

 

.lightbox-content {

  max-width: 90%;

  max-height: 90%;

  box-shadow:  0 0 20px black;

  border-radius: 8px;

}

.lightbox-close {

  position: absolute;

  top: 30px;

  right: 40px;

  font-size: 30px;

  color: white;

  cursor: pointer;

}

 

@media (max-width: 768px) {

  .hero {

    height: 280px;

  }

 

  .circle {

    width: 140px;

    height: 140px;

    font-size: 17px;

  }

 

  .service-layout {

    flex-direction: column;

  }

 

  .service-text, .service-images {

    width: 100%;

  }

 

  .kontakt-flex {

    flex-direction: column;

    gap: 30px;

  }

 

  .kontakt-formular {

    max-width: 100%;

  }

 

  .nav {

    flex-wrap: wrap;

    gap: 15px;

  }

}

 

@media (max-width: 480px) {

  .hero {

    height: 240px;

  }

 

  .circle {

    width: 120px;

    height: 120px;

    font-size: 15px;

  }

 

  .nav {

    flex-direction: column;

    gap: 10px;

    align-items: flex-start;

  }

 

  .hero-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

  }

}

 

.services-text {

  text-align: center;

  padding: 40px 20px 60px;

  background: #E6FAFF;

  font-family: 'Roboto', sans-serif;

}

 

 

 

.services-text .slogan1,

.services-text .slogan2 {

  font-size: 18px;

  font-weight: bold;

  color: #003e59;

  margin: 4px 0;   /* jemná svislá mezera */

  padding: 0;

  line-height: 1.3; /* mírně zvýšené pro vzdušnost */

}

 

.services-text .phone {

  font-size: 18px;

  color: #00CCFF;

  font-weight: bold;

  margin: 6px 0;   /* o něco větší mezera kolem telefonu */

  padding: 0;

}

 

.phone i {

  margin-right: 8px;

  color: #00CCFF;

  font-size: 22px;

}

 

 

 

.logo-text {

  color: #003e59;

  font-weight: bold;

  font-size: 18px;

  white-space: nowrap;

  margin-right: 30px;

  display: flex;

  align-items: center;

}

 

.akronym-dvojblok {

  margin-top: 30px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 20px;

}

 

.blok-akronym {

  max-width: 280px;

  color: #003e59;

  font-size: 14px;

  line-height: 1.4;

  opacity: 0.85;

}

 

.blok-akronym p strong {

  color: #00CCFF;

  font-weight: bold;

}

 

.blok-nadpis {

  font-size: 16px;

  font-weight: none;

  color: #000000;

  margin-bottom: 10px;

}

 

.kontakt-boxy .box,

.kontakt-formular {

  opacity: 0;

  transform: translateX(80px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}

 

.kontakt-animate .box:nth-child(1) {

  transition-delay: 0.2s;

  opacity: 1;

  transform: translateX(0);

}

 

.kontakt-animate .box:nth-child(2) {

  transition-delay: 0.4s;

  opacity: 1;

  transform: translateX(0);

}

 

.kontakt-animate .box:nth-child(3) {

  transition-delay: 0.6s;

  opacity: 1;

  transform: translateX(0);

}

 

.kontakt-animate .kontakt-formular {

  transition-delay: 0.9s;

  opacity: 1;

  transform: translateX(0);

}

 

.services-text.compact {

  padding: 5px 20px 5px !important;

}

.akronym-block {

  opacity: 0;

  transform: translateX(60px);

  transition: opacity 0.8s ease, transform 0.8s ease;

}

 

.akronym-animate .akronym-block {

  opacity: 1;

  transform: translateX(0);

}

 

.akronym-animate .akronym-block:nth-of-type(1) { transition-delay: 0.2s; }

.akronym-animate .akronym-block:nth-of-type(2) { transition-delay: 0.4s; }

.akronym-animate .akronym-block:nth-of-type(3) { transition-delay: 0.6s; }

.akronym-animate .akronym-block:nth-of-type(4) { transition-delay: 0.8s; }

.akronym-animate .akronym-block:nth-of-type(5) { transition-delay: 1s; }

.akronym-animate .akronym-block:nth-of-type(6) { transition-delay: 1.2s; }

.akronym-animate .akronym-block:nth-of-type(7) { transition-delay: 1.4s; }

.akronym-animate .akronym-block:nth-of-type(8) { transition-delay: 1.6s; }

.akronym-animate .akronym-block:nth-of-type(9) { transition-delay: 1.8s; }

.akronym-animate .akronym-block:nth-of-type(10) { transition-delay: 2s; }

.akronym-animate .akronym-block:nth-of-type(11) { transition-delay: 2.2s; }

.akronym-animate .akronym-block:nth-of-type(12) { transition-delay: 2.4s; }

.akronym-animate .akronym-block:nth-of-type(13) { transition-delay: 2.6s; }

 

.akronym-block:nth-of-type(6),

.akronym-block:nth-of-type(7),

.akronym-block:nth-of-type(8),

.akronym-block:nth-of-type(9),

.akronym-block:nth-of-type(10),

.akronym-block:nth-of-type(11),

.akronym-block:nth-of-type(12),

.akronym-block:nth-of-type(13) {

  display: none;

}

 

 

 

/* Animace pro logo, slogan a telefon */

.services-text img,

.services-text .slogan,

.services-text .phone {

  opacity: 0;

  transform: translateX(100vw);

  transition: opacity 0.6s ease, transform 0.6s ease;

}

.service-images img:hover {

  transform: scale(1.05);

  transition: transform 0.3s ease;

}

.akronym-block {

  display: flex;

  gap: 10px;

  font-size: 17px;

  color: #000000;

}

 

.akronym-block strong {

 color: #00CCFF; /* modré písmeno */

  font-weight: bold;

  display: inline-block;

  width: 10px;

  text-align: left;

}

.homepage .services-text {

  margin-top: 0 !important;

  padding-top: 10px !important;

}

 

.homepage .hero {

  margin-bottom: 0 !important;

}

 

 

.reference-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  justify-content: center;

  margin-top: 30px;

}

 

.reference-card {

  background: white;

  border-radius: 10px;

  box-shadow: 0 4px 12px rgba(0, 176, 240, 0.25); /* modrý stín */

  width: 280px;

  text-align: center;

  padding: 15px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

 

 

.reference-card img {

  width: 100%;

  height: 200px;      /* nastavíš jednotnou výšku (zkus 200–220px podle designu) */

  object-fit: cover;  /* zajistí, že fotka nebude deformovaná, jen se ořízne */

  border-radius: 8px;

  margin-bottom: 10px;

}

 

.reference-card h3 {

  font-size: 18px;

  margin: 10px 0 5px;

}

 

.reference-card p {

  font-size: 14px;

  color: #555;

}

 

.reference-card:hover {

  transform: translateY(-5px) scale(1.05);

  box-shadow: 0 6px 16px rgba(0, 176, 240, 0.4); /* výraznější modrý stín */

}

 

 

 

.more-button,

.back-to-list {

  background: #00CCFF;

  color: white;

  border: none;

  padding: 8px 16px;

  border-radius: 20px;

  font-size: 14px;

  cursor: pointer;

  margin-top: 10px;

  transition: background 0.3s;

}

 

.more-button:hover,

.back-to-list:hover {

  background: #0077C0;

}

 

.reference-detail {

  background: white;

  border-radius: 10px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  padding: 20px;

  margin-top: 30px;

  text-align: center;

}

 

.reference-detail h3 {

  font-size: 20px;

  color: #00CCFF;

  margin-bottom: 15px;

}

 

.reference-detail p {

  font-size: 14px;

  color: #333;

  margin-bottom: 20px;

}

 

.detail-images {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

}

 

.detail-images img {

  width: 240px;

  height: auto;

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0, 176, 240, 0.25);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

 

 

.hidden {

  display: none !important;

}

/* Zoom efekt na fotky v detailu */

.detail-images img {

    width: 240px;

    height: auto;

    border-radius: 8px;

    cursor: pointer;

    opacity: 0;

    transform: translateX(100vw) scale(1);

    transition: transform 0.6s ease, opacity 0.6s ease;

}

 

.detail-images img.animate {

    opacity: 1;

    transform: translateX(0) scale(1);

}

 

.detail-images img:hover {

  transform: scale(1.1);

  box-shadow: 0 6px 18px rgba(0, 176, 240, 0.5);

}

 

 

 

 

 

/* Lightbox styl */

.lightbox {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.8);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 9999;

}

 

.lightbox-content {

  max-width: 90%;

  max-height: 90%;

  border-radius: 10px;

  box-shadow: 0 0 20px black;

}

 

.lightbox-close {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 40px;

  color: white;

  cursor: pointer;

}

 

 

.reference-card {

  opacity: 0;

  transform: translateX(50px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}

 

.reference-card.animate {

  opacity: 1;

  transform: translateX(0);

}

 

 

.reference-card {

  opacity: 0;

  transform: translateX(100vw); /* schováno úplně doprava mimo obrazovku */

  transition: opacity 0.8s ease, transform 0.8s ease;

}

 

.reference-card.animate {

  opacity: 1;

  transform: translateX(0);

}

@media (max-width: 768px) {

  .reference-card {

    transform: translateX(100%);

  }

}

 

 

 

 

.detail-images img {

  width: 240px;

  height: auto;

  border-radius: 8px;

  cursor: pointer;

  transition: transform 0.3s ease, opacity 0.6s ease, transform 0.6s ease;

  opacity: 0;

  transform: translateX(100vw);

}

 

.detail-images img.animate {

  opacity: 1;

  transform: translateX(0);

}

 

.detail-images img:hover {

  transform: scale(1.1);

}

 

 

.reference-card.animate:hover {

    transform: translateX(0) scale(1.1);

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);

    transition: transform 0.3s ease;

}

 

 

/* Finální zoom efekt na kolečka */

.circle {

    transition: transform 0.3s ease, background 0.3s ease;

}

 

.circle:hover {

  transform: scale(1.1) !important;

  background: linear-gradient(145deg, #0097d8, #00CCFF);

  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);

}

 

 

.circle[href="#kamerove"]:hover,

.circle[href="#tlakove"]:hover,

.circle[href="#bezvykopove"]:hover,

.circle[href="#dalsi"]:hover {

    transform: scale(1.1) !important;

    background: #0077C0 !important;

}

 

 

.kontakt-boxy .box:hover {

  transform: translateY(-4px);

  box-shadow: 0 6px 16px rgba(0, 176, 240, 0.4);

}

 

.kontakt-formular:hover {

  transform: translateY(-4px);

  box-shadow: 0 6px 18px rgba(0, 176, 240, 0.4);

}

 

.kontakt-formular button:active {

  transform: scale(0.97);

  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);

}

 

@media (min-width: 768px) {

  .hero {

    height: 480px; /* nebo klidně i 500px pro vyšší obrázek */

    background-size: cover;

    background-position: center;

  }

 

  .services {

    margin-top: -130px; /* původně -60px – posuneme kolečka víc nahoru */

  }

}

 

 

.form-message {

  background: #e6f9f0;

  border: 1px solid #00b074;

  color: #00663a;

  font-weight: bold;

  padding: 12px 20px;

  border-radius: 8px;

  margin-top: 10px;

  text-align: center;

  font-size: 16px;

}