*{box-sizing:border-box;margin:0;padding:0}body{font-family:poppins;height:100vh}.slider-container{position:relative;overflow:hidden;width:100%;height:60vh}.slidel{display:none;height:100%;width:100%;display:flex;flex-direction:row}.left-slide{width:40%;display:flex;flex-direction:column;justify-content:center;color:#fff;padding:2rem}.left-slide h1{font-size:2rem;margin-bottom:10px}.slidel p{font-size:1rem}.right-slide{width:60%;background-repeat:no-repeat;background-size:cover;background-position:center center}button{background-color:#fff;border:none;color:#aaa;cursor:pointer;font-size:16px;padding:15px}button:hover{color:#222}button:focus{outline:0}.slider-container .action-buttons button{position:absolute;left:40%;top:50%;z-index:100}.slider-container .action-buttons .down-button{transform:translateX(-100%);border-top-left-radius:5px;border-bottom-left-radius:5px}.slider-container .action-buttons .up-button{transform:translateY(-100%);border-top-right-radius:5px;border-bottom-right-radius:5px}button svg{width:24px;height:24px;fill:#aaa;font-size:1.7rem;font-weight:bolder}@media (max-width:1024px){.left-slide,.right-slide{width:50%}.slider-container .action-buttons button{left:50%}.slider-container{height:40vh}}@media (max-width:767px){.slider-container{height:100vh;width:100vw;overflow:hidden}.slidel{flex-direction:column}.left-slide{padding:1rem}.left-slide,.right-slide{height:50vh;width:100%;display:flex;justify-content:center}.right-slide{background-position:center center}.slider-container .action-buttons{position:absolute;left:50%;top:50%;z-index:100;transform:translateX(-50%);display:flex;flex-direction:row}.slider-container .action-buttons button{margin:0 5px}}