.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }

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

#container-loader{
    overflow: hidden;
}

.divwppinsh{
    display: flex;
    align-items: center;
    gap: 15px;
}



@font-face{
    font-family: 'Georgia' ;
    src: url('Georgia.ttf') format('opentype');
}

@font-face{
    font-family: 'TrueNorth';
    src: url('TrueNorth-Regular.ttf') format('opentype');
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: 'Georgia', sans-serif;
}

body{
    background-color: #fffcf5 !important;
}

h1, h2, h3, button{
    overflow: hidden;
}


html {
    scroll-behavior: smooth;
}

h1{
    font-family: 'TrueNorth', sans-serif;
    color: #20234F;
    font-weight: 500;
    font-size: 28px;
}

/*
.cabecalho{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    height: 130px;
    width: 100%;
    font-size: 0.9em;
    letter-spacing: 0.15em;
    overflow: visible;
    z-index: 5;
    background-color: #fffcf5;
} */

.cabecalho{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 143.5px;
    width: 100%;
    background-color: #20234F;
    font-size: 0.9em;
    letter-spacing: 0.15em;
    overflow-y: hidden;
    z-index: 4;
    position: fixed;
    transition: .5s ease;
}

.container-cabecalho{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 50px;
    padding-bottom: 33px;
    padding-top: 40px;
    overflow: hidden;
}

.cabecalho.rolagem{
    height: 110px;
}

.cabecalho.rolagem .fitadiv{
    display: none;
}

.fitadiv{
    width: 100%;
    overflow: hidden;
}

.hidden55 {
    display: none;
  }

  #modal55 {
    position: absolute;
    top: 80px; /* Ajuste a posição para baixo do botão */
    margin-top: 15px;
    left: 0;
    height: 175px;
    width: 310px;
    background-color: #fffcf5;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: .8rem;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 100;
  }

  #overlay55 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Transparência do overlay */
    z-index: 50; /* Abaixo do modal */
  }

  .titlemodal55{
    color: #20234F;
    font-size: 16.5px;
    margin: 20px auto 25px;
    text-align: center;
    font-weight: 500;
    font-family: 'TrueNorth', sans-serif;
  }

  #btnrestaubranco,
  #btnspbranco{
    display: none;
  }

  .btnsmodal{
    width: 290px;
    margin: 10px auto 0;
  }

  #btnrestauazul,
  #btnspazul{
    width: 100%;
    height: 40px;
  }


  #button15 span{
    font-weight: 500;
}


  .btnsmodal img{
    width: 100%;
    height: 40px;
  }

  #fita{
    height: 25px;
    width: 100%;
    object-fit: cover;
    margin-top: 2px;
}

.phoraextrainfo{
    color: #20234F;
    width: 700px;
}

#fita5{
    height: 25px;
    width: 100%;
    object-fit: cover;
    margin-top: -2px;
}

.icons-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

#ancora-nav{
    width: 33px;
    height: 44px;
}

.sidebar-menu{
    background-color: transparent;
    border: none;
}

.sidebar-menu img{
    width: 33px;
    height: 22px;
}

#cabecalho-img{
    height: 17.61px;
    width: 200px;
    margin-left: 220px;
}

#cabecalho-logo-m{
    display: none;
}

.final-menu{
    display: flex;
    align-items: center;
    gap: 35px;
    color: #fffcf5;
    font-weight: 500;
}

.final-menu button{
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.final-menu img{
    width: 145px;
    height: 25px;
}

.final-menu i{
    color: #fffcf5;
    font-size: 20px;
}

.final-menu p {
    margin-bottom: 6px;
}




.container-mobile-menu{
    display: flex;
    z-index: 10;
}

.overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* cor de fundo com transparência para criar a sombra */
    z-index: 998; /* z-index menor que o mobile-menu para garantir que ele esteja acima */
    display: none; /* escondido por padrão */
}

.mobile-menu.show-menu + .overlay2 {
    display: block; /* mostra o overlay quando o mobile-menu está visível */
}

.mobile-menu{
    top: 0;
    position: fixed;
    left: 0;
    z-index: 9999;
    display: none;
}

.mobile-menu.show-menu {
    display: block;
}

.sidebar-branca{
    background-color: #fffcf5;
    width: 380px;
    height: 100vh;
    padding: 10px;
    justify-content: center;
    align-items: center;
    color: #363963;
}

.mobile-a .nav-link.active {
    font-weight: bold;
    /* Adicione outros estilos conforme necessário */
    z-index: 10;
}

.subtitulos-sidebar {
    display: none; /* Garante que os subtítulos estejam inicialmente ocultos */
    width: 240px;
    height: 100vh;
    background-color: #363963;
    color: #fffcf5;
    padding: 20px;
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se necessário */
}

.subtitulos-sidebar li{
    font-size: 19px;
}

.subtitulos-sidebar ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#identidadeSubtitulo{
    padding-top: 125px;
}

#restauranteSubtitulo{
    padding-top: 161px;
}

#venha-de-brisaSubtitulo{
    padding-top: 192px;
}

#emporioSubtitulo{
    padding-top: 225px;
}

#experiencia-sem-pressaSubtitulo{
    padding-top: 258px;
}

#projeto-barcoSubtitulo{
    padding-top: 291px;
}

#picnic-nauticoSubtitulo{
    padding-top: 324px;
}

.mobile-menu-open{
    z-index: 1000;
}

.mobile-menu a{
    color: #363963;
    font-weight: 500;
    font-family: 'TrueNorth', sans-serif;
    font-size: 18.5px;
}

.mobile-a{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;
    margin-top: 30px;
}

.final-sidebar i{
    color: #363963;
    font-size: 22px;
}

.icons-final-sidebar{
    display: flex;
    gap: 10px;
}

.final-sidebar{
    margin-top: 70px;
    margin-left: 20px;
}

.icons-final-sidebar i:hover{
    font-size: 27px;
}

.final-sidebar p{
    font-weight: 600;
    margin-top: 17px;
}

#ancora-nav-sidebar{
    width: 35px;
    height: 49px;
    object-fit: cover;
    position: inherit;
}

.sidebar-menu img{
    width: 33px;
    height: 22px;
    cursor: pointer;
}

.close-menu-btn{
    border: none;
    background-color: transparent;
    font-size: 25px;
    color: #363963;
    cursor: pointer;
    margin-right: 15px;
}

.close-menu-btn:hover{
    color: #D3D3DC;
    
}

.header-sidebar{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding: 0 20px;
    margin-bottom: 40px;
    width: 350px;
}

.container {
    background-color: #fffcf5;
    width: 595px;
    height: 100vh;
    justify-content: center;
    align-items: center;
    color: #363963;
    padding: 10px;
}

.container-large {
    width: 595px; /* Largura maior quando a .text está ativa */
}

.container-small {
    width: 360px; /* Largura menor quando a .text não está ativa */
}

.button {
    background-color: #fffcf5;
    color: #363963;
    width: 360px;
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    overflow: hidden;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

#respicon{
    display: none;
    font-size: 18px;
    padding-right: 10px;
}

#hidden-icon{
    display: none;
}

.button span{
    color: #363963;
    font-size: 18.5px;
    font-family: 'TrueNorth', sans-serif;
    padding-right: 30px;
    padding-bottom: 8px;
}

.button i{
    padding-right: 0px;
    
}

.button.clicked{
    border-bottom: none;
}

.button.clicked span {
    font-weight: 700;
}

.button.clicked #hidden-icon{
    display: none;
}

.button.clicked #respicon{
    display: block;
}

.text {
    display: none;
    width: 235px; /* Calcula o tamanho com base na largura da tela menos a largura da .container */
    background-color: #363963;
    padding: 20px;
    padding-top: 135px;
    text-align: justify;
    color: #fffcf5;
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0; /* Posiciona o texto à direita da .container */
    height: 100vh; /* Ocupa toda a altura da tela */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se necessário */
}

#texttit{
    text-align: justify;
    margin-bottom: 25px;
}

.text p{
    margin-bottom: 20px;
}

.text a{
    color: #fffcf5;
    text-decoration: none;
}

.visible {
    display: block;
}

.redessoci{
    margin-top: 100px;
    margin-bottom: 50px;
    display: flex;
    gap: 17px;
    padding-left: 20px;

}

.redessoci i{
    font-size: 21px;
}







.twocontainershead{
    width: 100%;
    height: 750px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #20234F;
}

.logopage{
    width: 50%;
    height: 100%;
    background-color: #20234F;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgpage{
    width: 50%;
    height: 100%;
    overflow: hidden;
}

#imgprincipal{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#logoartemaismar{
    height: 140.6px;
    width: 280px;
    object-fit: cover;
    margin-top: 143px;
}



/* Bootstrap carrossel */

.carousel-inner {
    width: 500px;
    height: 400px;
    border-radius: .7rem;
}

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

.carousel{
    width: 500px;
    height: 400px;
}

li::marker {
    color: transparent;
}

/* Fim - Bootstrap carrossel */





.conteudo1 {
    position: relative;
    overflow: hidden;
}

#icone-banner1{
    width: 500px;
    height: 120px;
    position: absolute;
    top: 31%;
    left: 50%;
    z-index: 2; /* Para garantir que fique acima do slider */
    transform: translate(-50%, -50%);
}

#icone-banner2{
    width: 200px;
    height: 33px;
    position: absolute;
    z-index: 2;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

#icone-banner3{
    width: 52px;
    height: 77px;
    z-index: 2;
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider {
    display: flex;
    width: 300%; 
    transition: transform 2s ease;
}

.slide-img {
    width: 100vw;
    height: 900px;
    object-fit: cover;
    top: 0;
    z-index: 1;
}

#bold{
    font-weight: 600;
}

.conteudo2{
    margin-top: 100px;
    background-color: #fffcf5;
}

.conteudo2 p{
    color: #363963;
    
    font-weight: 500;
}

.conteudo2-container1{
    display: flex;
    justify-content: center;
    gap: 52px;
}

.left-container1-cima{
    display: flex;
    flex-direction: column;
    gap: 22px;
    text-align: start;
}

.left-container1-cima h1{
    font-family: 'TrueNorth', sans-serif;
    color: #363963;
    margin-bottom: 23px;
    font-size: 33px;
}

.left-container1-cima p{
    color: #363963;
    font-size: 17px;
    margin-bottom: 0px;
}

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

.carrossel-container {
    position: relative;
}

