@font-face {
  font-family: 'angelina';
  src:  url('../fonts/angelina.ttf') format('truetype');
}
@font-face {
  font-family: 'amsterdamThree';
  src: url('../fonts/amsterdam-three-slant-webfont.woff2') format('woff2'),
       url('../fonts/amsterdam-three-slant-webfont.woff') format('woff'),
       url('../fonts/amsterdam-three-slant.ttf') format('truetype');
}
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Arial', sans-serif;
  font-family: 'amsterdamThree', sans-serif;  /* El segundo valor es una fuente de respaldo en caso de que no se cargue amsterdamThree */

}

.hero {
  position: relative;
  text-align: center;
  padding: 15vh 0;
}

.slider {
  width: 40vh; /* vmin asegura que siempre sea un círculo */
  height: 40vh;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin: 0 auto; /* Centra horizontalmente */
  position: absolute; /* Absoluto para que se superpongan */
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0%); /* Centra el elemento */
  transition: opacity 2s; /* Transición de opacidad suave */
}

.title {
  font-size: 1em;
  color: white;
  text-align: center;
  text-shadow: 1px 2px black;
  span {
  font-size: 36px;
  background-color: white;
  padding: 0.5em 1em;
  border-radius: 10px;
};
  margin-bottom: -6vh;
  margin-top: 15px;
}

.sub-title {
  font-size: 3rem;
  color: white;
  text-shadow: 1px 3px black;
  text-align: center;
  margin-top: 14vh;
}

.footer-timer{
  display: flex;
  /* grid-column: 3; */
}
.timer-container {
  display: flex;
  margin: auto;
  color: white;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  background-color: #2c4c82;
  width: 300px;
  max-width: 60vw;
}

.timer-labels{
    display: flex;
    column-gap: 1.7em;
    font-size: 0.7em;
    text-shadow: 1px 1px black;
    font-family: cursive;
    margin-bottom: 7px;
}

 .timer-values {
  display: flex;
}

.timer-values span {
  height: 2em;
  font-size: 1.6rem;
  padding: 0em 0.5em;
  text-shadow: 1px 1px black;
}

.frases{
  font-size: 1.5rem;
  color: white;
  text-shadow: 1px 2px 3px black;
  text-align: center;
  font-family: 'angelina';
}

/* Estilos para el botón */
.circular-btn {
  /* top: 67vh; */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  transition: 0.3s;
  margin: 10px;
  cursor: pointer;
}

.whatsapp-btn {
  background-color: #16b451; /* Color de WhatsApp */
  color: white;
  font-size: 2rem !important;
  text-decoration-line: none;
  box-shadow: 0px 3px 8px black;
  /* position: absolute; */
  /* bottom: 20vh; */
}

.play-pause-btn {
  background-color: #8e0024; /* Color gris oscuro */
  color: white;
  font-size: 1.5rem;
  box-shadow: 0px 3px 8px black;
  position: relative;
  /* bottom: 20vh; */
  right: 0px;
}

.circular-btn:hover {
  opacity: 0.9;
}


/* Secciones de fotos */
.image-section {
  position: relative;
  height: 60vh; /* Ajusta según tus necesidades */
  overflow: hidden;
  font-family: 'angelina';
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.5s; /* Transición suave */
}

.image1 {background-image: url('../img1/lugares/imagen1.jpg'); }
.image2 { background-image: url('../img1/lugares/imagen2.jpg'); }
.image3 { background-image: url('../img1/lugares/imagen3.jpg'); }
.image4 { background-image: url('../img1/lugares/imagen4.jpg'); }
.image5 { background-image: url('../img1/mesa1.jpg'); }
.image6 { background-image: url('../img1/mesa2.jpg'); }

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(55, 0, 58, 0.4); /* Color rosa oscuro con 10% de opacidad */
}

.location-address {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 1px 2px 2px black;
  z-index: 5; /* Para que quede por encima del color-overlay */
  font-size: 2.5rem;
  width: 90vw;
  text-align: center;
}

.google-maps-btn {
  background: #9551c4;
  bottom: 20px;
  text-wrap: nowrap;
  /* width: 10rem; */
}
.calendario-btn {
  background: #2c4c82;
  bottom: 75px;
  /* text-align: center; */
}
.facebook-btn {
  background: #0039b0;
  bottom: 135px;
  color: white;
  text-decoration: none;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  text-wrap: nowrap;
}
.fab {
  /* font-size: 1.5rem; */
  /* margin-left: 10px; */
  /* font-family: inherit; */
}
.eventos-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 7px;
  box-shadow: 1px 1px black;
  color: white;
  z-index: 5; /* Para que quede por encima del color-overlay */
  font-size: 1.5em;
  text-align: center;
  font-family: 'angelina';
  text-wrap: nowrap;
}
.card-title{
  font-size: 2rem;
  color: white;
  text-shadow: 1px 2px 3px black;
  text-align: center;
  font-family: 'angelina';
}
.card {
  background-color: #69338e;
  color: white;
  padding: 20px;
  width: 80vw;
  box-shadow: 1px 2px 25px black;
  /* height: 74vh; */
  margin: auto; /* Este margen es solo para que debas hacer scroll para llegar al card. */
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.text-to-type {
  font-size: 1.8rem;
  white-space: nowrap; /* Asegura que el texto no se rompa en líneas */
  overflow: hidden;  /* Esconde el contenido que se desborda del contenedor */
  font-family: 'angelina';
  text-wrap: initial;
  text-align: initial;
  /* height: 60vh; */
}

iframe {
  width: 100%; /* Ocupar todo el ancho del card */
  height: 500px; /* Puedes ajustar esto según tus necesidades */
  border: none; /* Eliminar el borde del iframe */
}

.imagen-insta{
  margin: auto;
  max-width: 95%;
  width: 650px;
  height: 70%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 1px 2px 25px black;
}
.imagen-insta img1{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 1px 2px 25px black;
}
.img-instagram{
  background-image: url('../img1/instagram.jpg');
  background-size: cover;
  background-position: center;
}
.img-codedress{
  background-image: url('../img1/codedress.jpg');
  background-size: cover;
  background-position: center;
}
.texto-codedress{position: absolute;text-align: center;padding: 40px;padding-top: 90%;font-size: 2rem;font-family: 'angelina';font-weight: bold;color: white;text-shadow: 3px 1px 5px black;}