@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root {
    --primary: #ffb700;
    --secondary: #1eb14d;
    --black: #333;
    --white: #fff;
    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
    --extra: #7d7d7d;
    /* --primary:#dc881a;  */
    /* --fundo-color:#ecfff1; */
    --fundo-color: #fdf8f4;
    --coravaliation: #89cdb0;
    /* --coravaliation:#dcac8d; */
    --ancol: #d56203;
}

* {

    font-family: 'poppins' sans-serif;
    margin: 0px;
    padding: 0;
    border: none;
    box-sizing: border-box;
    outline: none;
    /*remove o contorno do elemento*/
    text-decoration: none;
    text-transform: capitalize;
    /*primeira letra maiuscula*/
    transition: .2s linear;

}

body {
    overflow-x: hidden;
}

/* HTML INICIO*/
html {
    font-size: 62.5%;
    overflow-x: hidden;
    /*evita q o conteudo transborde*/
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;
    background: var(--fundo-color);
}

html::-webkit-scrollbar {
    width: .8rem;
    /*da espaçoa esquerda para o scroll*/
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    /*barra que corre*/
    background: var(--primary);
    border-radius: .3rem;
}

section {
    padding: 5rem 7%;
}

.titulo {
    /*classe do h1 da sessão quartos*/
    font-size: 4rem;
    color: var(--primary);
    text-align: center;
    text-transform: uppercase;
    font-weight: bolder;
    margin-bottom: 3rem;
    text-shadow: 1px 1px 2px #a8a3a3;
    cursor: pointer;

}

/* .servi{
    padding-top: .1rem;
    margin-bottom: 3rem;
}

.ti{
    margin-top: -20px;
} */

/*HTML FIM*/

.btn {
    display: inline-block;
    /*permite texto do lado*/
    margin-top: 1rem;
    padding: 1rem 2rem;
    background: var(--primary);
    border-radius: .5rem;
    color: var(--white);
    font-size: 1.7rem;
    cursor: pointer;
}

.btn:hover {
    background: var(--black);
}


/*header INICIO*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #212121;
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;
}

.header .logo {
    font-size: 2.5rem;
    font-weight: bolder;
    color: var(--fundo-color);
    position: relative;
}

.header a span {
    top: 28px;
    right: 28px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;

}

.header .logo img {

    width: 150px;
    height: 60px;
    border-radius: .3rem;
}

.header .logo i {
    color: var(--primary);
    padding-right: 1.5rem;
    /*.5rem*/
}

.header .logo i:hover {
    transform: scale(1.2);
}

.header .navbar a {
    font-size: 2.1rem;
    color: var(--fundo-color);
    margin: 0 1rem;
}

.header .navbar a:hover {
    color: var(--primary);
}

.btn-hover:hover {
    /*classe do <a>visite-nos</a> na home*/
    color: var(--primary);
}

.header .navbar .btn {
    margin-top: 0;
    color: var(--white);
}

.header .navbar .btn:hover {
    color: var(--primary);
}

#menu-btn {
    display: none;
    font-size: 2.5rem;
    margin-left: 1.7rem;
    cursor: pointer;
    color: var(--fundo-color);
}

#menu-btn:hover {
    color: var(--primary);
}

/*header FIM*/

/*home INICIO*/

.home {
    padding: 0;
}

.home .slide {

    min-height: 100vh;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.home .fren {
    background-position: center 20% !important;
}

.home .fot {
    background-position: top !important;

}

.home .slide .content {
    /*texto h3 e <a/>*/
    width: 80rem;
    text-align: center;
}

.home .slide .content h3 {
    font-size: 4rem;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.1;
    padding: 2rem 0;
    text-shadow: 2px 2px 2px #111;
    background: rgba(0, 0, 0, 0.6);
    margin-top: 300px;
    border-radius: .3rem;
}

/*botoes do slide*/
.swiper-button-next,
.swiper-button-prev {
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    background: var(--white);
    color: var(--primary);
    opacity: 0.6;
    border-radius: .5rem;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--black);
    opacity: 0.7;
}

