body{
    margin: auto !important; 
    overflow-x: hidden;
    position: relative;
    background-color: #FFF8F6 !important;
}

#NavBar{
    background-color: white;
    height: 5.36vw; /* 103px */
    display: flex;
    justify-content: space-between;
}

li::marker{
    font-size: 0.5em;
}

/* Počáteční stav: Průhledné a mírně posunuté dolů (nebo kamkoliv chcete) */
.reveal {
    opacity: 0;
    transform: translateY(1.04vw); /* 20px */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Doba a typ animace */
}
  
/* Koncový stav: Plně viditelné a na původní pozici */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

#Links{
    display: flex;
    list-style-type: none;
    gap: 1.56vw; /* 30px */
    font-family: Inter;
    font-weight: bold;
    font-size: 0.78vw; /* 15px */
    color:#8D9386;
    margin-top: 2.24vw; /* 43px */
    text-align: center;
}

#NavBar a{
    color: inherit;
    text-decoration: none;
}

#LOGO{
    margin-top: 1.4vw; /* 33px */
    max-width: 2.604vw; /* 50px */

}

#SocialsAndLogo{
    margin-left: 1.3vw; /* 25px */
    display: flex;
}

#Socials{
    margin-top: 1.82vw; /* 35px */
    margin-left: 1.56vw; /* 30px */
}

#ButtonText{
    font-family: Inter;
    color: white;
    margin-top: 0.78vw; /* 15px */
    font-weight: bold;
}

#ContactButton{
    margin-top: 1.3vw; /* 25px */
    margin-right: 3.125vw; /* 60px */
    width: 12.21vw; /* 234.5px */
    height: 2.81vw; /* 54px */
    background-color: #8D9386;
    border-radius: 2.34vw; /* 45px */
    display: flex;
    justify-content: center;
    align-items: center;
}

#LOGO img{
    max-width: 2.604vw; /* 50px */
}

.main-photo {
    background-image: url('Images/MainPhotoContaczt.png');
    background-size: cover;
    background-position: center;
    height: 42.08vw; /* 808px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
text-align: center;
}

.main-photo > h3{
    color: #FFF;
    font-family: Cousine;
    font-size: 0.885vw; /* 17px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.main-photo > h1{
    color: #FFF;
    text-align: center;
    font-family: "Instrument Serif";
    font-size: 6.25vw; /* 120px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 45.31vw; /* 870px */
}

#ContactMeContainer{
    height: 65.10vw; /* 1250px */
    width: 98vw; /* 98% */
    background-color: #F9F1EC;
    margin: auto;
    margin-top: 1vw;
display: flex;
}

#ContactMePhotos{
    display: flex;
    flex-direction: column;
}

#Names{
    display: flex;
    gap: 1.67vw; /* 32px */
}

#ContactMe > h1{
    color: #212121;
    font-family: "Instrument Serif";
    font-size: 3.64vw; /* 70px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#ContactMe > h3{
    color: #8D9386;
    font-family: Cousine;
    font-size: 0.78vw; /* 15px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 1.72vw; /* 33px */
}

#CenterLine{
    width: 45.83vw; /* 880px */
    height: 0.052vw; /* 1px */
    background: #BDAB8F;
    margin-top: 1.82vw; /* 35px */
}

#ContactMe > p{
    color: #000;
    font-family: "Libre Franklin";
    font-size: 0.73vw; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 25.68vw; /* 493px */
    margin-top: 1.61vw; /* 31px */
}


#Name1 > h3{
    color: #8D9386;
    font-family: "Libre Franklin";
    font-size: 0.73vw; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.073vw; /* 1.4px */
    margin-top: 1.82vw; /* 35px */
}

#Name1 p {
    color: rgba(0, 0, 0, 0.50);
    font-family: "Libre Franklin";
    font-size: 0.625vw; /* 12px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0625vw; /* 1.2px */
}

#Name1 > input{
    width: 16.67vw; /* 320px */
    height: 2.4vw; /* 46px */
    background: #FFF7F3;
    margin-top: 0.78vw; /* 15px */
    border: none;
}

#Name2 > h3{
    color: #8D9386;
    font-family: "Libre Franklin";
    font-size: 0.73vw; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.073vw; /* 1.4px */
    margin-top: 1.82vw; /* 35px */
}


#Name2{
    margin-left: 0vw; /* 0px */

}

#Name2 p{
    color: rgba(0, 0, 0, 0.50);
    font-family: "Libre Franklin";
    font-size: 0.625vw; /* 12px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0625vw; /* 1.2px */
}

#Name2 > input{
    width: 16.67vw; /* 320px */
    height: 2.4vw; /* 46px */
    background: #FFF7F3;
    margin-top: 0.78vw; /* 15px */
    border: none;
}

#Email > h3{
    color: #8D9386;
    font-family: "Libre Franklin";
    font-size: 0.73vw; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.073vw; /* 1.4px */
    margin-top: 1.15vw; /* 22px */
}

#Email input{
    width: 35vw; /* 672px */
    height: 2.4vw; /* 46px */
    background: #FFF7F3;
    border: none;
    margin-top: 0.73vw; /* 14px */
}