.carrossel-box img {
    width: 580px;
    height: 460px;
    display: none;
    object-fit: cover;
}

.carrossel-box img.active {
    display: block;
}

.carrossel-box .nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D3D3DC80;
    border: none;
    width: 40px;
    height: 40px;
    z-index: 1; /* Para garantir que os botões estejam acima das imagens */
    border-radius: 100%;
    padding-top: 7px;
}

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

.carrossel-container2 {
    position: relative;
}

.carrossel-box2 img {
    width: 580px;
    height: 460px;
    display: none;
    object-fit: cover;
}

.carrossel-box2 img.active {
    display: block;
}

.carrossel-box2 .nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #D3D3DC80;
    border: none;
    width: 40px;
    height: 40px;
    z-index: 1; /* Para garantir que os botões estejam acima das imagens */
    border-radius: 100%;
    padding-top: 7px;
}

#anterior {
    left: 10px;
}

#proximo {
    right: 10px;
}
#anterior,
#proximo {
    cursor: pointer;
    font-size: 27px;
    color: #363963;
}



.conteudo2-container2{
    display: flex;
    justify-content: center;
    margin-top: 100px;
    gap: 52px;
}

#mar-aberto{
    width: 300px;
    height: 610px;
    object-fit: cover;
    
}

.conteudo2-container-meio{
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 40px;
}

.meio-cima{
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: 17px;
}

#icone-roteiro{
    width: 30px;
    height: 50px;
    margin-bottom: 15px;
}

.meio-cima h1{
    margin-top: -10px;
    margin-bottom: 15px;
    font-size: 33px;
    font-family: 'TrueNorth', sans-serif;
    color: #363963;
}

.meio-cima button{
    background-color: transparent;
    border: none;
    margin-right: 64px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.btn-reserve img{
    width: 185px;
    height: 31px;
}

.btn-hidden{
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 185px;
    height: 34px;
    display: none;
}

.btn-hidden img{
    width: 185px;
    height: 31px;
}

.reserve-exp{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    margin-top: 80px;
    margin-bottom: 40px;
    
}

.marginbt{
    margin-bottom: 80px;
}

.reserve-exp h2{
    font-family: 'TrueNorth', sans-serif;
    font-size: 13px;
    color: #363963;
}

.btn-reserve1{
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 270px;
    height: 40px;
}

.btn-reserve1 img{
    width: 255px;
    height: 37px;
}

#barcomar{
    width: 380px;
    height: 500px;
    object-fit: cover;
}

.conteudo2-container-final{
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-left: 15px;
}

.overlay25{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    z-index: 998; /* Behind the modal */
    display: block; /* Overlay is visible */
}

.ansiosos-modal{
    position: fixed;
    width: 1030px;
    height: 635px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.83);
    z-index: 999;
    display: block;
}

.body-ansiosos-modal{
    width: 1030px;
    height: 635px;
    position: relative;
    overflow: hidden;
}

#img-ansiosos-desk{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#btn-desk{
    position: absolute;
    width: 250px;
    height: 37.2px;
    bottom: 40px;
    object-fit: cover;
    left: 30px;
}

#img-ansiosos-mobile{
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.close-modal25 {
    position: absolute;
    top: 35px;
    left: 10px;
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
}

#img-fechar-modal{
    width: 30px;
    height: 30px;
}

#mar-ilha{
    width: 500px;
    height: 790px;
    object-fit: cover;
}

#sempressa-redondo{
    width: 250px;
    height: 250px;
    margin-left: 50px;
    position: relative;
}

.conteudo3{
    background-color: #fffcf5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.conteudo3-div1{
    margin-top: 80px;
}

.conteudo3-title h1{
    margin-bottom: 10px;
    font-size: 35px !important;
    color: #20234F;
    font-family: 'TrueNorth', sans-serif;
}

.conteudo3-title{
    display: flex;
    align-items: center;
    gap: 30px;
}

.conteudo3-div1-text{
    display: flex;
    gap: 70px;
    color: #20234F;
    font-size: 19px;
    text-align: start;
    margin-top: 45px;
    margin-bottom: 60px;
}

.conteudo3-div1-text p{
    width: 330px;
}

.conteudo3-imgs{
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    
}

.chidden{
    display: flex;
    gap: 30px;
}

.img2-conteudo3{
    background-color: #363963;
    width: 270px;
    height: 460px;
    object-fit: cover;
    cursor: pointer;
    border-radius: .6rem;
}

.img1-conteudo3{
    background-color: #363963;
    width: 270px;
    height: 460px;
    object-fit: cover;
    cursor: pointer;
    border-radius: .7rem;
}

.img3-conteudo3{
    background-color: #363963;
    width: 270px;
    height: 330px;
    object-fit: cover;
    cursor: pointer;
    margin-top: 130px;
}

.capres{
    display: flex;
    gap: 100px;
    margin-top: 20px;
}

.box-capres{
    color: #20234F;
    font-size: 19px;
    text-align: start;
    width: 320px;
}

.box-capres span{
    font-weight: 600;
}

.title-capres{
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.title-capres h1{
    font-size: 35px !important;
}

#tcap{
    width: 30px;
    height: 50px;
}

#tcap2{
    width: 30px;
    height: 50px;
}


.conteudo4{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fffcf5;
}

.conteudo4 h1{
    color:  #20234F;
    margin-top: 20px;
    font-size: 35px !important;
}

.container-grande-conteudo4{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    gap: 80px;
}

.container1-conteudo4{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.container1-conteudo4 p{
    margin-bottom: 0px;
}

.icons-conteudo4{
    display: flex;
    gap: 25px;
    color: #20234F;
    font-size: 19px;
    align-items: center;
}

.icons-conteudo44{
    display: flex;
    gap: 25px;
    color: #20234F;
    font-size: 19px;
    align-items: center;
    margin-top: 10px;
}

.ibox1-c4{
    display: flex;
    gap: 35px;
}

.ibox2-c4{
    display: flex;
    gap: 55px;
}

.icons-conteudo4 img{
    width: 33px;
    height: 33px;
}

.icons-conteudo44 img{
    width: 33px;
    height: 33px;
}

.container2-conteudo4{
    display: flex;
    align-items: center;
    gap: 30px;
}

.carrossel-box2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.carrossel-box2 img {
    width: 560px;
    height: 510px;
    display: none;
    object-fit: cover;
}

.carrossel-box2 img.active {
    display: block;
}

.carrossel-box2 button{
    background-color: transparent;
    border: none;
    width: 40px;
}

.box-c4{
    width: 450px;
    height: 400px;
    border: 1.5px solid #363963;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;
    font-size: 19px;
    color: #363963;
    border-radius: .7rem;
}

.box-c4 h1{
    margin-bottom: 10px;
    font-size: 33px;
    color: #20234F;
    font-family: 'TrueNorth', sans-serif;
}

.box-c4 p{
    width: 85%;
}

#gisela{
    width: 450px;
    height: 420px;
    object-fit: cover;
}

.tabeladeprecospbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 60px;
}

