/* ====== OBECNÉ ====== */

body {

  font-family: "Times New Roman", Georgia, Serif;

  background-color: #181818;

  color: #333;

  margin: 0;

  padding: 0;

}



/* ====== NAVBAR ====== */

.my-navbar {

  position: sticky;

  top: 0;

  z-index: 10050;

  background-color: #000;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  padding: 10px 20px;

  gap: 20px;

  letter-spacing: 4px;

  overflow: visible !important; /* umožní dropdown přesahovat navbar */

}



.my-navbar a,

.my-navbar .dropdown-btn {

  display: inline-block;

  color: #ecf0f1;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  transition: background-color 0.3s;

  cursor: pointer;

}



.my-navbar a:hover,

.dropdown-btn:hover {

  background-color: #242424;

}



.my-navbar img {

  height: 40px;

  margin: -10px 10px -12px 0;

}



/* ====== DROPDOWN ====== */

.dropdown {

  position: relative;

}



.dropdown img {

  width: 35px;

  height: 35px;

}



.dropdown-content {

  display: none;

  position: absolute;

  top: 48px;

  left: 0;

  background-color: #333;

  padding: 10px;

  border-radius: 8px;

  min-width: 220px;

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

  z-index: 10060; /* nad hero a navbar */

}



.dropdown:hover .dropdown-content {

  display: block;

}



/* dropdown položky */

.contact-item {

  display: grid;

  grid-template-columns: 30px auto;

  align-items: center;

  gap: 10px;

  padding: 26px;

  color: white;

  cursor: pointer;

}



.contact-item:hover {

  background-color: #444;

  border-radius: 4px;

}



.icon {

  width: 24px;

  height: 24px;

}



/* ====== MENU ICON (hamburger) ====== */

.menu-icon {

  display: none;

  font-size: 28px;

  color: #ecf0f1;

  cursor: pointer;

  margin-left: auto;

}



/* ====== MOBILNÍ VERZE ====== */

@media (max-width: 768px) {

  .menu-icon { display: block; }

  .my-navbar a:not(:first-child),

  .my-navbar .dropdown { display: none; }



  .my-navbar.responsive {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    flex-direction: column;

    align-items: flex-start;

    background-color: #000;

    padding: 10px 0;

    gap: 0;

  }



  .my-navbar.responsive a,

  .my-navbar.responsive .dropdown {

    display: block !important;

    width: 100%;

    text-align: left;

    padding: 14px 20px;

    border-top: 1px solid rgba(255,255,255,0.1);

  }



  .my-navbar.responsive .dropdown-content {

    position: relative;

    top: 0;

    left: 0;

    box-shadow: none;

    margin-top: 5px;

    display: block;

  }



  .social-sidebar { display: none; }

  .my-row { flex-direction: column; gap: 30px; }

  .my-col, .my-col2 { flex: 1 1 100%; text-align: center; }

  .my-col img, .my-col2 img { width: 60%; margin: 0 auto; }

  .my-col ul, .my-col2 ul { padding-left: 0; max-width: 90%; margin: 0 auto; text-align: left; }

}



/* ====== RESPOZIVNÍ ====== */

@media (max-width: 992px) {

  .my-row { gap: 15px; }

  .my-col, .my-col2 { flex: 1 1 45%; }

  .my-col img, .my-col2 img { width: 80%; height: 90%; }

}



@media (max-width: 480px) {

  .my-section { padding: 40px 10px; }

  .my-col h2, .my-col2 h3 { font-size: 1.5rem; }

  .my-col ul li, .my-col2 ul li { font-size: 0.95rem; }

  .my-col img, .my-col2 img { width: 80%; height: 90%; }

}



/* ====== SEKCJE ====== */

.my-container { max-width: 1100px; margin: auto; overflow: hidden; }

.my-section { padding: 50px 0; text-align: center; animation: fadeIn 0.8s ease-in-out; }

.my-section .my-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

.my-section .my-col { flex: 1; padding: 20px; }

.my-section img { max-width: 70%; height: auto; border-radius: 5px; animation: fadeIn 1s ease-in-out; }

