body{margin:0}.hero{position:relative;height:50vh;width:100%;display:flex;align-items:center;justify-content:center;background:center/cover no-repeat}.hero:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0009;z-index:1}.hero-content{text-align:center;color:#fff;z-index:2;padding:20px}.hero-title{font-size:3em;margin-bottom:20px;animation:fadeInUp 1s ease-in-out}.hero-subtitle{font-size:1.5em;margin-bottom:30px;animation:fadeInUp 1s ease-in-out .5s}.hero-button{display:inline-block;padding:10px 20px;font-size:1.2em;text-decoration:none;color:#fff;background-color:#3498db;border-radius:5px;transition:background-color .3s ease-in-out}.hero-button:hover{background-color:#2980b9}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}