/* Importando uma fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

body html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-y: hidden; /* Remove a barra de rolagem vertical */
}

/* Estilo da seção parallax */
.parallax {
    background-image: url("/img/IMG-20230501-WA0021.jpg"); /* Substitua pela URL da sua imagem */
    height: 98vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Texto sobre a imagem de fundo */
.parallax-text {
    color: white; /* Define a cor do texto como branca, para contrastar com a imagem de fundo. */
    text-align: center; /* Centraliza o texto horizontalmente dentro do contêiner parallax-text. */
    position: absolute; /* Posiciona o contêiner de forma absoluta, para que ele possa ser colocado exatamente onde queremos na tela. */
    top: 50%; /* Move o contêiner para 50% da altura da tela (centralização vertical). */
    left: 50%; /* Move o contêiner para 50% da largura da tela (centralização horizontal). */
    transform: translate(-50%, -50%); /* Ajusta a posição para que o ponto central do contêiner seja centralizado exatamente no meio da tela. */
    font-family: 'Dancing Script', serif; /* Aplica a fonte personalizada "Dancing Script" para dar um estilo diferenciado ao texto. */
    font-size: 3em; /* Define o tamanho da fonte; ajuste conforme necessário */
    background-color: rgba(0, 0, 0, 0.0); /* Define a cor de fundo com uma transparência completa (invisível), mantendo a estrutura no layout sem uma cor de fundo visível. */
    padding: 20px; /* Adiciona um preenchimento de 20px ao redor do texto, criando um espaço interno para "afastar" o texto das bordas do contêiner. */
    border-radius: 8px; /* Arredonda levemente os cantos do contêiner, deixando-o com um visual mais suave. */
}

.parallax-text h1 {
    font-size: 2em; /* Tamanho específico para o h1 */
    color: #fdfdfd; /* Cor específica para o h1 */
    margin: 0; /* Remove margens padrão */
    padding-left: 700px; /* Empurra todo o conteúdo 20px para a direita */
    white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.parallax-text h2 {
    font-size: 1em; /* Tamanho específico para o h1 */
    color: #ffffff; /* Cor específica para o h1 */
    margin-bottom: 30px; /* Maior espaçamento abaixo do h1 */
    padding-left: 200px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.parallax-text p {
    font-size: 1em; /* Tamanho específico para o p */
    color: white; /* Cor específica para o p */
    margin-top: 15px; /* Maior espaçamento acima de cada p */
    padding-left: 180px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.parallax-text p:nth-of-type(2) {
    font-style: italic; /* Estilização apenas para o segundo p */
    color: #ffffff; /* Cor para o segundo p */
    margin-top: 10px; /* Menor espaçamento acima do segundo p */
    
}

.content-section {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente para legibilidade */
    background-image: url('/img/flower.png'); /* Substitua pelo caminho da sua imagem */
    background-size: cover; /* Cobre toda a área */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-attachment: fixed; /* A imagem fica fixa ao rolar */
    margin: 0px 0; /* Espaçamento entre seções */
    padding: 50px; /* Espaçamento interno das seções */
    border-radius: 0px; /* Bordas arredondadas */
    color: #000000; /* Cor do texto das seções (exemplo: cinza claro) */
    font-family: "Lora", serif; /* Fonte das seções (exemplo: Arial) */
    height: 230vw; /* Define uma altura fixa para a seção */
    display: flex; /* Define o modelo de layout Flexbox para a seção, permitindo que você alinhe os itens de forma mais fácil. */
    flex-direction: column; /* Organiza os filhos (o texto, no seu caso) em uma coluna. */
    align-items: center; /* Centraliza os itens horizontalmente dentro da seção. */
    justify-content: flex-start; /* Centraliza os itens verticalmente dentro da seção, se houver espaço extra. */
    text-align: center; /* Centraliza o texto dentro dos elementos, como <h1> e <p>. */
}

#countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    transform: translateY(0vw); /* Move todos os círculos 50px para baixo */
    margin-left: 0vw;
    font-family: 'Dancing Script', serif;
}

.circle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100px;
    height: 100px;
    margin-left: 2vw;
}

.circle svg {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: rotate(-90deg); /* Para o progresso começar do topo */
}

.circle circle {
    fill: none;
    stroke-width: 8;
    stroke: rgba(255, 255, 255, 0.2);
}

.circle svg circle:nth-child(2) {
    stroke: rgb(8, 8, 8); /* Cor do anel de progresso */
    stroke-dasharray: 283; /* Circunferência do círculo */
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 1s linear;
}

/* Ajustes para centralizar os números dentro do círculo */
.circle .time {
    position: absolute;
    top: 50%; /* 50% do tamanho do círculo */
    left: 50%; /* 50% do tamanho do círculo */
    transform: translate(-50%, -50%); /* Move o elemento 50% para cima e para a esquerda */
    font-size: 1.6em; /* Ajuste o tamanho da fonte conforme necessário */
    color: #ffffff;
    font-weight: normal;
}

.circle p {
    margin-top: 10px;
    font-size: 1.6em;
    color: #ffffff;
    transform: translateY(6vw);
    margin-left: 0vw; /* Ajuste o valor conforme necessário */
}

/* Ajustes para o parágrafo "Minutos" */
.circle .minutes-text {
    margin-top: 20px;  /* Ajusta o espaçamento superior */
    font-size: 1.6em;  /* Ajuste o tamanho da fonte para o parágrafo de minutos */
    color: #ffffff;
    text-align: center;
    transform: translateY(5.5vw);  /* Ajuste de posição vertical */
}

/* Ajustes para o parágrafo "Segundos" */
.circle .seconds-text {
    margin-top: 30px;  /* Ajusta o espaçamento superior */
    font-size: 1.6em;  /* Ajuste o tamanho da fonte para o parágrafo de segundos */
    color: #ffffff;
    text-align: center;
    transform: translateY(5vw);  /* Ajuste de posição vertical */
    margin-left: 0vw;
}

/* Barra horizontal no topo */
.content-section::before {
    content: ''; /* Não precisa de conteúdo, apenas para criar o estilo */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Largura total do contêiner */
    height: 13vw; /* Altura da barra */
    background-color: #000; /* Cor da barra (preto, você pode mudar) */
}


/*------------------------------------------------------------ Noivo e Noiva ----------------------------------------------------------------------*/
.titulo2 {
    position: absolute;
    color: rgb(255, 255, 255); /* Cor do texto para o primeiro título */
    font-size: 45px; /* Tamanho da fonte do primeiro título */
    font-family: 'Dancing Script', serif;
    margin-top: -2.5vw;
    z-index: 1;
}

.titulo1 {
    color: rgb(73, 71, 71); /* Cor do texto para o primeiro título */
    font-size: 45px; /* Tamanho da fonte do primeiro título */
    font-family: 'Dancing Script', serif;
    margin-top: 100px;
}

/*Imagem abaixo do titulo Noivo e Noiva*/
.img_titulo1 {
    width: 50px; /* ajuste o tamanho conforme necessário */
    height: auto; /* mantém a proporção da imagem */
    display: block;
    margin-top: -20px; /* espaçamento entre o texto e a imagem */
}

.imagens-container {
    display: flex;
    gap: 150px; /* espaço entre as imagens */
    justify-content: center; /* centraliza as imagens */
    margin-top: 20px; /* espaçamento entre o texto e as imagens */
}

/*Alinhamento do Texto abaixo da imagem do Noivo e Noiva*/
.imagem-titulo {
    text-align: center;
    overflow: auto; /* adiciona uma barra de rolagem se necessário */
}

.img_noivo, .img_noiva {
    width: 250px; /* ajuste o tamanho conforme necessário */
    height: 250px; /* define um contêiner quadrado */
    border-radius: 50%; /* torna o contêiner circular */
    object-fit: cover; /* garante que a imagem preencha o contêiner sem distorção */
    overflow: hidden; /* garante que partes fora do círculo sejam cortadas */
}

/*Titulo Alexandre Matozo Abaixo da Imagem*/
.imagem-titulo.noivo h1 {
    font-size: 34px; /* ajuste o tamanho conforme necessário */
    font-family: 'Dancing Script', serif; /* Fonte das seções (exemplo: Arial) */
    color: rgb(43, 42, 42); /* cor personalizada */
    margin-top: 20px; /* espaçamento entre a imagem e o nome */
}
/*Titulo Nathalia Matozo Abaixo da Imagem*/
.imagem-titulo.noiva h2 {
    font-size: 34px; /* ajuste o tamanho conforme necessário */
    font-family: 'Dancing Script', serif; /* Fonte das seções (exemplo: Arial) */
    color: rgb(43, 42, 42); /* cor personalizada */
    margin-top: 16px; /* espaçamento entre a imagem e o nome */
}

/* Estilos para os parágrafos */
.imagem-titulo p {
    font-size: 16px;
    font-family: "Lora", serif;
    color: gray;
    margin-top: 5px;
    white-space: normal; /* permite a quebra de linha automática */
    word-wrap: break-word; /* quebra palavras longas para evitar overflow */
}
/*--------------------------------------------Estilos para as imagens da Grid dos noivos-----------------------------------------------------------*/
.memories-section {
    text-align: center;
    margin: 150px 0;
    height: 50vw;
}

.memories-section h3 {
    font-size: 30px;
    font-family: 'Dancing Script', serif;
    margin-bottom: 20px; /* Ajuste conforme necessário */
}

.imagens-grid {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(3, 300px);
    gap: 10px;
}

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, border 0.3s ease;
    border: 2px solid transparent;
    backface-visibility: hidden; /* Oculta o lado de trás do item */
    perspective: 1000px; /* Melhora a renderização 3D */
}

.item:hover {
    transform: scale(1.1); /* Faz o item aumentar ligeiramente */
    z-index: 1; /* Garante que o item fique sobre os outros ao fazer hover */
    border: 2px solid #007BFF; /* Define a cor da borda ao fazer hover (exemplo: azul) */
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir o item completamente, mantendo a proporção */
}

/* Coloca o item com id=expandido2 na terceira coluna e expande para duas linhas */
#expandido2 {
    grid-row: 2 / span 2; /* Começa na segunda linha e ocupa duas linhas */
    grid-column: 3; /* Fica na terceira coluna */
}
/*--------------------------------------------------------------------------------------------------------------------*/
.content2 {
    width: 98.7vw; /* Set width to 100% of the viewport width */
    height: 40vw;
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente para legibilidade */
    background-image: url('/img/bg-2.png'); /* Substitua pelo caminho da sua imagem */
    background-size: cover; /* Cobre toda a área */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    /*background-attachment: fixed; /* A imagem fica fixa ao rolar */
    font-family: 'Dancing Script', serif;
    padding: 20px; /* Optional: Add padding for spacing */
    box-sizing: border-box; /* Ensure padding is included in the width */
    margin: 0vw; /* Reset margin to avoid overflow */
}

