.banner-container{position:relative;width:100vw;height:100vh;overflow:hidden}.banner-slide{opacity:0;transition:opacity .8s ease-in-out;background-size:cover;background-position:50%;background-repeat:no-repeat;background-color:#d3d3d3}.banner-slide,.banner-slide:before{position:absolute;top:0;left:0;width:100%;height:100%}.banner-slide:before{content:"";background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.5))}.banner-slide.active{opacity:1;z-index:1}.banner-content{position:absolute;top:70%;left:10%;text-align:start;color:#fff;z-index:2;width:80%;max-width:800px}.banner-content h1{font-size:5rem;font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.banner-content p{font-size:1.5rem;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.banner-nav{position:absolute;top:50%;transform:translateY(-50%);background:hsla(0,0%,100%,.1);border:none;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s ease;z-index:2;color:#fff}.banner-nav:hover{background:hsla(0,0%,100%,.2)}.banner-nav.prev{left:20px}.banner-nav.next{right:20px}.banner-indicators{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;grid-gap:12px;gap:12px;z-index:2}.indicator{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;transition:all .3s ease}.indicator.active{background:#fff;transform:scale(1.2)}@media (max-width:768px){.banner-content h1{font-size:2.5rem}.banner-content p{font-size:1.2rem}.banner-nav{width:45px;height:45px}.banner-content{position:relative;top:80%}}