:root {
--modal-background: linear-gradient(90deg, rgb(16 14 14) 0%, rgb(23 18 18) 100%);
--text: #000000;
--alternate--text: #ffffff;
--background: #ffffff;
--primary: #36cbb5;
--secondary: #332275;
--chat: #415eb3;
--accent: #661ef6;
--alternate-accent: #8bc34a;
--primaryColor: #01bdfe;
--secondaryColor: #fe00fe;
--bgColor: #fff;
--tertiaryColor:  #d8d2df;
--descColor: #000;
}

body {
    font-family: "Roboto", sans-serif;
    overflow-x:hidden;
}


/* General styling */

.logo {
    max-width:100%;
    width:8em;
   }
   
.img {
    max-width:100%;
}

/* Backgrounds */

.secondary-background {
  background-color: var(--secondary);
}

.mainCta {
  background:var(--primary);
  color:var(--text);
}

.secondaryCta {
  background:var(--secondary);
  color:var(--text);
}

.secondaryBg {
  background:var(--secondary);
}

.accentBackground {
 background:var(--accent); 
}

.accent {
  color:var(--accent);
}

.altAccent {
  color:var(--alternate-accent);
}

/* Hero */

.hero {
  filter: brightness(0.3), grayscale(1);
}


/* Card styles */


.cardStyle {
  filter:brightness(0.8);
}


.cardStyle {
  filter:brightness(1.0);
}

/* Footer */

.footerStyle {
    background:var(--third-bg-color);
}

.footerHoverResponse {
  transition:ease-out 200ms;
}

.footerHoverResponse:hover {
  text-decoration:underline;
}


.modalBackground {
    background: var(--modal-background);
}


/* Navbar specific classes */
.hoverResponse {
    transition:ease-out 200ms;
}
.hoverResponse:hover {
    text-decoration:underline;
}

.navUnderline {
  color:#ffffff;
  transition:ease-out 200ms;
}

.navUnderline:hover{
  text-decoration: underline;
}



/* CTA */

.hoverResponseChat {
  background:var(--chat) !important;
  transition:ease-out 200ms;
}
.hoverResponseChat:hover {
background:var(--primary) !important;
  text-decoration:underline;
}