.content2 h1 {
    font-size: 4em; /* Tamanho específico para o h1 */
    color: #030303;
    margin: 5vw 5vw 0; /* Remova a margem inferior ou diminua para 0 */
}

.confirmation-form {
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente */
    padding: 20px; /* Espaçamento interno */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9); /* Sombra suave */
    width: 30vw; /* Largura do formulário */
    margin: 5vw auto; /* Centraliza horizontalmente */
    box-sizing: border-box;
    font-family: "Lora", serif;
}

.confirmation-form label {
    display: block; /* Alinha o label em uma linha separada */
    margin: 10px 0 5px; /* Espaço entre o label e o campo de entrada */
    font-weight: bold; /* Destaca o label */
}

.confirmation-form input[type="text"],
.confirmation-form input[type="tel"] {
    width: 100%; /* Largura total do contêiner */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.flex-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre a label principal e os botões de rádio */
}

.radio-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre os botões de rádio */
}


.confirmation-form button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 2vw;
}

.confirmation-form button:hover {
    background-color: #0056b3;
}

.modal {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo com transparência */
  }

  .modal-content {
    margin: 15% auto;
    border: 1px solid #888;
    width: 50%; /* Tamanho do modal */
    background-color: #fefefe; /* Cor de fundo */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px; /* Cantos arredondados (opcional) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 
                0 6px 20px rgba(0, 0, 0, 0.19); /* Sombra ao redor */
    text-align: center;
  }

  .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 0;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .img_tituloModal {
    width: 50px; /* ajuste o tamanho conforme necessário */
    height: auto; /* mantém a proporção da imagem */
    display: block;
    margin: 10px auto 0; /* margens superiores e inferiores ajustadas, centraliza horizontalmente */
}

