/******************************************************************
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
*********************/
/*********************
FONTS
*********************/
.content-card-slider {
  padding: 0;
  font-family: "Montserrat", sans-serif;
  background: #02416b;
  padding-bottom: 4rem;
}
.content-card-slider__header {
  padding: 3rem 2rem;
  text-align: center;
}
.content-card-slider__heading {
  font-family: "Montserrat", sans-serif;
  font-size: 2.3rem;
  font-weight: 500;
  color: #fff;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
}
.content-card-slider__heading h2 {
  color: #fff;
}
.content-card-slider__intro {
  font-family: "Montserrat", sans-serif;
  max-width: 1100px;
  margin: 0 auto;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.5;
}
.content-card-slider__carousel-wrapper {
  position: relative;
}
.content-card-slider__carousel {
  position: relative;
  z-index: 1;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 1024px) {
  .content-card-slider__carousel {
    display: block;
  }
}
.content-card-slider__item {
  height: 100%;
}
.content-card-slider__card {
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.content-card-slider__card h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #02416b;
  margin-bottom: 0.5rem;
}
.content-card-slider__card h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #006633;
  margin-bottom: 1rem;
}
.content-card-slider__card p {
  font-family: "Montserrat", sans-serif;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 1.5rem;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.5;
}
.content-card-slider__link {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #006633;
  text-decoration: none;
  font-size: 0.95rem;
  text-transform: uppercase;
  text-align: right;
}
.content-card-slider__link a {
  color: #006633;
}
.content-card-slider__link a:hover {
  text-decoration: underline;
}
.content-card-slider__image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
  max-height: 264px;
  -o-object-fit: contain;
     object-fit: contain;
}
.content-card-slider .nextArrow,
.content-card-slider .prevArrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
  background: #0572BA;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 36px;
  height: 36px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.content-card-slider .nextArrow svg path,
.content-card-slider .prevArrow svg path {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .content-card-slider .nextArrow svg,
  .content-card-slider .prevArrow svg {
    width: 46px;
    height: 46px;
  }
}
.content-card-slider .nextArrow:hover,
.content-card-slider .prevArrow:hover {
  background: #fff;
}
.content-card-slider .nextArrow:hover svg path,
.content-card-slider .prevArrow:hover svg path {
  stroke: #0572BA;
}
.content-card-slider .nextArrow {
  right: 1px;
}
@media only screen and (min-width: 768px) {
  .content-card-slider .nextArrow {
    right: -12px;
  }
}
@media only screen and (min-width: 1400px) {
  .content-card-slider .nextArrow {
    right: -10px;
  }
}
.content-card-slider .prevArrow {
  left: 0;
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
  top: 46%;
}
@media only screen and (min-width: 768px) {
  .content-card-slider .prevArrow {
    left: -12px;
    top: initial;
  }
}
@media only screen and (min-width: 1400px) {
  .content-card-slider .prevArrow {
    left: -10px;
    top: initial;
  }
}