/* Font classes */
.roboto-thin {
    font-family: "Roboto", system-ui;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", system-ui;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", system-ui;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", system-ui;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", system-ui;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", system-ui;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", system-ui;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", system-ui;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", system-ui;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", system-ui;
    font-weight: 900;
    font-style: italic;
  }
  
  :root {
    /* Interactive */
    --chatButton:#415eb3;
    --chatButtonHighlight:#5274d8;
    --navbarButton:#000000;
    --navbarButtonHighlight:hsl(0, 79%, 39%);
    --callToActionButton:#407e8f;
    --callToActionHighlight:#6da7b7;
    --offerCTA:#65b430b8;
    --offerCTAAlternative:#559e25b8;
    /* Background */
    --background: hsl(0, 0%, 100%);
    /* Text */
    --text: #3a3a3a;
    --alternate--text: #e4e4e4;
    --header-text:#424242;
    /* Other */
    --primary: #44694d;
    --secondary: #415eb3;
    --tertiary: #c56e11;
    --quartery: #001431;
    --accent: rgb(231 80 62);
    --alternate-accent: #8bc34a;
    }
    
  /* ---------------------------- */
  
  body{
    padding-bottom: 0;
    margin: 0;
  }
  
  img {
    max-width: 100%;
  }
  
  a {
    text-decoration: none;
  }
  
  .height_mapping {
    z-index: -50;
  }
  
  .logo {
    max-width:100%;
    width:6em;
    padding:5px;
   }
   
  .img {
    max-width:100%;
  }
  .offerImg > a > img {
    max-height:200px;
  }
  
  .offer_wrapper {
    outline: #3c643e;
    outline-width: 1px;
    outline-style: solid;
  }
  
  .offer_wrapper > a > img {
    transition:500ms ease-in-out;
  }
  
  .offer_wrapper > a > img:hover {
    filter:grayscale();
  }
  
  /* ---------------------------- */
  
  .divider_content {
      outline: #fb4101;
      outline-width: medium;
      outline-style: solid;
      font-weight: bold;
  }
  
  
  /* ---------------------------- */
  
  .background {
    background-color:var(--background);
  }
  
  .offerBackground {
    background: rgb(201,155,163);
    background: -moz-linear-gradient(43deg, rgba(201,155,163,0.7287289915966386) 0%, rgba(233,102,132,0.6811099439775911) 52%, rgba(228,29,60,0.6306897759103641) 100%);
    background: -webkit-linear-gradient(43deg, rgba(201,155,163,0.7287289915966386) 0%, rgba(233,102,132,0.6811099439775911) 52%, rgba(228,29,60,0.6306897759103641) 100%);
    background: linear-gradient(43deg, rgba(201,155,163,0.7287289915966386) 0%, rgba(233,102,132,0.6811099439775911) 52%, rgba(228,29,60,0.6306897759103641) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c99ba3",endColorstr="#e41d3c",GradientType=1);
  }
  
  
  .footerBackground {
    background-color:var(--quartery);
  }
  
  .alternateBackground {
    background: var(--alternate-background);
  }
  
  .alternateBackgroundFlip {
    background: var(--alternate-background-flip);
  }
  
  .lightBackground {
    background: var(--light-background);
  }
  .alternateLightBackground {
    background: var(--alternate-light-background);
  }
  
  /* ---------------------------- */
  
  /* ---------------------------- */
  
  .chatButton {
      background:var(--chatButton) !important;
      transition:ease-out 200ms;
    }
    
  .chatButton:hover {
      background:var(--chatButtonHighlight) !important;
      text-decoration:underline;
  }
  
  .callToActionButton {
    background:var(--callToActionButton);
    transition:ease-out 200ms;
  }
  
  .callToActionButton:hover {
    background:var(--callToActionHighlight);
  }
  
  .offerCTA {
    border:none;
    background-color: var(--offerCTA);
    color: rgb(236, 236, 236);
  }
  
  .offerCTA:hover {
    transition:0.5s ease-in-out;
    background-color: var(--offerCTAAlternative);
    color: rgb(236, 236, 236);
  }
  
  
  /* ---------------------------- */
  
  /* ---------------------------- */
  
  .hero {
    filter: brightness(0.3), grayscale(1);
  }
  
  /* ---------------------------- */
  
  
  /* ---------------------------- */
  
  .navbar {
    box-shadow: 0 1px 15px rgba(0,0,0,0.5);
  }
  
  .hoverResponse {
    transition:ease-out 200ms;
  }
  .hoverResponse:hover {
    text-decoration:underline;
  }
  
  .navUnderline {
  color:#ffffff;
  transition:ease-out 200ms;
  }
  
  .navUnderline:hover{
  text-decoration: underline;
  }
  
  .navBackground {
  background:var(--quartery);
  }
  
  /* ---------------------------- */
  
  
  .headerText {
    color:var(--header-text);
  }
  
  .headerTextAlternate {
    color:var(--header-text);
  }
  .text {
    color:var(--text);
  }
  
  .text_alternate {
    color:var(--alternate--text);
  }
  
  /* ---------------------------- */
  
  footer p, .upper-footer p{
    margin-bottom: 0;
    color: #fff;
  }
  
  footer {
    background-color: #0e5b61;
  }
  
  footer a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
  }
  
  footer a:hover {
    color: #f1f1f1;
  }
  
  footer, footer a, footer p {
    font-size: 12px;
    font-family: 'Roboto Condensed', sans-serif;
  }
  
  .upper-footer {
    background-color: #222;
  }
  
.top-header-area {
  position: relative;
  z-index: 1;
  background-color: #fff !important;
  width: 100%;
  color: #fff;
}

  /* ---------------------------- */