.content3 {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente para legibilidade */
    background-image: url('/img/IMG-20230501-WA0042.jpg'); /* Substitua pelo caminho da sua imagem */
    background-size: cover; /* Cobre toda a área */
    background-position: top; /* Alinha a imagem no topo, cortando a parte inferior se necessário */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-attachment: fixed; /* A imagem fica fixa ao rolar */
    margin: 0vw 0; /* Espaçamento entre seções */
    padding: 50px; /* Espaçamento interno das seções */
    border-radius: 0px; /* Bordas arredondadas */
    color: #000000; /* Cor do texto das seções (exemplo: cinza claro) */
    font-family: 'Dancing Script', serif; /* Fonte das seções (exemplo: Arial) */
    width: 93.5vw; /* Define a largura como 95% da largura da viewport */
    height: 550px;
    display: flex; /* Define o modelo de layout Flexbox para a seção */
    flex-direction: column; /* Organiza os filhos em uma coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: flex-start; /* Alinha os itens verticalmente no início */
    text-align: center; /* Centraliza o texto dentro dos elementos */
}


.content3 h1 {
    font-size: 4em;
    color: #ffffff;
    margin: 0vw 0vw;
}

.content3 h2 {
    font-size: 2em;
    color: #ffffff;
    margin: 1vw 0vw;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 600px);
    grid-template-rows: repeat(1, 400px);
    gap: 0px; /* Remove o espaço entre os itens */
    background-color: white;
    position: relative;
    top: -200px;
    z-index: 1;
}

.grid .item {
    outline: none;
    border: none;
    box-shadow: none;
    display: flex; /* Ativa o Flexbox */
    flex-direction: column; /* Organiza os itens em uma coluna */
    justify-content: center; /* Alinha os itens no topo */
    align-items: center; /* Alinha os itens à esquerda */
    padding: 10px; /* Ajuste o espaçamento, se necessário */
}

/* Estilo específico para o item #local1 */
#local1 {
    font-family: 'Dancing Script', serif; /* Fonte para o item #local1 */
    font-size: 2em; /* Ajuste o tamanho da fonte */
    font-weight: bold; /* Fonte em negrito, se necessário */
    color: #333; /* Cor do texto */
}

#local2 {
    font-family: "Inter", sans-serif;
    font-size: 1.5em; /* Ajuste o tamanho da fonte */
    font-weight: bold; /* Fonte em negrito, se necessário */
    color: #6e6969; /* Cor do texto */
}

/* Desativa qualquer efeito de :hover e :focus */
.grid .item:hover,
.grid .item:focus {
    outline: none; /* Remove a borda azul ao focar */
    transform: none; /* Garante que o item não "salte" */
    box-shadow: none; /* Remove qualquer sombra que pode aparecer no hover */
}

/* Adiciona a linha vertical no centro da grid */
.grid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Posiciona a linha exatamente no meio */
    width: 2px; /* Espessura da linha */
    background-color: rgb(219, 163, 103); /* Cor da linha */
    z-index: 2;
}

/* Estilo para a linha abaixo do h1 */
.linha-horizontal {
    border: none; /* Remove as bordas padrão */
    border-top: 2px solid rgb(219, 163, 103); /* Define a cor e espessura da linha */
    width: 80%; /* Define a largura da linha */
    margin-top: -30px; /* Espaço entre o h1 e a linha */
}

/* Estilo para a imagem */
#local1 img {
    width: 4vw; /* Ajusta a largura da imagem para 50% da largura do contêiner */
    height: auto; /* Mantém a proporção da imagem */
    max-width: 400px; /* Limita a largura máxima da imagem */
}

/* Estilo para o botão flat */
.flat-button {
    background-color: transparent; /* Fundo transparente */
    border: none; /* Sem borda */
    color: #6e6969; /* Cor do texto */
    font-size: 1em; /* Tamanho da fonte */
    cursor: pointer; /* Indica que é clicável */
    text-decoration: underline; /* Linha abaixo do texto */
    padding: 10px 20px; /* Espaçamento interno */
    transition: all 0.3s ease; /* Efeito suave de transição */
    display: flex; /* Usando flexbox */
    align-items: center; /* Alinha o conteúdo no centro verticalmente */
}

/* Define o tamanho e posicionamento de ambas as imagens */
.flat-button img {
    width: 20px; /* Tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Espaço entre a imagem e o texto */
    position: absolute; /* Ambas as imagens ocupam o mesmo espaço */
    top: 13.5vw; /* Alinha ambos os ícones no topo */
    left: 9.5vw; /* Alinha ambos os ícones à esquerda */
}

/* Efeito ao passar o mouse */
.flat-button:hover {
    color: rgb(219, 163, 103); /* Cor do texto ao passar o mouse */
    text-decoration: none; /* Remove o sublinhado ao passar o mouse */
}

/* Exibe a imagem do ícone1, que ficará por cima do ícone2 */
.flat-button .button-icon {
    z-index: 2; /* Fica acima do ícone2 */
}

/* Esconde a segunda imagem inicialmente */
.flat-button .button-icon2 {
    opacity: 0;
    visibility: hidden; /* Oculta a imagem sem removê-la do fluxo */
    transition: opacity 0.3s ease, visibility 0s 0.3s; /* Efeito suave */
}

/* Exibe a segunda imagem e esconde a primeira ao passar o mouse */
.flat-button:hover .button-icon {
    opacity: 0;
    visibility: hidden; /* Oculta o ícone1 */
    transition: opacity 0.3s ease, visibility 0s 0.3s; /* Efeito suave */
}

.flat-button:hover .button-icon2 {
    opacity: 1;
    visibility: visible; /* Exibe o ícone2 */
    transition: opacity 0.3s ease, visibility 0s 0s; /* Efeito suave */
    z-index: 1; /* Coloca o ícone2 abaixo do ícone1 */
}

