/* #8B5E3C (d60) - #e8d6ca (l60), #4F6D46 (d30) -  #b8cdb1
 (l30), #D9A441 (d10) -  #eacc95 (l10) */

/* Style for hero image - change only the image */
.hero {
    background-image: url("images/hero.jpg");
    background-color: #E4DEB4;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* don't change */
.bus_footer {
    background-color: #f2f2f2;
}

/* don't change */
.footer {
    background-color: #bfbfbf;
}

/* use dark 30 color and comp font */
.divider {
    border-top: 1px solid #E4DEB4;
    border-bottom: 1px solid #E4DEB4;
    color: #E4DEB4;
    font-family: "Condiment", serif;
    font-weight: 400;
    font-style: normal;
}
/* use the dark 60 */
h2, h5 {
    color: #194d19;
}

/* use light 30 */
.product, .company, body {
    background-color: #90a29f;
}

/* use dark 30 */
.card, .list-group-item {
    border: 2px solid #E4DEB4;
}
/* use dark 30 for border - use light 10 for background */
.card-header {
    background-color: #E4DEB4;
    border-bottom: 2px solid #E4DEB4;
}
/* use dark 30 */
i {
    color: #3385ff;
    font-size: 100px;
}

.list-group {
    border-radius: 5px;
}

/* use dark 30 */
ul.prod, .hero {
    border: 2px solid #E4DEB4;
}

/* use dark 30 */
.carousel-item > img {
    border: 2px solid #E4DEB4;
}

/*use comp font */
.comp_name {
    font-size: 80px;
    font-family: "Condiment", cursive;
    font-weight: 400;
    font-style: normal;
    color: #194d19
}

@media screen  and (max-width: 900px) {
    i {
        font-size: 40px;
        }
    
}

@media screen  and (max-width: 800px) {
    h1.comp_name {
        margin-top: 20px;
        }
    
}

.slogan {
    font-size: 30px;
}

/* use heading font */
.serif {
    font-family: "Allan", serif;
    font-weight: 400;
    font-style: normal;
    color: #194d19
}

/* use body font */
p {
    font-family: "Tinos", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}