.boxprecosp{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.titleboxprecosp{
    display: flex;
    align-items: center;
    gap: 430px;
    padding-left: 12px;
    margin-bottom: 10px;
}

.titleboxprecosp h2{
    font-size: 20px;
    color: #20234F;
    font-family: 'TrueNorth', sans-serif;
}

.grupoboxprecosp{
    display: flex;
    flex-direction: column;
}

.pboxprecosp{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 430px;
}

.pboxprecosp p{
    color: #20234F;
    font-size: 17px;
}

.fw600{
    font-weight: 600;
    font-size: 17px;
}

.ppbpsp{
    margin-right: 15px;
}

.pboxprecosp p{
    margin-bottom: 10px;
    padding: 0px 15px;
}

.linhapreco{
    border: 1.3px solid #20234F;
}

.mb0{
    margin-bottom: 0px;
    font-size: 14px;
    margin-left: 40px;
}

.imgcomh1tabela{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.imgcomh1tabela h1{
    font-size: 27px;
    font-family: 'TrueNorth', sans-serif;
    color: #20234F;
}

#barco{
    width: 144px;
    height: 55,2px;
    margin-top: 80px;
}

.conteudo5{
    background-color: #20234F;
    margin-top: -8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.conteudo5 h1{
    margin-top: 80px;
    color: #fffcf5;
}

.container-comentarios{
    margin-top: 105px;
    margin-bottom: 105px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.container-comentarios button{
    background-color: transparent;
    border: none;
    width: 30px;
}

.comentarios{
    width: 400px;
    height: 320px;
    background-color: #fffcf5;
    border-radius: .8rem;
}

.conteudo6{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.conteudo6 >h1 {
    margin-top: 130px;
    margin-bottom: 100px;
    text-align: center;
}

.btn-calend{
    position: absolute;
    display: none;
    margin: 2100px auto 0px;
}



/*
.hcalendario{
    left: 50%;
    margin: 820px 0 0 -355px;
    position: absolute;
    width: 700px;
}  */

.hcalendario{
    left: 50%;
    margin: 30px auto;
    width: 700px;
} 

.hcalendario h3 {
    font-size: 30px;
    margin-top: 33px;
    color: #fffcf5;
}

.hcalendario h2 {
    color: #fffcf5;
    font-size: 22px;
    margin-top: 16px;
}

.calendario-button {
    position: relative;
    overflow: hidden;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.resp-lhc{
    display: none;
}

.calendario-button img {
    width: 275px;
    height: 60px;
    display: block;
    transition: filter 0.3s ease-in-out;
}

.calendario-button .mes {
    position: absolute;
    top: 34%;
    left: 10px; /* Ajuste conforme necessário */
    transform: translateY(-50%);
    color: #20234F; /* Cor do texto */
    font-size: 16px; /* Tamanho da fonte */
    font-family: 'TrueNorth', sans-serif;
    font-weight: 400;
    padding-bottom: 7px;
    
    text-transform: uppercase;
}

.calendario-button .ano {
    position: absolute;
    top: 50%;
    right: 10px; /* Ajuste conforme necessário */
    transform: translateY(-50%);
    color: #20234F; /* Cor do texto */
    font-size: 16px; /* Tamanho da fonte */
    font-family: 'TrueNorth', sans-serif;
    font-weight: 400;
    padding-bottom: 10px;
    
}

.calendario header{
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.right-header-calendario{
    margin-left: 30px;
}

#ano, #mes{
    font-family: 'TrueNorth', sans-serif;
    font-weight: 500;
    color: #20234F;
    font-size: 30px;
}

.calendario{
    text-align: center;
}

.hcalendario .calendario header{
    position: relative;
}

.btn-ant, .btn-pro{
    position: absolute;
    top: 50%;
    line-height: 32px;
    margin-top: -16px;
    border: none;
    font-size: 16px;
    font-weight: bold;
}

.btn-pro i{
    font-size: 40px;
    color: #20234F;
    
}

.btn-ant i{
    font-size: 40px;
    color: #20234F;
    
}

.btn-ant{
    right: 52%;
}

.btn-pro{
    left: 0%;
}

.btn-ant:hover, .btn-pro:hover{
    background: #cbd1d2;
    color: #f9f9f9;
    cursor: pointer;
}

.left-header-calendario{
    display: flex;
    gap: 5px;
    align-items: center;
    color: #002b6b;
    margin-top: 10px;
}

.left-header-calendario p{
    font-family: 'TrueNorth', sans-serif;
    margin-bottom: 7px;
    font-size: 13px;
    padding-top: 4px;
}

.left-header-calendario i{
    font-size: 19px;
    padding-top: 2px;
    margin-left: 10px;
}

#amarelo-reservado{
    width: 40px;
    height: 19.2px;
    background-color: #FFCC2A;
}

.calendario table{
    margin-top: 7px;
    
    border-collapse: collapse;
}

.calendario thead{
    font-weight: 500;
    text-transform: uppercase;
    color: #002b6b;
}

.theadtd {
    width: 100px;
    height: 40px;
    background-color: rgb(184, 203, 253);
    border-right: 2px solid #fffcf5;
    font-family: 'TrueNorth', sans;
    color: #363963;
    text-align: center;
    font-weight: 600;
}

.theadtd2{
    background-color: #363963;
    width: 100px;
    height: 40px;
    color: #fffcf5;
    padding: 10px;
    font-size: 14px;
    border-right: 2px solid #fffcf5;
    font-family: 'TrueNorth', sans-serif;
}

.tbody td{
    width: 100px;
    height: 100px;
    border-left: 1px solid #363963;
    border-right: 1px  solid #363963;
    border-bottom: 2.4px solid #363963;
    border-top: 2.4px solid #363963;
    text-align: end;
    vertical-align: top;
    padding-right: 10px;
    color: #20234F;
    font-weight: 400;
    font-size: 17px;
    font-family: 'TrueNorth', sans-serif;
}

.tbody td:not(.data-anterior):not(.proximo-mes):not(.data-cancelada):not(.mes-anterior):not(.dia-reservado){
    background: linear-gradient(
    to bottom,          /* Direção vertical */
    #fffcf5 0%,         /* Começa com #fffcf5 */
    #fffcf5 34%,        /* #fffcf5 ocupa 20% */
    #FFCC2A 34%,        /* #FFCC2A começa a partir de 20% */
    #FFCC2A 85%,        /* #FFCC2A ocupa até 80% */
    #fffcf5 85%,        /* #fffcf5 recomeça a partir de 80% */
    #fffcf5 100%        /* #fffcf5 ocupa o restante */
  );
}

.mttr td{
    border-top: none;
}

.mttr{
    margin-top: 5px !important;
}

.calendario tbody td{
    cursor: pointer;
}


.calendario tbody td:hover:not(.data-cancelada){
    background: #373d8a;
    color: #20234F;
    background: linear-gradient(
    to bottom,          /* Direção vertical */
    #fffcf5 0%,         /* Começa com #fffcf5 */
    #fffcf5 34%,        /* #fffcf5 ocupa 20% */
    #373d8a 34%,        /* #FFCC2A começa a partir de 20% */
    #373d8a 85%,        /* #FFCC2A ocupa até 80% */
    #fffcf5 85%,        /* #fffcf5 recomeça a partir de 80% */
    #fffcf5 100%        /* #fffcf5 ocupa o restante */
  ) !important;
}

.data-cancelada:hover{
    background-color: #fffcf5;
}

.data-cancelada{
    background-color: #fffcf5 !important;
    position: relative;
}

.data-cancelada span{
    position: static;
}


.data-cancelada i {
    pointer-events: none; /* Opcional: impede que o ícone interfira na interação */
}














.data-cancelada td{
    margin-top: -5px !important;
}

.dia-atual{
    color: #20234F !important;
}

.calendario table .dia-atual{
    color: #20234F;
    background: linear-gradient(
    to bottom,          /* Direção vertical */
    #fffcf5 0%,         /* Começa com #fffcf5 */
    #fffcf5 34%,        /* #fffcf5 ocupa 20% */
    #fffcf5 34%,        /* #FFCC2A começa a partir de 20% */
    #fffcf5 85%,        /* #FFCC2A ocupa até 80% */
    #fffcf5 85%,        /* #fffcf5 recomeça a partir de 80% */
    #fffcf5 100%        /* #fffcf5 ocupa o restante */
  );
}

.calendario .mes-anterior{
    /*color: #cbd1d2;*/
    border: none;
    color: #fffcf5 !important;
    background-color: none !important;
}

.calendario .proximo-mes{
    color: #fffcf5;
    border: none;
    pointer-events: none;
}

.calendario  td.data-anterior  {
    /*color: rgb(223, 226, 226); Cor cinza para dias anteriores */
    cursor: not-allowed; /* Desabilita o cursor */
    pointer-events: none;
    color: #cbd1d2;
    
}

td.mes-anterior{
    pointer-events: none;
}

.calendario tbody td.data-cancelada {
    cursor: not-allowed; /* Desabilita o cursor */
}

.calendario tbody td.data-cancelada:hover {
    background: inherit;
    color: #1a4170;
    
}

.calendario tbody td.data-anterior:hover {
    background: inherit;
    
}

.event{
    position: relative;
}

.event::after{
    content: '';
    width: 7px;
    height: 7px;
    left: 50%;
    bottom: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: #00addf;
    display: block;
    position: absolute;
    border-radius: 50%;
}

.event:hover::after{
    background: #f9f9f9;
}

.event.dia-atual::after{
    background: #f9f9f9;
}

.dia-selecionado {
    
    
    background: linear-gradient(
    to bottom,          /* Direção vertical */
    #fffcf5 0%,         /* Começa com #fffcf5 */
    #fffcf5 34%,        /* #fffcf5 ocupa 20% */
    #20234F 34%,        /* #FFCC2A começa a partir de 20% */
    #20234F 85%,        /* #FFCC2A ocupa até 80% */
    #fffcf5 85%,        /* #fffcf5 recomeça a partir de 80% */
    #fffcf5 100%        /* #fffcf5 ocupa o restante */
  ) !important;
}


/*
.obssp{
    margin-top: 1650px;
    position: absolute;
    max-width: 400px;
    width: 85%;
}  */

.obssp{
    max-width: 400px;
    width: 85%;
}






.obssp h1{
    font-size: 18px;
}

.obssp p{
    font-size: 13px;
    color: #002b6b;
    margin-top: 5px;
    text-align: justify;
}

.conteudo7{
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carrossel-box3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.carrossel-box3 img {
    width: 420px;
    height: 400px;
    display: none;
    object-fit: cover;
}

.carrossel-box3 img.active {
    display: block;
}

.carrossel-box3 button{
    background-color: transparent;
    border: none;
    width: 40px;
}



#left-angle2{
    margin-right: 30px;
    font-size: 40px;
    color: #D3D3DC;
}

#right-angle2{
    margin-left: 30px;
    font-size: 40px;
    color: #D3D3DC;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.fotoinsta {
    width: 260px;
    height: 260px;
    object-fit: cover;
    cursor: pointer;
}

.image-container:hover .overlay {
    opacity: 1;
}



.c4{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.c4-bc{
    display: flex;
    margin: 0px auto 20px auto;
}

.visible2{
    display: flex;
}

.troca{
    display: flex;
    gap: 4px;
}

.gridresp{
    display: flex;
    gap: 4px;
}

.c4-imgs1{
    display: flex;
    flex-direction: column;
    margin-right: 5px;
    gap: 4.3px;
}

.c4-imgs2{
    display: flex;
    flex-direction: column;
    gap: 4.3px;
    margin-right: 5px;
}

.c4-imgs3{
    display: flex;
    flex-direction: column;
    gap: 4.4px;
    margin-right: 5px;
}

.c4-imgs4{
    display: flex;
    flex-direction: column;
    gap: 4.4px;
    
}

#c4-img1{
    width: 248.5px;
    height: 248.5px;
    background-color: #20234F;
    object-fit: cover;
}

#c4-img2{
    width: 500.5px;
    height: 500.5px;
    background-color: #20234F;
    object-fit: cover;
}

.banner-l {
    width: 100%;
    position: relative;
    overflow: hidden; 
    margin-top: 40px;
}

.overlay5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Cor do overlay (preto com 50% de opacidade) */
}

.thumbnail{
    width: 100%;
    height: 470px;
    object-fit: cover;
    position: relative;
    z-index: -1; 
    object-position: center 60%;
}



#sempressa-ib1 {
    position: absolute;
    bottom: 53%; /* Ajuste conforme necessário para sua preferência */
    left: 50%; /* Coloca o botão no centro horizontal */
    transform: translateX(-50%); /* Para centralizar corretamente o botão */
    width: 500px;
    height: 120px;
}


.conteudo8{
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fffcf5;
}

.conteudo8 h1{
    color: #363963;
    margin-top: 100px;
}

.containerrr {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 100px;
}

.button2 {
    background-color: #D3D3DC;
    border-top: 2.5px solid #363963;
    border-left: 2.5px solid #363963;
    border-right: 2.5px solid #363963;
    border-bottom: 2.5px solid #363963;
    color: #363963;
    height: 50px;
    width: 90%;
    max-width: 900px;
    font-family: 'TrueNorth', sans-serif;
    cursor: pointer;
    padding-left: 10px;
    min-width: 810px;
    font-size: 19px;
    display: flex;
    justify-content: space-between;
    padding-right: 30px;
    overflow: hidden;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.button2 span{
    color: #363963;
    font-size: 19px;
    font-family: 'TrueNorth', sans-serif;
    padding-right: 30px;
    padding-bottom: 8px;
    text-align: start;
}

.button2 i{
    padding-right: 20px;
}

.text2.clicked2{
    border-top: none;
}

.button2.clicked2 #hidden-icon{
    display: none;
}