/*---------------------------------------------------------------------------------------------------------------------------*/
.content4 {
    position: relative;
    z-index: -1;
    background-color: #ffffff; /* Fundo branco opaco */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: -21vw 0;
    padding: 50px;
    border-radius: 0px;
    color: #000000;
    font-family: 'Dancing Script', serif;
    width: 91.5vw;
    height: 55vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.img_end {
    width: 500px; /* Ajuste o tamanho da imagem conforme necessário */
    height: 500px; /* Para garantir que a imagem fique circular, mantenha altura e largura iguais */
    border-radius: 50%; /* Faz a imagem ficar circular */
    object-fit: cover; /* Garante que a imagem se encaixe dentro do círculo sem distorção */
    margin-top: 10vw;
}

.content4 h1{
    font-family: 'Dancing Script', serif; /* Fonte para o item #local1 */
    font-size: 4em; /* Ajuste o tamanho da fonte */
    font-weight: bold; /* Fonte em negrito, se necessário */
    color: #4e4a4a;
}

.footer {
    position: absolute;
    bottom: -6.5vw;
    left: 0;
    width: 98.3%; /* Faz o rodapé ocupar toda a largura */
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
}

@media (max-width: 720px) {

    .parallax {
        background-image: url("/img/IMG-20230501-WA0021.jpg"); /* Imagem de fundo para telas menores */
        background-size: cover; /* Ajusta a imagem para cobrir todo o espaço */
        background-position: left; /* Centraliza a imagem de fundo */
        height: 192vw;
    }

    .parallax-text {
        position: absolute; /* Permite que o texto seja posicionado em relação à parallax */
        top: 20%; /* Alinha verticalmente ao centro */
        left: 50%; /* Alinha horizontalmente ao centro */
        transform: translate(-50%, -50%); /* Ajusta para que o texto fique centralizado */
    }

    .parallax-text h1 {
        font-size: 10vw; /* Tamanho específico para o h1 */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        margin-bottom: 30px;
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }

    .parallax-text h2 {
        font-size: 5vw; /* Diminui o tamanho da fonte do h2 */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        margin-bottom: 30px;
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }

    .parallax-text p {
        font-size: 5vw; /* Mantém o tamanho da fonte do p */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }
    .content-section {
        position: relative;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente para legibilidade */
        background-image: url('/img/flower.png'); /* Substitua pelo caminho da sua imagem */
        background-size: cover; /* Cobre toda a área */
        background-position: center; /* Centraliza a imagem */
        background-repeat: no-repeat; /* Evita repetição da imagem */
        background-attachment: fixed; /* A imagem fica fixa ao rolar */
        border-radius: 0; /* Bordas arredondadas */
        color: #000000; /* Cor do texto das seções */
        font-family: "Lora", serif; /* Fonte das seções */
        height: 1350vw; /* Permite que aumente se o conteúdo for maior */
        display: flex; /* Define o modelo de layout Flexbox para a seção */
        flex-direction: column; /* Organiza os filhos em uma coluna */
        align-items: center; /* Centraliza os itens horizontalmente */
        justify-content: flex-start; /* Alinha os itens no topo da seção */
        text-align: center; /* Centraliza o texto dentro dos elementos */
    }

    .content-section::before {
        height: 45vw; /* Reduz a altura da barra para telas menores */
    }

    .content-section {
        height: 12vw; /* Altura reduzida para telas menores */
    }

    #countdown {
        gap: 10vw; /* Reduz o espaço entre os círculos */
        margin-top: 5vw;
    }

    .circle {
        width: 7vw; /* Ajusta largura proporcional à tela */
        height: 7vw; /* Ajusta altura proporcional à tela */
        margin: 0 3vw; /* Reduz espaçamento entre os círculos */
    }
    
    .circle svg {
        width: 70px; /* Reduz tamanho do círculo */
        height: 70px;
    }

    .circle svg circle:nth-child(2) {
        stroke-dasharray: 220; /* Ajusta circunferência */
        stroke-dashoffset: 220;
    }

    .circle .time {
        font-size: 0.8em; /* Ajusta tamanho do texto */
        margin-top: 5vw;
    }

    .circle p, 
    .circle .minutes-text, 
    .circle .seconds-text {
        font-size: 0.6em; /* Ajusta tamanho do texto dos parágrafos */
        margin-top: 6vw;
    }

    .titulo2 {
        margin-top: -10vw; /* Ajusta o espaçamento superior */
        font-size: 1.8em; /* Tamanho da fonte do primeiro título */
        font-family: 'Dancing Script', serif;
    }

    .titulo1 {
        margin-top: 35vw; /* Ajusta o espaçamento superior */
        font-size: 10vw; /* Tamanho da fonte do primeiro título */
        font-family: 'Dancing Script', serif;
    }

    .img_titulo1 {
        width: 10vw; /* Diminui o tamanho da imagem do título */
        margin-top: -5vw; /* Ajusta o espaçamento entre o texto e a imagem */
    }

    .imagens-container {
        flex-direction: column; /* Muda a direção para coluna para melhor disposição em telas menores */
        gap: 10vw; /* Diminui o espaço entre as imagens */
    }

    .imagem-titulo {
        margin-bottom: 10vw; /* Adiciona margem inferior para espaço entre os itens */
    }

    .img_noivo, .img_noiva {
        width: 50vw; /* Diminui o tamanho das imagens do noivo e da noiva */
        height: 50vw; /* Mantém a proporção */
        margin-top: 10vw;
        margin-bottom: 0vw;
    }

    .imagem-titulo.noivo h1, 
    .imagem-titulo.noiva h2 {
        font-size: 8vw; /* Diminui o tamanho do texto dos títulos */
    }

/* Estilos para os parágrafos */
.imagem-titulo p {
    font-size: 4vw;
    font-family: "Lora", serif;
    color: gray;
    margin-top: 5px;
    white-space: normal; /* permite a quebra de linha automática */
    word-wrap: break-word; /* quebra palavras longas para evitar overflow */
}

    .memories-section {
        height: 680vw;
        margin: 0vw 0; /* Diminui ainda mais a margem em telas pequenas */
    }

    .memories-section h3 {
        font-size: 10vw; /* Diminui o tamanho do título */
        margin-top: 0px;
        margin-bottom: 7vw;
        
    }
    
    .imagens-grid {
        display: flex; /* Ativa o layout Flexbox */
        flex-direction: column; /* Alinha os itens verticalmente */
        gap: 10px; /* Espaço entre os itens */
    }
    
    .item {
        width: 100vw; /* Faz com que cada item ocupe a largura total disponível */
    }

    #expandido2 {
        grid-row: auto; /* Remove a expansão */
        grid-column: auto;
    }

    .item:hover {
        transform: none; /* Remove o aumento */
        border: 2px solid transparent; /* Remove a borda ao fazer hover */
    }

    .content2 {
        width: 100vw; /* Ajusta a largura para telas menores */
        height: auto; /* Permite que o conteúdo determine a altura */
        padding: 15px; /* Reduz o padding para economizar espaço */
    }

    .content2 h1 {
        font-size: 3em; /* Reduz o tamanho da fonte do h1 */
        margin: 3vw; /* Margem mais reduzida para evitar excesso de espaço */
    }

    .confirmation-form {
        width: 80vw; /* Ajusta a largura para 80% da tela */
        margin: 4vw auto; /* Centraliza com uma margem menor */
        padding: 15px; /* Reduz o padding interno */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
    }

    .confirmation-form input[type="text"],
    .confirmation-form input[type="tel"] {
        padding: 8px; /* Reduz o padding para campos menores */
    }

    .confirmation-form button {
        padding: 8px 16px; /* Botão menor para combinar com o tamanho da tela */
        margin: 3vw 0; /* Ajusta a margem para que o botão não fique muito espaçado */
    }

    .flex-container, .radio-group {
        gap: 5px; /* Reduz o espaçamento entre os elementos no layout flex */
    }

    .modal-content {
        width: 70%; /* Ajusta o tamanho do modal para 70% da largura da tela */
        margin-top: 50vw;
    }
