.hero {
     position: relative;
     height: 200px;
     background-repeat: no-repeat;
     background-size: cover;
     display: flex;
     justify-content: center;
     box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .4);
 }


 .hero-logo-cont {
     display: grid;
     border-radius: 20px;
     box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.2);
     border: 6px solid #EEEEEE;
     place-items: center;
     position: absolute;
     aspect-ratio: 1/1;
     height: 30vw;
     max-height: 200px;
     width: 30vw;
     bottom: -60px;
     max-width: 200px;
     background-color: white;
 }

 .hero-logo-img {
     width: 100%;
     border-radius: 16px;
 }

 .logo-text-cont {
     width: 100%;
     margin-bottom: 0;
     display: flex;

     justify-content: center;
     align-items: center;

 }

 .logo-text {
     font-weight: 500;
     text-transform: capitalize;
     letter-spacing: 0px;
     font-size:25px;
 }

 @media (min-width: 601px) {

     .hero {
         height: 300px;
     }
 }