body {
 /*background-color: var(--white-background-color);*/
}


/*heading-font*/
  @font-face {
    font-family: "NeueHaasGroteskDisplayPro45Light";
    src: url('/files/light_font.woff2') format('woff2'),
         url('/files/light_font.woff') format('woff');
  }
  /*normal-text-font*/
  @font-face {
    font-family: "NeueHaasGroteskTextPro55Roman";
    src: url('/files/roman_font.woff2') format('woff2'),
         url('/files/roman_font.woff') format('woff');
  }
  /*bold-text-font*/
  @font-face {
    font-family: "NeueHaasGroteskTextPro65Medium";
    src: url('/files/medium_font.woff2') format('woff2'),
         url('/files/medium_font.woff') format('woff');
  }
:root {
    --primary-color:#314EB7;
    --white-background-color:#F4F4F4;
    --light-color: #FFFFFF;
    --light-text-color: #E9E9E9;
    --dark-color:#303030;
    --text-color:#303030;
    --heading-color:black;
    --small-print-color:#595959;
    --primary-border-radius:8px;
    --button-padding:16px 32px 16px 32px;
    --primary-border:1px solid var(--primary-color);
    --light-border: 1px solid var(--light-color);
    --dark-border: 1px solid var(--dark-color);

    /* Heading font variables */
  --heading-font-family: 'NeueHaasGroteskDisplayPro45Light';
  --heading-font-weight: 400;
  --heading-font-size: 4.375rem; /*70px;*/
  --heading-line-height: 1.2;
  

  /* Side heading font variables */
  --side-heading-font-family: 'NeueHaasGroteskDisplayPro45Light';
  --side-heading-font-weight: 400;
  --side-heading-font-size: 2.625rem; /*42px;*/
  --side-heading-line-height: 1.3;

  /* Normal text font variables */
  --normal-text-font-family:'NeueHaasGroteskTextPro55Roman';
  --normal-text-font-weight: 400;
  --normal-text-font-size: 20px;
  --normal-text-line-height: 1.5;
  
  /* Bold text font variables */
  --bold-text-font-family:'NeueHaasGroteskTextPro65Medium';
  --bold-text-font-weight: 500;
  --bold-text-font-size: 1.25rem; /*20px;*/
  --bold-text-line-height: 1.5;
  
  /* Mobile text font variables */
  --mobile-text-font-family: var(--normal-text-font-family);
  --mobile-text-font-weight: var(--heading-font-weight);
  --mobiel-text-font-size: 1.125rem;
  --mobile-text-line-height: 1.6;
  
  /* Bold text font variables */
  /*--mobile-bold-text-font-family:'NeueHaasGroteskTextPro65Medium';*/
  --mobile-bold-text-font-weight: 500;
  --mobile-bold-text-font-size: 1.125rem;
  --mobile-bold-text-line-height: 1.6;
 
 
}