/*-----------------------------------------Content3-------------------------------------------------------*/
    /* Estilos responsivos para .content3 */
    .content3 {
        padding: 20px; /* Ajusta o padding para telas menores */
        width: 90vw; /* Define a largura para ocupar quase a tela inteira */
        height: 142vw; /* Permite que a altura seja dinâmica */
    }

    .content3 h1 {
        font-size: 10vw; /* Ajuste do tamanho da fonte para se adequar à tela */
    }

    .content3 h2 {
        font-size: 5vw; /* Ajuste do tamanho da fonte */
    }
/*-----------------------------------------------------------------------------------------------------------------------*/
    .grid {
        grid-template-columns: 1fr; /* Alinha os itens em uma única coluna */
        grid-template-rows: auto; /* Permite que a altura das linhas seja ajustada automaticamente */
        gap: 10px; /* Ajuste o espaçamento entre os itens */
        transform: translateY(49vw);
        height: 100vw;
    }

    .grid::before {
        display: none; /* Remove a linha vertical em telas menores */
    }

    .grid .item {
        padding: 6px; /* Reduz o espaçamento interno */
    }

    #local1 {
        font-size: 1.2em; /* Reduz o tamanho da fonte */
    }

    #local2 {
        font-size: 1.2em; /* Reduz o tamanho da fonte */
    }

    /* Estilo para a imagem */
    #local1 img {
        width: 20vw; /* Ajusta a largura da imagem para 50% da largura do contêiner */
        height: auto; /* Mantém a proporção da imagem */
        max-width: 400px; /* Limita a largura máxima da imagem */
    }
        .flat-button {
        font-size: 0.9em; /* Ajusta o tamanho da fonte */
        padding: 5px 10px; /* Reduz o espaçamento interno */
    }

    .flat-button img {
        width: 15px; /* Reduz o tamanho da imagem */
        top: 34.2vw; /* Ajusta o posicionamento vertical */
        left: 28vw; /* Ajusta o posicionamento horizontal */
    }

    .flat-button .button-icon2 {
        top: 34.2vw; /* Ajusta o posicionamento vertical */
        left: 28vw; /* Ajusta o posicionamento do ícone */
    }
/*---------------------------------------------------------------------------------------------------------------*/

.content4 {
    margin: 0vw 0; /* Margem padrão */
    padding: 30px;
    width: 90vw;
    height: 600vw;
    transform: translateY(-2.2vw); /* Move o elemento 20px para cima, ajuste conforme necessário */
}

    .img_end {
        width: 300px; /* Reduz o tamanho da imagem para se adaptar melhor a telas menores */
        height: 300px; /* Mantém a imagem circular */
        margin-top: 5vw; /* Ajusta o espaçamento superior */
    }

    .content4 h1 {
        font-size: 2.5em; /* Reduz o tamanho da fonte do título */
    }

    .footer {
        width: 100vw; /* Ocupa toda a largura da página */
        height: 17%; /* Altura definida */
        background-color: #333; /* Cor de fundo escura */
        color: #fff; /* Cor do texto */
        display: flex; /* Ativa o Flexbox */
        align-items: center; /* Centraliza verticalmente */
        justify-content: center; /* Centraliza horizontalmente */
        text-align: center; /* Garante o alinhamento do texto */
        font-size: 14px; /* Tamanho da fonte */
        padding: 10px; /* Espaçamento interno */
        position: relative; /* Removi margens ou offsets desnecessários */
        margin: 0; /* Ajusta margens para evitar erros visuais */
    }
    

}

