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

Template Name: Stratify - Business Consulting HTML Template
Author:  ThemeMascot
Author URI: https://themeforest.net/user/thememascot/portfolio
Version: 1.0.0
Description: Stratify - Business Consulting HTML Template

-------------------------------------------------------------------
CSS TABLE OF CONTENTS
*/


.dark-overlay-homeNOS {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 0.5 = 50% de opacidad */
    pointer-events: none; /* Deja clickeable la imagen o links debajo */
    z-index: 1;
}

.sobre-homeNOS{
    z-index: 2;
}


/* === Custom overlay oscuro para el banner === */

.banner-area.has-dark-overlay .banner__image::after {
  content: "";
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,.48); /* oscuridad ~48% */
  z-index: 2;
  pointer-events: none;     /* no bloquea clics del slider */
}

/* Asegura que textos y “cuadritos” queden por encima del overlay */
.banner-area.has-dark-overlay .banner__content,
.banner-area.has-dark-overlay .banner__dot {
  z-index: 3;
}

/* (Opcional) si alguna capa del swiper quedara encima, bájala */
.banner-area.has-dark-overlay .banner__image .swiper,
.banner-area.has-dark-overlay .banner__image .swiper-wrapper,
.banner-area.has-dark-overlay .banner__image .swiper-slide {
  z-index: 1;
}


.banner_area{
    height: 794px;
}

.imagen_area{
    padding: 303px;
}

@media (max-width: 575px) {
    .imagen_area {
    padding: 137px;
}
}
/*custom responsive banner dot villas*/
@media (max-width: 991px) {
    .banner__dot.custom_dot{
        display: flex;
    }
    .custom_dot a {
        font-family: var(--font-title);
        text-decoration: none;
        display: inline-block;
        color: inherit;
        -webkit-transition: var(--transition);
        transition: var(--transition);
        line-height: 20px;
    }
    .banner__dot.custom_dot .swiper-pagination-bullet .dot-content {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: justify;
        justify-content: center;
        height: 100%;
    }
    .banner__dot.custom_dot .swiper-pagination-bullet {
        width: 132px;
        height: 83px;
        padding: 7px 5px;
        opacity: 1;
    }
    .banner__dot.custom_dot {
        bottom: 28px !important;
        right: 108px !important;
        max-width: 425px;
        flex-direction: column;
    }
    .banner_area.custom_responsive {
        height: 692px;
    }
}
@media (max-width: 575px) {
    .imagen_area {
        padding: 166px 0px 154px 192px;
    }
}