:root {
  --cor-texto: #111111;
  --cor-fundo: #ffffff;
  --cor-gradiente-1: #ff00ff;
  --cor-gradiente-2: #ffa500;
}

body {
  font-family: Poppins, sans-serif;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
}

h1,
h2 {
  font-family: "Playfair Display", serif;
  color: var(--cor-texto);
}

p {
  color: var(--cor-texto);
}

.navbar {
  background-color: rgba(255, 255, 255, 0.94);
}

#contador {
  background: linear-gradient(
    11deg,
    var(--cor-gradiente-1),
    var(--cor-gradiente-2) 80%
  );
}

.hero {
  background-image: url("../imagens/inicial.jpg");
  background-position:30% 35%;
 
  color: #ffffff;
  padding: 140px 20px;
}


.hero-logo {
  width: min(220px, 45vw);
}

.section {
  padding: 80px 20px;
}

.countdown span {
  display: block;
  font-size: 2rem;
  font-weight: 600;
}

.historia-texto p {
  text-align: justify;
  color: #4d4d4d;
}

.convite-imagem {
  width: min(80%, 540px);
}

footer {
  background: #111111;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.convite h2,
.convite p {
  color: #ffffff;
}
@media (max-width: 600px) {
  .hero {
    background-size: cover;
  }
}

.carousel-item img {
  height: 500px;
  object-fit: cover;
  width: 100%;
  }

  @media (max-width: 768px) {
  .carousel-item img {
    height: 300px;
    }
  }