* { list-style: none; font-family: 'Open Sans', sans-serif; }
a:hover { text-decoration: none; }


/* CUSTOM 
        SCROLLBAR  */

/* Largura da barra de rolagem */
::-webkit-scrollbar { width: 8px; }

/* Fundo da barra de rolagem */
::-webkit-scrollbar-track-piece { background-color: #EEE; border-left: 1px solid #CCC }

/* Cor do indicador de rolagem */
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal { background-color: rgb(37, 35, 36) }

/* Cor do indicador de rolagem - ao passar o mouse */
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover { background-color: #717171 }


/* HEADER */
.header { background-image: url(../img/background/bg-main.png); background-size: cover; height: 98vh; background-position: center; background-repeat: no-repeat; border-bottom: 6px solid #ffcb08; position: relative; }

.header .info-bar { padding: 12px 10px; font-size: 18px; border-bottom: 1px solid #fff; }
.header .info-bar .info-left span { padding: 0 12px; color: #fff; font-weight: 500; }

.header .info-bar .info-right p { color: #fff; margin-bottom: 0; font-weight: 500; }
.header .info-bar .info-right p a { padding: 0 8px; font-size: 18px; color: #fff; }

/* MENU 
      NAVBAR */
.logo { background-image: url(../img/logo.png); background-repeat: no-repeat; background-size: cover; background-size: 190px; height: 190px; }
.btn-menu { background-color: #fff; width: 50px; height: 50px; line-height: 50px; text-align: center; display: inline-block; color: rgb(243, 211, 64); font-size: 22px; border-radius: 50%; box-shadow: 4px 4px 6px 4px rgba(0, 0, 0, 0.1), 3px 3px 3px 2px rgba(0, 0, 0, 0.26); transition: all .4s ease-in-out; }
.btn-menu:hover { background-color: rgb(243, 211, 64); color: rgb(37, 35, 36); transition: all .4s ease-in-out; }

/* MAIN 
      HEADER */
.main-header { display: flex; height: 45vh; align-items: center; }
.main-header .main-text { color: #fff; }
.main-header .main-text h2 { font-size: 3.5rem; font-weight: 700; position: relative; z-index: 1; color: rgb(243, 211, 64); text-shadow: 3px 4px 4px #3d3a3a08, 4px 2px 7px #242425c4 }
.main-header .main-text h5 { text-shadow: 1px 1px 1px #3d3a3a8a, 4px 2px 3px #2424257d; }

/* BUTTON 
        MAIN HEADER */
.btn-reserve a {display: inline-block; transition: all .3s ease-in-out; }
.btn-reserve a span { position: relative; z-index: 1; color: #fff; font-weight: bold; padding: 0 4px; text-shadow: 1px 1px 1px #3d3a3a14, 4px 2px 3px #24242547; }
.btn-reserve a span::after { content: ''; background-color: rgb(243, 211, 64); position: absolute; display: inline-block; width: 100%; height: 13px; right: -1px; top: 10px; z-index: -1; }
.btn-reserve a:hover { transform: translateX(16px); transition: all .3s ease-in-out;}

/* BENEFITS 
        SECTION */
.benefits { position: relative; }

.benefits .title { border-left: 3px solid rgb(37, 35, 36); padding-left: 12px; }
.benefits .title h3 { font-weight: 600; }
.benefits .list h6 { font-weight: 600; margin-bottom: 4px; }
.benefits .list li { margin-bottom: 14px; }
.benefits .list li i { color: rgb(243, 211, 64); font-size: 20px; }
.benefits .list li p { margin-left: 21px; width: 300px; font-size: 14px; }


/* HOW IT WORKS 
            SECTION */
.how-it-works .four-steps header { border-left: 3px solid rgb(37, 35, 36); padding-left: 12px; }
.how-it-works .four-steps header h2 { font-size: 2.5rem; }
.how-it-works .four-steps .step-list li:last-child { height: inherit; }
.how-it-works .four-steps .step-list li .content { display: flex; }
.how-it-works .four-steps .step-list li .content h5 { margin-bottom: 0; }
.how-it-works .four-steps .step-list li .content p { margin-bottom: 0; }
.how-it-works .four-steps .step-list li .content h5 { font-weight: bold; }
.how-it-works .four-steps .step-list li .content h5 span { color: #ffcb08;}
.how-it-works .four-steps .step-list li .content .number { background-color: #ffcb08; color: #fff; position: relative; display: inline-block; width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 50%; font-weight: bold; font-size: 2rem; box-shadow: inset 14px 4px 9px 2px rgba(0, 0, 0, 0.13), 2px 3px 3px 2px rgba(0, 0, 0, 0.06); }
.how-it-works .four-steps .step-list li .content .number p { margin-bottom: 0; text-shadow: 3px 4px 0px rgba(0, 0, 0, 0.17); }
.how-it-works .four-steps .step-list li .content .flex-item-1 { flex: 1; }


/* GALLERY 
        SECTION */
.gallery .grid-container .item-1 { grid-area: item-1; }
.gallery .grid-container .item-2 { grid-area: item-2; }
.gallery .grid-container .item-3 { grid-area: item-3; }
.gallery .grid-container .item-4 { grid-area: item-4; }
.gallery .grid-container .item-5 { grid-area: item-5; }
.gallery .grid-container .item-6 { grid-area: item-6; }

.gallery header h2 span { font-size: 1.2rem; font-weight: 600; line-height: 14px; display: block; }
.gallery .grid-container div img { box-shadow: 1px 1px 4px 3px rgba(0, 0, 0, 0.12), 1px 1px 9px 1px rgba(0, 0, 0, 0.06); }


/* DISCOUNTS 
        SECTION */
.discounts { background-image: url(../img/banners/banner-sao-joao.png); background-repeat: no-repeat; background-position: center; height: 66vh; display: flex; align-items: center; }
.discounts .text-discount { color: #fff; text-shadow: 5px 3px 0px rgba(0, 0, 0, 0.3); }
.discounts .text-discount h2, h3 { font-weight: bolder; }
.discounts .text-discount a.btn-discounts { background: #ffcb08; color: #fff; padding: 12px 24px; display: inline-block; border-radius: 10px; font-weight: bold;         text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.48); font-size: 18px; box-shadow: 1px 1px 4px 3px rgba(0, 0, 0, 0.12), 1px 1px 9px 1px rgba(0, 0, 0, 0.06);  }


/* CLOSER PLACES 
             SECTION */
.closer-places .card-places.academia { background-image: url(../img/lugares/academia.png); }
.closer-places .card-places.praia { background-image: url(../img/lugares/praia-boa-viagem.png); }
.closer-places .card-places.shopping { background-image: url(../img/lugares/shopping.png); }
.closer-places .card-places.recife { background-image: url(../img/lugares/recife-antigo.png); }
.closer-places .card-places.cultura { background-image: url(../img/lugares/casa-da-cultura.png); }
.closer-places .card-places.restaurante { background-image: url(../img/lugares/restaurante.png); }

.closer-places .btn-places span { color: #ffcb08; font-weight: bold; }
.closer-places .card-places { height: 400px; border-radius: 6px; position: relative; background-repeat: no-repeat; background-size: cover; overflow: hidden; box-shadow: 1px 2px 4px 3px rgba(0, 0, 0, 0.2), 1px 3px 9px 1px rgba(0, 0, 0, 0.05); }
.closer-places .card-places .text-place { position: absolute; bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 33%, rgba(0,0,0,0) 100%); width: 100%; color: #fff; font-weight: bold; padding-bottom: 10px; }
.closer-places .card-places .text-place h5 { margin-left: 18px; font-weight: 600; }



/* ABOUT SUN 
        SECTION */
.about-sun header h2 { font-size: 1.6rem; }        
.about-sun header h3 { font-size: 2.6rem; }
.about-sun header h3 span { color: #ffcb08; }


/* FAQ 
     SECTION */
.faq .faq-card .faq-card-header { border-bottom: 1px solid #ccc; padding-bottom: 14px; cursor: pointer; }
.faq .faq-card .card-body { border-bottom: 1px solid #ccc; padding-bottom: 6px; }
.faq .faq-card .faq-card-header h5 span { color: #ffcb08; font-size: 1.7rem; }
.faq-card-header h5:after { font-family: "Font Awesome 5 Free"; font-size: 15px; content: "\f067"; float: right; width: 22px; height: 22px; line-height: 21px; margin-top: 10px; text-align: center; color: #ffcb08; border: 1px solid #ffcb08; border-radius: 50%; transition: all .3s; }
.faq-card-header h5[aria-expanded="true"]:after { transform: rotate(-180deg); content: "\f068"; }



/* *** FOOTER *** */
.footer { border-bottom: 2px solid rgba(204, 204, 204, 0.39); }
.footer .media .media-body ul li span { color: #ffcb08; font-weight: 700; }
.footer .social-icons a { display: inline-block; width: 45px; height: 45px; line-height: 44px; text-align: center; background-color: #ffcb08; color: rgb(37, 35, 36); border-radius: 50%; font-size: 18px; transition: all .4s ease-in-out; box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.2), 1px 3px 2px 1px rgba(0, 0, 0, 0.05); }
.footer .social-icons a:hover { background-color: rgb(37, 35, 36); color: #ffcb08; transition: all .4s ease-in-out; }
.footer .site-map li { margin-bottom: 4px; }
.footer .site-map li a { color: rgb(37, 35, 36); border-bottom: 1px dotted rgba(37, 35, 36, 0.336); }

/* dev by */
.dev-by a { color: #707070; }


@media(min-width: 768px) {
    /* TOOLS */
    .mt-negative { margin-top: -55px; }
    .w-md-100 { width: 100%!important; max-width: 85%; }

    /* MAIN 
          HEADER */
    .header::after { content: 'SUN!'; display: inline-block; position: absolute; bottom: 0; right: 0; width: 270px; height: 40px; color: #ffcb08; font-size: 6.5rem; font-weight: 800; }
    .header .info-bar .info-left span:nth-child(1) { border-right: 1px solid #fff; }

    .main-header { height: 36vh; }
    .main-header .main-text h2 { color: #fff; text-shadow: 1px 1px 1px #3d3a3a14, 4px 2px 3px #24242547; }
    .main-header .main-text h2::after { content: ''; background-color: #ffcb08; display: block; width: 94%; height: 30px; position: absolute; top: 35px; right: 33px; z-index: -1; }

     /* BENEFITS 
              SECTION */
    .benefits::after { content: 'HOTEL'; display: inline-block; position: absolute; width: 400px; height: 156px; color: #fff; text-shadow: 7px 5px 7px #3d3a3a1c; font-size: 13rem; font-weight: 700; right: 27%; bottom: 31%; z-index: -1; }
    .benefits::before { content: 'SMART'; display: inline-block; position: absolute; width: 400px; height: 156px; color: #fff; text-shadow: 3px 2px 3px #3d3a3a0f; font-size: 13rem; font-weight: 700; right: 46%; top: 2%; z-index: -1; }


     /* HOW IT WORKS 
                  SECTION */
    .how-it-works .four-steps .step-list li { height: 150px; }
    .how-it-works .four-steps .step-list li .content .number::before { content: ''; background-color: #fff; display: block; position: absolute; height: 64px; width: 4px; right: 46%; bottom: -76px;  border-left: 6px dotted #000000b4; }
    .how-it-works .four-steps .step-list li:last-child .content .number::before { display: none; }

     /* GALLERY 
            SECTION */
    .gallery .grid-container { display: grid; grid-template-areas: "item-1 item-2 item-3" "item-4 item-2 item-6" "item-4 item-5 item-6"; }
    .gallery .grid-container div img { margin: 5px }

     /* DISCOUNTS 
             SECTION */
    .discounts .text-discount h2 { font-size: 3rem; }
    .discounts .text-discount h3 { font-size: 2.8rem; }
}