/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* HEADER */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

/* using 'header' as the flex container */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #fdf2e9; */
  background-color: var(--color-secondary);
  /* background-color: var(--color-grey-light-1); */

  /* we fix height as want to make sticky later */
  /* if not making sticky could just use padding top and bottom */
  height: 9.6rem;
  padding: 0 4.8rem;
  position: relative;
}

.logo {
  height: 2.2rem;
  height: 3.6rem;
}


/* MOBILE NAV */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  /*hidden by default*/
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  /* color: #333; */
  color: var(--color-primary-dark);
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* NAVIGATION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

.main-nav-list {
  list-style: none;
  display: flex;
  /* so items are side-by-side */
  align-items: center;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  /* good habbit to apply - */
  text-decoration: none;
  color: #333;
  color: var(--color-primary-dark);
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  /* color: #cf711f; */
  color: var(--color-primary);

}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  color: #fff;
  /* background-color: #e67e22; */
  background-color: var(--color-primary);
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
  /* background-color: #cf711f; */
  background-color: var(--color-primary);
}


/* Policy Page links */

.policy-nav-link:link,
.policy-nav-link:visited {
  display: inline-block;
  /* good habbit to apply - */
  text-decoration: none;
  color: #333;
  color: var(--color-primary-dark);
  font-weight: 300;
  font-size: 1.8rem;
  transition: all 0.3s;
}






