body {

  

  margin: 0;

  font-family: Arial, sans-serif;

  background: #0a4fa3; /* TMAVĚ MODRÉ POZADÍ CELÉ STRÁNKY */

  color: #222;

}



/* HLAVIČKA */

.hlavicka {

  background: #0a4fa3;

  color: white;

  padding: 20px 30px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.hlavicka h1 {

  margin: 0;

  font-size: 32px;

}



.menu ul {

  list-style: none;

  display: flex;

  gap: 25px;

  margin: 0;

  padding: 0;

}



.menu a {

  color: white;

  text-decoration: none;

  font-weight: bold;

  transition: 0.3s;

}



.menu a:hover {

  color: #ffdd55;

}



/* HERO */

.hero {

  background-image: url('hero-dron.jpg');

  background-size: cover;

  background-position: center;

  min-height: 320px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.hero-overlay {

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

  padding: 40px;

  color: white;

  text-align: center;

  border-radius: 12px;

}



.hero-overlay h2 {

  font-size: 36px;

  margin-bottom: 10px;

}



.hero-overlay p {

  font-size: 20px;

  margin-bottom: 20px;

}



.cta-btn {

  display: inline-block;

  background-color: #ffeb3b;

  color: #000;

  padding: 14px 28px;

  border-radius: 8px;

  font-size: 18px;

  font-weight: 600;

  text-decoration: none;

  transition: 

    transform 0.25s ease,

    background-color 0.25s ease,

    box-shadow 0.25s ease;

}







/* SEKCE */

.color-section {

  background: white;

  max-width: 1100px;

  margin: 20px auto;

  padding: 40px;

  border-radius: 12px;

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

}



.color-section h2 {

  color: #0a4fa3;

  font-size: 28px;

  margin-bottom: 20px;

}



/* PROJEKTY */

#dron-z-vysky {

  background-color: #e0f7fa;

  padding: 20px;

  text-align: center;

}



#dron-z-vysky img {

  max-width: 100%;

  height: auto;

  border-radius: 8px;

}



.projekty-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 20px;

}



.projekt-karta {

  background: #e9f1ff;

  padding: 20px;

  border-radius: 10px;

  border: 1px solid #c9ddff;

}



/* BLOG */

.blog-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 20px;

}



.blog-card {

  background: #f4f7fb;

  padding: 20px;

  border-radius: 10px;

  border: 1px solid #d6e0f0;

}



/* FORMULÁŘ */

form {

  display: flex;

  flex-direction: column;

  gap: 12px;

  max-width: 450px;

}



input, select {

  padding: 10px;

  border-radius: 6px;

  border: 1px solid #ccc;

}



button {

  background: #0a4fa3;

  color: white;

  padding: 12px;

  border: none;

  border-radius: 6px;

  font-size: 16px;

}



/* PATIČKA */

footer {

  background: #0a4fa3;

  color: white;

  text-align: center;

  padding: 25px;

}



footer a {

  color: #ffdd55;

  font-weight: bold;

}



.projekt-karta img {



  width: 100%;

  height: auto;

  margin-top: 10px;

  border-radius: 8px;

}

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

  .projekty-grid {

    display: flex;

    flex-direction: column;

    gap: 20px;

  }



  .projekt-karta {

    width: 100%;

  }

}

.btn-hero:hover {

  background: #ffe680;

  color: #000;

}

.hero-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 20px;

}



.hero-img {

  width: 25%;

  max-width: 300px;

  border-radius: 8px;

  object-fit: cover;

}



.hero-overlay {

  flex: 1;

  text-align: center;

}

@media (max-width: 768px) {

  .hero-flex {

    flex-direction: column;

  }



  .hero-img {

    width: 80%;

    margin-bottom: 20px;

  }

}

#sluzby {

  background: linear-gradient(to right, #e6f0ff, #fdfdfd);

  padding: 40px 20px;

  border-radius: 12px;

  box-shadow: 0 0 15px rgba(0,0,0,0.05);

}



#sluzby h2 {

  font-size: 2rem;

  color: #003366;

  text-align: center;

  margin-bottom: 20px;

  border-bottom: 2px solid #ffcc00;

  display: inline-block;

  padding-bottom: 5px;

}



#sluzby ul {

  list-style-type: none;

  padding: 0;

  max-width: 600px;

  margin: 0 auto;

}



#sluzby li {

  background-color: #ffffff;

  border-left: 5px solid #ffcc00;

  padding: 12px 16px;

  margin-bottom: 12px;

  font-size: 1.1rem;

  color: #333;

  box-shadow: 0 2px 5px rgba(0,0,0,0.05);

  border-radius: 6px;

}

/* CENÍK – zvýraznění */

#cenik {

  background: linear-gradient(to right, #fff7d6, #ffffff); /* jemná žluto-bílá */

  padding: 40px 20px;

  border-radius: 12px;

  box-shadow: 0 0 15px rgba(0,0,0,0.05);

}

#cenik h2 {

  font-size: 2rem;

  color: #003366;

  text-align: center;

  margin-bottom: 25px;

  border-bottom: 2px solid #ffcc00;

  display: inline-block;

  padding-bottom: 5px;

}



