.home-row-2 {
  /* border: 1px solid red; */
  min-height: 50rem;
  background-color: #222932;
  padding: 1rem 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}
.home-row-2-col-1 {
  /* border: 1px solid yellow; */
  padding: 8rem 2rem 5rem 5rem;
}
.home-row-2-col-1-heading {
  color: #fff;
  font-size: 2rem;
}
.home-row-2-col-1-subheading {
  color: #fff;
  font-size: 3.6rem;
}
.home-row-2-col-2 {
  padding: 8rem 5rem 5rem 2rem;
  /* padding: 2rem; */
  /* border: 1px solid black; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: 1rem;
}
.home-row-2-col-2-box {
  /* border: 1px solid green; */
  /* padding: 1rem; */
  display: flex;
}

.home-row-3 {
  min-height: 80vh;
  display: grid;
  background: #171e27;
  grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
  padding: 1rem 3rem;
  /* border: 1px solid red; */
}
.home-row-3-col-1 {
  /* border: 1px solid green; */
  display: grid;
  /* Four goal tiles are a 2x2 block, so the columns are stated rather than left to
     auto-fit. auto-fit packed as many 28rem tracks as would fit, which is three on
     a 1920px screen — the four tiles then wrapped 3 + 1. The ≤1300px rule below
     already said `1fr 1fr`, which is why it looked right at laptop widths only. */
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  padding: 5rem;
  align-self: center;
}
.home-row-3-col-1-box {
  /* border: 1px solid yellow; */
  position: relative;
  height: 30rem;
  /* width: 30rem; */
  clip-path: polygon(0 8%, 100% 0, 100% 95%, 0 100%);

  box-shadow: 2px 10px 21px 3px rgba(23, 30, 39, 1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
}
.goal-1 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/goal-1.jpg");
  background-size: cover;
}
.goal-2 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/goal-2.jpg");
  background-size: cover;
}
.goal-3 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/goal-3.jpg");
  background-size: cover;
}
.goal-4 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/goal-4.jpg");
  background-size: cover;
}
.home-row-3-col-1-box-textbox {
  /* border: 1px solid indigo; */
  color: #fff;
  border-left: 3px solid #ff7700;
  margin: 20px;
  padding: 5px;
}
.home-row-3-col-1-box-textbox-heading {
  /* border: 1px solid black; */
  color: #fff;
  font-size: 16px;
  padding-left: 5px;
  font-weight: 600;
}
.home-row-3-col-1-box-textbox-text {
  /* border: 1px solid white; */
  font-size: 14px;
  padding-left: 5px;
}

.home-row-3-col-2 {
  /* border: 1px solid purple; */
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  padding: 5rem;
  justify-content: center;
}

