@charset "utf-8";
/* CSS Document */

/*
Framework by Andy Shearouse
*/
html, body{
	margin:0px !important;
	padding:0px !important;
}

img{
	max-width:100% !important;	
}

.container{
	max-width:2560px;
	width:100%;
	margin:0 auto;
	position:relative;
	font-family:"Montserrat", Times, serif;
	font-size:18px;
}

.header{
    width: 100%;
    background-color:black;
    display:grid;
    grid-template-columns:1fr auto 1fr;
}

.header .nav-options{
    align-self: center;
    display: grid;
    width: 80%;
}

.header .logo-box img{
    justify-self:center;
    align-self:center;
    position:relative;
    margin-bottom:-25%;
    z-index:2;
    
}

.header .socials{
    justify-self: end;
    align-self:center;
    display: grid;
    grid-auto-flow: column;
    gap: clamp(10px, 2vw, 40px);
    margin: 2%;
}

.header .socials img{
    height: 50px;
}

/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
	width: 100%;
	z-index:10;
	position:relative;
	display:grid;
	font-size: clamp(14px, 2vw, 18px);
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	color: #FFF;
	display: block;
	text-decoration:none;
	font-weight:bold;
	text-transform:uppercase;
}

/* first level */

#nav > ul{
	text-align:center;
	padding-left:0px !important;
	margin-left:5px !important;
	display:grid;
	grid-auto-flow: column;
    font-size: 1.5rem;
}
#nav > ul > li{
	height: 100%;
	display:grid;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	color: #D3D3D3;
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:170px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 0.75em; /* 15 (20) */
}

/* -------------------- End Navigation -------------------- */

.content{
	width:100%;
	display:inline-block;
	padding-bottom:20px;
}

.content-wide{
    max-width:1200px;
    margin:4% auto;
}

.banner{
    display: grid;
    position:relative;
    place-items: center;
}

.banner img{
    width: 100%;
    height: auto;
    display: block;
}

.banner .order{
    width: 80%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: white;
    z-index:2;
    padding: 2%;
}

.order h1{
    font-size: 2.75rem;
    margin: 1rem;
}

.order-button{
    display: inline-block;
    margin-top:1%;
    background-color:white;
    color: black;
    padding:1% 2%;
    border-radius:8px;
    text-decoration: none;
    font-weight:bold;
    font-size: 2rem;
}

.order-button:hover{
    background-color: #eee;
}

.butcher-date {
    max-width: 550px;
    text-align:center;
    font-weight:bold;
    font-size: 2rem;
    margin: 2.5rem auto;
    padding:.05rem;
    background-color: black;
    color: white;
    border-radius:10px;
    text-transform:uppercase;
}

.process{
    text-align:center;
    font-size: 2rem;
    margin-top: 2rem;
}

.process h2{
    margin-top: 6rem;
}

.two-column-info{
    display:block;  
    margin: 5rem 20rem 10rem 20rem;
    font-size: 1.7rem;
    font-weight:bold;
}

.two-column-info p, .benefits p{
    margin-left: auto;
    margin-right: auto;
}

.info-block, .info-block-reverse{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
    gap: 2rem;
    align-items:center;
    margin-bottom: 5rem;
}

.info-block-reverse{
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
}

.info-block-reverse .text-content {
  text-align: left;
}

.info-block-reverse .text-content h2 {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}


.fresh-steaks {
    justify-self: end;
}

.two-column-info p {
    margin:0;
    line-height: 1.6;
}

.info-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-text h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: black; /* change to white if needed */
}

.cow-fence-img{
    width:100%;
}

.benefits{
    margin-top: 4rem;
    margin-bottom: 5rem;
}

.benefits h1{
    text-align: center;
    margin-bottom: 2rem;
    font-size: 3rem;
}

.benefits p{
    line-height: 1.6;
    margin-top: 1rem;
    margin: 0% 8% 0% 8%;
    font-weight:bold;
    font-size: 1.5rem;
}

.grid-three-columns{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:1fr 1fr 1fr;
    grid-template-columns:1fr 1fr 1fr;
}

.product-grid div{
    background-color:#f6f6f6;
    margin:0 2%;
    padding:2% 4%;
    text-align:center;
}

.button{
    display:inline-block;
    background-color:#19198e;
    text-decoration:none;
    font-size:22px;
    padding:12px 20px;
    color:#fff;
    border-radius:12px;
}

.footer{
    display:grid;
    grid-template-columns:1fr 1fr;
	text-align:center;
	color:white;
	background-color:#000;
	padding: 0rem 0rem 3rem 0rem;
	font-weight: bold;
}