.button2.clicked2 #respicon{
    display: block;
}

.text2 {
display: none;
width: 90%;
    max-width: 900px;

background-color: #fffcf5;
padding: 20px;
text-align: justify;
border-left: 2.5px solid #363963;
border-right: 2.5px solid #363963;
border-top: none;
border-bottom: 2.5px solid #363963;
color: #363963;
font-size: 18px;
min-width: 810px;
}

.text2 p{
    margin-bottom: 20px;
}

.visible3 {
display: block;
flex-direction: column;
}

.conteudo9{
    display: flex;
    justify-content: center;
}

.mapa-gastromar{
    margin: 0px auto 80px;
    background-color: #363963;
    width: 90%;
    max-width: 900px;
    height: 420px;
    border-radius: .3rem;
    overflow: hidden;
}

.mapa-gastromar iframe{
    width: 100%;
    height: 100%;
    filter: grayscale(100%) sepia(50%) hue-rotate(180deg) brightness(100%) contrast(100%) saturate(100%) drop-shadow(#505254 0px 0px 0px);
}

.rodape{
    background-color: #20234F;
    font-family: 'Georgia', sans-serif;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;

}

.container-grande-footer{
    display: flex;
    gap: 350px;
}

.rodape h2{
    color: #fffcf5;
    margin-bottom: 10px;
    font-family: 'TrueNorth', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.right-footer{
    margin-top: 80px;
    margin-bottom: 40px;
}

.right-footer input{
    padding: 8px 15px;
    width: 370px;
    margin-top: 15px;
}

input[type="email"]::placeholder {
    /* Estilos desejados para o placeholder */
    font-size: 15px;
    color: #20234F;
}

.cima-right-footer{
    margin-bottom: 50px;
    margin-top: 5px;
}

.right-footer button{
    height: 50px;
    width: 43px;
    overflow: hidden;
    background-color: #FFCC2A;
    border: none;
    position: relative;
    top: 0.4px;
    margin-top: 15px;
    cursor: pointer;
    
}

#rightan{
    margin-top: 3px;
    font-size: 19px;
}

input:focus{
    outline: none;
}

.baixo-right-footer{
    display: flex;
    overflow: hidden;
}

.gastromar-footer p{
    color: #fffcf5;
    font-size: 17px;
}

.icon-gf{
    display: flex;
    margin-top: 30px;
    gap: 15px;
    color: #fffcf5;
    text-decoration: none;
}

.icon-gf i{
    color: #fffcf5;
    font-size: 22px;
}

.mtmenos{
    margin-top: 5px;
}

.icon-gf .phone-number {
    color: #fffcf5; /* or any color you want */
    text-decoration: none;
}

.btn-f{
    display: flex;
    gap: 20px;
    
}

.btn-cf{
    display: flex;
    justify-content: center;
    gap: 170px;
    margin-bottom: 20px;
}

.btn-f button{
    width: 140px;
    border: 1px solid #fffcf5;
    background-color: transparent;
    height: 22px;
    margin-bottom: 10px;
    border-radius: .5rem;
    color: #fffcf5;
    font-size: 14px;
}

.left-footer{
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    text-align: end;
    color: #fffcf5;
}

#maretrouxef{
    width: 340px;
    height: 46px;
    margin-top: 30px;
}

#logo-footer{
    width: 200px;
    height: 170px;
    margin-left: auto;
    margin-bottom: 15px;
}

#logo-footerhidden{
    display: none;
}

.lk-fr{
    display: flex;
    gap: 17px;
}

.lk-fr a{
    color: #fffcf5;
    text-decoration: none;
}






.boxprecosp2{
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: scale(.8);
}

.titleboxprecosp2{
    display: flex;
    align-items: center;
    gap: 150px;
    padding-left: 12px;
}

.titleboxprecosp2 h2{
    font-size: 20px;
    font-family: 'TrueNorth', sans-serif;
    color: #20234F;
}

.grupoboxprecosp2{
    display: flex;
    flex-direction: column;
}

.pboxprecosp2{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 150px;
}

.ppbpsp2{
    margin-right: 15px;
}

.pboxprecosp2 p{
    margin-bottom: 10px;
    padding: 0px 15px;
    color: #20234F;
}

.linhapreco2{
    border: 1.3px solid #20234F;
}






#fade,
#modal{
    transition: .5s;
    opacity: 1;
    pointer-events: all;
}

#fade{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 5;
}

#modal{
    position: fixed;
    right: 0%;
    top: 0%;
    height: 100vh;
    width: 512px;
    background-color: #fffcf5;
    z-index: 10;
    overflow-y: scroll;
}

#modal.hide,
#fade.hide{
    opacity: 0;
    pointer-events: none;
}

#header-img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center 50%;
}

#logo-header{
    width: 270px;
    height: 70px;
    background-color: #fffcf5;
    padding: 3px;
    border-radius: 3px;
}

.modal-header > button{
    padding: .6rem .8rem;
    background-color: #fffcf5;
    border-color: #1a4170;
    color: #1a4170;
    font-size: 15px;
    font-weight: 600;
    border-radius: .4rem;
    cursor: pointer;
    opacity: .8;
    position: absolute;
    top: 45px;
    right: 35px;
}

.modal-body{
    margin-top: 40px;
    font-family: 'Georgia', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal-body > p {
    color: #363963;
    font-size: 17px;
    text-align: center;
    padding: 20px;
    font-family: 'Georgia', sans-serif;
    margin-bottom: 0px;
    margin-top: 10px;
}

#preencha{
    font-family: 'Georgia', sans-serif;
}

#tabelaprecoform {
    width: 320px;
    height: 160px;
    object-fit: cover;
    margin-bottom: 20px;
}

.visudata p{
    color: #363963;
    font-size: 17px;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Georgia', sans-serif;
}

.modal-form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Open sans', sans-serif;
    background-color: transparent;
}

option{
    font-family: 'Open sans', sans-serif;
}

#inputs{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Open Sans', sans-serif;
}

.input-box label{
    font-size: 16px;
    color: #000000cb;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
}

.input-field{
    display: flex;
    align-items: center;
    padding: 3px;
    gap: 10px;
    cursor: text;
    border-bottom: 1px solid #1a4170;
    font-family: 'Open Sans', sans-serif;
}

.input-field input:focus{
    outline: none;
}

.input-field i{
    font-size: 18px;
    color: #002b6b;
}

.input-field input{
    border: none;
    background-color: transparent;
    width: 340px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}

.input-field select{
    border-radius: 10px;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    background-color: transparent;
}

.input-box select{
    width: 340px;
    border: none;
    cursor: pointer;
    font-size: 17px;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
}

#submit{
    width: 320px;
    height: 35px;
    background-color: transparent;
    color: #fffcf5;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 30px;
    margin-top: 20px;
    border: none;
    font-family: 'Open sans', sans-serif;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none; /* Remover sublinhado do link */
    display: inline-block; /* Para tornar o link um bloco de nível de linha */
    text-align: center; /* Para centralizar o texto dentro do botão */
}

#submit img{
    width: 100%;
    height: 100%;
}

.btn-solicitar a{
    text-decoration: none;
    color: #fffcf5;
    font-size: 15px;
    font-family: 'Open sans', sans-serif;
}

.btn-solicitar{
    cursor: pointer;
}

.resultados p{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.dia-reservado{
    background-color: #fffcf5F0;
    color: #fffcf5;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-reserva{
    margin: 0px auto;
    display: flex;
    justify-content: center;
}

.btn-reserva button{
    position: absolute;
    margin-top: 800px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.btn-reservee img{
    width: 225px;
    height: 34px;
}

.resultados{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
}

.resultados p{
    color: #363963;
    font-size: 17px;
    text-align: center;
    font-family: 'Open sans', sans-serif;
}

.hidden{
    display: none;
}




.sliders-insta{
    display: flex;
    gap: 80px;
}

.sliderr {
    margin: 20px auto;
    width: 580px;
    height: 460px;
}

.sliderr-insta {
    margin: 20px auto;
    width: 400px;
    height: 330px;
}

.manual-navigation .nav-button {
    background-color: #D3D3DC80;
    border: none;
    width: 42px;
    height: 40px;
    z-index: 5;
    border-radius: 100%;
    padding-top: 3px;
}

.manual-navigationn .nav-button {
    background-color: #D3D3DC80;
    border: none;
    width: 35px;
    height: 35px;
    z-index: 5;
    border-radius: 100%;
    padding-top: 3px;
}

#anterior, #proximo,
#proximo2, #anterior2,
#proximo3, #anterior3,
#proximo4, #anterior4,
#proximo5, #anterior5 {
    cursor: pointer;
    font-size: 20px;
    color: #363963;
}

.slidess, .slidess2, .slidess3 {
    width: 400%;
    height: 460px;
    display: flex;
}

.slidess4, .slidess5{
    width: 400%;
    height: 330px;
    display: flex;
}

.slidess input {
    display: none;
}

.slidess2 input{
    display: none;
}

.slidess3 input{
    display: none;
}

.slidess4 input{
    display: none;
}

.slidess5 input{
    display: none;
}

.slidee {
    width: 25%;
    position: relative;
    overflow: hidden;
    transition: 1s;
}

#faixa-img {
    width: 580px;
    height: 460px;
    object-fit: cover;  
}

#faixa-img2 {
    width: 400px;
    height: 330px;
    object-fit: cover;  
}

.manual-navigation {
    position: absolute;
    width: 580px;
    margin-top: -255px;
    display: flex;
    flex-direction: column;
    padding: 5px 20px;
    overflow: hidden;
    height: 275px;
}

.manual-navigationn{
    position: absolute;
    width: 400px;
    margin-top: -215px;
    display: flex;
    flex-direction: column;
    padding: 5px 20px;
    overflow: hidden;
    height: 300px;
}

.manual-navigation2,
.manual-navigation3 {
    display: flex;
    justify-content: space-between;
    color: #81a6cb;
}

.manual-navigation4,
.manual-navigation5 {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    color: #81a6cb;
}

.radioss {
    display: flex;
    margin-top: 215px;
    justify-content: center;
}

.radioss3 {
    display: flex;
    margin-top: 160px;
    justify-content: center;
}

.manual-btn,
.manual-btn2,
.manual-btn3,
.manual-btn4,
.manual-btn5 {
    padding: 2px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child),
