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

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

/*****************************************/
/* Grid layout system - _layout.css      */
/*****************************************/



/* --------------------------------------------------
   GRID VARIABLES
-------------------------------------------------- */
:root{
  --grid-gap: 20px;            /* default gutter */
  --grid-columns: 12;
  --container-max: 1200px;     /* override with theme spacing if desired */
  box-sizing: border-box;
}

/* Ensure consistent box sizing */
*, *::before, *::after { box-sizing: inherit; }

/* --------------------------------------------------
   CONTAINER (centered content)
-------------------------------------------------- */
.c-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  width: 100%;
}

/* --------------------------------------------------
   ROW
   - negative side padding so columns' padding creates gutters
-------------------------------------------------- */
.c-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-left: calc(var(--grid-gap) / -2);
  margin-right: calc(var(--grid-gap) / -2);
  align-items: stretch;
  justify-content: flex-start; /* default, use .center/.between utilities below */
  row-gap: var(--grid-gap); 
}

/* Row helpers */
.c-row.center { justify-content: center; }
.c-row.between { justify-content: space-between; }
.c-row.around { justify-content: space-around; }
.c-row.middle { align-items: center; }
.c-row.top { align-items: flex-start; }
.c-row.bottom { align-items: flex-end; }

/* --------------------------------------------------
   COLUMNS (mobile-first)
   Each column has side padding to create gutters
-------------------------------------------------- */

.c-col-1 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-2 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-3 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-4 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-5 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-6 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-7 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-8 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-9 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-10 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-11 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}

.c-col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  min-height: 1px;
}


/* Utility for full-width column */
.c-col-full {
  flex: 0 0 100%;
  max-width: 100%;
}

/* --------------------------------------------------
   OFFSETS (mobile-first: offsets act only on desktop via media query)
   Use .offset-1 ... .offset-12
-------------------------------------------------- */

.c-offset-1 { margin-left: 0; } /* default for mobile */

.c-offset-2 { margin-left: 0; } /* default for mobile */

.c-offset-3 { margin-left: 0; } /* default for mobile */

.c-offset-4 { margin-left: 0; } /* default for mobile */

.c-offset-5 { margin-left: 0; } /* default for mobile */

.c-offset-6 { margin-left: 0; } /* default for mobile */

.c-offset-7 { margin-left: 0; } /* default for mobile */

.c-offset-8 { margin-left: 0; } /* default for mobile */

.c-offset-9 { margin-left: 0; } /* default for mobile */

.c-offset-10 { margin-left: 0; } /* default for mobile */

.c-offset-11 { margin-left: 0; } /* default for mobile */

.c-offset-12 { margin-left: 0; } /* default for mobile */