/* Desktop view */
/* Large (lg) */
@media (min-width: 1025px) {
  p {
    font-size: 1.3rem;
    /*color:blue;*/
    line-height: var(--normal-text-line-height);
    font-weight: var(--normal-text-font-weight);
    font-family: var(--normal-text-font-family);
  }
  
  /*.menuItem *:hover{*/
  .menuItem:hover *{
    color: var(--primary-color) !important;
}



/* Base styles for all heading tags */
/* -------------------------------- */

/* Style for h1 */
h1, .h1, .h1 *{
    font-size: 4.375rem; /*70px;*/
    line-height: 1.2;
    font-weight: 400;
    font-family: var(--heading-font-family);
    
    }

/* Style for h2 */
h2, .h2, .h2 *{
    font-size: 2.625rem; /*42px;*/
    line-height: 1.3;
    font-weight: 400;
    font-family: var(--heading-font-family);
    
    }
    
/* Style for h3 */
h3, .h3, .h3 *{
    font-size: 1.625rem; /*26px;*/
    line-height: 1.4;
    font-weight: 400;
    font-family: var(--heading-font-family);
    
    }
    
/* Style for h4 */
h4, .h4, .h4 *{
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400;
    font-family: var(--heading-font-family);
    
    }
    
/* Style for h5 */
h5, .h5, .h5 *{
    font-size: 0.83rem;
    line-height: 1.4;
    font-weight: 400;
    font-family: var(--heading-font-family);
    
    }
    
/* Style for h6 */
h6, .h6, .h6 *{
    font-size: 0.67rem;
    line-height: 1.4;
    font-weight: 400;
    font-family: var(--heading-font-family);
    }   
    
.smallPrint *{
    color: var(--small-print-color);
    font-family: var(--normal-text-font-family);
    font-size: 1.125rem; /*18px;*/
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    }
.smallPrintLight *{
    color: var(--light-text-color);
    font-family: var(--normal-text-font-family);
    font-size: 1.125rem; /*18px;*/
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    }
    
ul li {
    font-family: var(--normal-text-font-family);
    font-size: var(--normal-text-font-size);
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    color:var(--dark-color);
    margin-bottom: 1rem;
    margin-left: -1.3rem;
    }
    
.px {
    padding-left: 4rem; /* 64px */
    padding-right: 4rem; /* 64px */
  }
/* desktop padding only */
.px-d {
    padding-left: 4rem; /* 64px */
    padding-right: 4rem; /* 64px */
  }
.py {
    padding-top: 10rem; /* 160px */
    padding-bottom: 10rem; /* 160px */
  }
.pt {
    padding-top: 10rem; /* 160px */
  }
.pb {
    padding-bottom: 10rem; /* 160px */
  }
.ps {
    padding-top: 5rem; /* 80px */
  }
   .psm {
    padding-top: 4rem; /* 64px */
  }
.pe {
    padding-bottom: 5rem; /* 80px */
  }
   .pem {
    padding-bottom: 4rem; /* 64px */
  }
}


/* responsive styles for mobile view */
/* break points currently definded by builder default */
/* Medium (md) */
@media (max-width: 1024px) {
    /* Style for h1 */
    h1, .h1, .h1 *{
    font-size: 2.5rem; /*40px;*/
    line-height: 1.2;
    font-weight: 400;
    font-family: var(--heading-font-family);
    }
    
    /* Style for h2 */
    h2, .h2, .h2 *{
    font-size: 1.75rem; /*28px;*/
    line-height: 1.2;
    font-weight: 400;
    font-family: var(--heading-font-family);
    }
    
    /* Style for h3 */
    h3, .h3, .h3 *{
    font-size: 1.375rem; /*22px;*/
    line-height: 1.4;
    font-weight: 400;
    font-family: var(--heading-font-family);
    }
    
    /* Style for h4 */
    h4, .h4, .h4 *{
    font-size: 0.9em;
    line-height: 1.2;
    font-weight: 400;
    font-family: var(--heading-font-family);
    }
    
    /* Style for h5 */
    h5, .h5, .h5 *{
    font-size: 0.75em;
    line-height: 1.2;
    font-weight: 400;
    font-family: var(--heading-font-family);
    }
    
    /* Style for h6 */
    h6, .h6, .h6 *{
    font-size: 0.6em;
    line-height: 1.2;
    font-weight: 400;
    font-family: var(--heading-font-family);
    }
    
    .smallPrint *{
    color: var(--small-print-color);
    font-family: var(--normal-text-font-family);
    font-size: 1.125rem; /*18px;*/
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    }
    .smallPrintLight *{
    color: var(--light-text-color);
    font-family: var(--normal-text-font-family);
    font-size: 1.125rem; /*18px;*/
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    }
    
    /* Style for li */
    ul li {
    margin-left: -20px;
    font-family: var(--normal-text-font-family);
    font-size: 1.125rem; /*18px;*/
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    color:var(--dark-color);
    }
    
    p {
    font-size: 1.125rem; /*18px;*/
    line-height: var(--mobile-text-line-height);
    font-weight: var(--mobile-text-font-weight);
    font-family: var(--mobile-text-font-family);
    }
    
    .menuItem *:hover{
    color: var(--primary-color) !important;
    }
    
    .menuItem *{
    font-size: 1.5rem;
    }
    
    .px {
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
  }
    .py {
    padding-top: 5rem; /* 80px */
    padding-bottom: 5rem; /* 80px */
  }
    .pt {
    padding-top: 5rem; /* 80px */
  }
    .pb {
    padding-bottom: 5rem; /* 80px */
  }
    .ps {
    padding-top: 2.5rem; /* 40px */
  }
    .psm {
    padding-top: 2rem; /* 32px */
  }
    .pe {
    padding-bottom: 2.5rem; /* 40px */
  }
   .pem {
    padding-bottom: 2rem; /* 32px */
  }

}

