/* NAVIGATION */

.desktop-nav a {

  color: var(--color-light);

  text-decoration: none;

  font-weight: 500;

  transition: 0.25s;

}



.topnav__logo {

  font-family: "Cormorant Garamond", serif;

  font-weight: 900;

  font-size: 1.7rem;

  letter-spacing: 0.03em;

  color: #F4B315;

  text-shadow: 0 1px 0 rgba(0,0,0,0.08);

}



.desktop-nav a:hover {

  color: var(--color-primary);

}



.hamburger {

  display: none;

  flex-direction: column;

  gap: 5px;

  background: transparent;

  border: none;

  cursor: pointer;

}



.hamburger span {

  width: 28px;

  height: 3px;

  background: var(--color-light);

  border-radius: 2px;

  transition: 0.3s;

}



/* CONTENT IMAGES */

.content-image1,

.content-image2,

.content-image3,

.about-image {

  height: auto;

  aspect-ratio: 16/9;

  background-size: cover;

  background-position: center;

}



.content-image1 { background-image: url("../img/spolehlivy_uklid.webp"); }

.content-image2 { background-image: url("../img/domacnost_firma.webp"); }

.content-image3 { background-image: url("../img/pohoda_klid.webp"); }



/* SERVICE CARDS */

.service-card {

  background: #fff;

  padding: 28px;

  border-radius: 8px;

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

  text-align: center;

  cursor: pointer;

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

  position: relative;

  overflow: hidden;

}



.service-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 10px 24px rgba(0,0,0,0.18);

}



.service-card::after {

  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 60%;

  height: 100%;

  background: linear-gradient(

    120deg,

    transparent 0%,

    rgba(255,255,255,0.35) 50%,

    transparent 100%

  );

  transition: 0.6s ease;

}



.service-card:hover::after {

  left: 140%;

}



/* SERVICE ICONS */

.service-icon1,

.service-icon2,

.service-icon3,

.service-icon4,

.service-icon5,

.service-icon6,

.service-icon7,

.service-icon8,

.service-icon9,

.service-icon10,

.service-icon11,

.service-icon12 {

  width: 190px;

  height: 190px;

  margin: 0 auto 16px;

  border-radius: var(--radius);

  background-size: cover;

  background-position: center;

  transition: transform 0.95s ease;

}



.service-icon1 { background-image: url("../img/uklid_domacnosti.png"); }

.service-icon2 { background-image: url("../img/pravidelny_uklid.png"); }

.service-icon3 { background-image: url("../img/myti_oken.png"); }

.service-icon4 { background-image: url("../img/generalni_uklid.png"); }

.service-icon5 { background-image: url("../img/uklid_najemnici.png"); }

.service-icon6 { background-image: url("../img/uklid_stavba.png"); }

.service-icon7 { background-image: url("../img/uklid_firem.png"); }

.service-icon8 { background-image: url("../img/uklid_oslavach.png"); }

.service-icon9 { background-image: url("../img/expresni_uklid.png"); }

.service-icon10 { background-image: url("../img/uklid_teras.png"); }

.service-icon11 { background-image: url("../img/realizace_zahrad.png"); }

.service-icon12 { background-image: url("../img/udrzba_zahrad.png"); }



/* TESTIMONIAL */

.testimonial {

  padding: 24px;

  border: 1px solid var(--color-light);

  border-radius: var(--radius);

  margin-bottom: 20px;

  background: #fff;

}



/* ABOUT IMAGE */

.about-image {

  width: 100%;

  min-height: 420px; /* můžeš upravit podle potřeby */

  background-image: url("../img/ty_ja.webp");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border-radius: var(--radius);

}



/* CONTACT FORM */

.contact-form input,

.contact-form textarea {

  width: 100%;

  padding: 12px;

  margin-bottom: 16px;

  border-radius: var(--radius);

  border: 1px solid var(--color-light);

}



/* BUTTON */

.btn-submit {

  background: var(--color-primary);

  color: var(--color-dark);

  padding: 16px 32px;

  border: none;

  border-radius: var(--radius);

  font-size: 18px;

  font-weight: 600;

  cursor: pointer;

  width: 100%;

  text-align: center;

  transition: 0.25s ease;

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

}



.btn-submit:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(0,0,0,0.22);

}

.hero-inner {

  max-width: 900px;

  margin: 0 auto;

  text-align: center;

  color: #fff;

}



.hero-subtitle {

  font-size: 20px;

  margin-top: 18px;

  max-width: 720px;

  margin-left: auto;

  margin-right: auto;

  color: #fff;

  opacity: 0.95;

  font-family: var(--font-body);

  line-height: 1.45;

  text-shadow: 0 3px 10px rgba(0,0,0,0.45);

}



.hero-cta {

  display: inline-block;

  margin-top: 32px;

  padding: 14px 32px;

  background-color: var(--color-primary);

  color: var(--color-dark);

  font-weight: 600;

  border-radius: var(--radius);

  text-decoration: none;

  transition: 0.25s ease;

  font-family: var(--font-body);

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

}



.hero-cta:hover {

  background-color: var(--color-primary-dark);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(0,0,0,0.22);

}



.hero-image {

  position: relative;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



.hero-image::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to bottom,

    rgba(0,0,0,0.45),

    rgba(0,0,0,0.25)

  );

  z-index: 1;

}



.hero-inner {

  position: relative;

  z-index: 2;

}