.manual-btn2:not(:last-child),
.manual-btn3:not(:last-child),
.manual-btn4:not(:last-child),
.manual-btn5:not(:last-child) {
    margin-right: 3px;
}

.manual-btn:hover,
.manual-btn2:hover,
.manual-btn3:hover,
.manual-btn4:hover,
.manual-btn5:hover {
    background-color: #fffcf5;
}

.navigation-auto div,
.navigation-autoo div,
.navigation-autooo div,
.navigation-autooo4 div,
.navigation-autooo5 div {
    border: 1.7px solid #81a6cb;
    padding: 1.7px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
    background-color: #81a6cb;
}

.navigation-auto,
.navigation-autoo,
.navigation-autooo {
    position: absolute;
    width: 580px;
    margin-top: 465px;
    display: flex;
    justify-content: center;
    color: #002b6b;
}

.navigation-autooo4,
.navigation-autooo5{
    position: absolute;
    width: 400px;
    margin-top: 335px;
    display: flex;
    justify-content: center;
    color: #002b6b;
}

.navigation-auto div:not(:last-child),
.navigation-autoo div:not(:last-child),
.navigation-autooo div:not(:last-child),
.navigation-autooo4 div:not(:last-child),
.navigation-autooo5 div:not(:last-child) {
    margin-right: 3px;
}

#radio1:checked ~ .first,
#radio5:checked ~ .first,
#radio9:checked ~ .first,
#radio13:checked ~ .first,
#radio17:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first,
#radio6:checked ~ .first,
#radio10:checked ~ .first,
#radio14:checked ~ .first,
#radio18:checked ~ .first {
    margin-left: -25%;
}

#radio3:checked ~ .first,
#radio7:checked ~ .first,
#radio11:checked ~ .first,
#radio15:checked ~ .first,
#radio19:checked ~ .first {
    margin-left: -50%;
}

#radio4:checked ~ .first,
#radio8:checked ~ .first,
#radio12:checked ~ .first,
#radio16:checked ~ .first,
#radio20:checked ~ .first {
    margin-left: -75%;
}

#radio1:checked ~.navigation-auto .auto-btn1,
#radio5:checked ~.navigation-autoo .auto-btn5,
#radio9:checked ~.navigation-autooo .auto-btn9,
#radio13:checked ~.navigation-autooo4 .auto-btn13,
#radio17:checked ~.navigation-autooo5 .auto-btn17 {
    background-color: #21265c;
    
    border: 1.7px solid #21265c;
}

#radio2:checked ~.navigation-auto .auto-btn2,
#radio6:checked ~.navigation-autoo .auto-btn6,
#radio10:checked ~.navigation-autooo .auto-btn10,
#radio14:checked ~.navigation-autooo4 .auto-btn14,
#radio18:checked ~.navigation-autooo5 .auto-btn18 {
    background-color: #21265c;
    
    border: 1.7px solid #21265c;
}

#radio3:checked ~.navigation-auto .auto-btn3,
#radio7:checked ~.navigation-autoo .auto-btn7,
#radio11:checked ~.navigation-autooo .auto-btn11,
#radio15:checked ~.navigation-autooo4 .auto-btn15,
#radio19:checked ~.navigation-autooo5 .auto-btn19 {
    background-color: #21265c;
    
    border: 1.7px solid #21265c;
}

#radio4:checked ~.navigation-auto .auto-btn4,
#radio8:checked ~.navigation-autoo .auto-btn8,
#radio12:checked ~.navigation-autooo .auto-btn12,
#radio16:checked ~.navigation-autooo4 .auto-btn16,
#radio20:checked ~.navigation-autooo5 .auto-btn20 {
    background-color: #21265c;
    
    border: 1.7px solid #21265c;
}









@media screen and (max-width:1515px){

    /* Início - Grid Fotos */
    
    .c4{
        width: 100%;
        margin-left: 0px;
        margin: 80px auto 0px;
    }
    
    .c4-bc{
        width: 100%;
        
    }
    
    .c4-imgs1{
        max-width: 560.56px;
        margin-left: 4px;
        
        gap: 4px;
    }
    
    .visible2{
        margin: 0px auto;
        display: flex;
    }
    
    #c4-img2,
    .instafeed-item-large,
    .instafeed-item-large img{
        max-height: 560.56px;
        
        min-height: auto;
        max-width: 560.56px;
    }
    
    #c4-img1,
    .instafeed-item-small,
    .instafeed-item-small img{
        max-height: 278.32px;
        
        min-height: auto;
        max-width: 278.32px;
    
    }
    
    .troca{
        display: flex;
        gap: 4px;
    }
    
    .c4-imgs2{
        max-width: 278.32px;
        
        gap: 4px;
    }
    
    
    
    
    .gridresp{
        display: flex;
        gap: 4.7px;
    }
    
    /* Fim - Grid Fotos */
    
    
    }


@media screen and (max-width:1250px){


    #foto-reservas{
        width: 850px;
    }




    .img1-conteudo3 {
        background-color: #363963;
        width: 230px;
        height: 400px;
        object-fit: cover;
        cursor: pointer;
    }

    .chidden {
        display: flex;
        gap: 10px;
    }

    .conteudo3-imgs{
        gap: 10px;
    }




    /* Início - Grid Fotos */
    
    .c4{
        width: 100%;
        margin-left: 0px;
        margin: 80px auto 0px;
    }
    
    .c4-bc{
        width: 100%;
        
    }
    
    .c4-imgs1{
        max-width: 425.425px;
        margin-left: 4px;
        
        gap: 4px;
    }
    
    .visible2{
        margin: 0px auto;
        display: flex;
    }
    
    #c4-img2,
    .instafeed-item-large,
    .instafeed-item-large img{
        max-height: 425.425px;
        
        min-height: auto;
        max-width: 425.425px;
    }
    
    #c4-img1,
    .instafeed-item-small,
    .instafeed-item-small img{
        max-height: 211.225px;
        
        min-height: auto;
        max-width: 211.225px;
    
    }
    
    .troca{
        display: flex;
        gap: 4px;
    }
    
    .c4-imgs2{
        max-width: 211.225px;
        
        gap: 4px;
    }
    
    
    
    
    .gridresp{
        display: flex;
        gap: 4.7px;
    }
    
    /* Fim - Grid Fotos */
}


@media screen and (max-width:1200px){
    .twocontainershead{
        height: 680px;
    }
}



@media screen and (max-width:1120px){

    .ansiosos-modal{
        width: 820px;
        height: 500px;
    }
    
    .body-ansiosos-modal{
        width: 820px;
        height: 500px;
    }

    #btn-desk{
        width: 200px;
        height: 30px;
        bottom: 32px;
        left: 30px;
    }

    .close-modal25 {
        top: 30px;
        left: 10px;
    }
    
    #img-fechar-modal{
        width: 25px;
        height: 25px;
    }

}

@media screen and (max-width:1110px){
    .container2-conteudo4{
        flex-direction: column;
    }
}



@media screen and (max-width:1050px){
    /* Início - Grid Fotos */
    
    .c4{
        width: 100%;
        margin-left: 0px;
        margin: 80px auto 0px;
    }
    
    .c4-bc{
        width: 100%;
        
    }
    
    .c4-imgs1{
        max-width: 357.357px;
        margin-left: 4px;
        
        gap: 4px;
    }
    
    .visible2{
        margin: 0px auto;
        display: flex;
    }
    
    #c4-img2,
    .instafeed-item-large,
    .instafeed-item-large img{
        max-height: 357.357px;
        
        min-height: auto;
        max-width: 357.357px;
    }
    
    #c4-img1,
    .instafeed-item-small,
    .instafeed-item-small img{
        max-height: 177.429px;
        
        min-height: auto;
        max-width: 177.429px;
    
    }
    
    .troca{
        display: flex;
        gap: 4px;
    }
    
    .c4-imgs2{
        max-width: 177.429px;
        
        gap: 4px;
    }
    
    
    
    
    .gridresp{
        display: flex;
        gap: 4.7px;
    }
    
    /* Fim - Grid Fotos */

}


@media screen and (max-width:1030px){
    .twocontainershead{
        height: 600px;
    }
}


@media screen and (max-width:1000px){
    .container-grande-footer{
        gap: 230px;
    }

    .btn-cf{
        gap: 50px;
    }

}


@media screen and (max-width:980px){
    /* Início - Estilização do header */

    .cabecalho{
        padding-top: 20px;
    }

    .final-menu{
        display: none;
    }

    .icons-menu {
        order: 2; /* Muda a posição do .icons-menu */
    }
    
    #cabecalho-img {
        order: 1; /* Muda a posição do #cabecalho-img */
        margin-left: 0px;
        margin-bottom: 7px;
    }
    
    #cabecalho-logo-m{
        display: block;
        height: 50px;
        width: 200px;
        margin-left: 0px;
        margin-top: -15px;
    }

    .icons-menu{
        margin-top: -15px;
    }

    .sidebar-menu:nth-child(2){
        order: -1;
    }

    #icone-banner1{
        display: none;
    }
    
    #icone-banner2{
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #icone-banner3{
        top: 89%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Fim - Estilização do header */

    .conteudo3-imgs{
        flex-direction: column;
    }

    .img1-conteudo3 {
        background-color: #363963;
        width: 270px;
        height: 460px;
        object-fit: cover;
        cursor: pointer;
    }

    .conteudo3-div1-text{
        flex-direction: column;
        width: 560px;
        margin-right: auto;
    }

    .capres{
        margin: 30px auto 0px;
        width: 560px;
        flex-direction: column;
        gap: 60px;
    }

    

    .conteudo2-container1,
    .conteudo2-container2{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 580px;
        margin: 0 auto;
    }

    .left-container1,
    .meio-cima{
        width: 580px;
    }

    .left-container1-cima p,
    .meio-cima p{
        width: 100%;
    }

    .left-container1-cima br,
    .meio-cima br{
        display: none;
    }

    #barco{
        margin-top: 20px;
    }

    .right-container1{
        margin-top: 60px;
    }

    .first-c2:nth-child(1){
        order: 2;
    }



    
}



