/* fontes*/
@font-face{
    font-family: Anthony;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/Anthony.otf");
}
@font-face{
    font-family: Aston;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/Aston.ttf");
}
@font-face{
    font-family: Birds;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/Birds.ttf");
}
@font-face{
    font-family: ChopinScript;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/ChopinScript.otf");
}
@font-face{
    font-family: Daylove;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/Daylove.ttf");
}
@font-face{
    font-family: Maratre;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/Maratre.otf");
}
@font-face{
    font-family: Michael;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/Michael.otf");
}
@font-face{
    font-family: Yessy;
    /*Caso a fonte esteja na mesma pasta*/
    src: url("fonts/Yessy.otf");
}
/* tipografia*/
h1 {
    color: #9f8704!important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Tela pequena (até 600px) */
@media (max-width: 600px) {
    h1 {
        font-size: 1.9em!important;
    }
    .login{
        font-size: 4em!important;
    }
    input{
       font-size: 1.3em!important; 
    }


}

/* Tela média (entre 601px e 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    h1 {
        font-size: 4em!important;
    }
}

/* Tela grande (acima de 1024px) */
@media (min-width: 1025px) {
    h1 {
        font-size: 4em!important;
    }
} 
h2 {
    font-size: 2em!important;
    color: #e19e00!important;
    
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.anthony{
    font-family: 'Anthony', cursive!important;
}
.aston{
    font-family: 'Aston', cursive!important;
}
.birds{
    font-family: 'Birds', cursive!important;
}
.chopinScript{
    font-family: 'ChopinScript', cursive!important;
}
.daylove{
    font-family: 'Daylove', cursive!important;
}
.maratre{
    font-family: 'Maratre', cursive!important;
}
.michael{
    font-family: 'Michael', cursive!important;
}
.yessy{
    font-family: 'Yessy', cursive!important;
}


/* Cores personalizadas */
:root {
    --primary-color: #013257;
    --secondary-color: #e19e00!important;
}

/* Estilos globais */
body {
    font-family: 'Arial', sans-serif;
    color: var(--primary-color);
}


/* Tela pequena (até 600px) */
@media (max-width: 600px) {
    .hero-section, .rsvp-section {
        height: 100vh;
        display: flex;
        justify-content: center;
    }
}

/* Tela média (entre 601px e 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    .hero-section, .about-section, .rsvp-section {
        fheight: 100vh;
        display: flex;
        justify-content: center;
    }
}

/* Tela grande (acima de 1024px) */
@media (min-width: 1025px) {
    .hero-section,.gallery-section, .about-section, .info-section, .rsvp-section {
        height: 100vh;
        display: flex;
        justify-content: center;
    }
} 


/* Hero Section */
.hero-section {
    background: #0b1e33;
}

/* About Section */
.about-section {
    background: #e7f0f7;
    color: white;
    padding: 60px 0;
}

/* Gallery Section */
.gallery-section {
    background: #dfe5ea;
    color: white;
    padding: 60px 0;
}

/* Informações Importantes */
.info-section {
    background: #43596d;
    color: white;
    padding: 60px 0;
}

/* Confirmação de Presença */
.rsvp-section {
    background: #43596d;
    color: white;
    padding: 60px 0;
}

.conf-section {
    background: #e8f1f9;
    padding-top:60px;
}

/* Efeito de fade-in */
.fade-in {
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.div-btn:before{
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
/* Botões personalizados */
.btn-primary {
    background: #bf9109;
    color: #fff;
    border: none;
    position: relative;
    padding: 20px;
    cursor: pointer;
    transition: 800ms ease all;
    outline: none;
}

.btn-primary:hover {
    background-color: rgba(255, 0, 0, 0.01) !important;
    color:#bf9109;
}


.btn-primary:before,.btn-primary:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #bf9109!important;
  transition:400ms ease all;
}
.btn-primary:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.btn-primary:hover:before,.btn-primary:hover:after{
  width:100%;
  transition:800ms ease all;
}


/* Navbar */
.navbar {
    background-color: var(--primary-color) !important;
}

.navbar-brand, .nav-link {
    color: var(--secondary-color) !important;
}

.nav-link:hover {
    color: #fff !important;
}

/* Estilos para a seção de Informações Importantes */
.info-item {
    padding: 20px;
    height: 270px;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: transform 0.3s ease;
    background-color: rgba(255, 255, 255, 0.8);
}

.info-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.icon {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

.text-justify{
   text-align: justify; 
}

p{
    font-size: 1.25em;
}
/* Tela pequena (até 600px) */
@media (max-width: 600px) {
    p {
        font-size: 0.8em;
    }
}

.text-head {
    color: #bf9109!important;
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 40px;
}

.login{
    color: #bf9109!important;
   
    font-weight: 500;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 40px;
}
@media (max-width: 600px) {
    .login{
        font-size: 1.5rem !important;
    }
    .titulo{
        font-size: 4rem !important;
    }
}
@media (min-width: 601px) and (max-width: 1024px) { 
    .login{
        font-size: 2.5rem !important;
    }
    .titulo{
        font-size: 5rem !important;
    }
}
@media (min-width: 1024px){ 
    .login{
        font-size: 2.5rem !important;
    }
    .titulo{
        font-size: 6rem !important;
    }
}

.img-container {
    width: 100%;
    height: 350px; /* Altura fixa para todas as imagens */
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-container img {
    width: 100%;
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    transition: transform 0.3s ease;
}

.img-container:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Presentes de Casamento */
.gifts-section {
    background: linear-gradient(rgba(0, 27, 47, 0.9), rgba(0, 27, 47, 0.9)),
                url('https://source.unsplash.com/1600x900/?gifts,flowers') no-repeat center center/cover;
    color: white;
    padding: 60px 0;
}

.gifts-section .card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background-color: rgba(255, 255, 255, 0.9);
    height: 100%; /* Garante que todos os cards tenham a mesma altura */
}

.gifts-section .card:hover {
    transform: translateY(-10px);
}

.gifts-section .card-title {
    color: var(--primary-color);
}

.gifts-section .card-text {
    color: var(--primary-color);
}

.gifts-section .text-muted {
    color: #6c757d !important;
}

.gifts-section .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Alinha o conteúdo verticalmente */
}

.gifts-section .fw-bold {
    font-size: 1.25rem; /* Tamanho do preço */
}

.presente{
   height: 300px;
   object-fit: cover;
}

/* Classe para esconder a navbar */
.navbar-hidden {
    transform: translateY(-100%); /* Desloca a navbar para fora da tela */
    transition: transform 0.3s ease-in-out;
}

/* Estilo para o mapa */
iframe {
    width: 100%; /* Faz o mapa ocupar toda a largura disponível */
    max-width: 800px; /* Limita a largura máxima para 800px em telas grandes */
    height: 400px; /* Ajusta a altura do mapa */
    border: 0; /* Remove a borda */
}

/* Estilo específico para telas pequenas */
@media (max-width: 768px) {
    iframe {
        width: 90%; /* Ajusta a largura do mapa para 90% da tela em dispositivos móveis */
        height: 300px; /* Ajusta a altura para dispositivos móveis */
    }
}

@media (max-width: 480px) {
    iframe {
        width: 90%; /* Ajusta ainda mais a largura para telas menores */
        height: 250px; /* Ajusta a altura para telas pequenas */
    }
}

.loader {
    display: none;
    margin: 10px auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 1rem;
    color: #212529;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}
.table .thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}
.table thead th {
    border: none;
    padding: 30px;
    font-size: 14px;
    color: #fff;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}
.table th, .table .left {
    padding: 0.75rem;
    vertical-align: top;
    border: solid #343a40;
    border-width: 1px 0px 1px 1px;
}
.table .middle{
    padding: 0.75rem;
    vertical-align: top;
    border: solid #343a40;
    border-width: 1px 0px 1px 0px;
}
.table .right{
    padding: 0.75rem;
    vertical-align: top;
    border: solid #343a40;
    border-width: 1px 1px 1px 0px;
    text-align: center;
    
}
th {
    text-align: inherit;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Estilo do switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.switch input:checked + .slider {
    background-color: #4CAF50;
}

.switch input:checked + .slider:before {
    transform: translateX(22px);
}

.right-btn{
    position: absolute;
    right: 112px;
}