/* --------------------------------------------------
   DESKTOP / TABLET GRID (breakpoint at 768px)
   Calculate widths more precisely using percentage math and gutter compensation
-------------------------------------------------- */
@media (min-width: 768px) {

  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-1 {
    flex: 0 0 calc((100% / 12) * 1 - (var(--grid-gap) * (11) / 12));
    max-width: calc((100% / 12) * 1 - (var(--grid-gap) * (11) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-2 {
    flex: 0 0 calc((100% / 12) * 2 - (var(--grid-gap) * (10) / 12));
    max-width: calc((100% / 12) * 2 - (var(--grid-gap) * (10) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-3 {
    flex: 0 0 calc((100% / 12) * 3 - (var(--grid-gap) * (9) / 12));
    max-width: calc((100% / 12) * 3 - (var(--grid-gap) * (9) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-4 {
    flex: 0 0 calc((100% / 12) * 4 - (var(--grid-gap) * (8) / 12));
    max-width: calc((100% / 12) * 4 - (var(--grid-gap) * (8) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-5 {
    flex: 0 0 calc((100% / 12) * 5 - (var(--grid-gap) * (7) / 12));
    max-width: calc((100% / 12) * 5 - (var(--grid-gap) * (7) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-6 {
    flex: 0 0 calc((100% / 12) * 6 - (var(--grid-gap) * (6) / 12));
    max-width: calc((100% / 12) * 6 - (var(--grid-gap) * (6) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-7 {
    flex: 0 0 calc((100% / 12) * 7 - (var(--grid-gap) * (5) / 12));
    max-width: calc((100% / 12) * 7 - (var(--grid-gap) * (5) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-8 {
    flex: 0 0 calc((100% / 12) * 8 - (var(--grid-gap) * (4) / 12));
    max-width: calc((100% / 12) * 8 - (var(--grid-gap) * (4) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-9 {
    flex: 0 0 calc((100% / 12) * 9 - (var(--grid-gap) * (3) / 12));
    max-width: calc((100% / 12) * 9 - (var(--grid-gap) * (3) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-10 {
    flex: 0 0 calc((100% / 12) * 10 - (var(--grid-gap) * (2) / 12));
    max-width: calc((100% / 12) * 10 - (var(--grid-gap) * (2) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-11 {
    flex: 0 0 calc((100% / 12) * 11 - (var(--grid-gap) * (1) / 12));
    max-width: calc((100% / 12) * 11 - (var(--grid-gap) * (1) / 12));
  }
  
  /* width = (i/total)*100% - (gutter correction)
     gutter correction ensures the visible gap remains consistent between columns */
  .c-col-12 {
    flex: 0 0 calc((100% / 12) * 12 - (var(--grid-gap) * (0) / 12));
    max-width: calc((100% / 12) * 12 - (var(--grid-gap) * (0) / 12));
  }
  

  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-1 {
    margin-left: calc((100% / 12) * 1 + (var(--grid-gap) * 1 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-2 {
    margin-left: calc((100% / 12) * 2 + (var(--grid-gap) * 2 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-3 {
    margin-left: calc((100% / 12) * 3 + (var(--grid-gap) * 3 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-4 {
    margin-left: calc((100% / 12) * 4 + (var(--grid-gap) * 4 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-5 {
    margin-left: calc((100% / 12) * 5 + (var(--grid-gap) * 5 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-6 {
    margin-left: calc((100% / 12) * 6 + (var(--grid-gap) * 6 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-7 {
    margin-left: calc((100% / 12) * 7 + (var(--grid-gap) * 7 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-8 {
    margin-left: calc((100% / 12) * 8 + (var(--grid-gap) * 8 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-9 {
    margin-left: calc((100% / 12) * 9 + (var(--grid-gap) * 9 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-10 {
    margin-left: calc((100% / 12) * 10 + (var(--grid-gap) * 10 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-11 {
    margin-left: calc((100% / 12) * 11 + (var(--grid-gap) * 11 / 12));
  }
  
  /* offset by columns: margin-left equals width of i columns (including gutters) */
  .c-offset-12 {
    margin-left: calc((100% / 12) * 12 + (var(--grid-gap) * 12 / 12));
  }
  

}

/* --------------------------------------------------
   SMALLER BREAKPOINT ADJUSTMENTS
   - 2-col on medium screens (≥576px and <768px)
   - 1-col on phones
-------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .c-col-1, .c-col-2, .c-col-3, .c-col-4, .c-col-5, .c-col-6,
  .c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  .c-col-1, .c-col-2, .c-col-3, .c-col-4, .c-col-5, .c-col-6,
  .c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------
   GUTTER SIZE HELPERS
   Quickly change gutters on a row by adding class .c-gap-sm/.c-gap-md/.c-gap-lg
   (These set a new --grid-gap value for the row and its children)
-------------------------------------------------- */
.c-gap-sm { --grid-gap: 8px; }
.c-gap-md { --grid-gap: 20px; }
.c-gap-lg { --grid-gap: 40px; }

/* --------------------------------------------------
   UTILITIES: spacing & visibility (small set)
-------------------------------------------------- */
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: 8px !important; }
.u-mb-2 { margin-bottom: 16px !important; }
.u-mt-1 { margin-top: 8px !important; }
.u-mt-2 { margin-top: 16px !important; }

.u-hidden { display: none !important; }
.u-visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* --------------------------------------------------
   Helpful examples (commented)
   --------------------------------------------------
   Example usage:

   <div class="c-container">
     <div class="c-row c-gap-md center">
       <div class="c-col-4">...</div>
       <div class="c-col-4">...</div>
       <div class="c-col-4">...</div>
     </div>
   </div>

   For offsets:

   <div class="c-row">
     <div class="c-col-4 c-offset-2">...</div>
   </div>

-------------------------------------------------- */
/* @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    */
/*****************************************/

/* HEADER WRAPPER */
.site-header {
  background-color: #FFFFFF;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* LOGO */
.site-header .header__logo img {
  max-width: 150px;
  display: block;
}
/* @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    */
/*****************************************/

.site-footer {
  background-color: #FFFFFF;
  color: {color=#5D38DF, opacity=null, rgba=rgba(93, 56, 223, 1), rgb=rgb(93, 56, 223), hex=#5D38DF, css=#5D38DF};
  padding: 40px 0;
  font-family: var(--font-primary);
}

.site-footer a {
  color: {color=#5D38DF, opacity=null, rgba=rgba(93, 56, 223, 1), rgb=rgb(93, 56, 223), hex=#5D38DF, css=#5D38DF};
  text-decoration: none;
  opacity: 0.9;
}

.site-footer a:hover {
  opacity: 1;
}
/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* --------------------------------------------------
   GLOBAL VARIABLES (Connected to fields.json)
-------------------------------------------------- */
:root {
  --color-primary: #5D38DF;
  --color-secondary: #FFFFFF;

  --font-primary: "Lato", sans-serif;
  --font-secondary: "Merriweather", serif;

  --spacing-vertical: 80px;
  --content-max-width: 1240px;
}

/* --------------------------------------------------
   FONTS
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Merriweather:wght@400;700&display=swap');

/* --------------------------------------------------
   GLOBAL RESETS
-------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: 24px;
  color: #0C343D;
  line-height: 1.5;
}

/* --------------------------------------------------
   HEADINGS (H1–H6)
-------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-secondary);
  font-size: 50px;
  font-weight: 700;
  text-transform: none;
  color: #5D38DF;
}

h2, .h2 {
  font-family: var(--font-secondary);
  font-size: 38px;
  font-weight: 700;
  text-transform: none;
  color: #5D38DF;
}

h3, .h3 {
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 700;
  text-transform: none;
  color: #5D38DF;
}

h4, .h4 {
  font-family: var(--font-secondary);
  font-size: 24px;
  text-transform: none;
  color: #5D38DF;
}

h5, .h5 {
  font-family: var(--font-secondary);
  font-size: 16px;
  text-transform: none;
  color: #5D38DF;
}

h6, .h6 {
  font-family: var(--font-secondary);
  font-size: 14px;
  text-transform: none;
  color: #5D38DF;
}

/* --------------------------------------------------
   LINKS
-------------------------------------------------- */
a {
  color: #531fdb;
  text-decoration: underline;
}

/* --------------------------------------------------
   BUTTONS (Global)
-------------------------------------------------- */
.button,
.hs-button,
.btn {
  font-family: var(--font-primary);
  font-size: 22px;
  text-transform: none;
  color: #FFFFFF;
  background-color: #5D38DF;
  border-radius: 6px;

  padding: 
    15px
    53px
    15px
    53px;
    
  border: 1px solid #5D38DF;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s ease;
}

.button:hover,
.hs-button:hover,
.btn:hover {
  background-color: #1a334e;
  border-color: #1a334e;
  color: #ffffff;
}

/* --------------------------------------------------
   SPACING UTILITIES
-------------------------------------------------- */
.section {
  padding-top: var(--spacing-vertical);
  padding-bottom: var(--spacing-vertical);
}

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
}
/* --------------------------------------------------
   TWO COLUMN IMAGE + TEXT SECTION
-------------------------------------------------- */
.image-text-section {
  padding-top: var(--spacing-vertical);
  padding-bottom: var(--spacing-vertical);
}

.image-text-section .c-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.image-text-col .image-wrap img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.image-text-col .text-wrap {
  margin-top: 20px;
}

.image-text-col p {
  font-size: 24px;
  color: #0C343D;
  line-height: 1.6;
}