@media screen and (max-width:870px){

    .twocontainershead{
        height: 520px;
    }

    #logoartemaismar {
        height: 112.48px;
        width: 224px;
        object-fit: cover;
    }

    .ansiosos-modal{
        width: 670px;
        height: 405px;
    }
    
    .body-ansiosos-modal{
        width: 670px;
        height: 405px;
    }

    #btn-desk{
        width: 160px;
        height: 24px;
        bottom: 23px;
        left: 30px;
    }

    .close-modal25 {
        top: 25px;
        left: 10px;
    }
    
    #img-fechar-modal{
        width: 22px;
        height: 22px;
    }
    /* Inicio - Rodapé */

    .container-grande-footer{
        display: flex;
        flex-direction: column;
        width: 90%;
        gap: 50px;
    }

    .left-footer{
        margin-top: -100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: start;
    }

    #logo-footer{
        display: none;
    }

    #logo-footerhidden{
        display: block;
        width: 144px;
        height: 120px;
        margin-top: 10px;
        margin-left: 70px;
    }

    .cima-right-footer{
        margin-bottom: 80px;
    }

    #maretrouxef{
        width: 280px;
        height: 37px;
        margin-top: 120px;
    }

    

    .baixo-right-footer{
        display: flex;
        
    }

    .gastromar-footer p{
        color: #fffcf5;
        
    }

    .btn-cf{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
        margin-bottom: 30px;
        width: 90%;
        text-align: start;
        margin-top: 50px;
    }

    

    

    /* Fim - Rodapé */
}



@media screen and (max-width:850px){
    /* Início - Grid Fotos */

.c4{
    width: 100%;
    margin-left: 0px;
    margin: 80px auto 0px;
}

.c4-bc{
    width: 100%;
    
}

.c4-imgs1{
    max-width: 560.56px;
    margin-left: 4px;
    
    gap: 4px;
}

.visible2{
    margin: 0px auto;
    display: flex;
}

#c4-img2,
.instafeed-item-large,
.instafeed-item-large img{
    max-height: 560.56px;
    
    min-height: auto;
    max-width: 560.56px;
}

#c4-img1,
.instafeed-item-small,
.instafeed-item-small img{
    max-height: 278.32px;
    
    min-height: auto;
    max-width: 278.32px;

}

.troca{
    display: flex;
    gap: 4px;
}

.c4-imgs2{
    max-width: 278.32px;
    
    gap: 4px;
}




.c4-imgs3{
    display: none;
}

.c4-imgs4{
    display: none;
}

/* Fim - Grid Fotos */


.conteudo4{
    width: 85%;
    margin: 0px auto;
}

.container-grande-conteudo4{
    margin-top: 0px;
    width: 100%;
}

.conteudo4 > h1{
    margin-top: 10px;
}

.container1-conteudo4{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 30px;
}

.icons-conteudo4{
    gap: 17px;
}

.ibox1-c4{
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.ibox2-c4{
    display: flex;
    flex-direction: column;
    gap: 40px;
}




.button2 {
    height: 60px;
    min-width: inherit;
    width: 90%;
}

.text2{
    min-width: inherit;
}

.button2 span{
    font-size: 16px;
}

}




@media screen and (max-width:770px){
    /* Inicio - Calendário */

    /*
    .conteudo6{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 120px auto; 
        width: 100%;
    } */

    .conteudo6{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .conteudo6 >h1 {
        margin-top: 0px;
        margin-bottom: 40px;
        font-size: 23px;
    }

    .calendario{
        margin: 0px auto;
    }


    /*
    .hcalendario {
        margin: 380px auto 0;
        left: 5%;
        width: 90%;
    }    */

    .hcalendario {
        left: 5%;
        width: 90%;
    }  



    .calendario-button img {
        display: block;
        transition: filter 0.3s ease-in-out;
        max-width: 250px;
        min-width: auto;
        
    }

    #ano, #mes{
        font-size: 27px !important;
    }

    

    .right-header-calendario{
        width: 100%;
        margin: 0px auto;
    }  


    .left-header-calendario{
        display: none;
    } 

    .hcalendario h3 {
        font-size: 15px;
        margin-top: 0px;
        color: #fffcf5;
        
    }
    
    .hcalendario h2 {
        color: #fffcf5;
        font-size: 15px;
    }

    

    .resp-lhc{
        display: block;
        margin-top: 15px;
    }

    .resplhc{
        display: flex;
        
    }

    

    .calendario-button .mes {
        position: absolute;
        top: 34%;
        left: 10px; 
        transform: translateY(-50%);
        font-size: 15px; 
        
        font-weight: 400;
        padding-bottom: 0px;
        
        
    } 

    .calendario-button .mes{
        top: 59%;
    }

    
    
    .calendario-button .ano {
        position: absolute;
        top: 51%;
        right: 10px; /* Ajuste conforme necessário */
        transform: translateY(-50%);
        color: #fffcf5; /* Cor do texto */
        font-size: 15px; /* Tamanho da fonte */
        
        padding-bottom: 6px;
        
    }

    

    .btn-ant{
        right: 5%;
    }  
    
    .btn-pro{
        left: 5%;
    } 

    thead{
        width: 100%;
    }

    .theadtd2{
        width: 14.2857%;
       
    }

    .theadtd{
        width: 14.2857%;
    }

    .tbody td{
        width: 100px;
        height: 60px;
    }

    .resplhc{
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        color: #002b6b;
        margin: 20px auto;
        width: 100%;
    }
    
    .resplhc p{
        font-family: 'TrueNorth', sans-serif;
        margin-bottom: 7px;
        font-size: 13px;
    }
    
    .resplhc i{
        font-size: 19px;
        margin-left: 10px;
    }
    
    #amarelo-reservado{
        width: 35px;
    }

    .btn-calend{
        margin-top: 1470px;
    }

    /*
    .obssp{
        margin-top: 1050px;
    }   */
   
    /* Fim - Calendário */

    /*
    .banner-l{
        margin-top: 620px !important;
    }  */



    #modal{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 80vh;
        border-radius: 10px;
        background-color: #fffcf5;
        z-index: 10;
        overflow-y: scroll;
        width: 90%;
        max-width: 450px;
    }

    .input-field input{
        width: 270px;
    }

    .input-field select{
        width: 270px;
    }

    







    
        .boxprecosp{
            display: flex;
            flex-direction: column;
            gap: 10px;
            transform: scale(.9);
            margin-top: 30px;
        }

        .boxprecosp p{
            text-wrap: nowrap;
            overflow: hidden;
        }
        
        .titleboxprecosp{
            display: flex;
            align-items: center;
            gap: 150px;
            padding-left: 12px;
        }
        
        .titleboxprecosp h2{
            font-size: 20px;
        }
        
        .grupoboxprecosp{
            display: flex;
            flex-direction: column;
        }
        
        .pboxprecosp{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 150px;
        }

        .phoraextrainfo{
            color: #20234F;
            width: 381px;
            font-size: 15px;
        }
    









        

        .tbody td{
            font-size: 15px;
        }

        .tbody td i{
            font-size: 17px !important;
            padding-top: 2px !important;
            padding-left: 2px !important;
            top: 65% !important;
        }



}


@media screen and (max-width:700px){
    .twocontainershead {
        height: 480px;
    }

    .container-cabecalho{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 25px;
    }

    #fita{
        margin-top: 11px;
    }
}



@media screen and (max-width:675px){
    
    .ansiosos-modal{
        width: 440px;
        height: 670px;
    }
    
    .body-ansiosos-modal{
        width: 440px;
        height: 670px;
    }

    #img-ansiosos-desk{
        display: none;
    }
    
    #img-ansiosos-mobile{
        display: block;
    }

    #btn-desk{
        width: 160px;
        height: 24px;
        bottom: 30px;
        left: 140px;
    }
    /* Início - Grid Fotos */
    
    .c4{
        width: 100%;
        margin-left: 0px;
        margin: 80px auto 0px;
    }
    
    .c4-bc{
        width: 100%;
        
    }
    
    .c4-imgs1{
        max-width: 414.75px;
        margin-left: 4px;
        
        gap: 4px;
    }
    
    .visible2{
        margin: 0px auto;
        display: flex;
    }
    
    #c4-img2,
    .instafeed-item-large,
    .instafeed-item-large img{
        max-height: 414.75px;
        
        min-height: auto;
        max-width: 414.75px;
    }
    
    #c4-img1,
    .instafeed-item-small,
    .instafeed-item-small img{
        max-height: 204.75px;
        
        min-height: auto;
        max-width: 204.75px;
    
    }
    
    .troca{
        display: flex;
        gap: 4px;
    }
    
    .c4-imgs2{
        max-width: 204.75px;
        
        gap: 4px;
    }
    
    
    
    
    .c4-imgs3{
        display: none;
    }
    
    .c4-imgs4{
        display: none;
    }
    
    /* Fim - Grid Fotos */




    
    }



    @media screen and (max-width:640px){

        /* Carrosseis */
    
    
        .navigation-auto,
        .navigation-autoo,
        .navigation-autooo,
        .navigation-autooo6,
        .navigation-autooo5 {
            width: 85%;
        }
    
        .sliderr{
            width: 100%;
        }
    
        #faixa-img, #faixa-img2{
            width: 100%;
        }
    
        .right-container1{
            width: 100%;
        }
    
        .first-c2{
            width: 100%;
        }
    
        
    
        
        .right-container1{
            width: 100%;
        }
    
        .first-c2{
            width: 100%;
        }
    
        .manual-navigation {
            position: absolute;
            width: 85%;
            margin-top: -255px;
            height: 275px;
        }
        
        .manual-navigationn{
            position: absolute;
            width: 100%;
            margin-top: -215px;
            display: flex;
            flex-direction: column;
            padding: 5px 20px;
            overflow: hidden;
            height: 300px;
        }
    
    
        .manual-navigation3{
            width: 100%;
        }
    
    
        .sliderr-insta1{
            display: none;
        }
    
        /* Carrosseis estilização */


         /* Bootstrap carrossel */

        .carousel-inner {
            max-width: 500px;
            width: 100%;
            height: 400px;
            border-radius: .7rem;
        }

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

        .carousel{
            max-width: 500px;
            width: 100%;
            height: 400px;
        }

        li::marker {
            color: transparent;
        }

        /* Fim - Bootstrap carrossel */


        .conteudo2{
            width: 100%;
            font-size: 17px;
        }
    
        .conteudo2-container1,
        .first-c2{
            width: 85%;
        }
    
        .left-container1{
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 25px;
        }
    
        .left-container1-cima{
            width: 100%;
        }
    
        .conteudo2-container2{
            flex-direction: column;
            width: 100%;
            gap: 50px;
        }

        .meio-cima{
            width: 85%;
        }



        .conteudo3{
            margin-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .btn-hidden{
            margin: 20px auto 0px;
            display: block;
        }
    
        .conteudo3-div1{
            width: 85%;
        }
        
        .conteudo3-div1-text{
            display: flex;
            flex-direction: column;
            gap: 20px;
            color: #20234F;
            font-size: 18px;
            text-align: start;
            margin-top: 45px;
            margin-bottom: 80px;
            width: 100%;
        }
    
        .conteudo3-div1-text p{
            width: 100%;
        }
    
        .conteudo3-title{
            gap: 13px;
            margin-top: 20px;
        }
    
        .conteudo3-title img{
            width: 30px;
            height: 40px;
        }
        
        .conteudo3-title h1 {
            font-size: 23px;
            margin-top: 2px;
        }


        .conteudo3-imgs{
            flex-direction: row;
        }
    
        .conteudo3-imgs{
            display: flex;
            width: 85%;
            margin-top: 0px;
            gap: 10px;
        }
    
        
        
        .chidden{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0px auto;
            gap: 10px;
        }
    
        .chidden img{
            width: 100%;
        }
    
        .img2-conteudo3{
            height: 300px;
        }
        
        .img1-conteudo3{
            height: 300px;
        }
    
        #img4-conteudo3{
            height: 240px;
        }
    
        .img3-conteudo3{
            height: 300px;
            margin-top: 0px;
        }
    
        .capres{
            width: 85%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 80px;
            margin-top: 20px;
        }
    
        .box-capres{
            width: 100%;
            font-size: 16px;
        }
    
        #tcap{
            width: 27px;
            height: 45px;
            margin-bottom: 5px;
        }
        
        #tcap2{
            width: 24px;
            height: 40px;
            margin-bottom: 5px;
        }




        .box-c4{
            width: 85%;
            font-size: 16px;
            height: 380px;
            gap: 30px;
        }
    
        .box-c4 p{
            width: 85%;
        }
        
        .box-c4 h1{
            margin-bottom: 0px;
        }

    }



    