@media (max-width: 1020px) {

    .parallax {
        background-image: url("/img/kristall164.jpg"); /* Imagem de fundo para telas menores */
        background-size: cover; /* Ajusta a imagem para cobrir todo o espaço */
        background-position: left; /* Centraliza a imagem de fundo */
        height: 192vw;
    }

    .parallax-text {
        position: absolute; /* Permite que o texto seja posicionado em relação à parallax */
        top: 20%; /* Alinha verticalmente ao centro */
        left: 50%; /* Alinha horizontalmente ao centro */
        transform: translate(-50%, -50%); /* Ajusta para que o texto fique centralizado */
    }

    .parallax-text h1 {
        font-size: 10vw; /* Tamanho específico para o h1 */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        margin-bottom: 30px;
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }

    .parallax-text h2 {
        font-size: 5vw; /* Diminui o tamanho da fonte do h2 */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        margin-bottom: 30px;
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }

    .parallax-text p {
        font-size: 5vw; /* Mantém o tamanho da fonte do p */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }
    .content-section {
        position: relative;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente para legibilidade */
        background-image: url('/img/flower.png'); /* Substitua pelo caminho da sua imagem */
        background-size: cover; /* Cobre toda a área */
        background-position: center; /* Centraliza a imagem */
        background-repeat: no-repeat; /* Evita repetição da imagem */
        background-attachment: fixed; /* A imagem fica fixa ao rolar */
        border-radius: 0; /* Bordas arredondadas */
        color: #000000; /* Cor do texto das seções */
        font-family: "Lora", serif; /* Fonte das seções */
        height: 1350vw; /* Permite que aumente se o conteúdo for maior */
        display: flex; /* Define o modelo de layout Flexbox para a seção */
        flex-direction: column; /* Organiza os filhos em uma coluna */
        align-items: center; /* Centraliza os itens horizontalmente */
        justify-content: flex-start; /* Alinha os itens no topo da seção */
        text-align: center; /* Centraliza o texto dentro dos elementos */
    }

    .content-section::before {
        height: 45vw; /* Reduz a altura da barra para telas menores */
    }

    .content-section {
        height: 12vw; /* Altura reduzida para telas menores */
    }

    #countdown {
        gap: 10vw; /* Reduz o espaço entre os círculos */
        margin-top: 5vw;
    }

    .circle {
        width: 7vw; /* Ajusta largura proporcional à tela */
        height: 7vw; /* Ajusta altura proporcional à tela */
        margin: 0 3vw; /* Reduz espaçamento entre os círculos */
    }
    
    .circle svg {
        width: 70px; /* Reduz tamanho do círculo */
        height: 70px;
    }

    .circle svg circle:nth-child(2) {
        stroke-dasharray: 220; /* Ajusta circunferência */
        stroke-dashoffset: 220;
    }

    .circle .time {
        font-size: 0.8em; /* Ajusta tamanho do texto */
        margin-top: 5vw;
    }

    .circle p, 
    .circle .minutes-text, 
    .circle .seconds-text {
        font-size: 0.6em; /* Ajusta tamanho do texto dos parágrafos */
        margin-top: 6vw;
    }

    .titulo2 {
        margin-top: -10vw; /* Ajusta o espaçamento superior */
        font-size: 1.8em; /* Tamanho da fonte do primeiro título */
        font-family: 'Dancing Script', serif;
    }

    .titulo1 {
        margin-top: 35vw; /* Ajusta o espaçamento superior */
        font-size: 10vw; /* Tamanho da fonte do primeiro título */
        font-family: 'Dancing Script', serif;
    }

    .img_titulo1 {
        width: 10vw; /* Diminui o tamanho da imagem do título */
        margin-top: -5vw; /* Ajusta o espaçamento entre o texto e a imagem */
    }

    .imagens-container {
        flex-direction: column; /* Muda a direção para coluna para melhor disposição em telas menores */
        gap: 10vw; /* Diminui o espaço entre as imagens */
    }

    .imagem-titulo {
        margin-bottom: 10vw; /* Adiciona margem inferior para espaço entre os itens */
    }

    .img_noivo, .img_noiva {
        width: 50vw; /* Diminui o tamanho das imagens do noivo e da noiva */
        height: 50vw; /* Mantém a proporção */
        margin-top: 10vw;
        margin-bottom: 0vw;
    }

    .imagem-titulo.noivo h1, 
    .imagem-titulo.noiva h2 {
        font-size: 8vw; /* Diminui o tamanho do texto dos títulos */
    }

/* Estilos para os parágrafos */
.imagem-titulo p {
    font-size: 4vw;
    font-family: "Lora", serif;
    color: gray;
    margin-top: 5px;
    white-space: normal; /* permite a quebra de linha automática */
    word-wrap: break-word; /* quebra palavras longas para evitar overflow */
}

    .memories-section {
        height: 680vw;
        margin: 0vw 0; /* Diminui ainda mais a margem em telas pequenas */
    }

    .memories-section h3 {
        font-size: 10vw; /* Diminui o tamanho do título */
        margin-top: 0px;
        margin-bottom: 7vw;
        
    }
    
    .imagens-grid {
        display: flex; /* Ativa o layout Flexbox */
        flex-direction: column; /* Alinha os itens verticalmente */
        gap: 10px; /* Espaço entre os itens */
    }
    
    .item {
        width: 100vw; /* Faz com que cada item ocupe a largura total disponível */
    }

    #expandido2 {
        grid-row: auto; /* Remove a expansão */
        grid-column: auto;
    }

    .item:hover {
        transform: none; /* Remove o aumento */
        border: 2px solid transparent; /* Remove a borda ao fazer hover */
    }

    .content2 {
        width: 100vw; /* Ajusta a largura para telas menores */
        height: auto; /* Permite que o conteúdo determine a altura */
        padding: 15px; /* Reduz o padding para economizar espaço */
    }

    .content2 h1 {
        font-size: 3em; /* Reduz o tamanho da fonte do h1 */
        margin: 3vw; /* Margem mais reduzida para evitar excesso de espaço */
    }

    .confirmation-form {
        width: 80vw; /* Ajusta a largura para 80% da tela */
        margin: 4vw auto; /* Centraliza com uma margem menor */
        padding: 15px; /* Reduz o padding interno */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
    }

    .confirmation-form input[type="text"],
    .confirmation-form input[type="tel"] {
        padding: 8px; /* Reduz o padding para campos menores */
    }

    .confirmation-form button {
        padding: 8px 16px; /* Botão menor para combinar com o tamanho da tela */
        margin: 3vw 0; /* Ajusta a margem para que o botão não fique muito espaçado */
    }

    .flex-container, .radio-group {
        gap: 5px; /* Reduz o espaçamento entre os elementos no layout flex */
    }

    .modal-content {
        width: 70%; /* Ajusta o tamanho do modal para 70% da largura da tela */
        margin-top: 50vw;
    }
/*-----------------------------------------Content3-------------------------------------------------------*/
    /* Estilos responsivos para .content3 */
    .content3 {
        padding: 20px; /* Ajusta o padding para telas menores */
        width: 90vw; /* Define a largura para ocupar quase a tela inteira */
        height: 142vw; /* Permite que a altura seja dinâmica */
    }

    .content3 h1 {
        font-size: 10vw; /* Ajuste do tamanho da fonte para se adequar à tela */
    }

    .content3 h2 {
        font-size: 5vw; /* Ajuste do tamanho da fonte */
    }
/*-----------------------------------------------------------------------------------------------------------------------*/
    .grid {
        grid-template-columns: 1fr; /* Alinha os itens em uma única coluna */
        grid-template-rows: auto; /* Permite que a altura das linhas seja ajustada automaticamente */
        gap: 10px; /* Ajuste o espaçamento entre os itens */
        transform: translateY(49vw);
        height: 100vw;
    }

    .grid::before {
        display: none; /* Remove a linha vertical em telas menores */
    }

    .grid .item {
        padding: 6px; /* Reduz o espaçamento interno */
    }

    #local1 {
        font-size: 1.2em; /* Reduz o tamanho da fonte */
    }

    #local2 {
        font-size: 1.2em; /* Reduz o tamanho da fonte */
    }

    /* Estilo para a imagem */
    #local1 img {
        width: 20vw; /* Ajusta a largura da imagem para 50% da largura do contêiner */
        height: auto; /* Mantém a proporção da imagem */
        max-width: 400px; /* Limita a largura máxima da imagem */
    }
        .flat-button {
        font-size: 0.9em; /* Ajusta o tamanho da fonte */
        padding: 5px 10px; /* Reduz o espaçamento interno */
    }

    .flat-button img {
        width: 15px; /* Reduz o tamanho da imagem */
        top: 34.2vw; /* Ajusta o posicionamento vertical */
        left: 28vw; /* Ajusta o posicionamento horizontal */
    }

    .flat-button .button-icon2 {
        top: 34.2vw; /* Ajusta o posicionamento vertical */
        left: 28vw; /* Ajusta o posicionamento do ícone */
    }