/* Tabulka */

.cenik-tabulka {

  width: 100%;

  max-width: 700px;

  margin: 0 auto;

  border-collapse: collapse;

  font-size: 1.1rem;

  background-color: #ffffff;

  border-radius: 10px;

  overflow: hidden;

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

}



.cenik-tabulka th {

  background-color: #003366;

  color: white;

  padding: 15px;

  text-align: left;

  font-size: 1.2rem;

}



.cenik-tabulka td {

  padding: 15px;

  border-bottom: 1px solid #eee;

}



.cenik-tabulka tr:nth-child(even) {

  background-color: #f9f9f9;

}

.cenik-tabulka tr:hover {

  background-color: #fff4c2; /* jemné zvýraznění při přejetí */

  transition: 0.2s;

}



/* BLOG / NOVINKY – zvýraznění */

#blog {

  background: linear-gradient(to right, #e8f3ff, #ffffff); /* jemná modrá */

  padding: 40px 20px;

  border-radius: 12px;

  box-shadow: 0 0 15px rgba(0,0,0,0.05);

}



#blog h2 {

  font-size: 2rem;

  color: #003366;

  text-align: center;

  margin-bottom: 30px;

  border-bottom: 2px solid #ffcc00;

  display: inline-block;

  padding-bottom: 5px;

}



/* Grid pro články */

.blog-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 20px;

  max-width: 900px;

  margin: 0 auto;

}



/* Hover efekt */

.blog-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 4px 15px rgba(0,0,0,0.15);

  border-left-color: #ffcc00; /* žlutý akcent při přejetí */

}

/* VÝRAZNĚJŠÍ BLOGOVÉ KARTY */

.blog-card {

  background: #ffffff;

  padding: 25px;

  border-radius: 14px;

  border-left: 6px solid #003366;

  box-shadow: 0 4px 15px rgba(0,0,0,0.12);

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease;

  position: relative;

  overflow: hidden;

}



/* Barevný horní pruh */

.blog-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  height: 6px;

  width: 100%;

  background: linear-gradient(to right, #003366, #ffcc00);

}



/* Nadpis s ikonou */

.blog-card h3 {

  color: #003366;

  font-size: 1.35rem;

  margin-bottom: 12px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: bold;

}



/* Text */

.blog-card p {

  color: #333;

  line-height: 1.55;

  font-size: 1.05rem;

}



/* Hover efekt – karta se zvedne a zvýrazní */

.blog-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 8px 22px rgba(0,0,0,0.18);

  border-left-color: #ffcc00;

}

.blog-detail {

  display: none;

  margin-top: 15px;

  padding: 15px;

  background: #f7faff;

  border-left: 4px solid #ffcc00;

  border-radius: 8px;

  line-height: 1.6;

  animation: fadeIn 0.3s ease;

}



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(-5px); }

  to { opacity: 1; transform: translateY(0); }

}



.blog-card.open {

  border-left-color: #ffcc00;

  box-shadow: 0 6px 18px rgba(0,0,0,0.18);

}

.cenik-box {

  display: flex;

  flex-direction: column;

  gap: 20px;

  max-width: 700px;

  margin: 0 auto;

}



.cenik-item {

  background: #fffef5;

  border-left: 5px solid #ffcc00;

  padding: 20px;

  border-radius: 10px;

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

  cursor: pointer;

  transition: 0.3s;

}



.cenik-item:hover {

  box-shadow: 0 4px 15px rgba(0,0,0,0.15);

}



.cenik-item h3 {

  margin: 0;

  color: #003366;

  font-size: 1.3rem;

}



.cenik-short {

  font-weight: bold;

  margin: 8px 0;

  color: #333;

}



.cenik-detail {

  display: none;

  margin-top: 10px;

  color: #444;

  line-height: 1.5;

}



/* Sekce rezervace s modrým pozadím */

#rezervace.color-section {

  background: linear-gradient(to right, #e6f2ff, #f7faff);

  padding: 60px 20px;

}



/* Formulář jako zvýrazněný box */

.rezervace-form {

  max-width: 600px;

  margin: 0 auto;

  background: #f0f8ff; /* jemná modro-bílá */

  padding: 30px;

  border-radius: 14px;

  border: 2px solid #ffcc00; /* žlutý rámeček */

  box-shadow: 0 6px 20px rgba(0,0,0,0.1);

  display: flex;

  flex-direction: column;

  gap: 18px;

}



/* Nadpis sekce */

#rezervace h2 {

  text-align: center;

  color: #003366;

  margin-bottom: 30px;

}



.rezervace-form label {

  font-weight: bold;

  color: #003366;

}



.rezervace-form button:hover {

  background: #005599;

}

/* Info text pod formulářem */

.rezervace-info {

  font-size: 0.9rem;

  color: #666;

  margin-top: 10px;

  text-align: center;

}





/* Hover efekt */

.cta-btn:hover {

  transform: translateY(-3px) scale(1.02);

  background-color: #fdd835; /* o trochu tmavší žlutá při hoveru */

  box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}