.footer ul{
    text-align:left;
    list-style: none;
    margin: 3% 4% 1% 3%;
    padding: 0;
}

.footer p{
    justify-self:right;
    margin: 3% 3% 1% 4%;
}

@media only screen and (max-width: 1920px) {
    
    .header .socials img{
        height: 40px;
    }
    #nav > ul{
        font-size: 1rem;
    }
    .order h1{
    font-size: 2rem;
    }
    
    .order-button{
        font-size: 1rem;
    }
    .butcher-date {
        max-width: 450px;
        font-size: 1.5rem;
    }
    
    .process{
        font-size: 1.25rem;
    }
    
    .process h1{
        margin-top: 4rem;
    }
    
    .two-column-info{
        margin: 3rem 12rem 8rem 12rem;
        font-size: 1.2rem;
    }
   .info-block, .info-block-reverse{
        grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
        margin-bottom: 5rem;
    }
    
    .info-block-reverse{
        grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
    } 
    
    .benefits h1{
        font-size: 2rem;
    }

    .benefits p{
        font-size: 1rem;
    }
}

@media only screen and (max-width:1600px){
    .two-column-info{
        margin: 3rem 10rem 8rem 10rem;
        font-size: 1.2rem;
    }
}

@media only screen and (max-width:1200px){
	.two-column-info {
        margin: 2rem 5rem;
        font-size: 1rem;
    }
    
    .info-block, .info-block-reverse{
        grid-template-columns: 1fr 1fr;
    }
    
    .header .nav-options {
        width: 100%;
    }
}


@media only screen and (max-width:800px){
	/* -------------------- Start Navigation -------------------- */
	#nav{
        position: relative;
    }
    #nav img{
        vertical-align:middle;
    }
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: block;
		width:100%;
		text-align:center;
		color:#000;
		font-size:20px;
		padding:5px 0px;
		text-decoration:none;
	}
	
	#nav a{
		font-size:18px;	
	}
 
    /* first level */
 
    #nav > ul{
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background-color:#ccc;
		margin-top:8px !important;
		padding-bottom:10px;
    }
	#nav:target > ul{
		display: block;
	}
	#nav > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
		padding:4px 0px;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	
	#nav li a:hover {
        background-color: #bbb; /* darker shade */
    }
	
	/*End Navigation*/
	
	.header .logo-box img{
        height: 120px;
    }
    
    .banner .order{
    top: 30%;
    transform: translate(-50%,-50%);
    padding: 1%;
}

    .banner .order h1{
	    font-size: 1.5rem;
	}
	
	.order-button{
	    padding: 10px 16px;
	}
	
  .info-block, .info-block-reverse {
    grid-template-columns: 1fr; /* Make it one column */
    text-align: center;
  }

  .info-block img, .info-block-reverse img {
    order: -1; /* Ensure image comes first in both layouts */
    justify-self: center;
  }
	
	.two-column-info p{
	    margin-top: 1rem;
	}
	
	.benefits h1{
	    font-weight:bold;
	    font-size: 1.5rem;
	}
	.benefits p{
	    font-size: .8rem;
	    text-align: center;
	}
}

@media only screen and (max-width:600px){

 .banner .order h1{
    font-size: 1.1rem;
    margin: .6rem;
 }

 .order-button{
    font-size: 0.9rem;
    padding: .25rem .5rem;
 }

  .butcher-date {
    width: 70%;
    font-size: 1rem;
    padding: .25rem .5rem;
  }

  .process h1{
    font-size: 1.75rem;
  }
    
  .footer {
    grid-template-columns: 1fr;
    text-align: center;
    font-size: 0.9rem;
  }
  .footer ul, .footer p {
    justify-self: center;
    text-align: center;
  }

  .header .socials img{
     height:30px;
  }
  
  .banner .order{
     width:90%;
  }
}

@media only screen and (max-width:440px){
    .header .logo-box img{
        height: 100px;
    }

	.header .socials {
	    grid-auto-flow: row;
	    justify-items: center;
	    gap: 10px;
	    margin-right: 10%;
	}
	
	.header .socials img{
	    height: 25px;
	}
	
	.banner .order{
        top: 25%;
        transform: translate(-50%,-50%);
        padding: 1%;
    }
    
    .banner .order h1{
	    font-size: .8rem;
	}
	
	.order-button{
	    padding: 5px 8px;
	    font-size: .7rem;
	}
	
	.two-column-info{
        margin: 1rem 5rem 2rem 5rem;
        font-size: .9rem;
        font-weight:bold;
    }
    
    .benefits p{
        font-size: .7rem;
        text-align:center;
    }
}