/*---------------------------------------------------------------------------------------------------------------*/

.content4 {
    margin: 0vw 0; /* Margem padrão */
    padding: 30px;
    width: 90vw;
    height: 600vw;
    transform: translateY(-2.2vw); /* Move o elemento 20px para cima, ajuste conforme necessário */
}

    .img_end {
        width: 300px; /* Reduz o tamanho da imagem para se adaptar melhor a telas menores */
        height: 300px; /* Mantém a imagem circular */
        margin-top: 5vw; /* Ajusta o espaçamento superior */
    }

    .content4 h1 {
        font-size: 2.5em; /* Reduz o tamanho da fonte do título */
    }

    .footer {
        width: 100vw; /* Ocupa toda a largura da página */
        height: 17%; /* Altura definida */
        background-color: #333; /* Cor de fundo escura */
        color: #fff; /* Cor do texto */
        display: flex; /* Ativa o Flexbox */
        align-items: center; /* Centraliza verticalmente */
        justify-content: center; /* Centraliza horizontalmente */
        text-align: center; /* Garante o alinhamento do texto */
        font-size: 14px; /* Tamanho da fonte */
        padding: 10px; /* Espaçamento interno */
        position: relative; /* Removi margens ou offsets desnecessários */
        margin: 0; /* Ajusta margens para evitar erros visuais */
    }
    

}

@media (max-width: 1080px) {

    .parallax {
        background-image: url("/img/IMG-20230501-WA0021.jpg"); /* Imagem de fundo para telas menores */
        background-size: cover; /* Ajusta a imagem para cobrir todo o espaço */
        background-position: left; /* Centraliza a imagem de fundo */
        height: 192vw;
    }

    .parallax-text {
        position: absolute; /* Permite que o texto seja posicionado em relação à parallax */
        top: 20%; /* Alinha verticalmente ao centro */
        left: 50%; /* Alinha horizontalmente ao centro */
        transform: translate(-50%, -50%); /* Ajusta para que o texto fique centralizado */
    }

    .parallax-text h1 {
        font-size: 10vw; /* Tamanho específico para o h1 */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        margin-bottom: 30px;
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }

    .parallax-text h2 {
        font-size: 5vw; /* Diminui o tamanho da fonte do h2 */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        margin-bottom: 30px;
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }

    .parallax-text p {
        font-size: 5vw; /* Mantém o tamanho da fonte do p */
        color: #fdfdfd; /* Cor específica para o h1 */
        margin: 0; /* Remove margens padrão */
        padding-left: 0px; /* Empurra todo o conteúdo 20px para a direita */
        white-space: nowrap; /* Impede quebra de linha dentro do h1 */
    }
    .content-section {
        position: relative;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente para legibilidade */
        background-image: url('/img/flower.png'); /* Substitua pelo caminho da sua imagem */
        background-size: cover; /* Cobre toda a área */
        background-position: center; /* Centraliza a imagem */
        background-repeat: no-repeat; /* Evita repetição da imagem */
        background-attachment: fixed; /* A imagem fica fixa ao rolar */
        border-radius: 0; /* Bordas arredondadas */
        color: #000000; /* Cor do texto das seções */
        font-family: "Lora", serif; /* Fonte das seções */
        height: 1350vw; /* Permite que aumente se o conteúdo for maior */
        display: flex; /* Define o modelo de layout Flexbox para a seção */
        flex-direction: column; /* Organiza os filhos em uma coluna */
        align-items: center; /* Centraliza os itens horizontalmente */
        justify-content: flex-start; /* Alinha os itens no topo da seção */
        text-align: center; /* Centraliza o texto dentro dos elementos */
    }

    .content-section::before {
        height: 45vw; /* Reduz a altura da barra para telas menores */
    }

    .content-section {
        height: 12vw; /* Altura reduzida para telas menores */
    }

    #countdown {
        gap: 10vw; /* Reduz o espaço entre os círculos */
        margin-top: 5vw;
    }

    .circle {
        width: 7vw; /* Ajusta largura proporcional à tela */
        height: 7vw; /* Ajusta altura proporcional à tela */
        margin: 0 3vw; /* Reduz espaçamento entre os círculos */
    }
    
    .circle svg {
        width: 70px; /* Reduz tamanho do círculo */
        height: 70px;
    }

    .circle svg circle:nth-child(2) {
        stroke-dasharray: 220; /* Ajusta circunferência */
        stroke-dashoffset: 220;
    }

    .circle .time {
        font-size: 0.8em; /* Ajusta tamanho do texto */
        margin-top: 5vw;
    }

    .circle p, 
    .circle .minutes-text, 
    .circle .seconds-text {
        font-size: 0.6em; /* Ajusta tamanho do texto dos parágrafos */
        margin-top: 6vw;
    }

    .titulo2 {
        margin-top: -10vw; /* Ajusta o espaçamento superior */
        font-size: 1.8em; /* Tamanho da fonte do primeiro título */
        font-family: 'Dancing Script', serif;
    }

    .titulo1 {
        margin-top: 35vw; /* Ajusta o espaçamento superior */
        font-size: 10vw; /* Tamanho da fonte do primeiro título */
        font-family: 'Dancing Script', serif;
    }

    .img_titulo1 {
        width: 10vw; /* Diminui o tamanho da imagem do título */
        margin-top: -5vw; /* Ajusta o espaçamento entre o texto e a imagem */
    }

    .imagens-container {
        flex-direction: column; /* Muda a direção para coluna para melhor disposição em telas menores */
        gap: 10vw; /* Diminui o espaço entre as imagens */
    }

    .imagem-titulo {
        margin-bottom: 10vw; /* Adiciona margem inferior para espaço entre os itens */
    }

    .img_noivo, .img_noiva {
        width: 50vw; /* Diminui o tamanho das imagens do noivo e da noiva */
        height: 50vw; /* Mantém a proporção */
        margin-top: 10vw;
        margin-bottom: 0vw;
    }

    .imagem-titulo.noivo h1, 
    .imagem-titulo.noiva h2 {
        font-size: 8vw; /* Diminui o tamanho do texto dos títulos */
    }