.my-section h2, .my-section h3 { font-family: "Playfair Display", serif; letter-spacing: 2px; color: #c9c9c9; }

.my-section li, .my-section p { color: #c9c9c9; font-size: 18px; line-height: 1.8; text-align: left; }



.my-light-grey { background-color: rgba(0, 0, 0, 0.5); width: 100%; }



/* ====== SIDEBAR ====== */

.social-sidebar {

  position: fixed;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 15px;

  z-index: 9999;

}

.social-item {

  position: relative;

  width: 55px;

  height: 50px;

  background: #fff;

  border-radius: 0 10px 10px 0;

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

  display: flex;

  align-items: center;

  justify-content: flex-start;

  padding-left: 12px;

  overflow: hidden;

  cursor: pointer;

  transition: width 0.35s ease;

}

.social-item img { width: 26px; height: 26px; flex-shrink: 0; }

.social-label {

  position: absolute;

  left: 70px;

  opacity: 0;

  white-space: nowrap;

  font-size: 16px;

  color: #333;

  font-weight: 600;

  transform: translateX(-15px);

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

}

.social-item:hover { width: 200px; }

.social-item:hover .social-label { opacity: 1; transform: translateX(0); }

.instagram { border-left: 4px solid #e130db; }

.facebook { border-left: 4px solid #e130db; }



/* ====== DALŠÍ STYLING ====== */

.projects-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }

.project-item iframe { width: 100%; height: 100%; border-radius: 5px; }



.my-col2 { border: solid; border-radius: 20px; height: 600px; padding: 20px; }



.my-footer { background-color: #050505; color: #ecf0f1; text-align: center; padding: 20px 0; }



.my-hero {
  position: relative;
  text-align: center;
  color: white;

  background-image: url('heroimg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  height: 650px;     /* nastav si p�esn� tento � ladit m��e� +-20px */
  min-height: 520px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.my-hero::after {

  content: '';

  position: absolute;

  top: 0; left: 0; width: 100%; height: 100%;

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

  z-index: 0;

}

.my-hero h1 { font-size: 3em; margin: 0; z-index: 1; color: #047B7F; }

.my-hero h3 { color: #047B7F; z-index: 1; position: relative; margin-bottom: 400px; }





/* Mobile (iPhone + většina telefonů) */

@media (max-width: 767px) {

  .my-hero {

    background-attachment: scroll; /* iOS fix */

    height: 400px;                 /* menší výška */

    background-position: center top;

  }

@supports (-webkit-touch-callout: none) {
  .my-hero {
    background-attachment: scroll !important;
  }
}

.my-hero {
  background-size: cover;
  background-repeat: no-repeat;

  height: 100svh;     /* nov� standard, iPhone 15 fix */
  min-height: 500px;
}

/* iPhone 15 Pro */
@media screen 
  and (device-width: 393px) 
  and (device-height: 852px) 
  and (-webkit-device-pixel-ratio: 3) {

  .my-hero {
    height: 100svh !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }
}

/* iPhone 15 Pro Max */
@media screen 
  and (device-width: 430px) 
  and (device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3) {

  .my-hero {
    height: 100svh !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }
}



@media (max-width: 767px) {
  .my-hero {
    background-attachment: scroll !important;
    height: 80vh;         /* lep�� pro mobily */
    min-height: 400px;
    background-position: center top;
  }

  .my-hero h1 {
    font-size: 2em;
  }

  .my-hero h3 {
    margin-bottom: 200px;
  }
}




  .my-hero h1 {

    font-size: 2em;

  }



  .my-hero h3 {

    margin-bottom: 200px; /* uprav podle potřeby */

  }

}





@keyframes fadeIn {

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

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

}



.slideshow-container { position: relative; max-width: 100%; margin: auto; }

.my-slides { display: none; }

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  margin-top: -22px;

  padding: 16px;

  color: white;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

  z-index: 10;

}

.next { right: 0; border-radius: 3px 0 0 3px; }

.prev { left: 0; border-radius: 3px 0 0 3px; }

.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px;

  background-color: #bbb; border-radius: 50%; display: inline-block;

  transition: background-color 0.6s ease; }

.active, .dot:hover { background-color: #717171; }



#bgCanvas {

  position: fixed;

  top: 0; left: 0;

  width: 100%; height: 100%;

  z-index: -1;

  pointer-events: none;

}



.zoom-img {

  width: 100%;

  height: auto;

  transition: transform 0.3s ease;

}

.zoom-img:hover { transform: scale(1.05); }