/* =========================================================
   SARA RIBEIRO - PERSONALIZAÇÕES
   ========================================================= */


/* =========================================================
   LOGO SARA
   ========================================================= */

@media (min-width: 993px) {
    #header #logo img {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;

        position: absolute !important;
        top: calc(50% + 3px) !important;
        left: 0 !important;

        margin: 0 !important;
        transform: translateY(-50%) !important;

        object-fit: contain !important;
    }
}

@media (max-width: 992px) {
    #header #logo {
        margin-left: 15px !important;
        margin-right: 0 !important;
    }

    #header #logo img {
        width: 110px !important;
        max-width: 110px !important;
        height: auto !important;

        position: relative !important;
        top: auto !important;
        left: auto !important;

        margin: 0 !important;
        transform: translateY(-6px) !important;

        object-fit: contain !important;
        filter: none !important;
    }
}

@media (max-width: 480px) {
    #header #logo {
        margin-left: 10px !important;
    }

    #header #logo img {
        width: 105px !important;
        max-width: 105px !important;
    }
}


/* =========================================================
   HERO - BASE
   ========================================================= */

#hero-area {
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}


/* =========================================================
   SOMBRA UNIFORME DO HERO
   ========================================================= */

#hero-area::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: rgba(0, 0, 0, 0.18) !important;
    background-image: none !important;

    pointer-events: none !important;

    z-index: 0 !important;
}

/* remove camada extra */
#hero-area::after {
    content: none !important;
    display: none !important;
}

/* remove sombra antiga */
#hero-area .hero-main {
    background: transparent !important;
    background-color: transparent !important;
}

/* conteúdo acima da sombra */
#hero-area .hero-main,
#hero-area .container-lg,
#hero-area .banner-inner-wrap {
    position: relative !important;
    z-index: 1 !important;
}


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (min-width: 1200px) {

    #hero-area {
        height: 70vh !important;
        min-height: 620px !important;
        max-height: 760px !important;

        background-size: cover !important;
        background-position: 70% 8% !important;
    }

    #hero-area .banner-inner-wrap {
        height: 50vh !important;
        min-height: 440px !important;
    }

    #hero-area .banner-search-wrap {
        width: calc(100% - 24px) !important;
        max-width: 1420px !important;

        margin: 55px auto 0 !important;

        position: relative !important;
        box-sizing: border-box !important;

        transform: translateY(82px) !important;

        box-shadow: none !important;
    }

    #hero-area #search-component {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        box-sizing: border-box !important;
    }

    #hero-area #search-component .buscaImoveis {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (min-width: 993px) and (max-width: 1199px) {

    #hero-area {
        min-height: 600px !important;

        background-size: cover !important;
        background-position: 72% 18% !important;
    }

    #hero-area .banner-search-wrap {
        width: calc(100% - 48px) !important;
        max-width: 1120px !important;

        margin: 50px auto 0 !important;

        transform: translateY(65px) !important;

        box-sizing: border-box !important;
    }

    #hero-area #search-component {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #hero-area #search-component .buscaImoveis {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 992px) {

    #hero-area {
        height: auto !important;
        min-height: 760px !important;

        padding: 0 0 28px !important;

        background-size: cover !important;
        background-position: 78% center !important;
        background-repeat: no-repeat !important;
    }

    .homepage-5 #hero-area .hero-main,
    .homepage-5 #hero-area .banner-inner-wrap {
        height: auto !important;
        min-height: 0 !important;
    }

    #hero-area .banner-inner {
        display: none !important;
    }

    #hero-area .banner-search-wrap {
        width: calc(100% - 48px) !important;
        max-width: 620px !important;

        margin: 335px auto 0 !important;

        transform: none !important;

        position: relative !important;
        z-index: 2 !important;

        box-sizing: border-box !important;
    }

    #hero-area #search-component,
    #hero-area #search-component .buscaImoveis {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    #hero-area #search-component .buscaImoveis {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   MOBILE GERAL
   ========================================================= */

@media (max-width: 767px) {

    #hero-area {
        height: auto !important;
        min-height: 0 !important;

        padding: 0 !important;

        background-size: auto 104% !important;
        background-repeat: no-repeat !important;

        background-position: 88% 56% !important;
    }

    .homepage-5 #hero-area .hero-main,
    .homepage-5 #hero-area .banner-inner-wrap {
        height: auto !important;
        min-height: 0 !important;
    }

    /* esconde título */
    #hero-area .banner-inner {
        display: none !important;
    }

    /* caixa abaixo do rosto */
    #hero-area .banner-search-wrap {
        position: relative !important;
        z-index: 2 !important;

        transform: none !important;

        width: calc(100% - 30px) !important;
        max-width: 348px !important;

        margin: 342px auto 0 !important;

        padding: 20px 16px !important;

        height: auto !important;
        min-height: 0 !important;

        box-sizing: border-box !important;
    }

    #hero-area #search-component,
    #hero-area #search-component .buscaImoveis {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    #hero-area #search-component .buscaImoveis {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* correção Android */
    #hero-area .tab-content,
    #hero-area .tab-content > .tab-pane,
    #hero-area .tab-content > .active {
        margin-top: 0 !important;
        padding-top: 0 !important;

        height: auto !important;
        min-height: 0 !important;
    }
}