/* responsive styles for mobile view */
/* break points currently definded by builder default */
/* Small (sm) */
@media (max-width: 576px) {
/* nothing to see here */
}



.primary{
    color: var(--primary-color);
}
.light{
    color: var(--light-color);
}
.dark{
    color: var(--dark-color);
}
.bold{
    font-weight: var(--bold-text-font-weight);
}
.bg-primary{
    background-color: var(--primary-color);
}
.bg-light{
    background-color: var(--light-color);
}
.bg-dark{
    background-color: var(--dark-color);
}
.margin-top-bottom{
    margin: 15px 0px !important;
}
.primaryBordear{
    background-color: transparent;
    border: var(--primary-border);
    border-radius: var(--primary-border-radius);
}
.lightBordear{
    background-color: transparent;
    border: var(--light-border);
    border-radius: var(--primary-border-radius);
}
.darkBordear{
    background-color: transparent;
    border: var(--dark-border);
    border-radius: var(--primary-border-radius);
}
.normalText p{
    font-size: var(--normal-text-font-size);
    font-family: var(--normal-text-font-family);
    /*font-weight: var(--normal-text-font-weight);*/
    line-height: var(--normal-text-line-height);
    display:inline-block;
    margin: 15px 0px 0px 0px; 
    background-color: unset;
    
}

.primaryButton,
.primaryButtonBorderHoverStyle,
.transparentDarkButton:hover,
.transparentPrimaryButton:hover,
.primaryBackgroundHoverStyle:hover {
    cursor: pointer;
    background-color: var(--primary-color);
    color:var(--light-color);
    font-size: var(--normal-text-font-size);
    font-family: var(--normal-text-font-family);
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    display:inline-block;
    border-radius: var(--primary-border-radius);
    padding: var(--button-padding);
    border: var(--primary-border);
}
.lightButton,
.primaryButton:hover,
.transparentLightButton:hover{
    cursor: pointer;
    background-color: var(--light-color);
    color:var(--primary-color);
    font-size: var(--normal-text-font-size);
    font-family: var(--normal-text-font-family);
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    display:inline-block;
    border-radius: var(--primary-border-radius);
    padding: var(--button-padding);
    border: var(--light-border);
}
.transparentPrimaryButton,
.primaryButtonBorderHoverStyle:hover {
    cursor: pointer;
    background-color: transparent;
    border: var(--primary-border);
    border-radius: var(--primary-border-radius);
    color:var(--primary-color);
    font-size: var(--normal-text-font-size);
    font-family: var(--normal-text-font-family);
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    display:inline-block;
    padding: var(--button-padding);
    border: var(--primary-border);
}
.transparentDarkButton{
    cursor: pointer;
    background-color: transparent;
    color:var(--dark-color);
    font-size: var(--normal-text-font-size);
    font-family: var(--normal-text-font-family);
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    display:inline-block;
    border-radius: var(--primary-border-radius);
    padding: var(--button-padding);
    border: var(--dark-border);
}