@media screen and (max-width:600px){
    /* Início - Menu Responsivo */

    .header-sidebar{
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        padding: 0 30px 0px 20px;
        margin-bottom: 40px;
        width: 100%;
    }

    .container {
        background-color: #fffcf5;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        color: #20234F;
        padding: 0px;
    }

    .text {
        flex-direction: column;
        width: 100%;
        background-color: #20234F;
        padding: 20px;
        text-align: justify;
        color: #fffcf5;
        font-size: 18px;
        padding-bottom: 20px;
        height: auto;
        margin-top: 0px; /* Adicionado */
        position: inherit;
    }

    .button {
        background-color: #fffcf5;
        color: #20234F;
        width: 100%;
        cursor: pointer;
        height: 60px;
        border: none;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        overflow: hidden;
        margin-top: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .button.clicked span{
        font-size: 17px;
    }

    #texttit{
        margin-top: 10px;
        margin-bottom: 35px;
    }

    .text p{
        width: 110%;
    }

    


    /* Fim - Menu Responsivo */
}


@media screen and (max-width:500px){

    /* Início - Estilização do header */

    .final-menu{
        display: none;
    }



    
    
    
    #cabecalho-logo-m{
        display: block;
        height: 50px;
        width: 200px;
        margin-left: 0px;
        margin-top: -15px;
    }

    #cabecalho-logo-m:nth-child(3){
        order: -1;
    }

    .icons-menu{
        margin-top: -15px;
        overflow: hidden;
    }

    .sidebar-menu:nth-child(2){
        order: -1;
    }

    #icone-banner1{
        display: none;
    }
    
    #icone-banner2{
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #icone-banner3{
        top: 89%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Fim - Estilização do header */


    /* Início - Menu Responsivo */

    .header-sidebar{
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        padding: 0 30px 0px 20px;
        margin-bottom: 40px;
        width: 100%;
    }

    .container {
        background-color: #fffcf5;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        color: #20234F;
        padding: 0px;
    }

    .text {
        flex-direction: column;
        width: 100%;
        background-color: #20234F;
        padding: 20px;
        text-align: justify;
        color: #fffcf5;
        font-size: 18px;
        padding-bottom: 20px;
        height: auto;
        margin-top: 0px; /* Adicionado */
        position: inherit;
    }

    .button {
        background-color: #fffcf5;
        color: #20234F;
        width: 100%;
        cursor: pointer;
        height: 60px;
        border: none;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        overflow: hidden;
        margin-top: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        
    }

    #texttit{
        margin-top: 10px;
        margin-bottom: 35px;
    }

    .text p{
        width: 110%;
    }

    


    /* Fim - Menu Responsivo */


    .twocontainershead{
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .logopage{
        width: 100%;
        height: 480px;
    }

    .imgpage{
        width: 100%;
        height: 400px;
    }



    .ansiosos-modal{
        width: 370px;
        height: 570px;
    }
    
    .body-ansiosos-modal{
        width: 370px;
        height: 570px;
    }

    #btn-desk{
        width: 160px;
        height: 24px;
        bottom: 30px;
        left: 105px;
    }



    /* Início - Estilização Corpo */

   
    

    .conteudo2{
        margin-top: 70px;
        width: 100%;
        margin-bottom: 0px;
    }

    .conteudo2-container1{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .left-container1:nth-child(2){
        order: -1;
    }

    .left-container1 {
        margin-left: 0px;
        margin-top: 0px;
        width: 100%;
    }
    
    .left-container1-cima {
        width: 85%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        gap: 30px;
        margin: 0px auto 40px;
        text-align: start;
        
    }

    .left-container1-cima br{
        display: none;
    }
    
    .left-container1-cima p {
        width: 100%;
    }
    
    .left-container1-cima h1 {
        font-size: 25px;
        margin-top: 5px;
        text-wrap: nowrap;
        text-align: center;
    }

    .right-container1{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px auto 40px;
    }

    .conteudo2-container1{
        gap: 0px;
    }

    .carrossel-container{
        width: 85%;
    }

    .carrossel-container2{
        width: 100%;
    }

    .carrossel-box2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
    }

    .carrossel-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
    }

    .carrossel-box img {
        width: 100%;
        
        height: 450px; /* Ajustar a altura automaticamente */
    }

    .carrossel-box2 img{
        height: 400px;
    }


    #barco{
        margin-top: 10px;
    }

    .conteudo2-container2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
        gap: 52px;
        width: 100%;
    }

    .first-c2{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .containerc3{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
    }

    .first-c2:nth-child(1){
        order: 2;
    }

    .conteudo2-container-final{
        margin-left: 0px;
    }

    .conteudo2-container-meio:nth-child(2){
        order: -1;
    }

    .box-c4:nth-child(1){
        order: 2;
    }

    .meio-cima{
        width: 85%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
        margin: 0px auto 0px;
        text-align: start;
        font-size: 18px;
    }

    .meio-cima br{
        display: none;
    }

    #icone-roteiro{
        margin-bottom: 0px;
    }

    .meiocimatitle h1{
        margin-top: 4px;
    }

    .meio-cima button{
        
        margin: 20px auto 30px;
        
    }

    #mar-aberto{
        width: 85%;
        height: 300px;
        margin: 0px auto;
    }

    #barcomar{
        width: 85%;
        height: 300px;
        margin: 0px auto;
    }

    #mar-ilha{
        width: 85%;
        height: 300px;
        margin: 0px auto;
    }

    #sempressa-redondo{
        width: 150px;
        height: 150px;
        margin: 90px auto 0px;
        position: relative;
    }

    .conteudo3{
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    

    .btn-hidden{
        margin: 20px auto 0px;
        display: block;
    }

    .conteudo3-div1{
        width: 85%;
        margin-top: 0px;
    }
    
    .conteudo3-div1-text{
        display: flex;
        flex-direction: column;
        gap: 20px;
        color: #20234F;
        font-size: 18px;
        text-align: start;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 100%;
    }

    .conteudo3-div1-text p{
        width: 100%;
    }

    .conteudo3-title{
        gap: 13px;
        margin-top: 20px;
    }

    .conteudo3-title img{
        width: 30px;
        height: 40px;
    }
    
    .conteudo3-title h1 {
        font-size: 23px;
        margin-top: 2px;
    }

    .conteudo3-imgs{
        display: flex;
        width: 85%;
        margin-top: 0px;
        gap: 10px;
    }

    
    
    .chidden{
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0px auto;
        gap: 10px;
    }

    .chidden img{
        width: 100%;
    }

    .img2-conteudo3{
        height: 300px;
    }
    
    .img1-conteudo3{
        height: 300px;
    }

    #img4-conteudo3{
        height: 240px;
    }

    .img3-conteudo3{
        height: 300px;
        margin-top: 0px;
    }

    .capres{
        width: 85%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
        margin-top: 20px;
    }

    .reserve-exp{
        margin-top: 40px;
        margin-bottom: 0px;
    }

    .box-capres{
        width: 100%;
        font-size: 16px;
    }

    #tcap{
        width: 27px;
        height: 45px;
        margin-bottom: 5px;
    }
    
    #tcap2{
        width: 24px;
        height: 40px;
        margin-bottom: 5px;
    }

    .conteudo3 button{
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .conteudo4{
        width: 85%;
        margin: 70px auto;
    }

    .container-grande-conteudo4{
        margin-top: 0px;
        width: 100%;
    }

    .conteudo4 > h1{
        margin-top: 10px;
    }

    .container1-conteudo4{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        gap: 30px;
        margin-top: 50px;
    }

    .icons-conteudo4{
        gap: 17px;
    }

    .ibox1-c4{
        display: flex;
        flex-direction: column;
        gap: 35px;
    }
    
    .ibox2-c4{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .container2-conteudo4{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        width: 100%;
        margin: 0px auto;
    }

    .box-c4{
        width: 100%;
        font-size: 16px;
        height: 380px;
        gap: 30px;
    }

    .box-c4 p{
        width: 85%;
    }
    
    .box-c4 h1{
        margin-bottom: 0px;
        font-size: 27.5px;
    }

    /* Fim - Estilização Corpo */


    /* Carrossel */

    .sliderr{
        width: 100%;
    }

    #faixa-img, #faixa-img2{
        width: 100%;
    }

    .right-container1{
        width: 85%;
    }

    .first-c2{
        width: 85%;
    }

    .navigation-auto,
    .navigation-autoo,
    .navigation-autooo5,
    .navigation-autooo {
        display: none;
    }

    


    .manual-navigation {
        position: absolute;
        width: 85%;
        margin-top: -255px;
        
        height: 460px;
    }
    
    .manual-navigationn{
        position: absolute;
        width: 85%;
        margin-top: -215px;
        display: flex;
        flex-direction: column;
        padding: 5px 20px;
        overflow: hidden;
        height: 300px;
    }

    .conteudo7{
        width: 85%;
    }

    .manual-navigation3{
        width: 100%;
    }


    .sliderr-insta1{
        display: none;
    }

    .sliders-insta{
        width: 85%;
    }
    


    .responshidden{
        display: none;
    }

    
    


    /* Carrossel */




    /* Inicio - Calendário */


    /*
    .conteudo6{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 120px auto;
        width: 100%;
    }   */


    .conteudo6{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    } 

    .conteudo6 >h1 {
        margin-top: 0px;
        margin-bottom: 40px;
        font-size: 23px;
    }

    .calendario{
        margin: 0px auto;
    }


    /*
    .hcalendario {
        margin: 310px auto 0;
        left: 5%;
        width: 90%; 
    }  */

    .hcalendario {
        left: 5%;
        width: 90%; 
    } 



    
    .obssp {
        margin-top: 15px;
    }   

    .calendario-button img {
        display: block;
        transition: filter 0.3s ease-in-out;
        max-width: 250px;
        min-width: auto;
    }

    .right-header-calendario{
        width: 100%;
        margin: 0px auto;
    }

    .hcalendario h3 {
        font-size: 15px;
        margin-top: 5px;
        color: #fffcf5;
    }
    
    .hcalendario h2 {
        color: #fffcf5;
        font-size: 15px;
    }
    
    .left-header-calendario{
        width: 100%;
    }

    .header-calendario{
        display: flex;
        flex-direction: column;
        
    }

    .resp-lhc{
        display: block;
    }

    .resplhc{
        display: flex;
        
    }

    .calendario-button .mes {
        position: absolute;
        top: 55%;
        left: 10px; /* Ajuste conforme necessário */
        transform: translateY(-50%);
        font-size: 15px; /* Tamanho da fonte */
        
        font-weight: 400;
        padding-bottom: 0px;
        
        
    }
    
    .calendario-button .ano {
        position: absolute;
        top: 50%;
        right: 10px; /* Ajuste conforme necessário */
        transform: translateY(-50%);
        color: #fffcf5; /* Cor do texto */
        font-size: 15px; /* Tamanho da fonte */
        
        padding-bottom: 6px;
        
    }

    .btn-ant{
        right: 5%;
    }
    
    .btn-pro{
        left: 5%;
    }

    thead{
        width: 100%;
    }

    .theadtd2{
        width: 14.2857%;
       
    }

    .theadtd{
        width: 14.2857%;
    }

    .tbody td{
        width: 100px;
        height: 60px;
    }

    .left-header-calendario{
        display: none;
    }

    .resplhc{
        display: flex;
        align-items: center;
        justify-content: center;
        color: #002b6b;
        margin: 0px auto;
        width: 100%;
    }
    
    .resplhc p{
        font-family: 'TrueNorth', sans-serif;
        margin-bottom: 7px;
    }
    
    .resplhc i{
        font-size: 22px;
    }
    
    #amarelo-reservado{
        width: 35px;
    }

    .btn-calend{
        margin-top: 1470px;
    }
   
    /* Fim - Calendário */


    /*
    .banner-l {
        width: 100%;
        position: relative;
        overflow: hidden; 
        margin-top: 610px !important;
    }  */


    .banner-l {
        width: 100%;
        position: relative;
        overflow: hidden; 
    }

    .phoraextrainfo{
        color: #20234F;
        width: 340px;
        font-size: 13px;
    }


    .titleboxprecosp{
        gap: 110px;
    }
    
    .pboxprecosp{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 110px;
    }

    #sempressa-ib1{
        width: 300px;
        height: 80px;
    }

    /* Inicio - 3 sessões antes do footer */

    .conteudo5{
        margin-top: -8px;
    }

    .conteudo5 h1{
        margin-top: 60px;
        font-size: 23px;
    }

    #hresp{
        display: none;
    }

    .container-comentarios{
        width: 90%;
        gap: 10px;
        margin-top: 75px;
        margin-bottom: 90px;
    }

    .comentarios{
        width: 90%;
        
        background-color: #fffcf5;
        border-radius: .8rem;
    }

    #left-angle{
        margin-right: 0px;
        font-size: 30px;
        color: #D3D3DC;
    }
    
    #right-angle{
        margin-left: 0px;
        font-size: 30px;
        color: #D3D3DC;
    }

    #left-angle2{
        margin-right: 30px;
        font-size: 40px;
        color: #D3D3DC;
    }
    
    #right-angle2{
        margin-left: 30px;
        font-size: 40px;
        color: #D3D3DC;
    }

    #himg{
        display: none;
    }

    .conteudo7{
        margin: 70px auto 40px;
        width: 100%;
    }

    .insta-carrossel {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .insta-imgs{
        display: flex;
        gap: 15px;
        width: 80%;
    }

    .fotoinsta{
        max-width: 260px;
        max-height: 230px;
    }

    .image-container{
        margin: 0px auto;
    }

    /* Fim - 3 sessões antes do footer  */

    


    .containerrr {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 60px;
        margin-bottom: 100px;
        }
        
        .button2 {
            width: 87%;
            height: 55px;
            font-size: 14px;
            padding-right: 0px;
            text-align: start;
            margin-top: 17px;
        }

        .button2 span{
            color: #363963;
            font-size: 14px;
            font-family: 'TrueNorth', sans-serif;
            padding-right: 20px;
            
        }
    
        .text2 {
            width: 87%;
            text-align: start;
        }




        .mapa-gastromar{
        
            width: 90%;
            border-radius: 0px;
        }
    
         /* Inicio - Rodapé */

     .container-grande-footer{
        display: flex;
        flex-direction: column;
        width: 90%;
        gap: 50px;
    }

    .left-footer{
        margin-top: -100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: start;
        font-size: 16px;
    }

    #logo-footer{
        display: none;
    }

    #logo-footerhidden{
        display: block;
        width: 120px;
        height: 100px;
        margin-top: 10px;
    }

    .cima-right-footer{
        margin-bottom: 80px;
    }

    #maretrouxef{
        width: 280px;
        height: 37px;
        margin: 120px auto 0px;
    }

    .btn-f{
        margin: 0 auto;
    }

    .gastromar-footer h2{
        font-size: 16.5px;
    }

    .baixo-right-footer{
        display: flex;
    }

    .gastromar-footer p{
        color: #fffcf5;
        font-size: 15px;
    }

    .btn-cf{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
        margin-bottom: 30px;
        width: 90%;
        text-align: center;
        margin-top: 50px;
    }

    .lk-fr{
        font-size: 15px;
        
        
    }

    .titleboxprecosp2,
    .pboxprecosp2{
        gap: 70px;
    }

    #preencha br{
        display: none;
    }

    /* Fim - Rodapé */


        .box-reservas{
            display: flex;
            flex-direction: column;
            width: 100%;
        }
    
        #foto-reservas{
            width: 100%;
            height: 400px;
        }
    
        .reservas{
            width: 90%;
            margin: -250px auto 0px;
            height: 480px;
            position: relative;
            margin-bottom: 0px;
            top: 0;
            left: 0;
            border-radius: 0px;
            
        }
    
        
    
        
    
        #ancora2-conteudo3{
            margin-right: auto;
            margin-bottom: 20px;
            width: 31.45px;
            height: 42.5px;
        }
    
        .pessoas{
            width: 90%;
            margin-top: 40px;
        }
        
        .pessoas select{
            width: 155px;
        }
    
        .data-periodo{
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    
        .data{
            width: 100%;
        }
    
        .data input {
            width: 155px;
        }
    
        .periodo{
            width: 100%;
        }
    
        .periodo select{
            width: 155px;
        }
    
        .horario{
            width: 100%;
        }
    
        .horario select{
            width: 155px;
        }
        
        .btn-data-periodo{
            margin-bottom: 30px;
            margin-top: 40px;
        }
        
        .funcionamento{
            display: flex;
            margin: 0px auto 50px;
        }
    
        .fci{
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
    
        .fba{
            display: flex;
            flex-direction: column;
            gap: 40px;
        }
    
    
        #modal{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 80vh;
            border-radius: 10px;
            background-color: #fffcf5;
            z-index: 10;
            overflow-y: scroll;
            width: 90%;
        }
    
        .input-field input{
            width: 270px;
        }
    
        .input-field select{
            width: 270px;
        }
    
        
        
    
        /* Fim - Estilização Reservas */

        #tabelaprecoform {
            width: 272px;
            height: 136px;
            object-fit: cover;
            margin-bottom: 20px;
        }

        .visudata p {
            color: #363963;
            font-size: 17px;
            text-align: center;
            margin-bottom: 20px;
            font-family: 'Georgia', sans-serif;
            max-width: 375px;
            width: 85%;
            margin: 0 auto 30px;
        }
}




@media screen and (max-width:472px){

    #logo-footerhidden {
        display: block;
        width: 120px;
        height: 100px;
        margin-top: 10px;
        margin-left: 0px;
    }


    .baixo-right-footer{
        display: flex;
        justify-content: space-between;
    }
}


@media screen and (max-width:400px){
    #logo-footerhidden{
        display: block;
        width: 100px;
        height: 80px;
    }

    .ansiosos-modal{
        width: 350px;
        height: 570px;
    }
    
    .body-ansiosos-modal{
        width: 350px;
        height: 570px;
    }

    #btn-desk{
        width: 160px;
        height: 24px;
        bottom: 20px;
        left: 95px;
    }

    .titleboxprecosp2,
    .pboxprecosp2{
        gap: 50px;
    }

    .titleboxprecosp{
        gap: 90px;
    }
    
    .pboxprecosp{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 90px;
    }

    .phoraextrainfo{
        color: #20234F;
        width: 327px;
        font-size: 13px;
    }

    .box-c4 h1{
        font-size: 27px !important;
    }

        .box-c4 p {
            width: 90%;
        }
        
}