/*torna os botoes menores*/
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 2rem;
}

/*home FIM*/

/*disponibilidade INICIO*/

.disponibilidade form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    background-color: #eee;
    padding: 2rem;
    border-radius: .5rem;
}

.disponibilidade form .box {
    flex: 1 1 20rem;
}

.disponibilidade form .box p {
    font-size: 2rem;
    color: var(--primary);
}

.disponibilidade form .box .input {
    width: 100%;
    padding: 1rem;
    font-size: 1.8rem;
    color: var(--black);
    margin: 1rem 0;
    border-radius: .5rem;
}

/*disponibilidade FIM*/


/*sobre INICIO*/
.sobre .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6rem;
}

.sobre .row .image {
    flex: 1 1 30rem;
}

.sobre .row .image img {
    width: 100%;
    height: 400px;
    border-radius: .5rem;
}

.sobre .row .content {
    flex: 1 1 51rem;
    /*elemento se ajusta ao espaço disponivel igualmente pra crescer ou diminuir*/
}

.sobre .row .content h3 {
    font-size: 3.5rem;
    color: var(--primary);
    padding: 2rem 0;
    text-shadow: 1px 1px 2px #a8a3a3;
    cursor: pointer;
}


.sobre .row .content p {
    font-size: 2.1rem;
    color: #7d7d7d;
    padding: 1rem 0;
    line-height: 1.8;
    text-transform: none;
    text-align: justify;

}

/*sobre FIM*/

/*quartos INICIO*/

.quartos .slide {
    background: var(--white);
    border: .1rem solid rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    margin-bottom: 4rem;
}

.quartos .slide .image {
    height: 25rem;
    width: 100%;
    padding: 1.5rem;
    overflow: hidden;
    position: relative;
}

.quartos .slide .image img {
    height: 100%;
    width: 100%;
    border-radius: .5rem;
    object-fit: cover;
}

.quartos .slide .image .preco {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    background: var(--primary);
    color: var(--white);
    font-size: 1.7rem;
    padding: .5rem 1rem;
    border-radius: .5rem;
    /* text-transform: lowercase; */
}

.quartos .slide .image .fa-shopping-cart {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    text-align: center;
    font-size: 2rem;
    background: var(--white);
    color: var(--black);
    border-radius: 50%;
}

.quartos .slide .image .fa-shopping-cart:hover {
    background: var(--primary);
    color: var(--white);
}

.quartos .slide .content {
    padding: 2rem;
    padding-top: 0;
}

.quartos .slide .content h3 {
    font-size: 2.5rem;
    color: var(--black);
}

.quartos .slide .content p {
    font-size: 1.6rem;
    color: #22212166;
    padding: .5rem 0;
    line-height: 1.5;
}

.quartos .slide .content .stars {
    padding: 1rem 0;
}

.quartos .slide .content .stars i {
    font-size: 1.7rem;
    color: var(--primary);
}

/*CLASSES DA PAGINATION DOS BOTOES NA SESSÃO QUARTOS*/

/* .my-pagination-bullet {
    background-color: #aaa;  cor de fundo dos botões da paginação 
    color:var(--primary);  cor do texto nos botões da paginação 
  } */
.my-pagination-bullet-active {
    background-color: var(--primary);
    /* cor de fundo do botão ativo da paginação */
    color: #fff;
    /* cor do texto do botão ativo da 
    paginação */
    opacity: 0.8;
}

/*quartos FIM*/


/*serciços INICIO*/

.services .box-container1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
}

.services .box-container1 .box {
    text-align: center;
}

.services .box-container1 .box img {
    height: 20rem;
    margin-bottom: .7rem;
}

.services .box-container1 .box img:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.services .box-container1 .box h3 {
    font-size: 1.7rem;
    color: var(--black);
    padding: .5rem 0;
}


/*New Gallery INICIO*/

.galeria {
    width: 100vw;
    /* Alteração: força a seção ocupar 100% da largura da viewport */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Evita scroll horizontal indesejado */
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1vw;
    padding: 43px 2vw;
    overflow: hidden;
    background-color: #feb477;
    height: 1180px;
    width: 100%;
}

