/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}






.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.container-narrow{
    width: 100%;
    padding-right: 400px;
    padding-left: 400px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 576px) {
    .container,.container-sm {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container,.container-md,.container-sm {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1140px
    }
}


@media (max-width: 576px) {
    .hidden-xs{
      display: none;
    }
    .consulo-lay-2-col{
      grid-template-columns: 1fr !important;
    }
    .consulo-lay-3-col{
      grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .hidden-sm{
      display: none;
    }

    .consulo-lay-2-col{
      grid-template-columns: 1fr !important;
      gap: 0px !important;
    }
    .consulo-lay-3-col{
      grid-template-columns: 1fr !important;
      gap: 0px !important;
    }
}

@media (max-width: 992px) {
    .hidden-md{
      display: none;
    }
    .consulo-lay-2-col{
      grid-template-columns: 1fr !important;
      gap: 0px !important;
    }
}

@media (max-width: 1200px) {
    .hidden-lg{
      display: none;
    }
}





@font-face {
  font-family: Metropolis-Thin;
  src: src: url(assets/fonts/Metropolis-Thin.otf) format("opentype");
}

@font-face {
  font-family: Metropolis-ExtraLight;
  src: url(assets/fonts/Metropolis-ExtraLight.otf) format("opentype");
}

@font-face {
  font-family: Metropolis-Light;
  src: url(assets/fonts/Metropolis-Light.otf) format("opentype");
}

@font-face {
  font-family: 'Metropolis-Regular';
  src: url(assets/fonts/Metropolis-Regular.otf) format("opentype");
}

@font-face {
  font-family: Metropolis-Medium;
  src: url(assets/fonts/Metropolis-Medium.otf) format("opentype");
}

@font-face {
  font-family: Metropolis-SemiBold;
  src: url(assets/fonts/Metropolis-SemiBold.otf) format("opentype");
}


@font-face {
  font-family: Metropolis-Bold;
  src: url(assets/fonts/Metropolis-Bold.otf) format("opentype");
}

@font-face {
  font-family: Metropolis-ExtraBold;
  src: url(assets/fonts/Metropolis-ExtraBold.otf) format("opentype");
}

@font-face {
  font-family: Metropolis-Black;
  src: url(assets/fonts/Metropolis-Black.otf) format("opentype");
}






:root{

   /* OLD GREEN 
    --color-lightest: #a4ffa5;
    --color-light: #6dff73;
    --color-medium: #00e027;
    --color-dark: #025d00;
    --color-darkest: #072a09;
    */



    /* PRIMARY - PINK */
    --color-p-lightest: #ffddeb; /*FFADD7;*/
    --color-p-light: #F66BA5; /*FF80B4;*/
    --color-p-medium: #F33283;
    --color-p-dark: #B10A50;
    --color-p-darkest: #3f011a;

    /* SECONDARY - GREEN */
    --color-s-lightest: #e1feed;
    --color-s-light: #9ff9c8;
    --color-s-medium: #32F3A2;
    --color-s-dark: #147a4f;
    --color-s-darkest: #07442a;

    --color-white: #FFF;
    --color-black: #303030;
    --color-grey-light: #EEE;
    --color-grey: #757575;
    --color-grey-dark: #585858;


    --brand-primary: var(--color-p-medium);
    --brand-secondary: var(--color-s-medium);

    --brand-bg-p-light: #fff0f6;
    --brand-bg-p-white: #FFF;
    --brand-bg-p-medium: var(--color-p-medium);
    --brand-bg-p-dark: var(--color-p-dark);
    --brand-bg-p-darkest: var(--color-p-darkest);



  }

  *{
    font-family: 'Metropolis-Medium', sans-serif;
    color: var(--color-grey);
  }

  html{
    background-color: var(--color-white);
  }

  /* UTILS */

  .text-pos-left{text-align:left;}
  .text-pos-center{text-align:center;}
  .text-pos-right{text-align:right;}

  .text-color-primary{color: var(--brand-primary);}
  .text-color-secondary{color: var(--brand-secondary);}

  .text-color-white{color: var(--color-white);}
  .text-color-black{color: var(--color-black);}
  .text-color-grey-light{color: var(--color-grey-light)}
  .text-color-grey{color: var(--color-grey)}
  .text-color-grey-dark{color: var(--color-grey-dark)}
  
  .text-color-lightest{color: var(--color-p-lightest);}
  .text-color-light{color: var(--color-p-light);}
  .text-color-medium{color: var(--color-p-medium);}
  .text-color-dark{color: var(--color-p-dark);}
  .text-color-darkest{color: var(--color-p-darkest);}


  .text-weight-thin{font-family: Metropolis-Thin, sans-serif;}
  .text-weight-extralight{font-family: Metropolis-ExtraLight, sans-serif;}
  .text-weight-light{font-family: Metropolis-Light, sans-serif;}
  .text-weight-regular{font-family: Metropolis-Regular, sans-serif;}
  .text-weight-medium{font-family: Metropolis-Medium, sans-serif;}
  .text-weight-semibold{font-family: Metropolis-SemiBold, sans-serif;}
  .text-weight-bold{font-family: Metropolis-Bold, sans-serif;}
  .text-weight-extrabold{font-family: Metropolis-ExtraBold, sans-serif;}
  .text-weight-black{font-family: Metropolis-Black, sans-serif;}

  .text-underline-primary{text-decoration: underline var(--brand-primary);}
  .text-underline-secondary{text-decoration: underline var(--brand-secondary);}

  .bg-p-lightest{background-color: var(--brand-bg-p-light);}
  .bg-p-light{background-color: var(--color-p-light);}
  .bg-p-medium{background-color: var(--color-p-medium);}
  .bg-p-dark{background-color: var(--color-p-dark);}
  .bg-p-darkest{background-color: var(--color-p-darkest);}

  .bg-s-lightest{background-color: var(--color-s-lightest);}
  .bg-s-light{background-color: var(--color-s-light);}
  .bg-s-medium{background-color: var(--color-s-medium);}
  .bg-s-dark{background-color: var(--color-s-dark);}
  .bg-s-darkest{background-color: var(--color-s-darkest);}


  .bg-cover{
    background: no-repeat 50% / cover;
  }

  .overlay{
    position: relative;
  }

  .overlay-60:before {
    opacity: .6;
  }
  .overlay-black:before {
      background-color: #161c2d;
  }
  .overlay:before {
      border-radius: inherit;
      bottom: 0;
      content: "";
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
  }

  .display-1{font-size:4.375rem;line-height:1.2}
  .display-2{font-size:3.8125rem;line-height:1.2}
  .display-3{font-size:3rem;line-height:1.2}
  .display-4{font-size:2.6875rem;line-height:1.2}

 

  .lift:hover{
    box-shadow: 0 0 0 rgba(22, 28, 45, 0);
    transition: box-shadow .25s ease, transform .25s ease;
  }

  /* GENERAL */
  .consulo-btn{
    display: inline-flex;
    padding: 10px 15px;
    border-radius: 5px;
    color: var(--color-white);
      text-decoration: none;
      min-width: max-content;
      max-width: min-content;
      cursor: pointer;
  }
  .consulo-btn-primary{ background-color: var(--color-p-medium);}
  .consulo-btn-primary:hover{ background-color: var(--color-s-medium);color: var(--color-white);}

  .consulo-btn-primary-light{ background-color: var(--color-p-lightest);color: var(--color-p-dark);}
  .consulo-btn-primary-light:hover{ background-color: var(--color-s-lightest);color: var(--color-s-dark);}

  .consulo-btn-secondary{ background-color: var(--brand-secondary);}
  .consulo-btn-secondary:hover{ background-color: var(--color-p-medium);color: var(--color-white);}

  .consulo-btn-secondary-light{ background-color: var(--color-s-lightest);}
  .consulo-btn-secondary-light:hover{ background-color: var(--color-p-medium);color: var(--color-p-dark);}

  .section-pill{
    margin-bottom: 25px;
  }
  .pill{
    border-radius: 25px;
    padding: 5px 12px;
    width: max-content;
    text-transform: uppercase;
    font-size: smaller;
  }

  .pill-primary{
    background-color: var(--brand-primary);
    color: var(--color-white);
  }
  .pill-primary-light{
    background-color: var(--color-p-lightest);
    color: var(--color-p-dark);
  }
  .pill-secondary{
    background-color: var(--brand-secondary);
    color: var(--color-white);
  }
  .pill-secondary-light{
    background-color: var(--color-s-lightest);
    color: var(--color-s-dark);
  }

  .section-border-bottom{
    border-bottom: 1px solid var(--color-grey-light);
  }

  /* LAYOUT */
  .consulo-lay-1-col{ display: grid; gap: 25px; grid-template-columns: 1fr}
  .consulo-lay-2-col{ display: grid; gap: 25px; grid-template-columns: 1fr 1fr;}
  .consulo-lay-3-col{ display: grid; gap: 25px; grid-template-columns: 1fr 1fr 1fr;}
  .consulo-lay-4-col{ display: grid; gap: 25px; grid-template-columns: 1fr 1fr 1fr;}

  .consulo-lay-center{display: flex;align-items: center;justify-content: center;text-align: center;}

  .text-right{text-align: right;}
  .text-center{text-align: center;}
  .text-left{text-align: left;}

  .flex-row{display: flex;flex-direction: row;}
  .flex-column{display: flex;flex-direction: column;}

  .gap-10{gap: 10px;}
  .gap-15{gap: 15px;}
  .gap-25{gap: 25px;}
  .gap-30{gap: 30px;}
  .gap-50{gap: 50px;}


  .no-margin{margin: 0px !important;}

  .mt-10{margin-top: 10px !important;}
  .mt-25{margin-top: 25px !important;}
  .mt-50{margin-top: 50px !important;}
  .mt-100{margin-top: 100px !important;}
  .mt-150{margin-top: 150px !important;}
  .mt-250{margin-top: 250px !important;}
  .mb-10{margin-bottom: 10px !important;}
  .mb-25{margin-bottom: 25px !important;}
  .mb-50{margin-bottom: 50px !important;}

  .pt-10{padding-top: 10px !important;}
  .pt-25{padding-top: 25px !important;}
  .pt-50{padding-top: 50px !important;}
  .pt-100{padding-top: 100px !important;}
  .pt-150{padding-top: 150px !important;}
  .pt-250{padding-top: 250px !important;}
  .pb-10{padding-bottom: 10px !important;}
  .pb-25{padding-bottom: 25px !important;}
  .pb-50{padding-bottom: 50px !important;}
  .pb-100{padding-bottom: 100px !important;}
  .pb-150{padding-bottom: 150px !important;}
  .pb-250{padding-bottom: 250px !important;}


  .content-list{
    display: flex;
    flex-direction: column;
    color: var(--color-p-dark);
  }
  .content-list-left > *{
    align-self: flex-start;
    text-align: left;
  }
  .content-list-center > *{
    align-self: flex-start;
    text-align: center;
  }
  .content-list-right > *{
    align-self: flex-start;
    text-align: right;
  }
  .content-list-title{
    text-transform: uppercase;
    font-size: 18px;
    font-family: Metropolis-SemiBold, sans-serif;
    color: var(--color-black);
  }
  .content-list > p{color: var(--color-grey);}

  .stats-section{
    display: flex;
    gap: 30px;
  }
  .stat-group{
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .stat-number{
    color: var(--color-black);
  }
  .stat-number-text{
    color: var(--color-grey);
  }
  .stat-seperator{
    border-right: 1px solid var(--color-grey-light);
  }

  /* HEADER */
  .fixed-header{
    position: fixed;
    left: 0;
    right: 0;
  }
  header{
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-grey-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .consulo-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;

  }
  .consulo-header-logo{}
  .consulo-header-main{
    display: flex;
    gap: 50px;
    padding: 15px 20px;
    font-family: Metropolis-SemiBold, sans-serif;
  }
  .consulo-header-main > a{
    font-family: inherit;
    cursor: pointer;
    color: var(--color-black);
    text-decoration: none;
  }
  .consulo-header-main > a:hover{
    color: var(--brand-secondary);
  }

  /* MAIN */
  main{
    padding-top: 91px;
  }

  .body-top-padding{
    padding-top: 141px;
  }

  section{
    align-items: center;
  }


  .section-padding{
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .section-bg-white{background-color: var(--brand-bg-p-white);}
  .section-bg-light{background-color: var(--brand-bg-p-light);}
  .section-bg-medium{background-color: var(--brand-bg-p-medium);}
  .section-bg-dark{background-color: var(--brand-bg-p-dark);}

  


  /* PAGE - CONTACT US*/

  .contact-methods{
    display: flex;
    flex-direction: column;
    gap: 35px;
  }

  .contact-method{
    display: flex;
    gap: 20px;
    padding: 25px;
    background-color: var(--color-white);
    border-radius: 15px;
  }
  a.contact-method{
    text-decoration: none;
  }
  a.contact-method:hover{
   box-shadow: 0px 0px 25px -20px var(--color-black);
  }

  .contact-method-icon > i{color: var(--brand-primary);}

  .contact-method-details{
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    gap: 10px;
  }

  .contact-method-title{
    text-transform: uppercase;
    font-size: 14px;
    font-family: Metropolis-Regular, sans-serif;
    color: var(--color-grey);
  }

  .contact-method-content{
    color: var(--color-black);
  }

  .contact-method-details a{
    color: var(--color-black);
    cursor: pointer;
    text-decoration: none;
    font-family: Metropolis-SemiBold, sans-serif;
  }

  .fa-chevron-right{
    display: flex !important;
    align-items: center;
    margin-left: auto;
  }

  .contact-list{
    display: flex;
    flex-direction: column;
    gap: 25px;
    color: var(--color-p-dark);
  }
  .contact-list-left > *{
    align-self: flex-start;
    text-align: left;
  }
  .contact-list-center > *{
    align-self: flex-start;
    text-align: center;
  }
  .contact-list-right > *{
    align-self: flex-start;
    text-align: right;
  }
  .contact-list-title{
    text-transform: uppercase;
    font-size: 14px;
    font-family: Metropolis-Regular, sans-serif;
    color: var(--color-grey);
  }
  .contact-list > p{color: var(--color-black);}
  .contact-list > a{color: var(--color-black);cursor: pointer;text-decoration: none;font-family: Metropolis-SemiBold, sans-serif;}
  .contact-list > a:hover{color: var(--color-s-medium);}

  .contact-channel{
    text-align: center;
  }

  .contact-channel > h4{
    text-transform: uppercase;
    font-size: 12px;
    font-family: Metropolis-Regular, sans-serif;
    margin-bottom: 15px;
    letter-spacing: 2px;
  }

  .contact-channel > a{
    color: var(--color-black);
    text-decoration: none;
    font-size: 18px;
    font-family: Metropolis-SemiBold, sans-serif;
  }

  .contact-channel > a:hover{
    color: var(--color-s-medium);
    text-decoration: none;
  }

  .contact-channel + .contact-channel{
    border-left: 1px solid var(--color-grey-light);
  }

  label{
    color: var(--color-black);
  }

  input, textarea{
    font: inherit;
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid #ffe7f3;
    width: 100%;
  }

  .form-group{
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  :focus-visible {

    outline: var(--brand-secondary) auto 1px;
}

/* PAGE - Downloads */
ol{margin-top: 25px;}
ol > li{
  padding-bottom: 25px;
}
li > a{
  color: var(--color-black);
}

li > a:not(.disabled):hover{
  color: var(--color-s-medium);
}











/* FOOTER */
  footer{
    background: var(--color-p-darkest);
    /*background: linear-gradient(140deg, rgba(102,0,51,1) 0%, rgba(224,0,112,1) 100%);*/
    padding: 100px 0px;
  }

  .footer-list{
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--color-white);
  }
  .footer-list-title{
    text-transform: uppercase;
    font-size: 14px;
    font-family: Metropolis-SemiBold, sans-serif;
    color: var(--color-p-light);
  }
  .footer-list > a{
    color: inherit;
    cursor: pointer;
    text-decoration: none;
  }
  .footer-list > a:hover{
    color: var(--brand-secondary);
  }

  .social-links > a{
    color: var(--color-white);
    cursor: pointer;
  }

  .social-links > a:hover{
    color: var(--brand-secondary);
  }

  .social-links > a > i{
    color: inherit;
  }