* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color:rgb(241, 241, 241);
    font-family: verdana;
}

header .promo_bar {
    background-color: hsl(37, 82%, 55%);
    min-height: 56px;
}

header nav {
    background-color: white;
    min-height: 86px;
}

section.hero {
    min-height: 600px;
    background-color: rgb(196, 196, 196);
    background-image: url(../images/Dog1.jpg);
    background-size: cover;
    background-position: center;
}

.hero_text {
    color: white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 2.5em;
    padding: 9em 0px 0px 5.5em;

}

.heroo_text {
    color: #ffffff;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1em;
    padding: 1em 0px 0px 13.8em;

}

.Call-to-action {
    display: block; /* convert to a block element */
    background-color:hsl(37, 82%, 55%);
    width: 180px; padding: 8px 8px;
    position: absolute; bottom: 16em; left: 13.8em;
    text-align: center;
    text-decoration: none;
    font-size: 12pt;
    color:#234;
    Border-radius: 5px;
    box-shadow: 2px 3px 6px black;
    transition: background-color 250ms linear;
}

.Call-to-action:hover {
background-color:hsl(37, 82%, 40%)

}

section.products {
    min-height: 500px;
    background-color: rgb(241, 241, 241);
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
    gap: 3px;
    padding: 20px 0 20px 0; /* top right bottom left */
}

.product_card {
    background-color:#ffffff;
    margin: 4px;
    flex: 0 0 24%;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 0 16px rgba(216, 216, 216, 0.678);
    transition: box-shadow .50s linear;
    text-decoration: none;
}

.product_card:hover {
    box-shadow: 0 0 20px #555;
}

.product_card h2 {
    text-align: center;
    font-size: 16pt;

}

.product_card p {
    margin-top: 10px;
    font-size: 14pt;
}

.product_card img {
    width: 80%
}

.featured_story {
    background-color:#ffffff;
    width: 80%; margin: 40px auto;
    min-height: 400px;
    display:flex;
    text-decoration: none;
    color:#234;
    border-radius: 6px;
}

.featured_story figcaption {
    background-color: rgb(255, 255, 255);
    flex: 0 0 30%;
    border-radius: 6px 0 0 6px;
}

.featured_story figcaption p:first-child {
    color:rgb(1, 0, 80);
text-transform: uppercase;
margin-top:4em;
padding-left: 2.1em;

}

.featured_story figcaption h2 {
    margin:16px;
    padding-left: 1.3em;
}

.featured_story figcaption p {
    margin:16px;
    padding-left: 2em;

}
.featured_story figure {
    background:rgb(0, 0, 0);
    flex: 0 0 70%;
    background-image: url(../images/Dog3.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 0 6px 0 6px;
}
footer {
    min-height: 300px;
    background-color: rgb(29, 18, 18);
    color: white;
}