/* =========================================================
   MOBILE ATÉ 480px
   ========================================================= */

@media (max-width: 480px) {

    #hero-area {
        background-position: 88% 55% !important;
        background-size: auto 103% !important;
    }

    #hero-area .banner-search-wrap {
        width: calc(100% - 30px) !important;
        max-width: 348px !important;

        margin-top: 348px !important;

        padding: 20px 16px !important;
    }
}


/* =========================================================
   MOBILE PEQUENO
   ========================================================= */

@media (max-width: 380px) {

    #hero-area {
        background-position: 89% 54% !important;
        background-size: auto 102% !important;
    }

    #hero-area .banner-search-wrap {
        width: calc(100% - 24px) !important;
        max-width: 336px !important;

        margin-top: 336px !important;

        padding: 18px 14px !important;
    }
}


/* =========================================================
   ESCONDE QUEM SOMOS ANTIGO
   ========================================================= */

#quem-somos-home > .container > .quem-somos-card {
    display: none !important;
}


/* =========================================================
   FUNDOS ROSÉ
   ========================================================= */

section#quem-somos-home.modelo-quem-somos {
    background: #f8f1f3 !important;
}

section.properties-list.featured.portfolio.blog {
    background: #f8f1f3 !important;
    background-color: #f8f1f3 !important;
}


/* =========================================================
   RESULTADOS - FUNDOS ROSÉ
   ========================================================= */

.properties-list.full.featured.portfolio.blog section.headings-2 {
    background: #f8f1f3 !important;
    background-color: #f8f1f3 !important;
}

.properties-list.full.featured.portfolio.blog section.headings-2 .pro-wrapper {
    background: transparent !important;
}


/* =========================================================
   CARDS DE IMÓVEIS COM ALTURA IGUAL
   ========================================================= */

section.properties-list.featured.portfolio.blog .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

section.properties-list.featured.portfolio.blog .row > .item {
    display: flex !important;
}

section.properties-list.featured.portfolio.blog .project-single {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
}

section.properties-list.featured.portfolio.blog .homes-content {
    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;

    min-height: 0 !important;
}




/* =========================================================
   SOBRE SARA - DESKTOP
   ========================================================= */

section#quem-somos-home .imagem-card img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
}

/* primeira foto */
section#quem-somos-home .imagem-card-1 img {
    object-position: center top !important;
}

/* segunda foto */
section#quem-somos-home .imagem-card-2 img {
    object-position: 85% center !important;
}


/* =========================================================
   SOBRE SARA - TELAS MÉDIAS
   ========================================================= */

@media (max-width: 1100px) {

    section#quem-somos-home .quem-somos-bloco {
        display: flex !important;
        flex-direction: column !important;

        gap: 40px !important;
    }

    section#quem-somos-home .quem-somos-imagem {
        position: relative !important;

        width: 100% !important;
        max-width: 700px !important;
        min-height: 0 !important;

        margin: 0 auto !important;

        display: flex !important;
        gap: 20px !important;

        align-items: stretch !important;
    }

    section#quem-somos-home .imagem-card-1,
    section#quem-somos-home .imagem-card-2 {
        position: relative !important;

        width: 50% !important;
        height: auto !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    section#quem-somos-home .imagem-card-1 img,
    section#quem-somos-home .imagem-card-2 img {
        width: 100% !important;
        height: 100% !important;

        aspect-ratio: 4 / 5 !important;

        object-fit: cover !important;

        display: block !important;
    }

    /* primeira foto centralizada */
    section#quem-somos-home .imagem-card-1 img {
        object-position: center top !important;
    }

    /*
       Segunda foto:
       Sara está no lado direito da imagem,
       então puxamos o recorte totalmente para a direita.
    */
    section#quem-somos-home .imagem-card-2 img {
        object-position: 100% center !important;
    }

    section#quem-somos-home .quem-somos-texto {
        width: 100% !important;
        max-width: 800px !important;

        margin: 0 auto !important;
    }
}


/* =========================================================
   SOBRE SARA - CELULAR
   ========================================================= */

@media (max-width: 600px) {

    section#quem-somos-home .quem-somos-imagem {
        flex-direction: column !important;

        width: 100% !important;
        max-width: 420px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    section#quem-somos-home .imagem-card-1,
    section#quem-somos-home .imagem-card-2 {
        width: 100% !important;
        height: auto !important;
    }

    section#quem-somos-home .imagem-card-1 img,
    section#quem-somos-home .imagem-card-2 img {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: auto !important;

        object-fit: contain !important;
        object-position: center !important;

        display: block !important;
    }
}

/* =========================================================
   DROPDOWNS DA BUSCA SEM FICAR CORTADOS
   ========================================================= */

#hero-area,
#hero-area .banner-search-wrap,
#hero-area #search-component,
#hero-area .buscaImoveis,
#hero-area .tab-content,
#hero-area .tab-pane {
    overflow: visible !important;
}

#hero-area .nice-select {
    position: relative !important;
    z-index: 20 !important;
}

#hero-area .nice-select.open {
    z-index: 9999 !important;
}

#hero-area .nice-select .list {
    z-index: 10000 !important;
}

#hero-area .nice-select .list {
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}