body { margin: 0;
font-family: 'Poppins', sans-serif; }

body, html {
    height: 100%;
}

.hero-image {
    width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("steggy_window2.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
    padding-top: 70px;
    padding-bottom: 70px;
}

.serv-image {
    width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("steggy_high_rise.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
    padding-top: 70px;
    padding-bottom: 70px;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.cards { 
display: grid;
grid-gap: 3rem;
width: 90%;
margin: 0 auto;
}

.card {
position: relative;
top: 0;
transition: top ease 0.6s;
}

@media (min-width: 600px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
.cards { grid-template-columns: repeat(4, 1fr); }
}

.card:hover {
top: -10px;
}

.copytext { text-align: center;
padding:70px;
    background-color:black; 
    color:white}

.infobox {
  display: grid;
   grid-template-columns: 2fr 1fr;
    grid-gap: 2rem;
width: 50%;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .infobox { width: 80%; 
       grid-template-columns: repeat(1, 1fr);}
}

@media (min-width: 550px) {
    .infoboxstory { min-width:400px; }
}
    .card-image {
max-width: 100%;
margin-top:10px;
display: block;
margin: 0 auto;
border-style: solid;
border-color: white;
}
.storybox {
margin: 0;
background-color:white;
padding: 50px;
margin-top:30px;
margin-bottom: 50px;
}
.infobox {
min-width:300px;
}
.rightsideimage {
margin: 0 auto;
display: block;
vertical-align: middle;
}
    h2.boxtitle {
text-align: center; 
margin:0; 
padding-top: 60px; 
padding-bottom: 50px; 
width:100%; 
background-color:black; 
color:white; 
vertical-align: middle;
}
.mainlogo {
max-width:300px;
margin-left:20px
}
li { text-align: left; margin-bottom: 15px; }