/* @import url('http://example.com/example_style.css'); */
<link rel="stylesheet" href="https://pro.Font Awesome 5 Pro.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"><!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/


/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/******************** Generic Styles ********************/

html {
  scroll-padding-top: 200px!important;
}

a:focus, a:hover {
    color: #0C426A;
}
.blog-post__body a:focus, 
.blog-post__body a:hover {
    background: #0c426a1f;}
a.header__skip {
    color: white !important;
    background: #333;
    font-weight: 600;
    padding: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 5px;
    z-index: 999999999 !important;
}
.header__skip:active, .header__skip:focus, .header__skip:hover {
    height: auto;
    background: #fff;
    color: #333 !important;
    left: 0;
    text-decoration: none;
    overflow: visible;
    top: 0;
    width: auto;
}


.shadow {    -webkit-box-shadow: 0 0 8px -2px rgba(51,51,51,.1);
  -moz-box-shadow: 0 0 8px -2px rgba(51, 51, 51, .1);
  box-shadow: 0 0 8px -2px rgba(51,51,51,.1);}
img.hs-image-widget {
  border-radius: 5px!important;
}

body {
  box-shadow: inset 0 118px 0 0 #232323;
  -webkit-box-shadow: inset 0 118px 0 0 #232323;
}
.page-center {
  max-width: 1200px!important;
  margin: 0 auto;}

.gradient-bg {
  background: #1c5887;
  /*background: #174c6b;
  background: linear-gradient(147deg, #19506e 35%, #2376b4);*/
  color:white;
}

.hs-video-wrapper iframe {
  border-radius: 5px;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.fade-in.visible {
  opacity: 1;
}
/******************** Typography ********************/

h1, h2 {line-height: 1.2;
  letter-spacing: -1px;}

h3, h4 {line-height: 1.3;
}

p.eyebrow { font-weight:bold;
  color: #2273af;
  font-size: 18px;
  margin-bottom: 10px;}

/*.highlight {
background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), #c1ca1fe8 0%, rgba(255, 255, 255, 0));
    border-radius: 2px;
  padding-right:5px;
}*/
.highlight {
 display: inline-block;
    background: linear-gradient(90deg, 
        rgba(193, 202, 31, 0.05) 0%, 
        rgba(193, 202, 31, 1) 85%, 
        rgba(193, 202, 31, 0) 100%);
    padding: 2px 4px;
    border-radius: 2px; /* Optional: To slightly round the corners */
    transition: background 0.5s ease;
}
/*
.highlight2  { 
 display: inline-block;
    background: linear-gradient(90deg, 
        rgba(193, 202, 31, 0.25) 0%, 
        rgba(193, 202, 31, 1) 50%, 
        rgba(193, 202, 31, 0) 100%);
    padding: 2px 4px;
    border-radius: 2px; 
    transition: background 0.5s ease;
}*/
/*
.highlight3  {
    display: inline;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%,
            rgb(193 202 31) 65%);
    box-shadow: inset 0 -0.5em 0 rgb(193 202 31);}*/
.card {
  border-radius:5px;
  padding:50px;
  background:white;
  -webkit-box-shadow: 0px 0px 8px -2px rgba(51,51,51,0.1);
  -moz-box-shadow: 0px 0px 8px -2px rgba(51,51,51,0.1);
  box-shadow: 0px 0px 8px -2px rgba(51,51,51,0.1);
}
p.p-card {
  border-radius: 5px;
  padding: 10px;
  color: #333 !important;
  width: fit-content;
  background: #f0f6fb;
}
.p-card i.fa {
  color: #2273AF;
  padding-right: 10px;
}
.card-pop-in ul,
.accordion__content ul,
span.solutions-copy ul,
.hs_cos_wrapper_type_rich_text ul 
{list-style:none!important;}

.card-pop-in,
.accordion__content,
span.solutions-copy,
.hs_cos_wrapper_type_rich_text 
{list-style:none!important;}

.card-pop-in ul li:before,
.accordion__content ul li:before,
span.solutions-copy ul li:before,
.hs_cos_wrapper_type_rich_text ul li:before 

{ display: inline-block;
  height: 0px;
  font-style: normal;
  font-weight: 600;
  line-height: 2;
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  margin-right: 8px;
  color: #1D6CA8;
  font-size: 18px;
  margin-left: -25px;
}

.accordion__content ul li:first-child ,
.card-pop-in ul li:first-child ,
span.solutions-copy ul li:first-child ,
.hs_cos_wrapper_type_rich_text ul li:first-child {
  margin: 0 0.7rem 0.7rem 0.7rem;
}

.accordion__content ul {margin-left:10px;}

/******************** Buttons ********************/

/* Arrow Button */
a.button-arrow {
  background-color: #333;
  border: 3px solid #333;
  border-radius: 100px;
  color: #fff;
  font-style: normal;
  font-weight: 600;
  padding: 13px 8px 15px 23px;
  text-decoration: none;
  font-size: 18px;
  text-transform: none;
}
.button-arrow:after {
  content: url(https://4333718.fs1.hubspotusercontent-na1.net/hubfs/4333718/Site%20Assets/circle-arrow.svg);
  height: 30px;
  width: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  filter: invert(100%) sepia(0%) saturate(6984%) hue-rotate(306deg) brightness(92%) contrast(126%);

}
.button-arrow:hover:after {
  filter: invert(19%) sepia(2%) saturate(219%) hue-rotate(340deg) brightness(83%) contrast(88%);
}
a.button-arrow:hover {
  background-color: #fff;
  border: 3px solid #fff;
  color: #333;
}

/* Arrow Link */

.arrowlink {
  color: #c1ca1f;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}

.arrowlink::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #c1ca1f;
  transition: width 0.3s ease;
}

.arrowlink:hover::after {
  width: 0px;
  background-color: #fff; /* Change background color to white on hover */
}

.arrowlink svg {
  fill: #c1ca1f;
  transition: all 0.2s ease-in;
  margin-left: 2px;
}

.arrowlink:hover, 
.arrowlink:focus {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.arrowlink:hover svg, 
.arrowlink:focus svg {
  fill: #fff;
  transform: translate(4px, 0px);
}

/*Dark Arrow Link */

.arrowlink.darklink {
  color: #1D6CA8;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}

.arrowlink.darklink::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1D6CA8;
  transition: width 0.3s ease;
}

.arrowlink.darklink:hover::after {
  width: 0px;
  background-color: #0C426A; /* Change background navy to white on hover */
}

.arrowlink.darklink  svg {
  fill: #1D6CA8;
  transition: all 0.2s ease-in;
  margin-left: 2px;
}

.arrowlink.darklink:hover, 
.arrowlink.darklink:focus {
  color: #0C426A;
  font-weight: 600;
  text-decoration: none;
}

.arrowlink.darklink:hover svg, 
.arrowlink.darklink:focus svg {
  fill: #0C426A;
  transform: translate(4px, 0px);
}

/* Blue Link */
.blue-arrowlink {
  color: #104162; /* Changed color code */
  font-weight: 600;
  text-decoration: none;
  position: relative;
}

.blue-arrowlink::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #104162; /* Changed color code */
  transition: width 0.3s ease;
}

.blue-arrowlink:hover::after {
  width: calc(100% + 6px);
  height: 0px;
  background-color: #333; /* Change background color to white on hover */
}

.blue-arrowlink svg {
  fill: #104162; /* Changed color code */
  transition: all 0.2s ease-in;
  margin-left: 2px;
}

.blue-arrowlink:hover, 
.blue-arrowlink:focus {
  color: #333;
  font-weight: 600;
  text-decoration: none;
}

.blue-arrowlink:hover svg, 
.blue-arrowlink:focus svg {
  fill: #333;
  transform: translate(4px, 0px);
}




/* Secondary Button */

a.secondary.button {
  background-color: transparent;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  padding: 13px 23px;
  text-decoration: none;
  text-transform: none;
}

a.secondary.button:hover {
  background-color: #333;
  color:white;
  border: 3px solid #333;

}

/* Blue Arrow Button */

a.button-arrow.blue {
  background: #267ab9;
  border: 3px solid #267ab9;
  color: white;
}
.blue.button-arrow:hover:after  {
  filter: invert(100%) sepia(0) saturate(6984%) hue-rotate(306deg) brightness(92%) contrast(126%);
}
a.button-arrow.blue:hover {
  background: #333;
  border: 3px solid #333;
  color:white;
}

/* Arrow Button on Dark Background */

a.button-arrow.dark {
  background: #C1CA1F;
  border: 3px solid #C1CA1F;
  color: #333;
}
.button-arrow.dark:after {
  content: url(https://4333718.fs1.hubspotusercontent-na1.net/hubfs/4333718/Site%20Assets/circle-arrow.svg);
  height: 30px;
  width: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  filter: none;
}


a.button-arrow.dark:hover {
  background: #fff;
  border: 3px solid #fff;
  color:#333;
}

/* Animation */
.shift {
  transition: 0.3s;}

.shift:hover {
  transform: translate(0, -5px);
}
/******************** Blog ********************/

.block .widget-module ul li {
  margin: 0px;
  border-bottom: 1px solid #c6c6c6;
  counter-increment: item;
  display: flex;
  padding: 14px 0;
}

.block .widget-module ul li:last-child {
  border-bottom: none;
}

.block .widget-module ul li a {
  color: #104162;
  font-weight: 600;
  text-underline-offset: 5px;
  text-decoration: underline;
  position: relative;
}

.block .widget-module ul li a:hover {
  color: #104162;
  font-weight: 600;
  text-underline-offset: 5px;
  text-decoration: none;
  position: relative;
}

.block .widget-module ul { list-style: none;
  padding-left: 0px;}

.block h3 {
  font-weight: 700;
}

/******************** Forms ********************/

form .hs-button, form input[type=submit] {
  border-radius: 5px !important;}

.hs-search-field__suggestions .results-for, .hs-search-field__suggestions a {
  display: block;
  line-height: 1.7rem;
  padding: 10px;
  padding-bottom: 15px;
}

form.hs-search-field__form {
  padding: 0px;
}
form.hs-search-field__form input::placeholder {
  color: #333;
}

button.hs-search-field__button {
  border-radius: 0px 5px 5px 0px !important;
}

a.filter-expand-link {
  font-weight: 600;
  text-underline-offset: 5px;
}

a.filter-expand-link:hover, a.filter-expand-link:focus {
  text-decoration: none;}


/******************** Footer ********************/
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
    flex-direction: column;
    row-gap: 15px;
    /* line-height: 1px; */
}

li.hs-menu-item.hs-menu-depth-1.hs-item-has-children ul li a:first-child {
  font-weight: 400!important;
}

li.hs-menu-item.hs-menu-depth-1.hs-item-has-children {
  max-width: 250px;
  /* padding-right: 20px; */
  padding-left: 20px;
}
.footer .hs-menu-wrapper a {line-height:0px;}
@media (max-width: 767px)
{
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    display: none;
  }

  #hs_cos_wrapper_footer-module-2 .social-follow {
    justify-content: flex-start!important;
  }

}



/******************** Mobile ********************/

@media (max-width: 767px)
{
  .page-center {
    padding-left: 1rem!important;
    padding-right: 1rem!important;
  }
  
  h1 {font-size:2em;}
  h2 {
    font-size: 1.7em;
}
  h3 {
  
    font-size: 1.2em;}
  
  a.button-arrow {
    white-space: nowrap;
    font-size: 16px;
}
  
  
  
}