body{
    overflow-x: hidden;
    
}

a{
    text-decoration: none !important;
}

a>p{
    text-decoration: none !important;
}

/* Počáteční stav: Průhledné a mírně posunuté dolů (nebo kamkoliv chcete) */
.reveal 
{
    opacity: 0;
    transform: translateY(1.04vw); /* 1.04vw */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Doba a typ animace */
    pointer-events: none; /* Prvek se nemůže interagovat, dokud není viditelný */
}
  
/* Koncový stav: Plně viditelné a na původní pozici */
.reveal.active 
{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto; /* Povolíme interakci, jakmile je viditelný */
}

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

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

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

#LOGO{
    margin-top: 1.4vw; /* 1.4vw */
    max-width: 2.604vw; /* 2.604vw */
}

#SocialsAndLogo{
    margin-left: 1.30vw; /* 1.30vw */
    display: flex;
}

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


#Socials>a{
    width: 2.6vw !important;
}

#ButtonText{
    font-family: Inter;
    color: white;
    margin-top: 1.3vw; /* 1.3vw */
    font-weight: bold;
    font-size: 1vw;
}

#ContactButton{
    margin-top: 1.30vw; /* 1.30vw */
    margin-right: 3.13vw; /* 3.13vw */
    width: 12.21vw; /* 12.21vw */
    height: 2.81vw; /* 2.81vw */
    background-color: #8D9386;
    border-radius: 2.34vw; /* 2.34vw */
    display: flex;
    justify-content: center;
    align-items: center;
}

#HelloDiv{
    width: 100%; /* 100% */
    height: 24.22vw; /* 24.22vw */
    flex-shrink: 0;
    background: #8D9386;
    position: absolute;}

#HelloDiv>div>h1{
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 3.91vw; /* 3.91vw */
    font-style: normal;
    font-weight: 400;
    line-height: 4.17vw; /* 4.17vw */
    margin-left: 25vw; /* 25vw */
    margin-top: 4.01vw; /* 4.01vw */
}

#HelloDiv>div>h2{
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 3.91vw; /* 3.91vw */
    font-style: normal;
    font-weight: 400;
    line-height: 4.17vw; /* 4.17vw */
    margin-left: 25vw; /* 25vw */

}

#HelloDiv>div>h3{
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 3.91vw; /* 3.91vw */
    font-style: normal;
    font-weight: 400;
    line-height: 4.17vw; /* 4.17vw */
    margin-left: 25vw; /* 25vw */
}

#HelloDiv>div>h4{
    color: #FFF;
    font-family: Cousine;
    font-size: 0.78vw; /* 0.78vw */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.078vw; /* 0.078vw */
    margin-top: 3.18vw; /* 3.18vw */
    margin-left: 25vw; /* 25vw */
}

#HelloDiv>img{
    transform: translateX(400%) translateY(-150%);
    width: 12vw;
}

#HowItBegan{
    display: flex;
    justify-content: center;
    position: relative;
}

#HowItBegan>img{
    
    width: 100%;
    height: auto;
    margin-top: 24.22vw; /* 465px */
    z-index: -2;
    position: absolute;
}

#HIBText>h1{
    color: #FFF7F3;
    font-family: "Instrument Serif";
    font-size: 7.29vw; /* 7.29vw */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: -0.52vw; /* -0.52vw */
}

#HIBText>h2{
    color: #FFF7F3;
    text-align: center;
    font-family: Cousine;
    font-size: 0.99vw; /* 0.99vw */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.088vw; /* 0.088vw */
    text-transform: uppercase;
    margin-top: 1.04vw; /* 1.04vw */
    margin-left: -2.60vw; /* -2.60vw */
}

#HIBText{
    margin-top: 30.21vw; /* 30.21vw */
    margin-right: 15.63vw; /* 15.63vw */
}

#HIBPara{
    display: flex;
    margin-top: 2.60vw; /* 2.60vw */
    margin-left: -1.56vw; /* -1.56vw */
}

#HIBText p{
    color: #FFF;
    text-align: justify;
    font-family: "Libre Franklin";
    font-size: 0.94vw; /* 0.94vw */
    font-style: normal;
    font-weight: 400;
    line-height: 1.04vw; /* 1.04vw */
    letter-spacing: 0.073vw; /* 0.073vw */
    width: 16.93vw; /* 16.93vw */
    height: 22.76vw; /* 22.76vw */
    flex-shrink: 0;
    margin-left: 1.56vw; /* 1.56vw */
}

#HIBButton{
    border-radius: 2.34vw; /* 2.34vw */
    background: rgba(189, 171, 143, 0.70);
    width: 14.64vw; /* 14.64vw */
    height: 2.81vw; /* 2.81vw */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 78.13vw; /* 78.13vw */
}

#HIBButton p{
    color: #FFF;
    font-family: Inter;
    font-size: 1.1vw; /* 0.94vw */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 2vw;
    margin-top: 0.8vw;
}

#HIBButton a {
    color: #FFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#HIBButton svg{
    margin-right: 2vw;
}