/* Karty služeb – základ */

.sluzba-box {

  background: white;

  padding: 25px;

  border-radius: 12px;

  text-align: center;

  transition: 

    transform 0.25s ease,

    box-shadow 0.25s ease,

    color 0.25s ease;

}



/* Ikona uvnitř karty */

.sluzba-box i,

.sluzba-box img {

  transition: transform 0.25s ease, filter 0.25s ease;

}



/* Hover efekt */

.sluzba-box:hover {

  transform: scale(1.03); /* jemné zvětšení o 3 % */

  box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* lehký stín */

}



/* Zvýraznění ikony při hoveru */

.sluzba-box:hover i,

.sluzba-box:hover img {

  transform: scale(1.15); /* ikonka se lehce zvětší */

  filter: brightness(1.2); /* ikonka se zesvětlí */

}

.sluzby-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-top: 30px;

}



@media (max-width: 900px) {

  .sluzby-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .sluzby-grid {

    grid-template-columns: 1fr;

  }

}







.sluzba-box:nth-child(1) {

  background-color: #fff8e1; /* světle žlutá – letecké fotografie */

}



.sluzba-box:nth-child(2) {

  background-color: #e3f2fd; /* světle modrá – monitoring */

}



.sluzba-box:nth-child(3) {

  background-color: #f1f8e9; /* světle zelená – mapování */

}



.sluzba-box:nth-child(4) {

  background-color: #fce4ec; /* světle růžová – zemědělství */

}

.projekt-karta {

  transition: 

    transform 0.25s ease,

    box-shadow 0.25s ease;

}



.projekt-karta:hover {

  transform: translateY(-6px) scale(1.02);

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

}

.projekt-karta:active {

  transform: scale(0.97);

}

.projekt-karta img {

  transition: transform 0.4s ease;

}



.projekt-karta:hover img {

  transform: scale(1.05);

}

.rezervace-form button {

  background-color: #ffeb3b;

  color: #000;

  padding: 12px 24px;

  border: none;

  border-radius: 8px;

  font-size: 18px;

  font-weight: 600;

  cursor: pointer;

  transition: 

    transform 0.25s ease,

    background-color 0.25s ease,

    box-shadow 0.25s ease;

}



.rezervace-form button:hover {

  transform: translateY(-3px) scale(1.02);

  background-color: #fdd835;

  box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}



.rezervace-form button:active {

  transform: scale(0.97);

}

.rezervace-form input,

.rezervace-form textarea,

.rezervace-form select {

  transition: box-shadow 0.25s ease, border-color 0.25s ease;

  border: 2px solid #ccc;

  border-radius: 6px;

  padding: 10px;

}



.rezervace-form input:focus,

.rezervace-form textarea:focus,

.rezervace-form select:focus {

  border-color: #ffeb3b;

  box-shadow: 0 0 8px rgba(255, 235, 59, 0.5);

  outline: none;

}

.input-icon {

  position: relative;

  margin-bottom: 20px;

}



.input-icon i {

  position: absolute;

  top: 50%;

  left: 12px;

  transform: translateY(-50%);

  color: #888;

  font-size: 18px;

}



.input-icon input,

.input-icon select,

.input-icon textarea {

  padding-left: 40px;

  width: 100%;

  border: 2px solid #ccc;

  border-radius: 6px;

  padding: 10px;

  font-size: 16px;

  transition: box-shadow 0.25s ease, border-color 0.25s ease;

}



.input-icon input:focus,

.input-icon select:focus,

.input-icon textarea:focus {

  border-color: #ffeb3b;

  box-shadow: 0 0 8px rgba(255, 235, 59, 0.5);

  outline: none;

}

/* KONTAKT – hlavní rozložení */

.kontakt-flex-oddeleny {

  display: flex;

  justify-content: space-between;

  align-items: stretch;

  gap: 20px;

  padding: 40px 30px;

  background: #e0f0ff;

  border-radius: 16px;

  max-width: 1200px;

  margin: 40px auto;

}



/* Levý box – kontakt */

.kontakt-box {

  background: white;

  padding: 25px;

  border-radius: 12px;

  width: 45%;

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

}



.kontakt-box h2 {

  text-align: center;

  color: #003366;

  margin-bottom: 20px;

}



.kontakt-box p {

  margin: 12px 0;

  display: flex;

  align-items: center;

  gap: 10px;

  color: #333;

}



.kontakt-box strong {

  min-width: 100px;

  color: #003366;

}



/* Pravý box – mapa */

.kontakt-mapa-prava {

  width: 55%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.kontakt-mapa-prava iframe {

  width: 100%;

  height: 350px;

  border: 2px solid #ffcc00;

  border-radius: 12px;

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

}



/* Mobilní verze */

@media (max-width: 768px) {

  .kontakt-flex-oddeleny {

    flex-direction: column;

    padding: 20px;

  }



  .kontakt-box,

  .kontakt-mapa-prava {

    width: 100%;

  }



  .kontakt-mapa-prava iframe {

    height: 250px;

  }

}