.hero-section {
min-height: 500px;
position: relative;
background: linear-gradient(rgba(42, 84, 156, 0.8), rgba(42, 84, 156, 0.6)), url('students.jpg') center/cover no-repeat;
}

.hero-text {
font-size: 3vw;
line-height: 1.5;
text-align: center;
position: absolute;
top: 45%;
left: 20%;
transform: translate(-12.5%, -50%);
color: var(--primary);
}

.hero-text-bg{padding:20px 5px;background-color:rgba(42, 84, 156, 0.2);box-shadow: 0 0 30px 30px rgba(42, 84, 156, 0.1);}

@media (min-width: 768px) {
.hero-text {font-size: 1.5rem;}
.andrew1{display: flex;
justify-content:end;
align-items: center;
text-align: center;}
.andrew2{justify-content:start;}
}