.hero-2 { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; padding-top: 15rem; padding-bottom: 15rem; .btn { padding: 1rem 2rem; border-radius: 30px; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .1rem; &.btn-white { background:rgba(var(--bs-body-bg-rgb), 0.2); color:#fff; } } >.container { position: relative; z-index: 2; } .heading { font-size: 3.2rem; font-weight: 700; color: var(--bs-light); } .subheading { font-size: 1.4rem; color: var(--bs-light); } .svg-wrapper { position: absolute; bottom: 0; width: 100%; left: 0; z-index: 2; } .overlay { background-color:rgba(var(--bs-primary-rgb), 1); opacity: 0.7; } .video-wrap { display: inline-block; position: relative; top: 0; -webkit-transition: .2s all ease; -o-transition: .2s all ease; transition: .2s all ease; .play-button { width: 50px; height: 50px; border-radius: 50%; background-color: var(--bs-success); color: var(--bs-white); line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } img { border-radius: 7px; -webkit-box-shadow: 0 15px 30px 0 rgba(var(--bs-body-color-rgb), 0.2); box-shadow: 0 15px 30px 0 rgba(var(--bs-body-color-rgb), 0.2); } &:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } } }