/*=========== TABLE OF CONTENTS ===========
1.  CSS General
2.  Header
A.  Home
  3.  Hero home
  4.  Propiedades
  5.  Fraccionamiento destacado
  6.  Lista propiedades
  7.  Testimonios
  8.  Contador
  9.  Por qué
  10. Blog
  11. FAQ
  12. Testimonios
  13. Banner WS
B.  Portafolio
  14. Hero Portafo
  15. Filtro Portafo
  16. Agendar Portafo
C.  Servicios
  17. Hero Servicios
  18. Contenido servicios
  19. Credenciales
  20. Misión/Visión
  21. Valores
D.  Promociones
  22. Contenido promociones
E.  Contacto
  23. Contenido contacto
Footer
===========================================*/
@media (max-width: 768px) {
    /*=====================================
        1.  CSS General
    =======================================*/
    .underline-ver-1 {
        width: 100px;
    }

    .underline-dots,
    .underline-dots-1,
    .underline-dots-2 {
        width: 114px;
    }

    .circul {
        width: 9px;
        height: 9px;
    }

    .back-to-top {
        right: 24px;
    }

    .btn-colapse {
        right: 18px;
    }

    .tlf {
        display: block;
    }
    .desk {
        display: none;
    }

    /*=====================================
        2.  Header
    =======================================*/
    .navbar-brand  {
        width: 232px;
    }

    .logo-header {
        width: 100%;
    }

    /*=====================================
        A.  Home
    =======================================*/
    /*-------------------------------------
            3.  Hero home
    --------------------------------------*/
    .col-header-home1 {
        padding: 25px !important;
        padding-bottom: 48px !important;
    }
    .header-carousel .owl-nav {
        position: absolute;
        top: 1%;
        left: 21%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 216px;
    }
    .header-carousel .owl-nav .owl-prev,
    .header-carousel .owl-nav .owl-next {
        width: 43px;
        height: 43px;
        font-size: 15px;
    }
    .container-hero-home {
        width: auto;
    }
    .container-hero-home .row  {
        display: flex;
        flex-direction: column !important;
    }

    .col-header-home {
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%;
    }

    .titu-hero {
        width: auto;
        font-size: var(--subtitu-tlf);
        line-height: 22px;
    }

    .txt-hero {
        width: auto;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    /*-------------------------------------
            4.  Propiedades
    --------------------------------------*/
    .titu-propie {
        font-size: var(--titulo-tlf);
    }

    .subtitu-propie {
        font-size: var(--subtitu-tlf);
    }

    .txt-propie {
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    .txt-propie1 {
        width: 172px;
        margin: 14px auto 0 !important;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    .cat-item div {
        padding: 16px !important;
        border: 2px dashed rgba(93, 139, 20, 0.6);
    }

    .btn-invert {
        width: 40%;
        padding: 11px !important;
        font-size: var(--parrafo-tlf);
    }

    /*-------------------------------------
            5.  Fraccionamiento destacado
    --------------------------------------*/
    .about-img {
        padding: 23px !important;
    }

    .titu-noso {
        width: auto;
        font-size: var(--titulo-tlf);
        line-height: 32px;
    }

    .txt-fraccio-destaca, .punto-fraccio-destaca {
        width: auto;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    .btn-somos {
        margin-left: 83px;
        font-size: var(--parrafo-tlf);
    }

    /*-------------------------------------
            6.  Lista propiedades
    --------------------------------------*/
    .container-propied-home {
        padding-top: 21px !important;
        padding-bottom: 32px !important;
    }

    .titu-propies1 {
        font-size: var(--parrafo-tlf);
        line-height: 15px;
        letter-spacing: 9px;
    }

    .titu-propies2 {
        font-size: var(--titulo-tlf);
    }

    .txt-propies {
        width: auto;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    /*-------------------------------------
            7.  Testimonios
    --------------------------------------*/
    .titu-testimo {
        margin-top: -28px;
        font-size: var(--titulo-tlf);
    }

    .titu-testimo span {
        font-size: 35px !important;
    }

    .txt-testimo {
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    /*=====================================
        B.  Portafolio
    =======================================*/
    /*-------------------------------------
            14. Hero Portafo
    --------------------------------------*/
    .titu-hero-protafo {
        font-size: var(--titulo-tlf);
        line-height: 32px;
    }

    /*-------------------------------------
            15. Filtro Portafo
    --------------------------------------*/
    .vid-propie {
        width: 315px !important;
        height: 177px !important;
    }

    .col-geolocaliza {
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%;
    }

    .col-geolocaliza1 {
        height: 228px;
    }

    .col-geolocaliza2 {
        overflow-y: hidden;
        overflow-x: scroll;
        height: 483px;
    }

    .btn-fraccion {
        -ms-flex: 0 0 88%;
            flex: 0 0 88%;
        max-width: 100%;
        margin: 8px;
    }

    .list-fraccion {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-left: 3%;
    }

    .btn-fraccion .property-item h5 {
        font-family: 'Mont';
        font-size: 12px;
        color: var(--verde-osc) !important;
    }

    .nom-direcc  {
        font-size: var(--parrafo);
    }

    .direcc-protafo {
        display: block;
        width: 88%;
        margin-bottom: 9px;
        font-size: 13px;
    }

    /*-------------------------------------
            16. Agendar Portafo
    --------------------------------------*/
    .titu-agenda {
        font-size: var(--titulo-tlf);
        text-align: center;
        line-height: 32px;
    }

    .btn-llamar,
    .btn-agendar {
        display: block !important;
        width: 176px;
        margin: 16px auto !important;
        font-size: var(--parrafo-tlf);
    }

    /*=====================================
        C.  Servicios
    =======================================*/
    /*-------------------------------------
            17. Hero Servicios
    --------------------------------------*/
    .contain-hero-somos {
        padding: 40px 19px 47px;
    }

    .txt-hero-somos {
        margin-bottom: 2px;
        font-family: 'Mont';
        font-size: var(--titulo-tlf-1);
        line-height: 40px;
    }

    .txt-hero-somos span {
        font-size: 33px;
    }

    .titu-hero-somos {
        font-size: var(--parrafo-grd-1);
        line-height: 21px;
    }

    /*-------------------------------------
            18. Contenido servicios
    --------------------------------------*/
    .col-somos:nth-child(1) {
        display: none;
    }

    .titu-somos1 {
        font-size: var(--parrafo-tlf);
        line-height: 16px;
    }

    .titu-somos2 {
        font-size: var(--titulo-tlf);
        line-height: 18px;
    }

    .txt-somos {
        width: auto;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    /*-------------------------------------
            19. Credenciales
    --------------------------------------*/
    .row-creden {
        --bs-gutter-x: 0;
    }

    .col-creden {
        -ms-flex: 0 0 72%;
            flex: 0 0 72%;
        max-width: 100%;
        margin: 0 12px 15px;
    }

    .contain-creden {
        margin: auto !important;
        width: 221px;
        height: 221px;
    }

    .num-creden {
        margin: 0;
        font-size: var(--subtitu-tlf);
        font-weight: 700;
        text-align: center;
        color: var(--blanco);
    }

    .txt-creden {
        font-size: var(--subtitu-tlf);
        line-height: 22px;
    }

    /*-------------------------------------
            20. Misión/Visión
    --------------------------------------*/
    .titu-mis-vis {
        font-size: var(--titulo-tlf);
        line-height: 37px;
    }

    .txt-mis-vis {
        font-size: var(--parrafo-tlf);
    }

    /*-------------------------------------
            21. Valores
    --------------------------------------*/
    .col-mis-vis1 {
        border-right: 0;
        border-bottom: 3px solid var(--blanco);
    }

    .col-mis-vis {
        padding: 14px 22px;
    }

    .col-valores1 {
        display: none;
    }

    .titu-valores {
        margin-bottom: 14px;
        font-size: var(--titulo-tlf);
    }

    .titu-item-valores img {
        -ms-flex: 0 0 16%;
            flex: 0 0 16%;
        max-width: 16%;
    }
    .titu-item-valores p {
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        max-width: 100%;
        font-size: var(--subtitu-tlf);
        line-height: 22px;
    }

    .txt-item-valores {
        width: auto;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    /*-------------------------------------
            20. Misión/Visión
    --------------------------------------*/
    .row-mis-vis {
        --bs-gutter-x: 0;
    }

    /*=====================================
        D.  Promociones
    =======================================*/
    /*-------------------------------------
            22. Contenido promociones
    --------------------------------------*/
    .titus-promociones {
        margin-bottom: 9px;
        font-size: var(--titulo-tlf);
        line-height: 30px;
    }

    .col-promociones {
        -ms-flex: 0 0 91%;
            flex: 0 0 91%;
        max-width: 100%;
    }

    .head-back-promo,
    .body-back-promo {
        padding: 0 29px;
    }

    .titu-promo-front {
        font-size: var(--titulo-tlf);
        line-height: 32px;
    }

    .logo-promo-front {
        width: 69%;
    }

    .titu-body-front {
        font-size: var(--titulo-tlf);
        line-height: 32px;
    }

    .subtitu-body-front {
        font-size: var(--subtitu-TLF);
    }

    .contain-back-promo {
        display: grid;
        align-content: space-between;
        width: 100%;
        height: 100%;
        padding-top: 24px;
        background: url("../img/4-promociones/textura-pq.webp") 0 0 no-repeat;
        background-position: center;
    }

    .titu-promo-back {
        margin-bottom: 9px;
        font-size: var(--titulo-tlf);
        line-height: 24px;
    }

    .txt-descrip-promo {
        font-size: var(--parrafo);
        line-height: 17px;
    }
    .col-back-promo1,
    .col-back-promo2 {
        border-right: 0;
        border-bottom: 1px dashed var(--blanco);
    }

    .footer-back-promo {
        padding: 0;
    }

    /*=====================================
        F.  Proyectos
    =======================================*/
    /*-------------------------------------
            24. Hero proyectos
    --------------------------------------*/
    .contain-hero-proyectos {
        padding: 40px 19px 47px;
    }

    .txt-hero-proyectos {
        font-size: var(--subtitu-tlf);
        letter-spacing: 5px;
    }

    .titu-hero-proyectos {
        font-size: var(--titulo-tlf);
        line-height: 32px;
    }

    /*-------------------------------------
            25. Contenido proyectos
    --------------------------------------*/ 
    .row-proyectos {
        --bs-gutter-y: 0;
    }

    .vid-proyec {
        width: 325px !important;
        height: 183px !important;
    }

    .titu-proye1 {
        margin-top: 14px;
        margin-bottom: 10px !important;
        font-size: var(--parrafo-tlf);
        letter-spacing: 7px;
    }

    .list-ventajas-proyec-2 {
        margin-top: 33px;
    }

    .titu-proye2 {
        font-size: var(--titulo-tlf);
        line-height: 32px;
    }

    .txt-proyec {
        margin-bottom: 12px !important;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }

    .titus-item-proyec {
        margin-bottom: 0 !important;
        font-size: var(--parrafo);
        line-height: 17px;
    }

    .contain-btns-proyec {
        display: flex;
        justify-content: center;
        margin-top: 21px;
    }

    .btn-proyec {
        width: 141px;
        font-size: var(--parrafo-tlf);
        line-height: 15px;
    }


    /*=====================================
        Footer
    =======================================*/
    .container-foot-top {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .row-footer {
        display: flex;
        justify-content: center;
        --bs-gutter-y: 8px !important;
    }

    .col-foot-1,
    .col-foot-2 {
        -ms-flex: 0 0 47% !important;
            flex: 0 0 47% !important;
        max-width: 100% !important;
    }
    .col-foot-3,
    .col-foot-4 {
        -ms-flex: 0 0 100% !important;
            flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .btn-link {
        margin-bottom: 0;
    }
    .firma-foot {
        font-size: 13px;
        text-align: center;
    }
}

@media (min-width: 1500px) {
    /*=====================================
        1.  CSS General
    =======================================*/
    .underline-ver-1 {
        width: 540px;
    }
    .circul {
        width: 14px;
        height: 14px;
    }

    /*=====================================
        A.  Home
    =======================================*/
    /*-------------------------------------
            3.  Hero home
    --------------------------------------*/
    .titu-hero {
        width: 543px;
        font-size: var(--titulo-grd-1);
    }

    .txt-hero {
        width: 550px;
        font-size: var(--parrafo-grd-1);
    }

    .btn-hero {
        font-size: var(--parrafo-grd-1);
        border: 3px solid var(--azul-osc);
    }

    /*-------------------------------------
            5.  Fraccionamiento destacado
    --------------------------------------*/
    .titu-noso {
        width: 568px;
        font-size: var(--titulo);
        line-height: 37px;
    }

    .txt-fraccio-destaca, .punto-fraccio-destaca {
        font-family: 'Mont';
        font-size: var(--parrafo-grd-1);
        line-height: 21px;
        color: var(--azul-osc);
    }

    /*-------------------------------------
            6.  Lista propiedades
    --------------------------------------*/
    .titu-propies1 {
        font-size: var(--parrafo-grd-1);
    }

    .titu-propies2 {
        font-size: var(--titulo-grd-1);
    }

    .txt-propies {
        width: 800px;
        font-size: var(--parrafo-grd-1);
    }

    .btn-list-propies {
        font-size: 16px;
    }
    
    /*=====================================
        B.  Portafolio
    =======================================*/
    /*-------------------------------------
            15. Filtro Portafo
    --------------------------------------*/
    .col-geolocaliza2 {
        height: 521px;
    }

    .propies-flex {
        padding: 0 12px;
    }

    .btn-fraccion img {
        width: 311px;
    }

    .btn-fraccion p {
        font-size: 17px;
    }

    .titus-fraccion {
        font-size: var(--subtitu);
    }
    /*-------------------------------------
            18. Contenido servicios
    --------------------------------------*/
    .col-somos:nth-child(2) {
        padding-left: 48px;
    }
    .titu-somos1 {
        font-size: var(--parrafo-grd);
        letter-spacing: 11px;   
    }
    .titu-somos2 {
        font-size: var(--titulo-grd-1);
    }
    .txt-somos {
        width: 494px;
        font-size: var(--parrafo-grd-1);
        line-height: 21px;
    }

    /*-------------------------------------
            19. Credenciales
    --------------------------------------*/
    .contain-creden {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 243px;
        border-radius: 100%;
        background-color: #294d5a;
        -webkit-box-shadow: 5px 4px 10px 3px rgba(0,0,0,0.45);
           -moz-box-shadow: 5px 4px 10px 3px rgba(0,0,0,0.45);
                box-shadow: 5px 4px 10px 3px rgba(0,0,0,0.45);
    }
}