body, p, html, h1, h2, h3, h4, h5, ul, li, span {
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif!important;
}
.offsetLeft img{
  border: 9px solid #ACCCFF;
  width: 90%;
  margin-left: 20px;
  margin-top: 20px;
}
.borderRight {
  border-right: 2px solid #acccff;
}
/* LOGIN */
.WaGadgetLoginButton .loginContainer.loginContainer .loginLink {
  border-radius: 5px;
}
.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink {
  background: #3f88e8;
  color: #fff;
}
.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink:hover, .WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink.hover {
  background: #ACCCFF;
}
/* END LOGIN */
.offsetLeft {
    background-image: url(/resources/theme/blueboxbg.png);
    background-repeat: no-repeat;
    background-position: -25px -15px;
    background-size: contain;
}
.heroText {
  padding-top: 200px;
    padding-bottom: 150px;
}
.roundedContainer td {
  border-radius: 25px;
}

.WaGadgetSocialProfile.socialProfileStyle001 a.Facebook {
    background: #003e7c;
}

/* BUTTONS */
a.buttonStyle001, a:link.buttonStyle001 {
min-width: 200px;
text-transform: uppercase;
  transition:  background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
    border: 2px solid #002256
}
a.buttonStyle001, a:link.buttonStyle001:hover {
border: 2px solid #002256
color: #002256;
background: #fff;
}
a.stylizedButton.buttonStyle002 {
  border: 2px solid #fff;
  background: #fff;

  transition:  background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

a.stylizedButton.buttonStyle002:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
/* END BUTTONS */


/* MENU */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel {
    float: right;
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel>li>.item>a {
      font: 600 18px / 23px 'Lato', 'Arial', sans-serif;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel {
    margin: 0 auto;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul {

    border-top: 3px solid #37ABC8;
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li>.item>a>span {
  padding: 20px 30px;
  text-transform: uppercase;
  font-weight: 600;
}
/* END MENU */

/* Vertical Align Middle */

.vertAlign td {
  vertical-align: middle; 
}
/* Vertical Align Middle */


/* TYPOGRAPHY */
h1.promo, h1, h2, h3 {
  font-size: 46px!important;
}
[class*='EditableArea'] ul {
    margin: 1em 0 1em 45px; 
}
@media screen and (max-width: 766px) {
h1.promo, h1, h2, h3 {
  font-size: 26px!important;
}

}
/* END TYPOGRAPHY */


/* MOBILE PANEL */
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li.sel>.item>a {
  color: #fff;
}
.WaGadgetMobilePanel .mobilePanel {
  background: #003e7c;
}
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:active, .WaGadgetMobilePanel .mobilePanel .mobilePanelButton.active, .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover, .WaGadgetMobilePanel .mobilePanel .mobilePanelButton.hover {
  background: #003e7c;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel, .WaGadgetMobilePanel .mobilePanel .loginInner {
  border-top: 0;
    background: #003e7c;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel,.WaGadgetMobilePanel .mobilePanel .menuInner ul ul, .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$="TextBox"] input[class$="TextBoxControl"], .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginActionRememberMe label::before{
  background: #003e7c;
}
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton {
  background: #012f5e
}
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton:hover {
  background: #012f5e
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a {
  color: #fff;
}
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a {
  color: #fff;
}
/* END MOBILE PANEL */


/* Mobile View */
@media screen and (max-width: 766px) {
  .non-mobile {
     display: none;
}
.mobileText {
  text-align: center;
}
.borderRight {
  border-right: 0px solid #acccff;
}
}




.angled-band {
  position: relative;
  width: 100%;
  height: 120px; /* adjust height as needed */
  background: #ffffff;
  overflow: hidden;
}

/* the light blue angled shape */
.angled-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #eef4fb; /* light blue */
  clip-path: polygon(
    0% 0%,     /* left slope start */
    80% 85%,    /* gentle rise */
    100% 0%,    /* small dip */
    100% 35%,   /* right slope */
    100% 100%,  /* bottom right */
    0% 100%     /* bottom left */
  );
}
.angled-band-btm {
  width: 100%;
  height: 140px;
  background: #fff;

  -webkit-clip-path: polygon(
    0% 100%,
    100% 100%,
    100% 35%,
    25% 80%,
    18% 60%,
    0% 0%
  );
  clip-path: polygon(
    0% 100%,
    100% 100%,
    100% 35%,
    25% 80%,
    18% 60%,
    0% 0%
  );
}



/* ANIMATIONS */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 600ms ease-out both; /* both = apply start+end states */
  will-change: opacity, transform;
}





/* GRID */
.grid-5 img {
  border-radius: 200px;
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  .grid-5 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Phones */
@media (max-width: 640px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small phones */
@media (max-width: 420px) {
  .grid-5 {
    grid-template-columns: 1fr;
  }
}


.clipbg {
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
}