.copyright, .credit {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 0.57vw; /* 0.57vw */
    font-weight: 400;
    width: auto;
    height: 0.083vw; /* 0.083vw */
}
footer {
    background: #FFFBFB;
    padding: 0.83vw 0; /* 0.83vw */
    text-align: center;
    margin-top: 17vw; /* 17vw */}

/* --- RESPONSIVE DESIGN ABOUT --- */

/* RESPONSIVE DESIGN - 1921px a více */
@media screen and (min-width: 1921px) {

  body{
    overflow-x: hidden;
    width: 100%;
  }

  #NavBar{
    height: 5.21vw; /* 100px */
  }
  

  #HelloDiv {
    height: 24.22vw;
    
  }

  #HelloDiv > div > h1,
  #HelloDiv > div > h2,
  #HelloDiv > div > h3 {
    font-size: 3.906vw;
    margin-left: 25vw;
  }

  #HelloDiv > div > h4 {
    font-size: 0.781vw;
    margin-left: 25vw;
  }

  #HIBText > h1 {
    font-size: 7.292vw;
  }

  #HIBText > h2 {
    font-size: 0.99vw;
  }

  #HIBText p {
    font-size: 0.938vw;
  }

  #HIBButton {
    font-size: 0.938vw;
  }

  footer {
    margin-top: 18vw;
  }
}

/* RESPONSIVE DESIGN - 768px a méně */
@media (max-width: 768px) {
  /* ZÁKLADNÍ ÚPRAVY A RESET */
  body {
    overflow-x: hidden;
    width: 100%;
  }

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

  #NavBar{
    height: 10vw;
  }

  #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: 100px;
  }

  #Socials {
    display: none;
  }

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

  /* HELLO DIV */
  #HelloDiv {
    width: 100%;
    height: auto;
    padding: 20px 0;
    position: relative;
  }

  #HelloDiv > div {
    text-align: center;
  }

  #HelloText{
    margin-left: -5vw;
  }

  #HelloDiv > div > h1,
  #HelloDiv > div > h2,
  #HelloDiv > div > h3 {
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
    margin-left: -10vw;
    margin-top: 1px;
    text-align: center;
  }

  #HelloDiv > div > h4 {
    color: #FFF;
    font-family: Cousine;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.5px;
    margin-top: 15px;
    margin-left: 0;
    text-align: center;
  }

  #HelloDiv > img {
    transform: none;
    width: 150px;
    height: auto;
    display: block;
    margin: 15px auto;
  }

  /* HOW IT BEGAN */
  #HowItBegan {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  #HowItBegan > img {
    width: 100%;
    height: auto;
    margin-top: 0;
    position: static;
  }

  #HIBText {
    margin-top: 20px;
    margin-right: 0;
    padding: 20px;
    text-align: center;
  }

  #HIBText > h1 {
    color: #FFF7F3;
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }

  #HIBText > h2 {
    color: #FFF7F3;
    text-align: center;
    font-family: Cousine;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    margin-top: 15px;
    margin-left: 0;
  }

  #HIBPara {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    margin-left: 0;
  }

  #HIBText p {
    color: #FFF;
    text-align: justify;
    font-family: "Libre Franklin";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 1.4px;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    margin-left: 0;
    margin-bottom: 15px;
  }

  #HIBButton {
    border-radius: 45px;
    background: rgba(189, 171, 143, 0.70);
    width: 200px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px auto;
  }

  #HIBButton > p {
    color: #FFF;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    text-align: center;
  }

  #HIBButton a {
    color: #FFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  #HIBButton > svg {
    margin: 0;
  }

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

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

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

/* RESPONSIVE DESIGN - 560px a méně */
@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;
    margin-left: 0;
    margin-top: 0;
  }

  #Links {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    padding: 0;
  }

  #ContactButton {
    width: 80%;
    height: 2.083vw;
    margin: 0.521vw auto;
  }

  #ButtonText {
    font-size: 0.625vw;
    margin-top: 0;
    color: white;
  }

  /* HELLO DIV */
  #HelloDiv {
    width: 100%;
    height: auto;
    padding: 0.781vw 0;
    position: relative;
  }

  #HelloDiv > div {
    text-align: center;
  }

  #HelloDiv > div > h1,
  #HelloDiv > div > h2,
  #HelloDiv > div > h3 {
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 1.458vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.667vw;
    margin-left: 0;
    margin-top: 0.417vw;
    text-align: center;
  }

  #HelloDiv > div > h4 {
    color: #FFF;
    font-family: Cousine;
    font-size: 0.573vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.078vw;
    margin-top: 0.625vw;
    margin-left: 0;
    text-align: center;
  }

  #HelloDiv > img {
    transform: none;
    width: 6.25vw;
    height: auto;
    display: block;
    margin: 0.625vw auto;
  }

  /* HOW IT BEGAN */
  #HowItBegan {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  #HowItBegan > img {
    width: 100%;
    height: auto;
    margin-top: 0;
    position: static;
  }

  #HIBText {
    margin-top: 0.781vw;
    margin-right: 0;
    padding: 0.781vw;
    text-align: center;
  }

  #HIBText > h1 {
    color: #FFF7F3;
    font-family: "Instrument Serif";
    font-size: 1.667vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }

  #HIBText > h2 {
    color: #FFF7F3;
    text-align: center;
    font-family: Cousine;
    font-size: 0.625vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.089vw;
    text-transform: uppercase;
    margin-top: 0.625vw;
    margin-left: 0;
  }

  #HIBPara {
    display: flex;
    flex-direction: column;
    margin-top: 0.625vw;
    margin-left: 0;
  }

  #HIBText p {
    color: #FFF;
    text-align: justify;
    font-family: "Libre Franklin";
    font-size: 0.625vw;
    font-style: normal;
    font-weight: 400;
    line-height: 0.729vw;
    letter-spacing: 0.073vw;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    margin-left: 0;
    margin-bottom: 0.625vw;
  }

  #HIBButton {
    border-radius: 45px;
    background: rgba(189, 171, 143, 0.70);
    width: 9.375vw;
    height: 2.344vw;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.302vw auto;
  }

  #HIBButton > p {
    color: #FFF;
    font-family: Inter;
    font-size: 0.625vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    text-align: center;
  }

  #HIBButton a {
    color: #FFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  #HIBButton > svg {
    margin: 0;
  }

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

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

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

