/*
Valley Honey Farms CSS
*/

/* General
=================================================== */
html, body { box-sizing: border-box; display: block; background: #fff; font-size: 62.5%; margin: 0; }
.site-container { display: flex; flex-direction: column; word-wrap: break-word; position: relative; }
.site-inner { display: flex; flex-direction: column; flex: 1 0 auto; }
img { height: auto; vertical-align: top; max-width: 100%; }

.hero { display: block; position: relative; width: 100%;  }
.hero img { width: 100%; }

/* About  */
.about { margin: 0; padding: 12em 6em; }
.about-inner { display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 1480px; position: relative; width: 100%; }
.about-block {  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0; padding: 0; width: 100%; height: auto; min-height: 500px; }
.about-block-overview { background: #fff; display: flex; flex-direction: column; justify-content: center; padding: .5em 1.5em .5em 0; width: 58%; min-height: 100%; }
.about-block-title { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; padding: 0 0 2em; width: 100%; }
.about-block-title span { color: #1a1a1a; font-family: "Montserrat", sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.about-block-description { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5em 0 0; }
.about-block-description p { color: #3d3d3d; font-family: "Montserrat", sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.6; margin: 0; padding: 0 0 0.8em; }
.about-block-description p:last-of-type { padding: 0 0 1.25em; }
.about-block-description span { color: #3d3d3d; font-family: "Montserrat", sans-serif; font-size: 1.8rem; font-weight: 600; line-height: 1.6; margin: 0; padding: 0 0 0.5em; }
.about-block-description ul { clear: both; display: flex; flex-direction: column; margin: 0; padding: 0; width: 100%; }
.about-block-description ul li { color: #3d3d3d; font-family: "Montserrat", sans-serif; font-size: 1.8rem; font-weight: 600; line-height: 1.4; margin: 0; padding: 0 0 0.8em; list-style-position: inside; list-style-type: none; padding-left: 10px; }
.about-block-description ul li::before { content: "\2022"; color: black; display: inline-block; width: .8em; margin-left: 0em; }
.about-block-feat-img { background-color: #fff; display: block; max-width: 100%; min-height: 1px; margin: 3em; width: 35%; }
.about-feat-bg { background-position: right; background-repeat: no-repeat; background-size: contain; display: block; height: 100%; width: 100%; }

/* Vision  */
.vision { background: #f2ece2; margin: 0; padding: 6em; }
.vision-inner { display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 1480px; position: relative; width: 100%; }
.vision-block {  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0; padding: 0; width: 100%; height: auto; min-height: 475px; }

.vision-block-feat-img {  display: block; max-width: 100%; min-height: 1px; margin: 3em; padding: .5em 1.5em .5em 0; width: 35%; }
.vision-feat-bg { background-position: left; background-repeat: no-repeat; background-size: contain; display: block; height: 100%; width: 100%; }

.vision-block-overview { display: flex; flex-direction: column; justify-content: center; padding: 0; width: 58%; min-height: 100%; }
.vision-block-title { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; padding: 0 0 2em; width: 100%; }
.vision-block-title span { color: #1a1a1a; font-family: "Montserrat", sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.vision-block-description { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5em 0 0; }
.vision-block-description p { color: #3d3d3d; font-family: "Montserrat", sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.6; margin: 0; padding: 0 0 0.8em; }
.vision-block-description p:last-of-type { padding: 0 0 1.25em; }
.vision-block-description span { color: #3d3d3d; font-family: "Montserrat", sans-serif; font-size: 1.8rem; font-weight: 600; line-height: 1.6; margin: 0; padding: 0 0 0.5em; }

/* Badges  */
.badges { padding: 14em 6em 12em; }
.badges-inner { margin: 0 auto; max-width: 1280px; position: relative; width: 100%; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin: 0 auto; }
.badge-grid-item { display: grid; grid-column: span 1; grid-auto-rows: max-content; margin: 0; padding: 0; position: relative; }
.badge-grid-item img { display: block; margin: 0 auto; max-width: 200px; width: 100%; }

/* Gallery  */
.gallery { margin: 0; padding: 1em 6em 10em; }
.gallery-inner { display: flex; flex-direction: column; margin: 0 auto; max-width: 1480px; position: relative; width: 100%; }
.feat-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 15px; padding: 1.5em 0 1em; }
.feat-gallery img { border-radius: 10px; border-style: none; display: block; margin: 0; width: 100%; height: auto; }

/* Footer  */
.footer-container { background: #f2ece2; display: block; margin: 8em 0 0; padding: 0; position: relative; width: 100%; }
.footer-logo { display: flex; justify-content: center; padding: 5em 4em 4em; }
.footer-logo img { max-width: 300px; width: 100%; }
.footer-contact { display: flex; justify-content: center; padding: 1em 4em; }
.footer-container .footer-contact p { color: #000; font-family: "Montserrat", sans-serif; font-size: 1.8rem; letter-spacing: .02em; line-height: 1.4; margin: 0; padding: 0; text-transform: none; }
.footer-container .footer-contact p span { font-weight: 600; padding-right: .25em; }
.footer-social { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding: 2em 4em; }
.footer-social a { display: inline-block; padding: 0 0.8em; }
.footer-social a:first-of-type { padding: 0 2em 0 0; }
.icon-facebook, .icon-instagram { width: 32px; }
.footer-copyright { padding-top: 2em; }
.footer-container .footer-copyright p { color: #000; font-family: "Montserrat", sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: .08em; line-height: 1.8; margin: 0; margin: 0 0 0.5em; padding: 0 2em; position: relative; text-align: center; text-transform: uppercase; }

/* Responsive
-------------------------------- */
@media only screen and (max-width: 1480px) {
.about { padding: 11em 6em; }
.about-block { min-height: 475px; }
.vision-block { min-height: 450px; }
.badges { padding: 12em 6em 10em; }
.gallery { padding: 1em 6em 8em; }
}

@media only screen and (max-width: 1280px) {
.about { padding: 10em 6em; }
.about-block { min-height: 450px; }
.about-block-title span { font-size: 2.1rem; }
.vision { padding: 4em 6em; }
.vision-block { min-height: 425px; }
.vision-block-title span { font-size: 2.1rem; }
.badges { padding: 10em 6em 8em; }
.badge-grid-item img { max-width: 175px; }
.feat-gallery { grid-template-columns: repeat(auto-fit,minmax(289px,1fr)); padding: 1.5em 0 .8em; }
.footer-container { margin: 6em 0 0; }
}

@media only screen and (max-width: 1140px) {
.about { padding: 9em 6em; }
.about-block-overview { width: 56%; }
.about-block-feat-img { width: 37%; }
.vision-block { min-height: 400px; }
.vision-block-feat-img { width: 37%; }
.vision-block-overview { width: 56%; }
.badges { padding: 8em 6em 6em; }
.badge-grid-item img { max-width: 150px; }
}

@media only screen and (max-width: 1024px) {
.about { padding: 8em 6em; }
.about-block { min-height: 400px; }
.about-block-title { padding: 0 0 1.5em; }
.about-block-title span { font-size: 2rem; }
.about-block-overview { padding: 0; width: 100%; }
.about-block-feat-img { display: none; }
.vision-block { min-height: 375px; }
.vision-block-title { padding: 0 0 1.5em; }
.vision-block-title span { font-size: 2rem; }
.vision-block-feat-img { display: none; }
.vision-block-overview { width: 100%; }
.badges { padding: 6em 6em 4em; }
.badge-grid-item img { max-width: 125px; }
.gallery { padding: 1em 6em 6em; }
.feat-gallery { grid-template-columns: repeat(auto-fit,minmax(305px,1fr)); }
.footer-logo img { max-width: 275px; width: 100%; }
}

@media only screen and (max-width: 768px) {
.about { padding: 7em 6em; }
.badge-grid { gap: 35px; }
.gallery { padding: 1em 6em 4em; }
.feat-gallery { grid-template-columns: repeat(auto-fit,minmax(275px,1fr)); padding: 1em 0 .5em; }
.footer-logo img { max-width: 250px; }
}

@media only screen and (max-width: 640px) {
.about { padding: 8em 5em 7em; }
.about-block-title { padding: 0 0 1em; }
.about-block-title span { font-size: 1.9rem; }
.about-block-description p { font-size: 1.7rem; }
.about-block-description p:last-of-type { padding: 0 0 1em; }
.about-block-description span { font-size: 1.7rem; }
.about-block-description ul li { font-size: 1.7rem; }
.vision { padding: 4em 5em; }
.vision-block-title { padding: 0 0 1em; }
.vision-block-title span { font-size: 1.9rem; }
.vision-block-description p { font-size: 1.7rem; }
.badges { padding: 5em 5em 3em; }
.gallery { padding: 1em 5em 2em; }
.feat-gallery { grid-template-columns: repeat(auto-fit,minmax(100%,1fr)); gap: 20px; padding: .5em 0; }
.footer-logo { padding: 4em 4em 3em; }
.footer-logo img { max-width: 225px; }
.footer-container .footer-contact p { font-size: 1.7rem; }
.footer-copyright { padding-top: 1.5em; }
}

@media only screen and (max-width: 580px) {
.about { padding: 7em 5em; }
}    
    
@media only screen and (max-width: 480px) {
.about { padding: 6em 4em; }
.about-block-title span { font-size: 1.8rem; }
.about-block-description { padding: 1.25em 0 0; }
.about-block-description p { font-size: 1.6rem; }
.about-block-description span { font-size: 1.6rem; }
.about-block-description ul li { font-size: 1.6rem; }
.vision { padding: 2em 4em; }
.vision-block-title span { font-size: 1.8rem; }
.vision-block-description { padding: 1.25em 0 0; }
.vision-block-description p { font-size: 1.6rem; }
.vision-block-description span { font-size: 1.7rem; }
.badges { padding: 5em 4em 3em;  }
.gallery { padding: 1em 4em; }
.footer-container {  margin: 4em 0 0; }
.footer-logo { padding: 3em 4em; }
.footer-logo img { max-width: 200px; }
.icon-facebook, .icon-instagram { width: 30px; }
.footer-copyright { padding-top: 1.8em; }
.footer-container .footer-contact p { font-size: 1.6rem; }
}