/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/******************************************************************
Site Name: 
Author: 

Stylesheet: Typography

******************************************************************/
@font-face {
  font-family: 'Bw Gradual';
  src: url("../fonts/BwGradual-Bold.woff2") format("woff2"), url("../fonts/BwGradual-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Gradual';
  src: url("../fonts/BwGradual-Light.woff2") format("woff2"), url("../fonts/BwGradual-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Gradual';
  src: url("../fonts/BwGradual-Regular.woff2") format("woff2"), url("../fonts/BwGradual-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*********************
FONT STACKS
*********************/
/*
 Commented out since WP uses system fonts now but if you can't let go I won't be upset. 
*/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

.block-core-services-grid {
  background-color: #262626;
  padding: 3rem;
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

.block-core-services-grid .core-services-heading {
  grid-column: 1/-1;
  border-top: 4px solid #E0EED2;
  padding-top: 1rem;
  margin-bottom: 1rem;
  color: #FEFEFE;
  font-size: 2.625rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem;
  /* 114.286% */
}

.block-core-services-grid .core-service-box {
  padding-top: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.block-core-services-grid .core-service-box img {
  max-height: 10rem;
  width: auto;
}

.block-core-services-grid .core-service-box .core-service-title {
  color: #FEFEFE;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem;
  /* 125% */
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  max-height: 90px;
}

.block-core-services-grid .core-service-box .core-service-description {
  color: #FEFEFE;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  /* 150% */
  margin-top: 1rem;
}

.block-core-services-grid .core-services-cta {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  grid-column: 1/-1;
}

.block-core-services-grid .core-services-cta a {
  color: #FEFEFE;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.block-core-services-grid .core-services-cta a img.nav-arrow {
  margin-left: 0.5rem;
  width: 24px;
  height: 24px;
  transition: transform 0.5s ease;
}

.block-core-services-grid .core-services-cta a:hover .nav-arrow {
  transform: rotate(45deg);
}

.editor-styles-wrapper .block-core-services-grid {
  padding: 0 3rem;
}

@media only screen and (min-width: 768px) {
  .block-core-services-grid {
    margin-top: 7.5rem;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem 3rem;
  }
  .block-core-services-grid .core-service-box {
    align-items: flex-start;
  }
  .block-core-services-grid .core-service-box .core-service-title {
    color: #FEFEFE;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.875rem;
    /* 153.333% */
    flex: 1;
  }
  .block-core-services-grid .core-service-box .core-service-description {
    max-width: 100%;
  }
}

@media only screen and (min-width: 1031px) {
  .block-core-services-grid {
    grid-gap: 1rem 4rem;
    grid-template-columns: 1fr 1fr;
  }
  .block-core-services-grid .core-service-box .core-service-description {
    max-width: 100%;
  }
}

@media only screen and (min-width: 1280px) {
  .block-core-services-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media only screen and (min-width: 1780px) {
  .block-core-services-grid {
    grid-gap: 1rem 6rem;
  }
  .block-core-services-grid .core-service-box .core-service-description {
    max-width: 100%;
  }
}