/* STICKY NAVIGATION */
/* ..we apply (using js) .sticky to the 'body' element so it can be a parent of both .header and .section-hero */
.sticky .header {
  position: fixed;
  /*..will fix the element in the viewport and will not move it as we scroll*/
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  /* background-color: rgba(255, 255, 255, 0.97); */
  /* background-color: var(--color-secondary); */
  background-color: var(--color-grey-light-1);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .section-hero {
  margin-top: 9.6rem;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* HERO SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */


.section-hero {
  /* background-color: #fdf2e9; */
  /* background-color: var(--color-secondary); */
  background-color: var(--color-grey-light-1);
  padding: 4.8rem 0 9.6rem 0;
}

/* @media(max-width: 1200px) {
  .section-hero {
    background-color: orangered;
  }
} */

/* @media(max-width: 600px) {
  .section-hero {
    border: 20px dashed blue;
    background-color: blue;
  }
} */


.hero {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: 1fr;
  /* background-color: blueviolet; */
  gap: 7.6rem;
  align-items: center;
  justify-content: center
}

.hero h1 {
  text-align: center
}
.hero p{
  text-align: center
}
.btn-center{
  display: flex;
  /* align-items: center; */
  justify-content: center
}
.logo-center{
  display: flex;
  /* align-items: center; */
  justify-content: center;
 width: 10rem;
 height: 10rem;
 margin: auto;
}



.policy__hero {
  max-width: 120rem;
  margin: 0 4%;

  padding: 2rem 0;
  padding-top: 5rem;
  display: grid;
  grid-template-columns: 1fr;
  /* background-color: blueviolet; */
  gap: 9.6rem;
  align-items: center;
}





.hero-description {
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 4.8rem;
}






.delivered-meals {
  /* background-color: red; */
  /* we can use flex here (rather than grid) because we dont really care about the size of the columns
  ....we can let the content determine the size of the columns */
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  gap: 1.6rem;

  margin-top: 8rem;
  justify-content: center;
}

.delivered-imgs {
  /* we also want theses to display side-by-side and therefore we use 'flex' */
  display: flex;
}

.delivered-imgs img {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  margin-right: -0.6rem;
  border: 2.5px solid #fdf2e9;
  /* border: 1.5px solid var(--color-sectorborder); */
  border: 1.5px solid var(--color-primary);

  /* jv added */
  filter: brightness(.95);

}

.delivered-imgs img:last-child {
  margin: 0;
}

.delivered-text {
  font-size: 1.8rem;
  font-weight: 600;
}

.delivered-text span {
  /* color: #cf711f; */
  color: var(--color-primary);
  font-weight: 700;
}

.hero-img {
  width: 100%;


}


/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* FEATURED IN SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
.section-featured {
  padding: 4.8rem 0 3.2rem 0;
  /* background-color: var(--color-secondary); */
  /* background-color: var(--color-secondary); */
  background-color: var(--color-grey-light-1);
}


.heading-featured-in {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 4.4rem;
  /* color: #888; */
  /* color: var(--color-grey-light-2); */
  color: var(--color-secondary);
  opacity: 40%;
}

.logos {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5rem;
}

.logos img {
  height: 4.2rem;
  /* filter: grayscale(100%); */
  /* filter: brightness(0); */
  opacity: 50%;

}

/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* HOW IT WORKS SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

.section-how {
  padding: 9.6rem 0;
  /* background-color: orangered; */
  /* background-color: var(--color-secondary); */
  background-color: var(--color-grey-light-1);
}

.step-number {
  font-size: 8.6rem;
  font-weight: 600;
  color: #ddd;
}


.step-description {
  font-size: 1.8rem;
  line-height: 1.8;
}

.step-img-box {
  position: relative;
  /* so that the absolute in the ::before below works */

  display: flex;
  align-items: center;
  justify-content: center;
}


.step-img-box::before,
.step-img-box::after {
  content: "";
  display: block;
  border-radius: 50%;
  /* to toke out of flow and position behind we can position absolute 
  ...we need to make parent position 'relative' */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.step-img-box::before {
  width: 60%;
  /* height: 60%; */
  /* following trick of padding in lieu of height % enables us to create square */
  /* 60% of parents width ....with intrinsic height of zero */
  padding-bottom: 60%;
  background-color: #fdf2e9;
  z-index: -2;
}

.step-img-box::after {
  width: 50%;
  padding-bottom: 50%;
  background-color: #fae5d3;
  z-index: -1;
}


/* images is one of the first things we need to style as they do not automatically scale up or down like text */
.step-img {
  width: 35%;

}


/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* MEALS SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

.section-meals {
  padding: 9.6rem 0;
}

.meal {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
  overflow: hidden;
  /* solves the unrounded img top corners ...basically whatever overflows this container is hidden*/
  transition: all 0.4s;
}

/* ..using the hover psuedo class */
.meal:hover {
  transform: translate(0, -1.2rem);
  /* used with transition on the parent element for smooth transition*/
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.075);
}


.meal-content {
  padding: 3.2rem 4.8rem 4.8rem 4.8rem;
}

.meal-tags {
  margin-bottom: 1.2rem;
  display: flex;
  gap: 0.4rem;
}

.tag {
  display: inline-block;
  /* change to 'inline-block' so that we can apply padding to it*/
  padding: 0.4rem 0.8rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #333;
  border-radius: 100px;
  /* just use some very large value ..but not 50%*/
  font-weight: 600;
}

.tag--vegetarian {
  background-color: #51cf66;
}

.tag--vegan {
  background-color: #94d82d;
}

.tag--paleo {
  background-color: #ffd43b;
}


.meal-title {
  font-size: 2.4rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 3.2rem;
}

.meal-attributes {
  list-style: none;
  display: flex;
  flex-direction: column;
  /* so that they are vertically stacked */
  gap: 2rem;
}

.meal-attribute {
  font-size: 1.8rem;
  /* to align the icon and text ... as this is the flex container of those two */
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.meal-icon {
  height: 2.4rem;
  width: 2.4rem;
  /* color: #e67e22; */
  color: var(--color-primary);
  /* for some would need to use 'stroke:'  or  'fill:' */
}


.meal-img {
  width: 100%;
}

.all-recipes {
  text-align: center;
  font-size: 1.8rem;
  /* we set here and the a link will inherit ...but we dont want to set at '.link' class as that effects us reusing*/
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* TESTIMONIAL SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

.section-testimonials {
  /* padding: 9.6rem 0; */
  /* background-color: #fdf2e9; */
  background-color: var(--color-secondary);
  display: grid;
  /* grid-template-columns: 55fr 45fr; */
  grid-template-columns: 1fr;
  /* ..these can be any number and dont need to add to 100 .....this way we can proportion their size */
  align-items: center;
  /* need to do this or will get wierd horizontal gaps when screen width is made smaller (i think due to unequal proportions above)*/

  /* jvadded */
  padding-bottom: 10rem;

}

.testimonials-container {
  padding: 9.6rem;
}
.testimonials-container .subheading {
  padding-top: 3rem;
}

.testimonials {
  /* reuseable grid is more for overall site layout
  and maybe too big gaps for this purpose....so we will create a new grid here just
  for this purpose */
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 4.8rem;
  column-gap: 8rem;

}


.testimonial-img {
  /* we dont want to use a fluid 100% for this situation */
  width: 8.4rem;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 1.6rem;
}

.testimonial-name {
  font-size: 1.6rem;
  /* color: #6f6f6f; */
  color: var(--color-grey-light-2);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  padding: 1.6rem 1.6rem 1.6rem 1.6rem;
}

.gallery-item img {
  /* to get rid of thin white spaces between images (that occur because images are inline elements by default), be change to 'display: block' */
  display: block;
  /* making images flexible (width: 100%) fits them all in to one of the grids of the above '.gallery' grid */
  width: 100%;
  transition: all 0.4s;
}

.gallery-item {
  overflow: hidden;
  /* this means the image can 'transform: scale' without overflowing the 'figure' container that is around each image */
}

.gallery-item img:hover {
  transform: scale(1.1);
  /*...goes with the 'transition: all' above*/
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* MEALS SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

.section-pricing {
  padding: 9.6rem 0;
}

.pricing-plan {
  border-radius: 11px;

  width: 75%;
  /* of parent available width ...as 'Div' is a block element it expands to take up all space of parent element if not otherwise specified.*/
}

/* so that we can just select one of divs in the Box/s 
and only apply the 'justify: end' to that element*/
.pricing-plan--starter {
  justify-self: end;
  border: 2px solid #fdf2e9;
  padding: 4.6rem;
}

.pricing-plan--complete {
  background-color: #fdf2e9;
  padding: 4.8rem;
  position: relative;
  overflow: hidden;
  /* to cut off overflow of 45 deg BestValue banner */
}

.pricing-plan--complete::after {
  content: "Best value";
  position: absolute;
  top: 6%;
  /* use percentages so that works with responsive */
  right: -18%;
  /* use percentages so that works with responsive */
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 700;
  background-color: #ffd43b;
  padding: 0.8rem 8rem;
  transform: rotate(45deg);
}


.plan-header {
  text-align: center;
  margin-bottom: 4.8rem;
}

.plan-name {
  color: #cf711f;
  font-weight: 600;
  font-size: 2.0rem;
  text-transform: uppercase;
  letter-spacing: 0.75;
  margin-bottom: 3.2rem;
}

.plan-price {
  font-size: 6.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.6rem;
}

.plan-price span {
  font-size: 3rem;
  font-weight: 500;
  margin-right: 0.8rem;
}

.plan-text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #6f6f6f;
}

.plan-sign-up {
  text-align: center;
  margin-top: 4.8rem;

}

.plan-details {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
}


.feature-icon {
  /* color: #e67e22; */
  color: var(--color-primary-dark);
  height: 3.2rem;
  width: 3.2rem;
  /* background-color: #fdf2e9; */
  /* background-color: var(--color-secondary); */
  /* background-color: var(--color-grey-light-2); */
  background-color: var(--color-grey-light-3);
  margin-bottom: 1.2rem;
  margin-top: 6.2rem;
  padding: 1.6rem;
  border-radius: 50%;
}

.feature-title {
  font-size: 2.4rem;
  color: #333;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.feature-text {
  font-size: 1.8rem;
  line-height: 1.8;
}





/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CTA SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

.section-cta {
  padding: 4.8rem 0 3.8rem 0;
  /* background-color: var(--color-secondary); */
  background-color: var(--color-grey-light-1);
}

.cta {
  display: grid;
  /*  we could also use flexbox ...we are using grid 
  for the big stuff and flexbox for the small stuff*/

  /* 2/3 = 66.6% + 1/3 = 33.3% */
  grid-template-columns: 2fr 1fr;
  /* background-color: #e67e22; */
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.15);
  border-radius: 11px;

  /* gradient is treated as though it is an image */
  /* background-image: linear-gradient(red, #e67e22); */
  /* background-image: linear-gradient(90deg, red, #e67e22); */
  /* background-image: linear-gradient(to right, red, #e67e22); */
  /* background-image: linear-gradient(to right bottom, #eb984c, #e67e22); */
  background-image: linear-gradient(to right bottom, #dbb188, #816249);
  overflow: hidden;


  /* temp height */
  /* height: 50rem; */
}


.cta-text-box {
  padding: 4.8rem 6.4rem 6.4rem 6.4rem;
  /* heading-secondary will not be effected as it will override this ..so we use the descendent selector below 
  ...doesnt really make sense to me as...within this 'div' so how is it a descendent of '.cta' */
  color: #45260a;
}

.cta-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}

.cta .heading-secondary {
  color: #45260a;
  margin-bottom: 3.2rem;
}

.cta-img-box {
  background-image: linear-gradient(to right bottom, rgba(235, 153, 76, 0.2), rgba(230, 125, 34, 0.2)), url("../img/customers/sector-4.png");
  /* need the '../' to move up into parent folder - for 2 levels up do '../../'*/
  background-size: cover;
  background-position: center;
}


.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}

.cta-form label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.cta-form input,
.cta-form select {
  width: 100%;
  /*  this 100% means they will occupy the entire width of their / its parent*/
  padding: 1.2rem;
  font-size: 1.8rem;
  /* we can force inputs to inherit the font family of the body / parent element */
  font-family: inherit;
  color: inherit;
  border: none;
  background-color: #fdf2e9;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cta-form input::placeholder {
  color: #aaa;
}

.cta *:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* FOOTER SECTION */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

.footer {
  padding: 12.8rem 0;
  border-top: 1px solid #eee;
  /* background-color: var(--color-secondary); */
  background-color: var(--color-grey-light-1);
}

.grid--footer {
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
}

.logo-col {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: block;
  margin-bottom: 3.2rem;
}



.social-links {
  list-style: none;
  display: flex;
  gap: 2.4rem;
}

.social-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.copyright {
  font-size: 1.4rem;
  color: #767676;
  margin-top: auto;
  /* this works in conjunction with the flex setting at '.logo-col'*/
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4rem;
}

.contacts {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.6;
}

.address {
  margin-bottom: 2.4rem;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #767676;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #555;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/*  POLICY PAGE/s */



.policy-wording {
  max-width: 120rem;
  margin: 40rem auto;
  font-size: 1.5rem;
  line-height: 1.6;


}

.policy-wording-header {
  font-weight: 800;

}

.terms-ol {
  margin-left: 2rem;
}

.terms-ul {
  margin-left: 2rem;
}

.terms-list {
  padding-left: 1rem;
}




/* .section-how div div {
  padding: 100px;
  font-size: 50px;
  background-color: #333;
} */


/* .section-how div:nth-child(1) {
  background-color: lightblue;
}

.section-how div:nth-child(2) {
  background-color: blue;
}

.section-how div:nth-child(3) {
  background-color: violet;
}

.section-how div:nth-child(4) {
  background-color: yellow;
} */