@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


body{
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  font-family: 'Comfortaa', 'Roboto', sans-serif;
}



main{
flex: 1;
margin-top: 10vh;
width: 100%;
background-image: url(../img/marble.jpg);
background-size: cover;
}

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.button-wrapper{
    width: 100%;
    display: flex;
}

.button {
  margin-left: 20px;
  width: fit-content;
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: #1E1E1C; /* alap háttér */
  color: #FCD56C;           /* alap szöveg */
  overflow: hidden;
  transition: color 0.4s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.button::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: #FCD56C; /* hover háttér */
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 0;
}

.button span {
  position: relative;
  z-index: 1;
}

.button:hover {
  color: #1E1E1C; /* hover szöveg szín */
}

.button:hover::before {
  transform: translateX(0);
}



h2{
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  color: #1E1E1C;

}

.font-20px{
    font-size: 20px;
}

#tel{
  font-size: 16px;
  color: #edb827;
}


.content-text{
  font-size: 14px;
  color: #1E1E1C;
  margin-left: 20px;
  margin-bottom: 5px;
  margin-top: 0;
}

.container-content{
  width: 80%;
  max-width: 800px;
  background-color: rgb(255, 255, 252);
  display: flex;
  flex-direction: column;
  margin-top: 5vh;
  
}

.logo-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  background: #1E1E1C;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#container-logo{
  height: 100%;
}

.iframe-wrapper{
  display: flex;
  justify-content: center;
  width: 100%;
  
}

iframe{
  display: block;
  width: 90%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 12px;
  margin-bottom: 20px;
  margin-top: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#facebookLink{
  width: fit-content;
  display: flex;
  gap: 5px;
  margin-left: 20px;
}
#facebookLogo{
  width: 14px;
  height: 14px;
}
#facebookText{
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
  color: #1E1E1C;
}

#facebookText:hover{
  color:#edb827;
}



@media (max-width: 400px) {
  .button-wrapper{
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .button{
    margin-left: 0px;
  }
}