.banner{background:var(--azul);height:465px;width:100%}
.banner .container:before{width:100%;height:100%;background:url(../../images/marca-dagua-banner.png) no-repeat center -275px;background-size:64%;position:absolute;z-index:1;content:''}
.banner h1,.banner h2{text-transform:uppercase;color:#fff;font-weight:800;font-size:2.8em;letter-spacing:-1px;position:relative;padding-top:60px;z-index:2}
.banner p{color:var(--azul-claro);font-size:1.5em;margin:20px 0;font-weight:500;position:relative;z-index:2}
.banner a{position:relative;z-index:2;margin-bottom:80px}
.banner .txt{display:block;width:50%}
.banner .img{display:block;position:absolute;top:0;left:55%;z-index:0}
.banner .slick-dots{position:absolute;bottom:30px;display:flex;left:calc(50% - 639px);margin:0;padding:0;gap:0 10px}
.banner .slick-dots li{display:block}
.banner .slick-dots li button{display:block;width:15px;border-radius:50px;cursor:pointer;font-size:0;background-color:#fff;height:15px;border:none;transition:.5s;outline:none!important}
.banner .slick-dots .slick-active button{background:var(--azul-claro)}
@media (max-width: 1024px) {
.banner h1, .banner h2 {font-size: 1.5em; letter-spacing: 0px; padding-top: 30px}
.banner p {font-size: 1em}
.banner {height: auto;}
.banner .container {display: flex; flex-wrap: wrap-reverse;}
.banner .txt {width: 100%}
.banner .img {display: block; width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; position: relative; top: auto; left: auto;}
.banner .img img {display: block; width: 100%;}
.banner a {margin-bottom: 30px;}
}