@media (max-width:768px) {

    .galeria {}

    .gallery-container {
        height: 4300px;


    }

    .gallery-items:hover {
        transform: none !important;
    }
}

.gallery-items {
    width: 340px;
    height: 340px;
    border: 10px solid #FFF;
    box-shadow: 5px 5px 5px #0006;
    flex-grow: 1;
    transition: transform .5s linear;
    cursor: pointer;
    /* margin-bottom: 100px; */
}

.gallery-items img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-items:hover {
    transform: scale(1.1);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal-content {
    max-width: 50%;
    max-height: 80%;
    border-radius: 10px;
    object-fit: contain;



}

@media (max-width:768px) {
    .modal-content {
        max-width: 100%;
        max-height: 100%;
    }

    .close {
        top: 160px!important;
        right: 40px!important;
        font-size: 7rem!important;
    }
}

.close {
    position: absolute;
    top: 200px;
    right: 250px;
    font-size: 5rem;
    font-weight: bold;
    color: #ff1313;
    cursor: pointer;
}

.nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5rem;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.nav.prev {
    left: 20px;
}

.nav.next {
    right: 20px;
}

/*New Gallery FIM*/



/*---------------------foto grande---------------------------*/
/* .galeria .slide .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.9);
  }
  
  .galeria .slide .overlay img {
    max-width: 90%;
    max-height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
   */

/*------------------------------------------------------------*/

/*avaliações INICIO*/


.avaliacoes {
    background-image: url("img/frente003.jpg");
    background-position: center 70%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 48rem;
    position: relative;
    margin: 4rem 0;
}

.avaliacoes .review-slider {
    background: var(--black);
    padding: 2rem;
    width: 50%;
    height: 145%;
    margin-top: -8rem;
    margin-right: 60rem;
    padding-top: 6%;
    color: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
}

.avaliacoes .slide {
    text-align: center;
}

.avaliacoes .slide .titulo {
    color: var(--white);
    cursor: pointer;
}

.avaliacoes .slide i {
    font-size: 6rem;
    color: var(--primary);
}

.avaliacoes .slide p {
    padding-bottom: 1.5rem;
    padding-top: 3rem;
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--white);
    text-transform: none;
}

.avaliacoes .slide .user {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    border-radius: .5rem;
}

.avaliacoes .slide .user img {
    height: 7rem;
    width: 7rem;
    border-radius: 15%;
    object-fit: cover;
}

.avaliacoes .slide .user h3 {
    font-size: 2rem;
    color: white;
    padding-bottom: .5rem;
}

.avaliacoes .slide .user i {
    font-size: 1.3rem;
    color: var(--primary);
}

/*avaliações FIM*/

/*duvidas INICIO*/

.duvidas .row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.duvidas .row .image {
    flex: 1 1 40rem;
    /* 1 1 tamanhao max e min da imagem, 40rem tamanho maximo que se expande na horizontal*/
}

.duvidas .row .image img {
    width: 90%;
    height: 100%;
}

.duvidas .row .image img:hover {
    transform: scale(1.1);
    cursor: pointer;


}

.duvidas .row .content {
    flex: 1 1 40rem;
}

.duvidas .row .content .box {
    margin-top: 2rem;
}

.duvidas .row .content .box h3 {
    font-size: 2.5rem;
    color: var(--primary);
    padding: 1.5rem;
    cursor: pointer;

}



.duvidas .row .content .box h3:hover {
    transform: scale(1.05);
}

.duvidas .row .content .box .cli {
    font-size: 1.5rem;
    color: var(--extra);
    text-transform: none;
    cursor: default;
    transform: none !important;
}

.duvidas .row .content .box p {
    font-size: 2.2rem;
    padding: 1.5rem 2rem;
    line-height: 2;
    color: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    display: none;
    background: #bfbdbd;
    text-transform: none;

}

.duvidas .row .content .box.active p {
    display: inline-block;
}