/* RESPONSIVE DESIGN - 992px a méně */
@media screen and (max-width: 992px) {
  html, body{
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }


  #HelloDiv {
    height: 28vw;
  }

  #HelloDiv > div > h1,
  #HelloDiv > div > h2,
  #HelloDiv > div > h3 {
    font-size: 50px;
    margin-left: 25vw;
  }

  #HelloDiv > img {
    width: 7.813vw;
    height: auto;
    margin-top: 5vw;
  }

  #HIBText{
    margin-top: 30vw;
    margin-left: 35vw;
  }

  #HIBText > h1 {
    font-size: 4.167vw;
    width: 50vw
  }

  #HIBText > h2 {
    font-size: 0.833vw;
  }

  #HIBButton {
    margin-right: 30vw;
  }

  #HIBButton>p{
    width: 3.646vw;
  }

  #HowItBegan>img{

  }

}

/* RESPONSIVE DESIGN - 400px a méně */
@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: 2.083vw;
    margin-left: 2vw;
  }

  #LOGO img {
    max-width: 2.083vw;
  }

  #Socials {
    margin-left: 0;
    margin-top: 0;
    display: none;
  }

  #ButtonText {
    font-size: 0.625vw;
    margin-top: 0;
    color: white;
  }

  /* HELLO DIV */
  #HelloDiv {
    width: 100%;
    height: auto;
    padding: 0.625vw 0;
    position: relative;
  }

  #HelloDiv > div {
    text-align: center;
  }

  #HelloDiv > div > h1,
  #HelloDiv > div > h2,
  #HelloDiv > div > h3 {
    color: #FFF;
    font-family: "Instrument Serif";
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.458vw;
    margin-left: 0;
    margin-top: 0.313vw;
    text-align: center;
  }

  #HelloDiv > div > h4 {
    color: #FFF;
    font-family: Cousine;
    font-size: 0.521vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.078vw;
    margin-top: 0.521vw;
    margin-left: 0;
    text-align: center;
  }

  #HelloDiv > img {
    transform: none;
    width: 5.208vw;
    height: auto;
    display: block;
    margin: 0.521vw auto;
  }

  /* HOW IT BEGAN */
  #HowItBegan {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  #HowItBegan > img {
    width: 100%;
    height: 150vw;
    margin-top: 0;
    position: static;
  }

  #HIBText {
    margin-top: -150vw;
    margin-right: 0;
    padding: 0.625vw;
    text-align: center;
    margin-left: 10vw;
    width: 80vw;
  }

  #HIBText > h1 {
    color: #FFF7F3;
    font-family: "Instrument Serif";
    font-size: 3.125vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    width: 100vw;
    margin-left: -13vw;
  }

  #HIBText > h2 {
    color: #FFF7F3;
    text-align: center;
    font-family: Cousine;
    font-size: 0.521vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.089vw;
    text-transform: uppercase;
    margin-top: 0.521vw;
    margin-left: 0;
  }

  #HIBPara {
    display: flex;
    flex-direction: column;
    margin-top: 0.521vw;
    margin-left: 0;
  }

  #HIBText p {
    color: #FFF;
    text-align: justify;
    font-family: "Libre Franklin";
    font-size: 0.573vw;
    font-style: normal;
    font-weight: 400;
    line-height: 0.677vw;
    letter-spacing: 0.073vw;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    margin-left: 0;
    margin-bottom: 0.521vw;
  }

  #HIBButton {
    border-radius: 45px;
    background: rgba(189, 171, 143, 0.70);
    width: 8.333vw;
    height: 2.083vw;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.042vw auto;
  }

  #HIBButton > p {
    color: #FFF;
    font-family: Inter;
    font-size: 0.573vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    text-align: center;
    width: 60%;
  }

  #HIBButton a {
    color: #FFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  #HIBButton > svg {
    margin: 0;
    width: 1.302vw;
    height: 1.302vw;
  }

  /* 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;
  }
}