/*root- globální barvy */
:root {
  --primary: #1e1e2f;
  --accent: #00ffd5;
  --text: #ffffff;
  --bg-gradient: linear-gradient(135deg, #1e1e2f, #2f2f4f);
}

* {
  box-sizing: border-box; /*pro lepší rozvržení stránky*/
  margin: 0;
  padding: 0;
}

/* velikosti fontů různých textů*/
h2 {
  font-size: 2rem;
}

h3{
  font-size: 1.5rem;
}

p{
  font-size: 1.1rem;
}

body {
  font-family: "Anta", sans-serif;
  background: var(--bg-gradient);
  color: var(--text);
  line-height: 1.6; /*výška řádku - čitelnost */
}

header {
  background: #00000044;
  padding: 1.5rem; /*odsazení od kraje webu*/
  text-align: center;
  border-bottom: 2px solid var(--accent);
}

nav {
  display: flex; /*aby se obsah zobrazil vedle sebe ne pod sebou*/
  justify-content: center;
  gap: 2rem; /*mezeri mezi slovy*/
  margin: 1rem; /*odsazení, aby logo a text nebyl namačkaný na sebe*/
}

nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: bold;
}

nav a:hover {
  color: var(--accent);
}

.uvod {
  text-align: center;
}

.uvod h2 {
  margin-bottom: 1rem; /*odsazení od podnadpisu*/
}

.uvod p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

/*sekce s nadpisem a kartama*/
section {
  padding: 3rem 2rem; /*odsazení každé sekce*/
  max-width: 1000px; /*maximální šířka kontejnerů/karet*/
  margin: 0 auto; /*zarovná sekce do prostřed*/
}

/*sekce jenom s kartama*/
.features {
  display: flex;
  flex-wrap: wrap; /*srovná karty v mobilní verzi pod sebe*/
  gap: 2rem; /*mezery mezi kartama*/
  justify-content: center;
}

/*jednotlivy karty*/
.feature {
  background: #2c2c4f;
  padding: 2rem; /*odsazení textu od hranice karty*/
  border-radius: 10px;
  flex: 1 1 280px; /*zmenší karty*/
  min-width: 260px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/*fotky*/
.feature .foto img {
  width: 100%;
  object-fit: cover; /*zakryje celou plochu obrázkem*/
  border-radius: 10px;
}

/*ikony*/
.feature img {
  width: 80px;
  display: block;
  margin: 0 auto 1rem auto; /*zarovná do středu karty*/
}

.feature h3 {
  color: var(--accent);
  margin-bottom: 1rem; /*odsazení nadpisu od textu*/
}

.projects {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.project-card {
  background: #2c2c4f;
  border-radius: 10px;
  overflow: hidden; /*zakryje rohy*/
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.project-card a{
  text-decoration: none;
}

.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease; /* přechod pro plynulé zvětšení */
}

.project-card img:hover {
  transform: scale(1.05); /* zvětší obrázek o při najetí */
}

.project-card h3 {
  color: var(--accent);
  padding: 0.5rem 1rem 0rem 1rem; /*odsazení nadpisu od kraje karty, obrázku a textu*/
}

.project-card p {
  padding: 0.5rem 1rem 1rem 1rem; /*odsazení textu od nadpisu a krajů karty*/
}

/*odsazení karet od sebe*/
#o-nas h2 {
  margin-bottom: 1rem;
}

#projekty h2 {
  margin-bottom: 1rem;
}

#nabidka h2 {
  margin-bottom: 1rem;
}

#napln h2 {
  margin-bottom: 1rem;
}

#pozadavky h2 {
  margin-bottom: 1rem;
}

#kontakt h2 {
  margin-bottom: 1rem;
}

#co-nabizime h2 {
  margin-bottom: 1rem;
}

#co-nabizime .offer-list {
  list-style: none; /*zmizí číslování/tečky*/
  max-width: 1000px; /*maximální šířka karet*/
}

#co-nabizime .offer-list li {
  margin-bottom: 2rem; /*odsazení jednotlivé karty*/
  background: #2c2c4f;
  padding: 2rem; /*odsazení textu od kraje karty*/
  border-radius: 10px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#co-nabizime .offer-list h3 {
  margin-bottom: 0.5rem;
  color: var(--accent);
}

footer {
  text-align: center;
  padding: 1rem; /*odsazení obsahu od kraje footeru*/
  background: #111;
  color: #aaa;
}

form {
  display: flex; /*rozvržení formu*/
  flex-direction: column; /*zarovná obsah pod sebe*/
  gap: 1rem; /*mezera mezi jednotlivou kolounkou*/
  max-width: 500px;
  margin: 2rem auto 0 auto; /*zarovnání do středu stránky*/
  background: #2c2c4f;
  padding: 2rem; /*odsazení od kraje karty*/
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

form label {
  font-weight: bold;
}

form input,
form textarea {
  padding: 0.8rem;
  border: none;
  border-radius: 5px;
  font-family: 'Anta', sans-serif;
}

form input[type="submit"] {
  background: var(--accent);
  color: var(--primary);
  font-weight: bold;
  cursor: pointer; /*změní kurzor*/
  transition: background 0.3s;
}

form input[type="submit"]:hover {
  background: #00c9aa;
}

@media (max-width: 1024px) {
  .uvod h2 {
    font-size: 1.5rem;
  }

  nav {
    flex-direction: column; /*změní směr navbaru směrem dolů*/
    gap: 1rem; /*merzery mezi slovy*/
  }

  .projects {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .uvod h2 {
    font-size: 1.5rem;
  }

  nav {
    flex-direction: column;
    gap: 1rem;
  }

  /*zarovná veškerý text do prostřed*/
  #o-nas h2 {
    text-align: center;
  }
  
  #projekty h2 {
    text-align: center;   
  }
  
  #nabidka h2 {
    text-align: center;
  }
  
  #napln h2 {
    text-align: center;
  }
  
  #pozadavky h2 {
    text-align: center;
  }
  
  #kontakt h2 {
    text-align: center;
  }
  
  #co-nabizime h2 {
    text-align: center;
  }

  .feature h3 {
    text-align: center;
  }

  .feature p {
    text-align: center;
  }

  .project-card h3 {
    text-align: center;
  }

  .project-card p {
    text-align: center;
  }

  .projects {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  #co-nabizime .offer-list h3 {
    text-align: center;
  }

  #co-nabizime .offer-list p {
    text-align: center;
  }
}