/*duvidas FIM*/

/*reservas INICIO*/


.reservas form {
    padding: 2rem;
    border: .2rem solid rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
    background: var(--white);

}

.reservas form .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;

}

.reservas form .container .box {
    flex: 1 1 40rem;
}

.reservas form .container .box p {
    font-size: 1.8rem;
    color: var(--primary);
}

.reservas form .container .box .input {
    font-size: 1.8rem;
    width: 100%;
    padding: 1rem 0;
    margin: 1rem 0;
    border-bottom: .2rem solid rgba(0, 0, 0, 0.1);
    border-radius: .5rem;
    color: var(--black);
}




/*reservas FIM*/

/*maps INICIO  -----------------------*/


.reservas .mapss iframe {
    width: 100%;


}

/*maps FIM  --------------------------*/


/*footer INICIO*/

.footer {
    background: #e9daab;
}

.footer .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    gap: 1.5rem;
}

.footer .box-container .box {
    font-size: 2.2rem;
    padding: 1rem 0;
    color: #4c514f;
}

.footer .box-container .box a {
    font-size: 2.5rem;
    display: block;
    color: #4c514f;
    padding: 1rem 0;
    max-width: 70%;
    text-transform: none;
}

.footer .box-container .box .whats {
    color: #1eb14d;
    font-size: 26px;
}

.footer .box-container .box a i {
    color: var(--extra);
    padding-right: .5rem;


}

.footer .box-container .box a:hover {
    color: white;
    transform: rotateY(15deg);

}

.footer .share {
    padding-top: 2rem;
    text-align: center;
}
.footer .share .azul{
    color: #3863ce;
}
.footer .share a {
    color: rgb(202, 43, 197);
    font-size: 2.5rem;
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    border-radius: 50%;
    border: .1rem solid var(--white);
    margin: .3rem;
    transition: all ease .5s;

}

.footer .share a:hover {
    color: var(--primary);
    background: var(--black);
    transform: rotate(360deg);
}

.footer .creditos {
    font-size: 2rem;
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 3rem;
    border-top: .1rem solid rgba(0, 0, 0, 0.3);
    color: var(--black);
}


.footer .creditos a {
    color: var(--ancol);

}

.footer .creditos a:visited {
    text-decoration: none;
}

/*footer FIM*/


/*RESPOSIVIDADE*/

@media (max-width: 991px) {

    html {
        font-size: 55%;
    }

    .header {
        padding: 2rem 3rem;
    }
}

@media (max-width: 768px) {
    #menu-btn {
        display: inline-block;
    }

    .header .navbar {
        position: absolute;
        top: 110%;
        right: -110%;
        width: 30rem;
        box-shadow: var(--box-shadow);
        background: #fff7e3;
        border-radius: .5rem;

    }


    .header .navbar.active {
        right: 2rem;
        transition: .4s linear;
    }

    .header .navbar a {
        font-size: 2rem;
        margin: 2rem 2.5rem;
        display: block;
        color: var(--black);
    }

    .home .slide .content {
        width: 50rem;
    }

    .avaliacoes .review-slider {
        width: 100%;
        padding: 1rem;
        padding-top: 15%;
    }

    .header .navbar .btn {
        text-align: center;
    }

    .reservas form .alinha {
        border-radius: .5rem;
    }

    .duvidas .row .image img {
        width: 100%;

    }

    .home .alana {

        background-position: right !important;
    }
}

@media (max-width: 500px) {

    .home .slide {

        min-height: 80vh;
    }

    .home .alana {

        background-position: right !important;
    }

    .home .fot {

        background-position: calc(30% - 50px) center !important;

    }

    .home .fren {

        background-position: 17% top !important;


    }

    .sobre .row .content p {
        font-size: 2.1rem;

    }

    .duvidas .row .image img {
        width: 100%;

    }


}

@media (max-width: 450px) {

    html {
        font-size: 50%;
    }

    .home .slide .content {
        width: 30rem;
    }

    .home .slide .content h3 {
        font-size: 3rem;
    }
}