.lightButton:hover,
.transparentLightButton,
.primaryBackgroundHoverStyle {
    cursor: pointer;
    background-color: transparent;
    color:var(--light-color);
    font-size: var(--normal-text-font-size);
    font-family: var(--normal-text-font-family);
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    display:inline-block;
    border-radius: var(--primary-border-radius);
    padding: var(--button-padding);
    border: var(--light-border);
}
@media only screen and (max-width: 768px) {
    .primaryButton,.lightButton,.transparentDarkButton,.transparentLightButton{
        cursor: pointer;
      font-size: 17px;
    }
  }
.largeTextButtonWithAfter,.largeTextButton p{
    font-size:31px;
    font-family: var(--normal-text-font-family);
    font-weight: var(--normal-text-font-weight);
    line-height: 38px;
    display:flex;
    margin: 0px;
    background-color: unset;
}
.largeTextButtonWithAfter::after{
    content: '\276F';
    padding-left: 10px;
    font-size:18px;
}
.smallTextButtonWithAfte,.smallTextButtonWithUnderLine,.smallText{
    font-size: var(--normal-text-font-size);
    font-family: var(--normal-text-font-family);
    font-weight: var(--normal-text-font-weight);
    line-height: var(--normal-text-line-height);
    display:flex;
    background-color: unset;
    /* padding:10px; */
}
.smallTextButtonWithAfte::after{
    content: '\2794';
    padding-left: 10px;
}
.smallTextButtonWithUnderLine{
    text-decoration: underline;
}
.smallTextButtonWithUnderLine::after{
    content: '\2794';
    padding-left: 10px;
}
.headline p{
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: 2rem;
    line-height:50px;
    background-color: unset;
}
@media only screen and (max-width: 768px) {
    .headline {
      font-size: 25px;
    }
  }
  
.card,.smallCard{
    width: 395px;
    border-radius: 5px;
    padding: 20px;
    height: 514px;
}
.smallCard{
    height: auto ;
}
/* .cardWithLightBorder{
    border: var(--light-border);
} */
.longCard{
    padding: 20px;
    border-radius: var(--primary-border-radius);
}
li::marker{
    color: var(--primary-color);
}

/* breadcrumb */
.breadcrumb {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .breadcrumb-item {
    display: flex;
  }

  .breadcrumb-item:not(:last-child) .breadcrumb-arrow {
    margin-left: 5px;
    margin-right: 5px;
  }
  .breadcrumb a{
    text-decoration: none;
    color: var(--dark-color);
  }

  /* toggle */
  .container {
    display: flex;
    flex-direction: column;
  }
  .toggle-button {
    background-color:var(--dark-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display:flex;
    align-items: center;
  }

  /* .toggle-button:hover {
    background-color:var(--primary-color);
  } */

  .toggle-text {
    display: none;
    margin-top: 10px;
    background-color: unset;
  }

  .arrow {
    margin-left: 5px;
    transition: transform 0.3s ease;
    background-color: unset;
  }

  .arrow.rotate-down {
    transform: rotate(90deg);
  }
  
  .textlink {
	color: var(--primary-color);
  }

  .textlink::after {
	content: "";
	background-color: var(--primary-color);
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 0;
	transition: 0.4s;
  } 

  .textlink:hover::after,
  .textlink:focus::after {
	background-color: var(--primary-color);
	width: 100%;
  }
  
  /* padding classes tailwind style */
/*
  .p-1 {
    padding: 0.25rem; 
    
  }
  .px-1 {
    padding-left: 0.25rem; 
    padding-right: 0.25rem;
  }
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .ps-1 {
    padding-inline-start: 0.25rem; 
  }
  .pe-1 {
    padding-inline-end: 0.25rem; 
  }
  .pt-1 {
    padding-top: 0.25rem; 
  }
  .pr-1 {
    padding-right: 0.25rem; 
  }
  .pb-1 {
    padding-bottom: 0.25rem; 
  }
  .pl-1 {
    padding-left: 0.25rem; 
  }
  .px-4 {
    padding-left: 1rem; 
    padding-right: 1rem;
  }
  
  */