/******************************************
Section | Header Interior
******************************************/
/**************************************************
Stylesheet: Defaults Stylesheet
**************************************************/
/**************************************************
Stylesheet: Mixins Stylesheet
**************************************************/
/*******************
FONT MIXINS (size, color, weight, line-height)
********************/
/*********************
Column split into X columns
@include column-count(3);
*********************/
/*********************
Column split with px gap
@include column-gap(40px);
*********************/
/*********************
Column split style
@include column-rule-style(solid);
*********************/
/*********************
Column split border
@include column-rule(1px solid #ededed);
*********************/
/*********************
Background gradient 2 color
@include background-gradient($gray, #000);
*********************/
/*********************
Background gradient 3 color
@include accordion-gradient($gray, #000, #666);
*********************/
/*********************
Transform duration by X seconds
@include transition(1.5s);
*********************/
/*********************
Transform Rotate element by x degrees
@include rotate(180);
*********************/
/*********************
Creates a 6px arrow with pure css
@include arrow(#000);
*********************/
/*********************
Clip 10px corner off the bottom right corner
@include cornerclip(#000);
*********************/
/*********************
Clip 3px corner off the bottom right corner
@include cornerclipsmall(#000);
*********************/
/*********************
Clip 10px corner off the top right corner
@include cornercliptop(#000);
*********************/
/*********************
Clip 10px corner off the top left corner
@include cornercliptopleft(#000);
*********************/
section.blue-columns {
  position: relative;
  z-index: 15; }
  section.blue-columns .inner-top {
    max-width: 1100px;
    padding: 10px 30px 97px 30px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; }
    section.blue-columns .inner-top .content {
      text-align: left; }
      section.blue-columns .inner-top .content h2 {
        font-family: "proxima-nova-condensed", sans-serif;
        font-display: swap;
        font-size: 40px;
        color: #151F6D;
        font-weight: 600;
        line-height: 49px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        max-width: 375px;
        margin: 0 0 15px 0; }
      section.blue-columns .inner-top .content p {
        color: #404040;
        max-width: 618px; }
  section.blue-columns .inner-bottom {
    max-width: 1204px;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: -95px;
    position: relative;
    z-index: 15; }
  section.blue-columns .blue-column {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(25% - 30px);
    position: relative;
    margin: 0px 15px;
    border-radius: 30px;
    box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02); }
    section.blue-columns .blue-column:before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 30px;
      background: linear-gradient(180deg, #265CA6 0%, #053685 100%);
      box-shadow: 0px 86px 34px rgba(0, 0, 0, 0.03), 0px 48px 29px rgba(0, 0, 0, 0.09), 0px 21px 21px rgba(0, 0, 0, 0.16), 0px 5px 12px rgba(0, 0, 0, 0.18), 0px 0px 0px rgba(0, 0, 0, 0.18); }
    section.blue-columns .blue-column:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: radial-gradient(105.63% 106.47% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 0.2;
      z-index: 1;
      border-radius: 30px;
      box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(12.5px);
      /* Note: backdrop-filter has minimal browser support */ }
    section.blue-columns .blue-column .blue-column-contents {
      position: relative;
      z-index: 5;
      padding: 28px 15px 20px 23px; }
  section.blue-columns h4 {
    font-family: "proxima-nova", sans-serif;
    font-display: swap;
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    line-height: 29px;
    text-transform: initial;
    margin: 0 0 14px 0;
    position: relative;
    letter-spacing: -0.02em; }
  section.blue-columns p {
    color: #ffffff;
    max-width: 400px;
    margin-bottom: 10px; }
  section.blue-columns a.btn {
    margin-top: 20px; }
  section.blue-columns .button-icon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 46px; }
    section.blue-columns .button-icon img {
      max-width: 117px; }
  @media only screen and (max-width: 900px) {
    section.blue-columns .inner {
      flex-wrap: wrap; }
    section.blue-columns .blue-column {
      flex-basis: calc(50% - 45px);
      margin: 15px 15px; } }
  @media only screen and (max-width: 768px) {
    section.blue-columns .inner {
      flex-wrap: wrap; }
    section.blue-columns .inner-top {
      padding: 45px 30px 30px 30px; }
    section.blue-columns .blue-column {
      flex-basis: calc(100% - 60px);
      margin: 0 15px 30px; } }