/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

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

/* COLOURS */

 /* Primary FC Blue */
  /* Light Blue */
 /* Green Headers */
 /* Orange Headers */
 /* White*/
 /* Black*/

 /* CFIB Colour */
 /* BorderBuddy Colour */
 /* Button Colour Green */
 /* Button Colour Green */








 /* Border colour for cards */

    /*  Border radius for cards/buttons */
    /*  Border radius for cards/buttons */


/* TYPOGRAPHY */



 

/* FONT IMPORTS */

@import url("https://use.typekit.net/djd0uqv.css"); /* Effra Font */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); /* Lato Font */

/******* || GLOBAL ELEMENTS || *******/

body {
    margin:0;
    padding:0;
    font-size: 1rem;
    font-family: Lato, sans-serif;
    font-weight: 400;
    color: #333333;
}

h1 {
  font-size:clamp(2rem, 5vw, 3.5rem);
  font-weight:700;
  font-family: Effra, sans-serif;
  margin:0;
}

h2 {
  font-family: Effra, sans-serif;
  font-size:clamp(1.5rem, 5vw, 3rem);
  font-weight:700;
  margin:0;
}

h3 {
  font-family: Effra, sans-serif;
  font-size:2rem;
  font-weight:700;
  color: #333333;
  margin:0;
}

h4 {
  font-family: Effra, sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color: #FFFFFF;
  background-color: #EA5459;
  border-radius: 50px;
  padding: 8px 24px;
  width:fit-content;
  margin:0;
}

a {
  text-decoration:none;
  color: #0072bc;
}


.container-wrapper {
    max-width: 1350px;
    margin: 0 auto; /* Center the content wrapper */
}

.container-padding {
  padding:3em 0em;
}

@media only screen and (max-width: 1350px) {
  .container-wrapper {
    margin: 0 2em;
  }
}

@media only screen and (max-width:1281px) and (min-width:1400px) {
  h1 {
/*     font-size:3rem; */
  }
}

@media only screen and (min-width:769px) and (max-width:1280px) {
  h1 {
/*     font-size:2.75rem */
  }
  .hero-content .pre-header {
    font-size:24px;
  }
}

@media only screen and (max-width: 768px) {
  h1 {
/*     font-size:2.10rem; */
  }
  h2 {
   text-align:center;
/*    font-size:32px; */
  }
    h3 {
   text-align:center;
   font-size:24px;
  }
  .container-padding {
    padding:2em 0em:
  }
}



/******* || BUTTONS || *******/

.button {
  padding:16px 36px;
  transition:0.2s ease-in;
  border-radius:50px;
  text-decoration:none;
  font-size:1.2rem;
  text-transform:uppercase;
  width:fit-content;
  text-align:center;
}

.button-primary {
  background-color: #0072bc;
  color: #FFFFFF;
}

.button-primary:hover {
  background-color: #339CF5;
  color: #FFFFFF;
}

.button-secondary {
  background-color: #0072bc;
  color: #FFFFFF;
}

.button-secondary:hover {
  background-color: #666666;
  color: #FFFFFF;
}

.button-white {
  color: #FFFFFF;
  border: 1px solid ;
}

.button-white:hover {
  background-color: #666666;
  color: #FFFFFF;
}

.button-cfib {
  background-color: #E0003F;
  color: #FFFFFF;
  border:2px solid #E0003F;
}

.button-cfib:hover {
  background-color: transparent;
  color: #E0003F;
  border:2px solid #E0003F;
}

.button-borderBuddy {
  background-color: #EF6821;
  color: #FFFFFF;
  border:2px solid #EF6821;
}

.button-borderBuddy:hover {
  background-color: transparent;
  color: #EF6821;
  border:2px solid #EF6821;
}

.button-cfin {
  background-color: #98CB5A;
  color: #FFFFFF;
  border:2px solid #98CB5A;
}

.button-whiteoutline {
  background-color: transparent;
  color: #FFFFFF;
  border:2px solid #FFFFFF;
}

/******* || FORMS ||| ********/

form {
  font-family: 'Effra', sans-serif;
}

input, textarea {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 2px solid #0072BC;
  border-radius: 8px;
  height:32px;
      width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  margin-top:8px;
  padding:8px 16px;
  font-size:16px;
  font-family: "Effra", sans-serif;
}

textarea {
  resize:none !important;
  height:97px;
}

input.error {
  border: 2px solid #c00;
}

label {
  color:#666666;
}

.hs-form-field {
  margin-bottom:1rem;
}

ul.hs-error-msgs {
  list-style:none;
  padding:0;
  margin:0;
}

label.hs-error-msg {
  color:#c00;
}

.hs-button {
  background-color: #0072bc;
  color: #fff;
  padding: 8px;
  height: 48px;
      border-radius:50px;
  text-decoration:none;
  font-size:1rem;
  text-transform:uppercase;
}