.getInvolvedBtn{background-color:var(--mainColor);color:var(--mainWhite);border-radius:9999px;padding:.8rem 1.5rem;font-size:1rem}.getInvolvedBtn:hover{background-color:#570a1f;transition:all .2s ease-in-out}@media screen and (max-width:480px){.getInvolvedBtn{padding:.5rem 1rem}}
.hero{height:80vh;margin-top:4rem;position:relative;overflow:hidden}.heroSlider{width:100%;height:100%;position:relative}.sliderImage{object-fit:cover;opacity:0;z-index:1;width:100%;height:100%;transition:opacity 1s ease-in-out;position:absolute;top:0;left:0}.sliderImage.active{opacity:1;z-index:2}.overlay{z-index:3;background-color:rgba(0,0,0,.5);width:100%;height:100%;position:absolute;top:0;left:0}.heroContent{z-index:4;color:#fff;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.heroContent h1{font-size:5rem;font-weight:700;line-height:7rem;font-family:var(--font-caveat);margin-bottom:1rem}.heroContent p{margin:0 0 3rem;font-size:1.5rem;font-weight:300}@media screen and (max-width:480px){.hero{height:50vh;margin-top:5rem}.heroContent h1{font-size:2rem;line-height:2rem}.heroContent p{margin-bottom:2rem;font-size:1rem;font-weight:400}.heroBtns{flex-direction:column;gap:1rem}}