#Email p {
    color: rgba(0, 0, 0, 0.50);
    font-family: "Libre Franklin";
    font-size: 0.625vw; /* 12px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0625vw; /* 1.2px */
    margin-top: 0.73vw; /* 14px */
}

#Type > h3{
    color: #8D9386;
    font-family: "Libre Franklin";
    font-size: 0.73vw; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.073vw; /* 1.4px */
    margin-top: 1.15vw; /* 22px */
}

#Type input{
    width: 35vw; /* 672px */
    height: 2.4vw; /* 46px */
    background: #FFF7F3;
    border: none;
    margin-top: 0.73vw; /* 14px */
}

#Type p{
    color: rgba(0, 0, 0, 0.50);
    font-family: "Libre Franklin";
    font-size: 0.625vw; /* 12px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0625vw; /* 1.2px */
    margin-top: 0.73vw; /* 14px */
}

#Message > h3{
    color: #8D9386;
    font-family: "Libre Franklin";
    font-size: 0.73vw; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.073vw; /* 1.4px */
    margin-top: 1.15vw; /* 22px */
}

#Message textarea{
    width: 35vw; /* 672px */
    height: 8.33vw; /* 160px */
    background: #FFF7F3;
    margin-top: 0.73vw; /* 14px */
    border: none;
}

#Message p {
    color: rgba(0, 0, 0, 0.50);
    font-family: "Libre Franklin";
    font-size: 0.625vw; /* 12px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0625vw; /* 1.2px */
}

#SendButton button{
    color: #212121;
    font-family: Inter;
    font-size: 0.73vw; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: auto 0;
    width: 14.64vw; /* 281px */
    height: 2.81vw; /* 54px */
    border-radius: 2.34vw; /* 45px */
    border: 0.052vw solid #BDAB8F; /* 1px */
    background: #FFF8F6;
    position: relative;
    margin-left: 9.9vw; /* 190px */
    margin-top: 1.56vw; /* 30px */
}

#ContactMeText{
    margin-left: 15.63vw; /* 300px */
    margin-top: 11.46vw; /* 220px */
}

#Photo1Contact{
    width: 25vw;
    height: auto;
}

#Photo2Contact{
    width: 25vw;
    height: auto;
}

.copyright, .credit {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 0.57vw; /* 11px */
    font-weight: 400;
    width: auto;
    height: 0.052vw; /* 1px / 0.1rem */
}

footer {
    background: #FFFBFB;
    padding: 0.52vw 0; /* 10px / 1rem */
    text-align: center;}

/* --- RESPONSIVE DESIGN CONTACT --- */

@media screen and (min-width: 1921px) {
  .main-photo > h1 {
    font-size: 120px;
    margin-left: 120px;
  }

  #ContactMeText {
    margin-left: 300px;
  }

  footer {
    margin-top: 100px;
  }
}

@media (max-width: 768px) {
  /* ZÁKLADNÍ ÚPRAVY A RESET */
  body {
    overflow-x: hidden;
  }

  /* NAVBAR - Responsive menu */
  .hamburger {
    display: flex !important;
  }

  #Links {
    display: none !important;
  }

  #ContactButton {
    display: none !important;
  }

  #SocialsAndLogo {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  #LOGO {
    margin-top: 0;
  }

  #LOGO img {
    max-width: 50px;
  }

  #Socials {
    display: none;
  }

  #ButtonText {
    font-size: 14px;
    margin-top: 0;
    color: white;
  }

  /* MAIN PHOTO */
  .main-photo {
    height: auto;
    padding: 40px 15px;
  }

  .main-photo > h3 {
    font-size: 14px;
  }

  .main-photo > h1 {
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 0;
    margin-top: 15px;
    text-align: center;
    width: 100%;
  }

  /* CONTACT ME CONTAINER */
  #ContactMeContainer {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 95%;
  }

  #ContactMeText {
    margin-left: 0;
    margin-top: 20px;
    text-align: center;
  }

  #ContactMe > h1 {
    font-size: 2rem;
  }

  #ContactMe > h3 {
    font-size: 14px;
  }

  #CenterLine {
    width: 100%;
  }

  #ContactMe > p {
    font-size: 13px;
    width: 100%;
  }

  #Names {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #Name1 > input,
  #Name2 > input {
    width: 100% !important;
    max-width: 300px;
  }

  #Email input,
  #Type input {
    width: 100% !important;
    max-width: 300px;
  }

  #Message textarea {
    width: 100% !important;
    max-width: 300px;
    height: 150px !important;
  }

  #SendButton button {
    width: 90% !important;
    margin: 1rem auto !important;
  }

  #ContactMePhotos {
    display: none;
  }

  /* FOOTER */
  footer {
    margin-top: 0.1px;
    padding: 10px 0;
  }

  .copyright, .credit {
    font-size: 10px;
    height: auto;
  }

  .credit {
    margin-top: -15px;
  }
}

@media screen and (max-width: 560px) {
  /* ZÁKLADNÍ ÚPRAVY A RESET */
  body {
    overflow-x: hidden;
  }

  /* NAVBAR - Hlava stránky */
  .hamburger {
    display: flex !important;
  }

  #Links {
    display: none !important;
  }

  #ContactButton {
    display: none !important;
  }

  #NavBar {
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
  }

  #SocialsAndLogo {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-left: 0;
    flex-direction: row;
  }

  #LOGO {
    margin-top: 0;
    max-width: 45px;
  }

  #LOGO img {
    max-width: 45px;
  }

  #Socials {
    display: none;
  }

  /* MAIN PHOTO */
  .main-photo {
    height: auto;
    padding: 30px 12px;
  }

  .main-photo > h3 {
    font-size: 12px;
  }

  .main-photo > h1 {
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 0;
    margin-top: 12px;
    text-align: center;
    width: 100%;
  }

  /* CONTACT ME CONTAINER */
  #ContactMeContainer {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 95%;
  }

  #ContactMeContainer>p
  {
    font-size: 15px;
  }

  #ContactMeText {
    margin-left: 0;
    margin-top: 15px;
    text-align: center;
  }

  #ContactMe > h1 {
    font-size: 3rem;
  }

  #ContactMe > h3 {
    font-size: 14px;
  }

  #CenterLine {
    width: 100%;
  }

  #ContactMe > p {
    font-size: 11px;
    width: 100%;
  }

  #Names {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #Form h3{
    font-size: 12px;
  }

  #Name1 > input,
  #Name2 > input {
    width: 100% !important;
    max-width: 350px;
    height: 40px;
  }

  #Email input,
  #Type input {
    width: 100% !important;
    max-width: 350px;
    height: 40px;
  }

  #Message textarea {
    width: 100% !important;
    max-width: 350px;
    height: 140px !important;
  }

  #SendButton button {
    width: 80% !important;
    margin: 0.8rem auto !important;
    max-width: 350px;
    height: 50px;
    font-size: 1rem;
  }

  #ContactMePhotos {
    display: none;
  }

  /* FOOTER */
  footer {
    margin-top: 0.1px;
    padding: 8px 0;
  }

  .copyright, .credit {
    font-size: 9px;
    height: auto;
  }

  .credit {
    margin-top: -12px;
  }
}

@media screen and (max-width: 992px) {
  .main-photo > h1 {
    font-size: 80px;
    margin-left: 2vw;
  }

  .main-photo > h3 {
    margin-left: 0;
  }

  #ContactMeText {
    margin-left: 2vw;
  }
}

@media screen and (max-width: 400px) {
  /* ZÁKLADNÍ ÚPRAVY A RESET */
  body {
    overflow-x: hidden;
  }

  /* NAVBAR - Hlava stránky */
  .hamburger {
    display: flex !important;
  }

  #Links {
    display: none !important;
  }

  #ContactButton {
    display: none !important;
  }

  #NavBar {
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
  }

  #SocialsAndLogo {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-left: 0;
    flex-direction: row;
  }

  #LOGO {
    margin-top: 0;
    max-width: 40px;
  }

  #LOGO img {
    max-width: 40px;
  }

  #Socials {
    display: none;
  }

  /* MAIN PHOTO */
  .main-photo {
    height: auto;
    padding: 20px 10px;
  }

  .main-photo > h3 {
    font-size: 10px;
  }

  .main-photo > h1 {
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 0;
    margin-top: 10px;
    text-align: center;
    width: 100%;
  }

  /* CONTACT ME CONTAINER */
  #ContactMeContainer {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 96%;
  }

  #ContactMeText {
    margin-left: 0;
    margin-top: 12px;
    text-align: center;
  }

  #ContactMe > h1 {
    font-size: 1.5rem;
  }

  #ContactMe > h3 {
    font-size: 10px;
  }

  #CenterLine {
    width: 100%;
  }

  #ContactMe > p {
    font-size: 10px;
    width: 100%;
  }

  #Names {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #Name1 > input,
  #Name2 > input {
    width: 100% !important;
    padding: 0.7rem !important;
    font-size: 16px !important;
  }

  #Email input,
  #Type input {
    width: 100% !important;
    padding: 0.7rem !important;
    font-size: 16px !important;
  }

  #Message textarea {
    width: 100% !important;
    padding: 0.7rem !important;
    height: 130px !important;
    font-size: 16px !important;
  }

  #SendButton button {
    width: 100% !important;
    padding: 0.9rem !important;
    font-size: 14px !important;
    margin: 0.8rem 0 !important;
  }

  #ContactMePhotos {
    display: none;
  }

  /* FOOTER */
  footer {
    margin-top: 15px;
    padding: 8px 0;
  }

  .copyright, .credit {
    font-size: 8px;
    height: auto;
  }

  .credit {
    margin-top: -6px;
  }
}

@media screen and (max-width: 560px) {
  /* Unifikovaný footer ze stránky MainPage pro malé zařízení */
  footer {
    margin-top: 0.1px !important;
    padding: 10px 0 !important;
  }
  .copyright, .credit {
    font-size: 10px !important;
    height: auto !important;
  }
  .credit {
    margin-top: -15px !important;
  }
}