/* Estilos para os parágrafos */
.imagem-titulo p {
    font-size: 4vw;
    font-family: "Lora", serif;
    color: gray;
    margin-top: 5px;
    white-space: normal; /* permite a quebra de linha automática */
    word-wrap: break-word; /* quebra palavras longas para evitar overflow */
}

    .memories-section {
        height: 680vw;
        margin: 0vw 0; /* Diminui ainda mais a margem em telas pequenas */
    }

    .memories-section h3 {
        font-size: 10vw; /* Diminui o tamanho do título */
        margin-top: 0px;
        margin-bottom: 7vw;
        
    }
    
    .imagens-grid {
        display: flex; /* Ativa o layout Flexbox */
        flex-direction: column; /* Alinha os itens verticalmente */
        gap: 10px; /* Espaço entre os itens */
    }
    
    .item {
        width: 100vw; /* Faz com que cada item ocupe a largura total disponível */
    }

    #expandido2 {
        grid-row: auto; /* Remove a expansão */
        grid-column: auto;
    }

    .item:hover {
        transform: none; /* Remove o aumento */
        border: 2px solid transparent; /* Remove a borda ao fazer hover */
    }

    .content2 {
        width: 100vw; /* Ajusta a largura para telas menores */
        height: auto; /* Permite que o conteúdo determine a altura */
        padding: 15px; /* Reduz o padding para economizar espaço */
    }

    .content2 h1 {
        font-size: 3em; /* Reduz o tamanho da fonte do h1 */
        margin: 3vw; /* Margem mais reduzida para evitar excesso de espaço */
    }

    .confirmation-form {
        width: 80vw; /* Ajusta a largura para 80% da tela */
        margin: 4vw auto; /* Centraliza com uma margem menor */
        padding: 15px; /* Reduz o padding interno */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
    }

    .confirmation-form input[type="text"],
    .confirmation-form input[type="tel"] {
        padding: 8px; /* Reduz o padding para campos menores */
    }

    .confirmation-form button {
        padding: 8px 16px; /* Botão menor para combinar com o tamanho da tela */
        margin: 3vw 0; /* Ajusta a margem para que o botão não fique muito espaçado */
    }

    .flex-container, .radio-group {
        gap: 5px; /* Reduz o espaçamento entre os elementos no layout flex */
    }

    .modal-content {
        width: 70%; /* Ajusta o tamanho do modal para 70% da largura da tela */
        margin-top: 50vw;
    }
/*-----------------------------------------Content3-------------------------------------------------------*/
    /* Estilos responsivos para .content3 */
    .content3 {
        padding: 20px; /* Ajusta o padding para telas menores */
        width: 90vw; /* Define a largura para ocupar quase a tela inteira */
        height: 142vw; /* Permite que a altura seja dinâmica */
    }

    .content3 h1 {
        font-size: 10vw; /* Ajuste do tamanho da fonte para se adequar à tela */
    }

    .content3 h2 {
        font-size: 5vw; /* Ajuste do tamanho da fonte */
    }
/*-----------------------------------------------------------------------------------------------------------------------*/
    .grid {
        grid-template-columns: 1fr; /* Alinha os itens em uma única coluna */
        grid-template-rows: auto; /* Permite que a altura das linhas seja ajustada automaticamente */
        gap: 10px; /* Ajuste o espaçamento entre os itens */
        transform: translateY(49vw);
        height: 100vw;
    }

    .grid::before {
        display: none; /* Remove a linha vertical em telas menores */
    }

    .grid .item {
        padding: 6px; /* Reduz o espaçamento interno */
    }

    #local1 {
        font-size: 1.2em; /* Reduz o tamanho da fonte */
    }

    #local2 {
        font-size: 1.2em; /* Reduz o tamanho da fonte */
    }

    /* Estilo para a imagem */
    #local1 img {
        width: 20vw; /* Ajusta a largura da imagem para 50% da largura do contêiner */
        height: auto; /* Mantém a proporção da imagem */
        max-width: 400px; /* Limita a largura máxima da imagem */
    }
        .flat-button {
        font-size: 0.9em; /* Ajusta o tamanho da fonte */
        padding: 5px 10px; /* Reduz o espaçamento interno */
    }

    .flat-button img {
        width: 15px; /* Reduz o tamanho da imagem */
        top: 34.2vw; /* Ajusta o posicionamento vertical */
        left: 28vw; /* Ajusta o posicionamento horizontal */
    }

    .flat-button .button-icon2 {
        top: 34.2vw; /* Ajusta o posicionamento vertical */
        left: 28vw; /* Ajusta o posicionamento do ícone */
    }
/*---------------------------------------------------------------------------------------------------------------*/

.content4 {
    margin: 0vw 0; /* Margem padrão */
    padding: 30px;
    width: 90vw;
    height: 600vw;
    transform: translateY(-2.2vw); /* Move o elemento 20px para cima, ajuste conforme necessário */
}

    .img_end {
        width: 300px; /* Reduz o tamanho da imagem para se adaptar melhor a telas menores */
        height: 300px; /* Mantém a imagem circular */
        margin-top: 5vw; /* Ajusta o espaçamento superior */
    }

    .content4 h1 {
        font-size: 2.5em; /* Reduz o tamanho da fonte do título */
    }

    .footer {
        width: 100vw; /* Ocupa toda a largura da página */
        height: 17%; /* Altura definida */
        background-color: #333; /* Cor de fundo escura */
        color: #fff; /* Cor do texto */
        display: flex; /* Ativa o Flexbox */
        align-items: center; /* Centraliza verticalmente */
        justify-content: center; /* Centraliza horizontalmente */
        text-align: center; /* Garante o alinhamento do texto */
        font-size: 14px; /* Tamanho da fonte */
        padding: 10px; /* Espaçamento interno */
        position: relative; /* Removi margens ou offsets desnecessários */
        margin: 0; /* Ajusta margens para evitar erros visuais */
    }
    

}