@charset "utf-8";

/* FARM WEBSITE */

    * {box-sizing: border-box;}

/* TYPOGRAPHY */

    h1,h2,h3,h4,h5 {font-family: "Chewy", system-ui;}
    p {font-family: "Open Sans", sans-serif;}
    li {font-family: "Open Sans", sans-serif;}
    a {font-family: "Open Sans", sans-serif; text-decoration: none; color: #000;}
    .Title {font-size: 5em; margin: 0px; width: 600px; color: #000; text-align: center;}
    .col-title {float: left;}

/* NAVIGATION */

    nav ul {list-style: none; float: left; margin-top: 40.8px;}
    nav li {display: inline; margin: 20px; background-color: #D4E86E; padding: 15px; color: #fff;}
    nav li:hover {background-color: #B4C84E;}
    .button {display: inline; margin: 20px; background-color: #BF6700; font-size: 1.5em; padding: 10px; color: #fff; border-radius: 12px; font-family: "Chewy"; float: left; width: fit-content;}

/* LAYOUT */
    
    body {padding: 0px; margin: 0px; background-color: #fff;}
    img {max-width:100%; height: auto;}

    #head {background-color: #D4E86E; height: 100px; width: 100%; margin: 0px;}
    #logo {width: 10%; float: left;}
    #icon {width: 100px; float:left; height: auto; margin: 0px; padding: 0px;}
    #nav {width: 90%; float: left;}
    
    #title {width: 100%; height: 125px; background-color: #FFE597; display: flex; align-items: center; justify-content: center;}
    #hero {width: 100%; height: 600px; background-image: url("../assets/farm-front.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0px; display: flex; align-items: center; justify-content: center;}

    .one-col {width: 96%; height: auto; float: left; padding: 5px; margin: 2%;}
    .two-col {width: 46%; height: auto; float: left; padding: 5px; margin: 2%;}
    .three-col {width: 29.33%; height: auto; float: left; padding: 5px; margin: 2%;}
    .four-col {width: 21%; height: auto; float: left; padding: 5px; margin: 2%;}

    .col-a {background-color: #FFDA3F; margin: 0px; padding: 0px; width: 100%; height: 350px;}
    .col-b {background-color: #FFE597; margin: 0px; padding: 0px; width: 100%; height: 350px;}
    .text-col-a {width: 60.66%; height: 340px; float: left; padding: 0px; margin: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .img-col-a {width: 39.33%; height: 350px; float: right; padding: 0px; margin: 0px;}
    .text-col-b {width: 60.66%; height: 340px; float: right; padding: 0px; margin: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .img-col-b {width: 39.33%; height: 350px; float: left; padding: 0px; margin: 0px;}

    #footer {background-color: #D4E86E; height: 300px; width: 100%; margin: 0px; padding-top: 30px; float: left;}
    #contact-details {width: 33.33%; float: left}
    #contact {list-style: none; color: #000; margin: 0px;}
    #location-details {width: 33.33%; float: left}
    #locate {list-style: none; color: #000; margin: 0px;}
    .top {font-weight: bold; margin-top: 0px; font-family: "Chewy", system-ui; font-size: 2em;}
    .foot {margin-top: 30px;}
    #social {width: 33.33%; float: left;}
    .fa {padding: 17px; font-size: 30px; width: 50px; height: 50px; text-align: center; text-decoration: none; border-radius: 50%;}
    .fa-facebook {background: #3B5998; color: #FFF;}
    .fa-instagram {background: #000; color: #FFF;}
    .fa-youtube {background: #BB0000; color: #FFF;}

/* IMAGES */
    #h-img-a {background-image: url("../assets/field.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #h-img-b {background-image: url("../assets/fruit.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #h-img-c {background-image: url("../assets/goat.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}

    #a-img-a {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #a-img-b {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #a-img-c {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #a-img-d {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}

    #s-img-a {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #s-img-b {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}

    #c-img-a {background-image: url("../assets/dessert.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #c-img-b {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #c-img-c {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}
    #c-img-d {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}

    #o-img-a {background-image: url("../assets/"); background-position: center; background-repeat: no-repeat; background-size: cover;}

/* MEDIA QUERY */

    /* x-large */
    @media only screen and (max-width: 1200px){
    }

    /* large */
    @media only screen and (max-width: 1080px){
        .text-col-a {width: 96%}
        .text-col-b {width: 96%}
        .img-col-a {display: none;}
        .img-col-b {display: none;}
    }

    /* small */
    @media only screen and (max-width: 810px){
        .text-col-a {width: 96%}
        .text-col-b {width: 96%}
        .img-col-a {display: none;}
        .img-col-b {display: none;}
        #nav {width: 80%;}
        nav li {display: block;}
        nav ul {margin-top: 10px; float: right;}
        #head {height: 400px;}
        #logo {width: 20%;}
        #icon {width: 200px;}
    }