.home-row-4 {
  background: linear-gradient(rgba(23, 30, 39, 0) 50%, #171e27),
    url("../images/rch-pic4-1024x800.jpg");
  height: 150vh;
  background-size: cover;
  text-align: center;
}
.home-row-4-heading {
  font-size: 2rem;
  opacity: 0.7;
  padding-top: 150px;
}
.home-row-4-subheading {
  font-size: 5rem;
}
.home-row-4-text {
  font-size: 1.8rem;
  padding: 0 12rem;
  opacity: 0.7;
}
.home-row-4-heading-icons {
}
.home-row-4-heading-icon {
  color: #ff7700;
  font-size: 3rem;
  padding: 1.5rem;
}
.home-row-4-heading-mobile {
  /* border: 1px solid red; */
  height: 110vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}
.home-row-4-heading-mobile-image {
  max-height: 35rem;
}
.home-row-5 {
  background-color: #171e27;
  min-height: 500px;
  padding-top: 200px;
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
}
.home-row-5-column-1 {
  /* border: 1px solid green; */
  padding: 10rem;
}
.home-row-5-column-2 {
  /* border: 1px solid red; */
  text-align: center;
}
.home-row-5-column-2-image {
  height: 60rem;
}
.home-row-6 {
  min-height: 500px;
  background-color: #e1e9f2;
  text-align: center;
  padding: 20px;
}

.home-row-6-heading {
  padding-top: 20px;
  font-size: 4rem;
}

.home-row-6-video-container {
  /* border: 1px solid red; */
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  grid-gap: 10px;
  justify-items: center;
}
.home-row-6-video-container-box {
  /* border: 1px solid blue; */
  /* padding: 20px; */
  height: 250px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  /* justify-content: center; */
  transition: all 0.2s;
}
.home-row-6-text {
  /* border: 1px solid red; */
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  padding: 40px 20px 40px 10px;
  z-index: 1;
  font-weight: 800;
}
.home-row-6-video-container-box:hover {
  /* border: 2px solid #ff7700; */
}

.play-icon {
  padding-right: 6px;
  color: #ff7700 !important;
  font-size: 5.5rem;
}
.home-6-box-1 {
  background: url("../images/home-vid-thumb-1.png");
  background-size: cover;
  width: 350px;
  position: relative;
  height: 300px;
}
.home-6-box-2 {
  background: url("../images/home-vid-thumb-2.jpg");
  background-size: cover;
  width: 350px;
  position: relative;
  height: 300px;
}
.home-6-box-3 {
  background: url("../images/home-vid-thumb-3.jpg");
  background-size: cover;
  width: 350px;
  position: relative;
  height: 300px;
}
.home-row-7 {
  min-height: 800px;
  background: linear-gradient(rgba(23, 30, 39, 0) 50%, #171e27),
    url("../images/7th-row-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.home-row-7.background-trainers {
  background: linear-gradient(rgba(23, 30, 39, 0) 50%, #171e27),
    url("../images/matthew-lejune-716131-unsplash.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.home-row-7-container {
  background-color: #fff;
  color: #171e27;
  min-height: 400px;
  margin: 30px;
  padding: 40px;
  width: 600px;
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);

  display: flex;
  align-content: center;
  justify-content: center;
}
.home-row-7-container-text {
  /* -ms-transform: skewX(5deg); /* IE 9 */
  /* -webkit-transform: skewX(5deg); Safari */
  /* transform: skewX(5deg); */
}

.home-row-8-blog-container-box {
  height: 300px;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
  cursor: pointer;
  transition: all 0.4s;
}
.home-row-8-blog-container-box:hover {
  /* transform: scale(1.05); */
}

.home-8-box-1 {
  /* background: url("../images/karl-s-1060222-unsplash.jpg"); */
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.home-8-box-1:hover,
.home-8-box-1:focus {
  transform: scale(1.05);
}
.home-8-box-2 {
  background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.home-8-box-2:hover,
.home-8-box-2:focus {
  transform: scale(1.05);
}
.home-8-box-3 {
  background: url("../images/bruce-mars-554386-unsplash.jpg");
  background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.home-8-box-3:hover,
.home-8-box-3:focus {
  transform: scale(1.05);
}
.home-row-9 {
  height: 300px;
  background: #171e27;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home-button {
  /* border: 1px solid blue; */
  background-color: #ff7700;
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
  -ms-transform: skewX(-20deg); /* IE 9 */
  -webkit-transform: skewX(-20deg); /* Safari */
  transform: skewX(-20deg);
  padding: 1.3rem 3.2rem;
}
.home-button:hover {
  color: #fff;
  background-color: #e26a00;
}
.home-button-text {
  display: inline-block;
  -ms-transform: skewX(20deg); /* IE 9 */
  -webkit-transform: skewX(20deg); /* Safari */
  transform: skewX(20deg);
}

/* An inline SVG sits on the text baseline by default, which drops it below the
   optical centre of the label — the arrow looked like it was falling out of the
   button. `middle` centres it against the x-height; the small negative offset
   corrects for the fact that this arrow's drawn glyph is low in its own box. */
.home-button-text svg,
.home-button-2-text svg {
  vertical-align: middle;
  margin-left: 0.4rem;
  position: relative;
  top: -0.06em;
}

/* The bullet marker in row 2.
   `flex-shrink: 0` is the important half: .home-row-2-col-2-box is a flex row and
   the arrow was a shrinkable item next to a long paragraph, so it was squeezed to
   16px wide while staying 26px tall — a visibly squashed arrow rather than a small
   one. It needs to keep its own width whatever the text does. */
.rc-bullet-arrow {
  flex-shrink: 0;
  color: #ff7700;
  font-size: 3.2rem;
  padding-right: 0.5rem;
}
.home-button-2 {
  background-color: #171e27;
  display: inline-block;
  color: #fff;
  -ms-transform: skewX(-20deg); /* IE 9 */
  -webkit-transform: skewX(-20deg); /* Safari */
  transform: skewX(-20deg);
  padding: 1.3rem 3.2rem;
  border-top: 1px solid #ff7700;
  border-bottom: 1px solid #ff7700;
}
.home-button-2:hover {
  color: #fff;
  background-color: #e26a00;
}

.home-text {
  /* border: 1px solid indigo; */
  color: #fff;
  font-size: 1.7rem;
  opacity: 1;
}

@media screen and (min-width: 2000px) {
  .home-row-7 {
    justify-content: center;
  }
  .home-row-7.background-trainers {
    justify-content: center;
  }
  .home-row-6-video-container {
    width: 60vw;
    margin-left: 20vw;
  }
  .home-row-2-outside {
    background-color: #232932;
  }
  .home-row-2 {
    width: 60vw;
    margin-left: 23vw;
  }
  .home-row-3-outside {
    background-color: #171e27;
  }
  .home-row-3 {
    width: 60vw;
    margin-left: 23vw;
    min-height: 50vh;
  }
  .home-row-4-heading-mobile {
    height: 65vh;
  }
  .home-row-4 {
    height: 80vh;
    background-position: 50% 50%;
  }
  .home-row-5 {
    width: 60vw;
    margin-left: 20vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
  }
}

@media screen and (max-width: 1300px) {
  .home-row-6-video-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .home-row-3-col-1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
@media screen and (max-width: 500px) {
  .home-6-box-1 {
    background: url("../images/home-vid-thumb-1.png");
    background-size: cover;
    width: 250px;
    position: relative;
    height: 200px;
  }
  .home-6-box-2 {
    background: url("../images/home-vid-thumb-2.jpg");
    background-size: cover;
    width: 250px;
    position: relative;
    height: 200px;
  }
  .home-6-box-3 {
    background: url("../images/home-vid-thumb-3.jpg");
    background-size: cover;
    width: 250px;
    position: relative;
    height: 200px;
  }
  .home-row-4-heading-mobile {
    height: 50vh;
  }
  .home-row-4-heading-mobile-image {
    max-height: 20rem;
  }
  .home-row-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }
  .home-row-3 {
    min-height: 80vh;
    display: grid;
    background: #171e27;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }
  .home-row-3-col-1 {
    /* border: 1px solid green; */
    display: grid;
    /* `min(35rem, 100%)` rather than a bare 35rem: a bare minimum track cannot
       shrink below itself, so under ~360px the card kept its 268.8px width and
       pushed 10px past the viewport. min() lets the track collapse to the
       column's own width once 35rem no longer fits, and is inert above that. */
    grid-template-columns: repeat(auto-fit, minmax(min(35rem, 100%), 1fr));
    grid-gap: 1rem;
    /* padding: 2rem; */
  }
  .home-row-3-col-1-box {
    /* border: 1px solid yellow; */
    /* position: relative; */
    height: 30rem;
    /* width: 0%; */
    /* transform: skewX(5deg);
    box-shadow: 2px 10px 21px 3px rgba(23, 30, 39, 1); */
  }
  .home-row-3-col-2 {
    padding: 2rem;
  }
  .home-row-5 {
    padding-top: 200px;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }
}

/* ── Narrow phones (≤360px) ────────────────────────────────────────────────
   Deliberately below the 375px iPhone width so the common phone sizes keep
   their current spacing exactly; this only relieves the smallest screens,
   where row 3's nested padding left the goal cards under 200px wide. */
@media screen and (max-width: 360px) {
  .home-row-3 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .home-row-3-col-1 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}